Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="garrafa corona">
  <div class="tampa">
    <div class="efeito">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div class="pescoco__wrapper">
    <div class="pescoco">
      <div class="vidro"></div>
      <div class="liquido">
        <div class="efeito"></div>
        <div class="espuma">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="pescoco__baixo__wrapper">
    <div class="pescoco__baixo">
      <div class="liquido">
        <div class="efeito"></div>
      </div>
    </div>
  </div>

  <div class="corpo">
    <div class="liquido">
      <div class="efeito"></div>

      <div class="rosto">
        <div class="sobrancelhas">
          <span></span>
          <span></span>
        </div>

        <div class="olhos">
          <div class="olho">
            <div class="pupila"></div>
          </div>
          <div class="olho">
            <div class="pupila"></div>
          </div>
        </div>

        <div class="bigodes">
          <span></span>
          <span></span>
        </div>

        <div class="boca">
          <div class="dentes"></div>
          <div class="lingua"></div>
        </div>
      </div>

      <div class="rotulo">
        <div class="cima">
          <div class="efeito"></div>

          <p>
            Corona
          </p>
        </div>

        <div class="baixo">
          <div class="efeito"></div>

          <div class="circulo">
            <div class="centro"></div>
          </div>

          <p>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="fundo">
    <div class="efeito"></div>
  </div>
</div>






<div class="garrafa verde">
    <div class="tampa">
      <div class="efeito">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="pescoco__wrapper">
      <div class="pescoco">
        <div class="vidro"></div>
        <div class="liquido">
          <div class="efeito"></div>
          <div class="espuma">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="pescoco__baixo__wrapper">
      <div class="pescoco__baixo">
        <div class="liquido">
          <div class="efeito"></div>
        </div>
      </div>
    </div>

    <div class="corpo">
      <div class="liquido">
        <div class="efeito"></div>

        <div class="rosto">
          <div class="olhos">
            <div class="olho">
              <div class="pupila"></div>
            </div>
            <div class="olho">
              <div class="pupila"></div>
            </div>
          </div>

          <div class="boca">
            <div class="dentes"></div>
            <div class="lingua"></div>
          </div>
        </div>

        <div class="rotulo">
          <div class="meio">
            <div class="topo">
              <div class="estrela"></div>
            </div>
            <div class="centro">
              <div></div>
            </div>
            <div class="baixo">
              <p>
                <span></span>
                <span></span>
                <span></span>
              </p>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="fundo">
      <div class="efeito"></div>
    </div>
  </div>






  <div class="lata vermelha">
    <div class="tampa">
      <div class="tampa__efeito"></div>
    </div>

    <div class="pdc">
      <div class="pdc__efeito--topo"></div>
      <div class="pdc__efeito--esquerda"></div>
      <div class="pdc__efeito--direita"></div>
    </div>

    <div class="corpo">
      <div class="corpo__efeito--esquerda"></div>
      <div class="corpo__efeito--direita"></div>

      <div class="rosto">
        <div class="olhos">
          <div class="olho">
            <div class="pupila"></div>
          </div>
          <div class="olho">
            <div class="pupila"></div>
          </div>
        </div>

        <div class="boca">
          <div class="dentes"></div>
        </div>
      </div>

      <div class="rotulo">
        <div class="centro">
          <p>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>
      </div>
    </div>

    <div class="pdb">
      <div class="pdb__efeito--baixo"></div>
    </div>
  </div>






  <div class="lata verde">
    <div class="tampa">
      <div class="tampa__efeito"></div>
    </div>

    <div class="pdc">
      <div class="pdc__efeito--topo"></div>
      <div class="pdc__efeito--esquerda"></div>
      <div class="pdc__efeito--direita"></div>
    </div>

    <div class="corpo">
      <div class="corpo__efeito--esquerda"></div>
      <div class="corpo__efeito--direita"></div>

      <div class="rosto">
        <div class="olhos">
          <div class="olho">
            <div class="pupila"></div>
          </div>
          <div class="olho">
            <div class="pupila"></div>
          </div>
        </div>
      </div>

      <div class="mascara">
        <div class="cima"></div>
        <div class="baixo"></div>
        <div class="fita--topo-esquerda"></div>
        <div class="fita--topo-direita"></div>
        <div class="fita--baixo-direita"></div>
      </div>
    </div>

    <div class="pdb">
      <div class="pdb__efeito--baixo"></div>
    </div>
  </div>
              
            
!

CSS

              
                $rosa-um: #FEF7D0;
$rosa-dois: #F6EBBC;

$cinza-um: #B5AAB0;
$cinza-dois: #E4D3D1;
$cinza-tres: #B7A6AB;
$cinza-quatro: #EEE6C0;
$cinza-cinco: #CBC5BB;
$cinza-seis: #353534;

$verde-um: #469732;
$verde-dois: #3C8D34;
$verde-tres: #5DB33C;
$verde-quatro: #2C981E;
$verde-cinco: #439D31;
$verde-seis: #5AB43D;
$verde-sete: #208C23;
$verde-oito: #077718;
$verde-nove: #0D6D18;
$verde-dez: #9AC788;
$verde-onze: #91B97F;
$verde-doze: #009407;
$verde-treze: #01850E;
$verde-quatorze: #0C830A;

$vermelho-um: #FE4442;
$vermelho-dois: #D8474A;
$vermelho-tres: #FD5759;
$vermelho-quatro: #E3313F;
$vermelho-cinco: #ED3233;
$vermelho-seis: #F54E52;
$vermelho-sete: #D6283A;

$amarelo-um: #FAD23E;
$amarelo-dois: #EBBC31;
$amarelo-tres: #FFC501;
$amarelo-quatro: #E6B74A;
$amarelo-cinco: #FFAF0D;

$marrom-um: #4F2F2F;

$azul-um: #022547;
$azul-dois: #03192A;

@import url('https://fonts.googleapis.com/css?family=Roboto:800&display=swap');

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: $rosa-um;
  font-family: 'Roboto', sans-serif;
  position: relative;
}

.olhos {
  display: flex;
  
  .olho {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    position: relative;

    .pupila {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #000000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.boca {
  overflow: hidden;
  width: 40px;
  height: 20px;
  display: block;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background: #000000;
  position: relative;
  margin-top: 10px;
  
  .dentes {
    position: relative;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 10px;
    background: #FFFFFF;
    display: block;

    &:before, &:after {
      content: '';
      background: #FFFFFF;
      display: block;
      position: absolute;
      bottom: -10px;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      width: 50%;
      height: 20px;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
  }
}






/* ------------------------ */
/* Estilos gerais das latas */
/* ------------------------ */
.lata {
  display: flex;
  flex-direction: column;
  width: 250px;
  position: absolute;
  
  .tampa {
    width: 185px;
    height: 10px;
    display: block;
    border-radius: 10px;
    position: relative;
    margin: auto;
    background: $cinza-um;
    
    &__efeito {
      width: 60%;
      height: 10px;
      display: block;
      border-radius: 10px;
      background: $cinza-dois;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  
  .pdc {
    width: 210px;
    height: 40px;
    overflow: hidden;
    display: block;
    position: relative;
    margin: auto;
    
    &:before, &:after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      transform: scaleX(.5);
      z-index: 10;
    }
    &:before {
      border-width: 40px 40px 0 0;
      border-color: $rosa-um transparent transparent transparent;
      left: -13px;
    }
    &:after {
      border-width: 0 40px 40px 0;
      border-color: transparent $rosa-um transparent transparent ;
      right: -13px;
    }
    
    &__efeito {
      &--topo {
        position: absolute;
        top: 0;
        width: 100%;
        height: 5px;
        display: block;
        z-index: 5;
      }
      &--esquerda, &--direita {
        position: absolute;
        top: 0;
        height: 40px;
        width: 40px;
        display: block;
      }
      &--esquerda {
        left: 20px;
        transform: skewX(-25deg);
      }
      &--direita {
        right: 0;
        transform: skewX(25deg);
      }
    }
  }
  
  .corpo {
    display: block;
    margin: 0 auto;
    width: 210px;
    height: 270px;
    overflow: hidden;
    position: relative;
    
    &__efeito {
      &--esquerda, &--direita {
        display: block;
        width: 40px;
        height: 100%;
        position: absolute;
      }
      &--esquerda {
        left: 10px;
      }
      &--direita {
        right: -10px;
      }
    }
    
    .rosto {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  
  .pdb {
    width: 210px;
    height: 30px;
    overflow: hidden;
    display: block;
    position: relative;
    margin: auto;
    background: $cinza-tres;
    
    &:before, &:after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      transform: scaleX(.5);
      z-index: 10;
    }
    &:before {
      border-width: 30px 0 0 30px;
      border-color: transparent transparent transparent $rosa-um;
      left: -8px;
    }
    &:after {
      border-width: 0 0 30px 30px;
      border-color: transparent transparent $rosa-um transparent ;
      right: -8px;
    }
    
    &__efeito {
      &--baixo {
        position: absolute;
        bottom: -35px;
        left: -20px;
        width: 90%;
        height: 60px;
        display: block;
        z-index: 5;
        background: $cinza-dois;
        border-radius: 30px;
      }
    }
  }
}





/* --------------------------- */
/* Estilos gerais das garrafas */
/* --------------------------- */
.garrafa {
  width: 200px;
  height: 565px;
  display: block;
  position: absolute;
  
  .tampa {
    width: 70px;
    height: 25px;
    margin: auto;
    display: block;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    align-items: flex-end;
    
    .efeito {
      width: 100%;
      height: calc(25px / 2);
      display: flex;
      justify-content: center;
      
      span {
        width: 10%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
      }
    }
  }
  
  .pescoco__wrapper {
    width: 100px;
    height: 210px;
    overflow: hidden;
    margin: auto;
    
    .pescoco {
      width: 80px;
      height: 400px;
      margin: auto;
      display: flex;
      flex-direction: column;
      transform: perspective(800px) rotateX(45deg) translateY(-180px);
      overflow: hidden;

      .vidro, .liquido {
        position: relative;

        &:before, &:after {
          content: '';
          width: 5px;
          height: 100%;
          position: absolute;
        }
        &:after {
          right: 0;
        }
      }

      .vidro {
        width: 100%;
        height: 50%;
        overflow: hidden;
      }

      .liquido {
        width: 100%;
        height: 50%;

        .efeito {
          position: absolute;
          right: 0;
          width: 25px;
          height: 100%;
        }

        .espuma {
          position: absolute;
          z-index: 10;
          width: 100%;
          height: 20px;
          background: #FFFFFF;

          span {
            border-radius: 50%;
            background: #FFFFFF;
            display: block;
            position: absolute;
            transform: translate(-50%, -50%);
            height: 30px;
          }
        }
      }
    }
  }
    
  .pescoco__baixo__wrapper {
    width: 150px;
    margin: auto;
    height: 40px;
    overflow: hidden;
    
    .pescoco__baixo {
      width: 100%;
      height: 40px;
      margin: auto;
      display: flex;
      flex-direction: column;
      transform-origin: 50% 50%;
      transform: perspective(70px) rotateX(45deg) scale(.75, 2);
      overflow: hidden;
      
      .liquido {
        width: 100%;
        height: 100%;
        position: relative;

        &:before, &:after {
          content: '';
          width: 5px;
          height: 100%;
          position: absolute;
        }
        &:after {
          right: 0;
        }

        .efeito {
          position: absolute;
          right: 0;
          width: 45px;
          height: 100%;
        }
      }
    }
  }
  
  .corpo {
    width: 145px;
    height: 270px;
    margin: auto;
    
    .liquido {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      
      .efeito {
        position: absolute;
        right: 0;
        width: 45px;
        height: 100%;
      }

      &:before, &:after {
        content: '';
        width: 5px;
        height: 100%;
        position: absolute;
        top: 0;
      }
      &:after {
        right: 0;
      }
    }
  }
  
  .rosto {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 10px;
    right: 20px;
  }
  
  .fundo {
    width: 145px;
    height: 20px;
    margin: 0 auto;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
    .efeito {
      width: 135px;
      height: 20px;
      margin: 0 auto;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
    }
  }
}






/* ---------- */
/* Diferenças */
/* ---------- */
.lata {
  &.verde {
    .pdc {
      background: $verde-um;
      
      &__efeito {
        &--topo {
          background: $verde-dois;
        }
        &--esquerda {
          background: $verde-tres;
        }
        &--direita {
          background: $verde-quatro;
        }
      }
    }
    
    .corpo {
      background: $verde-cinco;
      
      &__efeito {
        &--esquerda {
          background: $verde-seis;
        }
        &--direita {
          background: $verde-sete;
        }
      }
      
      .rosto {
        top: 50px;
        left: 25px;
        
        .pupila {
          left: 10px;
        }
      }
      
      .mascara {
        width: 80%;
        height: 30%;
        display: block;
        background: #FFFFFF;
        position: absolute;
        bottom: 30%;

        .cima {
          width: 100%;
          height: 20px;
          display: block;
          background: #FFFFFF;
          border-top-left-radius: 50%;
          border-top-right-radius: 50%;
          position: absolute;
          top: -10px;
        }
        .baixo {
          width: 100%;
          height: 70px;
          display: block;
          background: #FFFFFF;
          border-bottom-left-radius: 50%;
          border-bottom-right-radius: 50%;
          position: absolute;
          bottom: -25px;
        }
        .fita {
          &--topo, &--baixo {
            &-esquerda, &-direita {
              position: absolute;
              width: 100px;
              height: 10px;
              background: #FFFFFF;
              display: block;
            }
          }
          &--topo {
            &-esquerda {
              left: -40px;
              transform: rotate(45deg);
            }
            &-direita {
              right: -80px;
              top: -30px;
              transform: rotate(-45deg);
            }
          }
          &--baixo {
            &-direita {
              right: -70px;
              bottom: 12px;
              transform: rotate(-30deg);
            }
          }
        }
      }
    }
  }
  
  &.vermelha {
    .pdc {
      background: $vermelho-um;
      
      &__efeito {
        &--topo {
          background: $vermelho-dois;
        }
        &--esquerda {
          background: $vermelho-tres;
        }
        &--direita {
          background: $vermelho-quatro;
        }
      }
    }
    
    .corpo {
      background: $vermelho-cinco;
      
      &__efeito {
        &--esquerda {
          background: $vermelho-seis;
        }
        &--direita {
          background: $vermelho-sete;
        }
      }
      
      .rosto {
        top: 10px;
        left: 10px;
        
        .pupila {
          left: 10px;
        }
      }
      
      .rotulo {
        position: absolute;
        bottom: 30px;
        left: 5px;
        border: 2px solid #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        
        .centro {
          background: #FFFFFF;
          width: 70px;
          height: 70px;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
          p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 70%;
            height: 15px;
            
            span {
              width: 100%;
              height: 2px;
              background: red;
              display: block;
              
              &:last-child {
                width: 60%;
              }
            }
          }
        }
      }
    }
  }
}

.garrafa {
  &.corona {
    .tampa {
      background: $amarelo-um;

      .efeito {
        span {
          background: $amarelo-dois;
        }
      }
    }
    
    .pescoco {
      .vidro {
        background: $rosa-dois;
        
        &:before, &:after {
          background: $cinza-quatro;
        }
      }

      .liquido {
        background: $amarelo-tres;
        
        &:before, &:after {
          background: $amarelo-quatro;
        }
        
        .efeito {
          background: $amarelo-cinco;
        }

        .espuma {
          span {
            &:nth-child(1) {
              width: 20px;
              left: 0;
              top: 80%;
            } 
            &:nth-child(2) {
              width: 40px;
              left: 30%;
            }
            &:nth-child(3) {
              width: 25px;
              top: 50%;
              left: 40%;
            }
            &:nth-child(4) {
              width: 30px;
              left: 60%;
              top: 70%;
            }
            &:nth-child(5) {
              width: 50px;
              left: unset;
              right: -45px;
              top: 10%;
            }
          }
        }
      }
    }
  }
  
  .pescoco__baixo {
    .liquido {
      background: $amarelo-tres;

      &:before, &:after {
        background: $amarelo-quatro;
      }

      .efeito {
        background: $amarelo-cinco;
      }
    }
  }
  
  .corpo {
    .liquido {
      background: $amarelo-tres;

      &:before, &:after {
        background: $amarelo-quatro;
      }

      .efeito {
        background: $amarelo-cinco;
      }
    }
  }
  
  .rosto {
    .sobrancelhas {
      position: relative;
      width: 100%;
      height: 10px;
      display: block;
      
      span {
        position: absolute;
        width: 48%;
        height: 7px;
        display: block;
        background: $marrom-um;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        
        &:first-child {
          left: 0;
          transform: rotate(20deg);
        }
        &:last-child {
          right: 0;
          transform: rotate(-20deg);
        }
      }
    }
    
    .pupila {
      left: 30px;
    }
    
    .bigodes {
      position: relative;
      width: 60%;
      height: 0;
      display: block;
      bottom: -3px;

      span {
        position: absolute;
        width: 50%;
        height: 15px;
        display: block;
        background: $marrom-um;
        z-index: 20;

        &:first-child {
          border-top-left-radius: 50%;
          border-bottom-right-radius: 50%;
          left: 0;
        }
        &:last-child {
          border-top-right-radius: 50%;
          border-bottom-left-radius: 50%;
          right: 0;
        }
      }
    }
    
    .boca {
      width: 30px;
      height: 25px;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      
      .dentes {
        &:before, &:after {
          content: '';
          display: none;
        }
      }
      .lingua {
        width: 80%;
        height: 80%;
        display: block;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        background: $vermelho-quatro;
        position: absolute;
        bottom: -15px;
      }
    }
  }
  
  .rotulo {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 70%;
    height: 45%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .cima {
      background: #FFFFFF;
      width: 100%;
      height: 40%;
      position: relative;
      
      .efeito {
        background: $cinza-cinco !important;
        width: 10px !important;
        right: 0;
      }
      
      p {
        text-align: center;
        font-weight: 800;
        color: $azul-um;
        font-size: 20px;
        transform: translate(2px, -12px);
      }
    }
    .baixo {
      background: $azul-um;
      width: 100%;
      height: 60%;
      
      .efeito {
        background: $azul-dois !important;
        width: 10px !important;
        right: 0;
      }
      
      .circulo {
        position: absolute;
        bottom: 35px;
        right: 30px;
        border: 1.5px solid $amarelo-um;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        
        .centro {
          background: $amarelo-um;
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
      }
      
      p {
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        height: 12px;

        span {
          width: 100%;
          height: 2px;
          background: #FFFFFF;
          display: block;

          &:last-child {
            width: 60%;
          }
        }
      }
    }
  }
  
  .fundo {
    background: $amarelo-quatro;
    
    .efeito {
      background: $amarelo-cinco;
    }
  }
  
  &.verde {
    .tampa {
      background: $verde-oito;

      .efeito {
        span {
          background: $verde-nove;
        }
      }
    }
    
    .pescoco {
      .vidro {
        background: $verde-dez;
        
        &:before, &:after {
          background: $verde-onze;
        }
      }

      .liquido {
        background: $verde-doze;
        
        &:before, &:after {
          background: $verde-quatorze;
        }
        
        .efeito {
          background: $verde-treze;
        }

        .espuma {
          span {
            &:nth-child(1) {
              width: 30px;
              left: 0;
              top: 50%;
            } 
            &:nth-child(2) {
              width: 60px;
              left: 20%;
            }
            &:nth-child(3) {
              width: 50px;
              top: 40%;
              left: 30%;
            }
            &:nth-child(4) {
              width: 45px;
              left: 60%;
              top: 30%;
            }
            &:nth-child(5) {
              width: 40px;
              left: unset;
              right: -25px;
              top: 75%;
            }
          }
        }
      }
    }
    
    .pescoco__baixo {
      .liquido {
        background: $verde-doze;

        &:before, &:after {
          background: $verde-quatorze;
        }

        .efeito {
          background: $verde-treze;
        }
      }
    }

    .corpo {
      .liquido {
        background: $verde-doze;

        &:before, &:after {
          background: $verde-quatorze;
        }

        .efeito {
          background: $verde-treze;
        }
      }
    }

    .rosto {
      right: unset;
      left: 20px;
      
      .pupila {
        left: 10px;
      }

      .boca {
        width: 30px;
        height: 35px;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        
        .dentes {
          position: relative;
          top: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 10px;
          background: #FFFFFF;
          display: block;

          &:before, &:after {
            content: '';
            background: #FFFFFF;
            display: block;
            position: absolute;
            bottom: -10px;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            width: 50%;
            height: 20px;
          }
          &:before {
            left: 0;
          }
          &:after {
            right: 0;
          }
        }

        .lingua {
          width: 80%;
          height: 80%;
          display: block;
          border-top-left-radius: 50%;
          border-top-right-radius: 50%;
          background: $vermelho-quatro;
          position: absolute;
          bottom: -15px;
        }
      }
    }

    .rotulo {
      border-radius: 60px;
      left: 10px;
      right: unset;
      height: 50%;
      bottom: 20px;
      background: transparent;
      border: 2px solid #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .meio {
        border-radius: 60px;
        width: 85%;
        height: 85%;
        background: #FFFFFF;
        overflow: hidden;
        
        .topo {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40%;
          
          .estrela {
            position: relative;
            width: 0;
            height: 0;
            margin: auto;
            margin-bottom: 15px;
            border-right: 2.5px solid transparent;
            border-bottom: 10px solid $vermelho-um;
            border-left: 2.5px solid transparent;

            &:before, &:after {
              content: '';

              display: block;
              width: 0;
              height: 0;

              position: absolute;
              top: 7px;
              left: -10px;

              border-right:  10px solid transparent;
              border-bottom: 5px  solid $vermelho-um;
              border-left:   10px solid transparent;

              transform: rotate(-35deg);
            }

            &:after {  
              transform: rotate(35deg);
            }
          }
        }
        
        .centro {
          height: 20%;
          background: $cinza-seis;
          display: flex;
          align-items: center;
          justify-content: center;
          
          div {
            background: #FFFFFF;
            width: 80%;
            height: 45%;
          }
        }
        
        .baixo {
          height: 40%;
          background: #FFFFFF;
          
          p {
            bottom: 15px;
            width: 50%;
            
            span {
              background: $vermelho-um;
            }
          }
        }
      }
    }

    .fundo {
      background: $verde-treze;

      .efeito {
        background: $verde-quatorze;
      }
    }
  }
}

/* ------------------ */
/* ---- Posições ---- */
/* ------------------ */
.lata, .garrafa {
  bottom: 50px;
}
.lata {
  &.verde {
    right: 400px;
    z-index: 80;
  }
  &.vermelha {
    right: 185px;
    z-index: 90;
  }
}
.garrafa {
  &.corona {
    left: 50px;
    z-index: 110;
  }
  &.verde {
    right: 50px;
    z-index: 100;
  }
}
              
            
!

JS

              
                /* -------------------------------- */
/* ------ Based on this gif ------- */
/* ---- https://bit.ly/3dnRRQP ---- */
/* -------------------------------- */
              
            
!
999px

Console