Skip to content

Instantly share code, notes, and snippets.

@jonathansadler

jonathansadler/index.haml

Created June 8, 2020 17:39
Show Gist options
  • Save jonathansadler/6ebdae690534d356e67e986500704a80 to your computer and use it in GitHub Desktop.
Save jonathansadler/6ebdae690534d356e67e986500704a80 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jonathansadler created this gist Jun 8, 2020.
    108 changes: 108 additions & 0 deletions index.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    .smoothie
    .smoothie_header
    .smoothie_header__left
    %i.ion-navicon
    .smoothie_header__mid
    %h1 Smoothie Maker
    .smoothie_header__right
    %i.ion-plus
    .smoothie_content
    .loader
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/smoothieloader.png'}
    %div Loading smoothie maker
    %input{:id => 'intro', :type => 'checkbox'}
    %label.intro_page{:for => 'intro'}
    .button Let's get blending
    .glyph
    //%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/whirl2.png'}
    .page
    .intro_animation
    .circle
    .blender

    .straw
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_strawberry.png'}
    .orange
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_orange.png'}
    .apple
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_apple.png'}
    %h2 CSS only Smoothie Maker
    %h3 Select the fruit or vegetables you want in your smoothie and we’ll make it for you! Made entirely in CSS by <a href="https://codepen.io/jcoulterdesign" target='_blank'>Jamie Coulter</a> for Codepen!
    %img.whirly{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/whirl1.png'}
    %ul
    %li Lots of good fruits
    %li Some pretty decent vegetables
    %li Bespoke smoothie blendage
    %li Free delivery

    .page_two
    %h2 Select your ingredients!
    %h3 There's lots of yummy fruit & veg to add to your smoothie. Select them from below!
    %input{:id => 'blend', :type => 'checkbox'}
    %label.blend_page{:for => 'blend'}
    .blendit
    Blend it!
    .the_blend
    %h1 SUPER YUMMY!
    %img.spin{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/the_blend.png'}
    %h4 Select from these popular fruits & veg
    .selection
    .row
    %input{:id => 'apple', :type => 'checkbox'}
    %label.apple{:for => 'apple'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_apple.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_apple.png'}
    %div Apple
    %i.ion-checkmark-round
    %input{:id => 'carrot', :type => 'checkbox'}
    %label.carrot{:for => 'carrot'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/carrot.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/carrot.png'}
    %div Carrot
    %i.ion-checkmark-round
    %input{:id => 'orange', :type => 'checkbox'}
    %label.orange{:for => 'orange'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_orange.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_orange.png'}
    %div Orange
    %i.ion-checkmark-round
    %input{:id => 'cherry', :type => 'checkbox'}
    %label.cherry{:for => 'cherry'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cherry.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cherry.png'}
    %div Cherry
    %i.ion-checkmark-round
    .row
    %input{:id => 'peach', :type => 'checkbox'}
    %label.peach{:for => 'peach'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/peach.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/peach.png'}
    %div Peach
    %i.ion-checkmark-round
    %input{:id => 'melon', :type => 'checkbox'}
    %label.melon{:for => 'melon'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/melon.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/melon.png'}
    %div Melon
    %i.ion-checkmark-round
    %input{:id => 'pear', :type => 'checkbox'}
    %label.pear{:for => 'pear'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pear.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pear.png'}
    %div Pear
    %i.ion-checkmark-round
    %input{:id => 'straw', :type => 'checkbox'}
    %label.straw{:for => 'straw'}
    %img.original{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_strawberry.png'}
    %img.clone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/intro_strawberry.png'}
    %div Strawberry
    %i.ion-checkmark-round
    .complete
    .complete_overlay
    .complete_inner

    %h2 Smoothie success!
    %h3 Your tasty smoothie is ready and on its way!
    %a{:href => 'https://codepen.io/jcoulterdesign', :target => '_blank'} Follow me on Codepen


    1 change: 1 addition & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // No!
    7 changes: 7 additions & 0 deletions smoothie-maker-app-in-pure-css.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Smoothie Maker App in Pure CSS
    ------------------------------
    It's been a while since i've done anything on Codepen. Needless to say, i have a couple of nice pieces coming up that i think people will find useful. In the meantime, here is a Smoother Maker App concept made entirely in CSS for your viewing pleasure. Click the fruits you want to add them to the blend!

    A [Pen](https://codepen.io/jonathansadler/pen/qBbOmqe) by [Jonathan Sadler](https://codepen.io/jonathansadler) on [CodePen](https://codepen.io).

    [License](https://codepen.io/jonathansadler/pen/qBbOmqe/license).
    864 changes: 864 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,864 @@
    *{
    box-sizing:border-box;
    }

    // Fonts

    @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,500italic,700italic,700,400italic,300italic,300);

    body{
    font-family: Fira Sans, sans-serif;

    background: #F3F3F3;
    perspective:800px;
    height:100vh;
    overflow:hidden;
    .smoothie{
    opacity:0;
    transform: rotateX(0deg) translateY(-50%) translateZ(0px);
    animation: in .9s .5s cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards;
    overflow:hidden;
    width:320px;
    height:550px;
    box-shadow: 0px 30px 67px -26px #69555A;
    margin:0 auto;
    background:#bf4861;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
    right:0;
    margin:auto;
    input[type="checkbox"]{
    display:none;
    position:absolute;
    z-index:222;
    }
    &_header{
    background:white;
    overflow:auto;
    padding:12px 0px;
    h1{
    font-size:12px;
    margin:0;
    }
    &__left{
    float:left;
    width:33.33%;
    padding:0px 0px 0px 20px;
    color:#bf4861;
    font-size:24px;
    i{
    cursor:pointer;
    position:relative;
    top:1px;
    }
    }
    &__mid{
    float:left;
    width:33.33%;
    color:#bf4861;
    text-align:center;
    padding:8px 0px 0px 0px;
    h1{
    font-weight:500;
    font-size:11px;
    }

    }
    &__right{
    float:right;
    text-align:right;
    width:33.33%;
    padding:5px 20px 0px 0px;
    color:#bf4861;
    i{
    cursor:pointer;
    }
    }
    }
    &_content{
    width:320px;
    height:500px;
    position:relative;
    .intro_page{
    bottom:0px;
    cursor:pointer;
    width: 100%;
    position:absolute;
    display:block;
    z-index:2;
    }
    .glyph{
    text-align: Center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 51px;
    img{
    width:20px;
    margin:0 auto;
    position:relative;
    top:10px;
    opacity:0;
    animation:pop 1s 6.2s forwards;
    }
    }
    .button{
    background: #A23D52;
    width: 100%;
    padding:20px 20px 22px 20px;
    text-align: Center;
    color: white;
    transition:background .3s;
    animation:button 1s 6.4s forwards;
    transform:translateY(100px);
    font-size: 12px;
    &:hover{
    background:#9A2D44;
    }
    &:hover + .glyph{
    transform:rotate(360deg);
    }
    }
    .loader{
    animation: loader 4s 1s forwards;
    position:absolute;
    left:0;
    opacity:0;
    right:0;
    margin:auto;
    text-align:center;
    width:200px;
    top:50%;
    transform:translatey(-140%);
    img{
    width:14px;
    animation:rotate 2s infinite;
    }
    div{
    color:white;
    clear:both;
    font-size:11px;
    position:relative;
    top:10px;
    }
    }
    .page{
    position:absolute;
    left:0;
    width:100%;
    padding:38px;
    transition:all 1s 0.2s cubic-bezier(1.000, 0.000, 0.215, 1.000);
    text-align:center;
    .intro_animation{
    position:relative;
    width:200px;
    margin:0 auto;
    }
    .circle{
    width: 90px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 90px;
    background: #B3455C;
    left: 0;
    transform:scale(0);
    animation:circle .8s 4.7s forwards;
    border-radius: 100px;
    }
    .blender{
    margin: 0 auto;
    left: 0px;
    position: relative;
    top: 10px;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/blenderstrip.png');
    height: 84px;

    background-size: 152px;
    width: 50px;
    transform:rotate(-16deg) scale(0);
    transition: all .5s .8s;
    animation:blender .8s 4.9s forwards,strip .25s 5s infinite;
    }
    .apple{
    img{
    opacity:0;
    transition:all .1s 1s;
    width: 20px;
    position: absolute;
    left: 61px;
    top: 77px;
    z-index: 1;
    animation:pop .8s 5.1s forwards;
    }
    }
    .orange{
    img{
    width: 20px;
    position: absolute;

    opacity:0;

    z-index: 1;
    transition:all .16s 1s;
    animation:pop .8s 5.3s forwards;

    }
    }
    .straw{
    img{
    width: 20px;
    opacity:0;
    position: absolute;
    left: 129px;
    top: 73px;
    z-index: 2;
    transition:all .19s 1s;
    animation:pop .8s 5.5s forwards;
    }
    }
    h2{
    font-weight:300;
    font-size:16px;
    opacity:0;
    margin:40px 0px 0px 0px;
    color:white;
    animation:pop .8s 5.7s forwards;
    }

    h3{
    font-weight:200;
    font-size:11px;
    animation:pop .8s 5.9s forwards;
    opacity:0;
    margin:10px 0px 0px 0px;
    line-height:15px;
    color:#f0a8b7;
    }
    a{
    color: #FFFFFF;
    }
    .whirly{
    width:19px;
    margin-top:30px;
    opacity:0;
    animation:pop .8s 6.1s forwards;
    }
    ul{
    padding:0;
    margin:20px 0px 20px 0px;
    animation:pop .8s 6.3s forwards;
    opacity:0;
    li{
    list-style-type:none;
    font-size:11px;
    color:white;
    font-weight:300;
    padding:6px 0px;
    }
    }
    }
    .page_two{
    position:absolute;
    box-shadow: -8px 0px 30px -20px #732334;
    z-index: 2;
    background: #A92F49;
    width:320px;
    height:500px;
    left:320px;
    padding:38px;
    top:0;
    text-align:Center;
    transition:all 1s 0.2s cubic-bezier(1.000, 0.000, 0.215, 1.000);
    .blendit{
    background: #7C1F33;
    width: 100%;
    position: absolute;
    cursor:pointer;
    bottom: 0;
    left: 0;
    padding: 20px 20px 22px 20px;
    text-align: Center;
    color: white;
    transition: background .3s;
    animation: button .8s 6.3s forwards;
    transform: translateY(100px);
    font-size: 12px;
    &:hover{
    background: #6B1A2B;
    }
    }
    h4{
    color: white;
    font-size: 11px;
    font-weight: 400;
    margin-top: 28px;
    }
    .the_blend{
    transform-origin: 124px 70px;
    position:relative;
    h1{
    position: absolute;
    color: white;
    z-index: 1;
    font-size: 23px;
    left: 0;
    transition:all .3s 4.2s cubic-bezier(0.54, 1.82, 0.64, 0.83);
    right: 0;
    transform: rotate(-17deg) scale(0);
    top: 50px;
    text-shadow: 0px 2px 0px #771127;
    }
    .spin{
    width: 96px;
    margin-top: 30px;
    }
    .apple{
    position: absolute;
    top: 43px;
    width: 16px;
    transform: rotate(-30deg) !important;
    animation: none !important;
    left: 97px;
    opacity: 1 !important;
    }
    }
    .row{
    width: 100%;
    height: 70px;
    }
    .selection{
    label.carrot{
    img{
    top: -11px;
    }
    i{
    top: 12px;
    }
    div{
    margin-top: 4px;
    }
    }
    label.orange{

    i{
    top: 11px;
    }
    }
    label.peach{
    div{
    margin-top: 9px;

    }
    i{
    top: 15px;
    }
    img{
    top: -9px;
    }
    }
    label.melon{

    div{
    margin-top: 15px;
    }
    img{
    top: 5px;
    }
    i{
    top: 14px;
    }
    }
    label.cherry{
    img{
    top: -6px;
    }
    div{
    margin-top: 7px;

    }
    }
    label.pear{

    img{
    top: -5px;
    }
    div{

    margin-top: 15px;
    }
    i{
    top: 14px;
    }
    }
    label.straw{
    img{
    top: 2px;
    }
    div{
    margin-top: 15px;

    }
    }
    .apple{
    img{
    width: 20px;
    }
    }
    .carrot{
    img{
    width: 16px;
    }
    }
    .straw{
    img{
    width: 16px;
    }
    }
    .orange{
    img{
    width: 20px;
    }
    }
    .peach{
    img{
    width: 22px;
    }
    }
    .melon{
    img{
    width: 29px;
    }
    }
    .cherry{
    img{
    width: 20px;
    }
    }
    .pear{
    img{
    width: 17px;
    }
    }
    label{
    position:relative;
    cursor:pointer;
    float:left;
    height: 20px;
    margin-top: 9px;
    transition:all .3s;
    width:25%;
    img{
    transition:transform .5s;
    }
    i{
    color: #66D233;
    position: absolute;
    top: 13px;
    right: 16px;
    font-size: 9px;
    transition: all .3s;
    transform: scale(0);
    }
    &:hover{

    transform:scale(1.2)

    }
    div{
    color: White;
    font-size: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    }
    }
    .clone{
    opacity: 0.3;
    position: absolute;
    left: 0;
    top: 0;
    right: 0px;
    margin: auto;
    }
    .original{
    left:0;
    width: 20px;
    top:0;
    position:absolute;
    transition:top 1s cubic-bezier(0.190, 1.000, 0.220, 1.000),left .6s,transform .6s;

    }
    }
    h2{
    font-weight:300;
    font-size:16px;
    margin:0px 0px 0px 0px;
    color:white;

    }

    h3{
    font-weight:200;
    font-size:11px;
    margin:10px 0px 0px 0px;
    line-height:15px;
    color:#f0a8b7;
    }
    }
    .page_three{
    position:absolute;
    left:1280px;
    background:blue;
    transition:all .3s;
    }
    }
    #intro:checked + label + .page + .page_two{
    left:0px;
    }
    #intro:checked + label + .page{
    left:-320px;
    }
    #intro:not(checked) + label + .page{
    .blender{
    left:0px;
    transform:rotate(0deg) scale(0);
    transition:all .5s .8s;
    }
    .apple img{
    left: 61px;
    top: 77px;
    transform:rotate(0deg);
    transition:all .5s .75s;
    }
    .orange img{
    left: 117px;
    top: 77px;
    transform:rotate(0deg);
    transition:all .5s .85s;
    }
    .straw img{
    left: 129px;
    top: 73px;
    transform:rotate(0deg);
    transition:all .5s .9s;
    }
    }
    #intro:checked + label + .page + .page_two h2{
    opacity:0;
    animation:pop .5s .7s forwards;
    }
    #intro:checked + label + .page + .page_two h3{
    opacity:0;
    animation:pop .5s .9s forwards;
    }
    #intro:checked + label + .page + .page_two .the_blend img{
    opacity:0;
    animation:pop .5s 1.1s forwards;
    }
    #intro:checked + label + .page + .page_two h4{
    opacity:0;
    animation:pop .5s 1.3s forwards;
    }
    #intro:checked + label + .page + .page_two label.apple{
    opacity:0;
    animation:pop .5s 1.5s forwards;
    }
    #intro:checked + label + .page + .page_two label.carrot{
    opacity:0;
    animation:pop .5s 1.52s forwards;
    }
    #intro:checked + label + .page + .page_two label.orange{
    opacity:0;
    animation:pop .5s 1.54s forwards;
    }
    #intro:checked + label + .page + .page_two label.cherry{
    opacity:0;
    animation:pop .5s 1.56s forwards;
    }
    #intro:checked + label + .page + .page_two label.peach{
    opacity:0;
    animation:pop .5s 1.58s forwards;
    }
    #intro:checked + label + .page + .page_two label.melon{
    opacity:0;
    animation:pop .5s 1.6s forwards;
    }
    #intro:checked + label + .page + .page_two label.pear{
    opacity:0;
    animation:pop .5s 1.62s forwards;
    }
    #intro:checked + label + .page + .page_two label.straw{
    opacity:0;
    animation:pop .5s 1.64s forwards;
    }
    #intro:checked + label + .page{
    .blender{
    left:-200px;
    transform:rotate(-15deg);
    transition:all .5s .4s;
    }
    .apple img{
    left:-200px;
    transform:rotate(-15deg);
    transition:all .5s .35s;
    }
    .orange img{
    left:-200px;
    transform:rotate(-15deg);
    transition:all .5s .45s;
    }
    .straw img{
    left:-200px;
    transform:rotate(-15deg);
    transition:all .5s .5s;
    }
    .button{
    transform:translate(-100px);
    }
    }
    #blend:checked + label + .page_two{
    left:0px;
    }


    #blend:checked + label + .the_blend{
    animation:blendit 5s ;
    }
    #blend:checked + label + .the_blend + h4 + .selection .original{
    display:none;
    }
    #blend:checked + label + .the_blend + h4 + .selection + .complete .complete_inner{
    transform: translateY(-50%) scale(1);
    }
    #blend:checked + label + .the_blend + h4 + .selection + .complete .complete_overlay{
    opacity:1;
    }
    #blend:checked + label + .the_blend h1{
    transform: rotate(-17deg) scale(1);
    }
    .selection input:checked + label i{
    transform: scale(1);
    }
    .selection input:checked + label{
    transform: scale(1) !important;
    }

    #apple:checked + label .original{
    position: relative;
    top: -142px;
    width: 16px;
    transform: rotate(-30deg);
    left: 74px;
    }
    #apple:not(checked) + label .original{
    position:relative;
    width: 20px;
    top:0px;
    transform: rotate(0deg);
    left:0px;
    }
    #carrot:checked + label .original{
    position: relative;
    top: -134px;
    width: 12px;
    left: 45px;
    transform: rotate(-17deg);
    }
    #carrot:not(checked) + label .original{
    position:relative;
    width: 16px;
    top: -11px;
    left:0px;
    transform: rotate(0deg);
    }
    #orange:checked + label .original{
    position: relative;
    top: -85px;
    left: -42px;
    width: 16px;
    }
    #orange:not(checked) + label .original{
    position:relative;
    top:0px;
    left:0px;
    width: 20px;
    }
    #cherry:checked + label .original{
    position: relative;
    top: -121px;
    left: -95px;
    width: 17px;
    transform: rotate(22deg);
    }
    #cherry:not(checked) + label .original{
    position:relative;
    width: 20px;
    top: -6px;
    left:0px;
    transform: rotate(0deg);
    }
    #peach:checked + label .original{
    top: -192px;
    left: 54px;
    width: 17px;
    transform: rotate(-20deg);
    }
    #peach:not(checked) + label .original{
    position:relative;
    top: -9px;
    width: 22px;
    left:0px;
    transform: rotate(0deg);
    }
    #melon:checked + label .original{
    position: relative;
    top: -157px;
    width: 24px;
    left: 56px;
    transform: rotate(-28deg);
    }
    #melon:not(checked) + label .original{
    position:relative;
    top: 5px;
    width: 29px;
    left:0px;
    transform: rotate(0deg);
    }
    #pear:checked + label .original{
    position: relative;
    top: -207px;
    left: 4px;
    width: 13px;
    transform: rotate(22deg);
    }
    #pear:not(checked) + label .original{
    position:relative;
    width: 17px;
    top: -5px;
    left:0px;
    transform: rotate(0deg);
    }
    #straw:checked + label .original{
    position: relative;
    top: -224px;
    width: 13px;
    left: -87px;
    transform: rotate(-3deg);
    }
    #straw:not(checked) + label .original{
    position:relative;
    top: 2px;
    width: 16px;
    left:0px;
    transform: rotate(0deg);
    }
    }
    .complete{
    &_overlay{
    position: absolute;
    background: rgba(119, 31, 50, 0.79);
    width: 100%;
    height: 100%;
    top: 0;
    z-index:3;
    pointer-events: none;
    left: 0;
    opacity:0;
    transition: all .4s 5.7s;
    }
    &_inner{
    transition: all .4s 6s cubic-bezier(0.54, 1.82, 0.64, 0.83);
    background: white;
    position: absolute;
    width: 270px;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    z-index:4;
    transform: translateY(-50%) scale(0);
    padding: 30px;
    border-radius: 10px;

    h2{
    color: #AA3850 !important;
    font-weight: 500 !important;
    }
    h3{
    font-weight: 400;
    font-size: 11px;
    margin: 10px 0px 0px 0px;
    line-height: 15px;
    color: #DE8799;
    }
    a{
    display: block;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid #812236;
    color: #812236;
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
    transition:all .3s;
    &:hover{
    color:white;
    background:#812236;
    }
    }
    }
    }
    }

    @keyframes rotate{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
    }
    @keyframes loader{
    0%{opacity:0;}
    20%{opacity:1;}
    80%{opacity:1;}
    100%{opacity:0;}
    }
    @keyframes circle{
    0%{transform:scale(0);}
    100%{transform:scale(1);}
    }

    @keyframes blender{
    0%{transform:scale(0) rotate(-15deg);}
    100%{transform:scale(1) rotate(0deg);}
    }
    @keyframes pop{
    0%{transform:translateY(10px);opacity:0;}
    100%{transform:translateY(0px);opacity:1;}
    }

    @keyframes in{
    0%{transform: rotateX(90deg) translateY(-37%) translateZ(0px);opacity:0;}
    100%{transform: rotateX(0deg) translateY(-50%) translateZ(0px);opacity:1;}
    }
    @keyframes button{
    0%{transform: translateY(100px);}
    100%{transform: translateY(0px);}
    }
    @keyframes strip{
    0%{background-position: 0px 0px;}
    32%{background-position: 0px 0px;}
    33%{background-position: 51px 0px;}
    65%{background-position: 51px 0px;}
    66%{background-position: 102px 0px;}
    99%{background-position: 102px 0px;}
    100%{background-position: 0px 0px;}
    }

    @keyframes blendit{
    0%{transform:rotate(0deg) scale(1)}
    100%{transform:rotate(3600deg) scale(1)}
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />