cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="eevee">
  <div class="body">
    <div class="head">
      <div class="ears">
        <div class="ear">
          <div class="lobe"></div>
        </div>
        <div class="ear">
          <div class="lobe"></div>
        </div>
      </div>
      <div class="face">
        <div class="eyes">
          <div class="eye">
            <div class="eyelid"></div>
          </div>
          <div class="eye">
            <div class="eyelid"></div>
          </div>
        </div>
        <div class="nose"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="chest">
      <div class="fur">
        <div class="patch"></div>
      </div>
      <div class="fur">
        <div class="patch"></div>
      </div>
      <div class="fur">
        <div class="patch"></div>
      </div>
    </div>
    <div class="legs">
      <div class="leg">
        <div class="inner-leg"></div>
      </div>
      <div class="leg">
        <div class="inner-leg"></div>
      </div>
      <div class="leg">
        <div class="inner-leg"></div>
      </div>
      <div class="leg">
        <div class="inner-leg"></div>
      </div>
    </div>
    <div class="tail">
      <div class="tail">
        <div class="tail">
          <div class="tail">
            <div class="tail">
              <div class="tail -end"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="dex">
  <div class="heading"><div class="pokeball"></div><span>133</span><strong>Eevee</strong></div>
  <div class="info"><strong>Seen:</strong> 33</div>
  <div class="info"><strong>Caught:</strong> 33</div>
  <br />
  <div class="info"><strong>Weight:</strong> 6.5kg</div>
  <div class="info"><strong>Height:</strong> 0.3m</div>
  <br />
  <div class="info"><strong>Type:</strong> Normal</div>
  <div class="subheading">Evolution Pokemon</div>
  <p>Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.</p>
  <div class="subheading">Made by David Khourshid</div>
  <div class="info"><strong>Twitter:</strong> <a href="https://twitter.com/davidkpiano">@davidkpiano</a></div>
</div>
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700';

$color-fur-edge: #BFB48C;
$color-eye: #260F02;
$color-body: #C49152;
$color-body-dark: #9D7442;
$color-body-light: #cca069;
$color-ear: #6a3c1c;
$color-fur: #EFE1AF;
$easing: cubic-bezier(0.645, 0.045, 0.355, 1);
$total-kf: 13;
$duration: 10s;

$k-bounce-down: (0, 1, 2, 3, 4,
    6, 7, 8, 9,
    $total-kf);
$k-bounce-up: (0.5, 1.5, 2.5, 3.5,
    6.5, 7.5, 8.5, 9.5,);
$k-attack-prep: 10;
$kap: $k-attack-prep; // I'm being lazy
$k-attack: (10.3, $total-kf - 1);

$kf-head: (
  $k-bounce-down: translateY(2%),
  $k-bounce-up: translateY(0),
  4.5: translateY(2%) rotate(-3deg),
  5: translateY(-5%) rotate(7deg),
  $k-attack-prep: translateY(7%) rotate(-3deg),
  ($k-attack-prep + 1): translateY(-7%) rotate(3deg),
);

$kf-head-shadow: (
  $k-bounce-down: translateY(-2%),
  $k-bounce-up: translateY(1%),
  4.5: translateY(-5%),
  5: translateY(5%),
  $k-attack-prep: translateY(-4%),
  ($k-attack-prep + 1): translateY(10%) scale(0.9)
);

$kf-eyes: (
  $k-bounce-down: rotateX(-7deg) translateZ(10px),
  $k-bounce-up: rotateX(7deg) translateZ(10px),
  $k-attack-prep: translateY(5%) rotateX(-20deg) translateZ(10px),
  ($k-attack-prep + 1): rotateX(20deg) translateZ(10px),
);

$kf-nose: (
  $k-bounce-down: translateY(30%),
  $k-bounce-up: translateY(-20%),
  $k-attack-prep: translateY(70%),
  ($k-attack-prep + 1): translateY(-60%),
);

$kf-mouth-move: (
  $k-bounce-down: translateY(15%),
  $k-bounce-up: translateY(-5%),
  
  $k-attack-prep: translateY(30%),
  ($k-attack-prep + 1): translateY(-10%),
);

$kf-body: (
  $k-bounce-down: translateY(1%),
  $k-bounce-up: translateY(0),
  4.5: translateY(4%),
  5: translateY(0),
  $k-attack-prep: translateY(3%),
  $k-attack: translateY(-5%),
);

$kf-eyelid: (
  (0,
    3, 3.2,
    10,
    $total-kf - 0.6,
  ): translateY(-120%) rotate(-30deg) ,
  (
    3.05, 3.18,
    10.05,
    $total-kf - 0.8,
  ): translateY(0) rotate(0) ,
  $k-attack: translateY(-85%) rotate(30deg),
);

$kf-mouth: (
  (0, $total-kf - 0.9): (
    width: 12%,
    height: 6%,
    bottom: 13%,
    left: 33%,
    border-radius: 50%,
    box-shadow: 0 -2px $color-eye,
    border: none,
    background: transparent,
  ),
  $k-attack: (
    height: 10%,
    background: #B37B7E,
    border-top-left-radius: 50% 60%,
    border-top-right-radius: 50% 60%,
    border-bottom-left-radius: 50% 40%,
    border-bottom-right-radius: 50% 40%,
    box-shadow: inset 0 5px $color-eye,
    border: 2px solid $color-eye,
  ),
);

$kf-mouth-side: (
  (0, $total-kf - 0.9): (opacity: 1),
  10.3: (opacity: 0),
);

$kf-leg: (
  $k-bounce-down: rotate(-12deg),
  $k-bounce-up: rotate(-6deg),
  4.5: rotate(-16deg),
  5: rotate(9deg),
  $k-attack-prep: translateY(-10%) rotate(-18deg),
  $k-attack: translateY(5%) rotate(0),
);

$kf-leg-inner: (
  $k-bounce-down: rotate(28deg),
  $k-bounce-up: rotate(16deg),
  4.5: rotate(40deg),
  5: rotate(-10deg),
  $k-attack-prep: rotate(32deg),
  $k-attack: rotate(0),
);

$kf-paw-inner: (
  $k-bounce-down: rotate(-16deg),
  $k-bounce-up: rotate(-10deg),
  4.5: rotate(-20deg),
  5: rotate(0deg),
  $k-attack-prep: rotate(-14deg),
  $k-attack: rotate(0),
);

$kf-ear: (
  $k-bounce-up: rotateX(-20deg) rotate(-15deg),
  $k-bounce-down: rotateX(20deg) rotate(-5deg),
  
  (4.7,4.9,5.1,5.3): rotate(-20deg),
  (4.8,5.0,5.2,5.6): rotate(-10deg),
  
  $k-attack-prep: rotateX(20deg) rotate(-5deg),
  ($kap+0.4, $kap+0.8, $kap+1.2, $kap+1.6, $kap+2.0): rotateX(-30deg) rotate(-30deg),
  ($kap+0.6, $kap+1.0, $kap+1.4, $kap+1.8, $kap+2.2): rotateX(-20deg) rotate(-20deg),
);

$kf-tail: (
  all: scale(0.9),
  $k-bounce-down: rotate(-5deg),
  $k-bounce-up: rotate(5deg),
  
  4.4: rotate(10deg),
  (4.6, 5, 5.4): rotate(-2deg),
  (4.8, 5.2, 5.6): rotate(4deg),
  $k-attack-prep: rotate(-7deg),
  ($k-attack-prep + 1): rotate(15deg),
);

$kf-tail-end: (
  all: scale(0.9),
  $k-bounce-down: rotate(-12deg),
  $k-bounce-up: rotate(9deg),
  
  4.4: rotate(10deg),
  (4.6, 5, 5.4): rotate(-4deg),
  (4.8, 5.2, 5.6): rotate(12deg),
  $k-attack-prep: rotate(7deg),
  ($kap+0.6, $kap + 1, $kap+1.4, $kap+1.8): rotate(-10deg),  
  ($kap+0.8, $kap + 1.2, $kap+1.6, $kap+2.0): rotate(2deg),  
);

$kf-chest: (
  (0, 4, $total-kf): translateY(0),
  4.5: rotate(-2deg) translateY(2%) ,
  5: rotate(2deg) translateY(-2%) ,
  ($k-attack-prep - 1): translateY(0),
  $k-attack-prep: translateY(2%),
  ($k-attack-prep + 1): translateY(0),
);

$kf-fur-center: (
  $k-bounce-down: translateY(0),
  $k-bounce-up: translateY(2%),
);

$kf-fur-center-patch-left: (
  $k-bounce-down: rotate(65deg) skewX(15deg),
  $k-bounce-up: rotate(60deg) skewX(15deg),
);

$kf-fur-center-patch-right: (
  $k-bounce-down: rotate(35deg) skewX(15deg),
  $k-bounce-up: rotate(30deg) skewX(15deg),
);

$kf-fur-right: (
  $k-bounce-down: translateY(0),
  $k-bounce-up: translateY(2%),
);

$kf-fur-right-patch: (
  $k-bounce-down: translateY(0) rotate(50deg),
  $k-bounce-up: translateY(2%) rotate(56deg),
);

@mixin effect($name, $kf) {
  $all: '';
  @keyframes #{$name} {
    @each $intervals, $transform in $kf {
      @each $interval in $intervals {
        @if ($interval == 'all') {
          $all: $transform;
        } @else {       
          #{percentage($interval/$total-kf)} {
            @if type-of($transform) == 'map' {
              @each $key, $val in $transform {
                #{$key}: $val;
              }
            } @else {
              transform: unquote($all) $transform;
            }
          }
        }
      }
    }
  }
  $all: '';
}

@function a($name, $delay: 0s) {
  @return $name $duration $delay $easing both infinite;
}

@include effect(head, $kf-head);
@include effect(head-shadow, $kf-head-shadow);
@include effect(eyes, $kf-eyes);
@include effect(eyelid, $kf-eyelid);
@include effect(nose, $kf-nose);
@include effect(mouth-move, $kf-mouth-move);

@include effect(mouth, $kf-mouth);
@include effect(mouth-side, $kf-mouth-side);
@include effect(ear, $kf-ear);
@include effect(tail, $kf-tail);
@include effect(tail-end, $kf-tail-end);
@include effect(chest, $kf-chest);
@include effect(fur-center, $kf-fur-center);
@include effect(fur-center-patch-left, $kf-fur-center-patch-left);
@include effect(fur-center-patch-right, $kf-fur-center-patch-right);
@include effect(fur-right, $kf-fur-right);
@include effect(fur-right-patch, $kf-fur-right-patch);
@include effect(body, $kf-body);
@include effect(leg, $kf-leg);
@include effect(leg-inner, $kf-leg-inner);
@include effect(paw-inner, $kf-paw-inner);

.eevee {
  height: 325px;
  width: 410px;
  
  @media (max-width: 600px) {
    transform: scale(0.8);
  }
  
  @media (max-width: 300px) {
    transform: scale(0.5);
  }
  
  * {
    position: absolute;
  }
}

.body {
  animation: a(body);
  height: 100px;
  position: absolute;
  width: 125px;
  top: 164px;
  left: 140px;
  background: $color-body;
  border-top-right-radius: 30%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 70%;
  box-shadow:
    inset -15px 0 0 $color-body-dark;
}

.chest {
  animation: a(chest, 0.05s);
  height: 110%;
  width: 130px;
  left: -30px;
  z-index: 1;
}

.fur {
  height: 80px;
  width: 80px;
  top: 0;
  border-radius: 50%;
  background: linear-gradient(to top,
    $color-fur,
    white 40%,
    white 50%,
    $color-fur 75%
  );
  
  &:first-child {
    animation: a(fur-center, 0.1s);
    height: 110px;
    width: 110px;
    left: calc(50% - 55px);
    z-index: 1;
    box-shadow:
      inset 0 0 0 2px rgba(black, 0.2),
      3px 0 15px rgba(black, 0.2);
    
    > .patch {
      height: 50%;
      width: 50%;
      left: 50% - 25%;
      transform-style: none;
      bottom: 8%;

      &:before {
        animation: a(fur-center-patch-left);
        left: 25%;
        top: 0;
        transform: rotate(65deg) skewX(15deg);
        box-shadow:
          2px 0 $color-fur-edge;
        background: linear-gradient(-45deg,
          $color-fur-edge,
          $color-fur 9%,
          transparent 20%);
        border-top-right-radius: 60%;
        border-bottom-right-radius: 8%;
      }
      
      &:after {
        animation: a(fur-center-patch-right, 0.07s);
        left: initial;
        right: 25%;
        top: 0;
        transform: rotate(35deg) skewX(15deg);
        box-shadow:
          0 3px $color-fur-edge;
        background: linear-gradient(-37deg,
          $color-fur-edge,
          $color-fur 9%,
          transparent 20%);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 8%;
      }
    }
  }
  
  &:nth-child(2) {
    left: -3px;
  }
  
  &:nth-child(3) {
    animation: a(fur-right, 0.15s);
    right: -20px;
  }
  
  > .patch {
    &:before, &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-bottom-left-radius: 100%;
    }
    
    &:before {
      background: linear-gradient(-30deg,
        $color-fur-edge,
        $color-fur 6%,
        white 55%,
        transparent
      );
    }
    
    &:after {
      background: linear-gradient(-30deg,
        $color-fur-edge,
        $color-fur 6%,
        white 55%,
        transparent
      );
    }
  }
  
  &:not(:first-child) > .patch {
    height: 35%;
    width: 35%;
    bottom: 10%;
    left: 30%;
    
    &:before, &:after {
      animation: a(fur-right-patch);
      top: -15%;
      left: 110%;
      transform-origin: top left;
      box-shadow:
        2px 0 $color-fur-edge;
      border-top-right-radius: 75%;
      border-bottom-right-radius: 10%;
    }
    
    &:before {
      left: 150%;
      top: -25%;
    }
    
    &:after {
      animation-delay: 0.1s;
      left: 100%;
      top: 0%;
    }
  }
}

.head {
  height: 149px;
  width: 144px;
  top: -110px;
  left: -35px;
  z-index: 10;
  animation: a(head);
  transform-style: preserve-3d;
  perspective: 1000px;

  &:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    
  }
  
  &:after {
    content: '';
    position: absolute;
    display: block;
    height: 20%;
    width: 20%;
    background: green;
    transform: skewX(30deg) rotate(40deg);
    left: 50%;
    top: -2%;
    background: $color-body;
    box-shadow:
      -15px 8px #ca9d65,
      -25px 22px #cca069,
      -35px 50px #cda36f
    ;
    z-index: -1;
  }
}

.face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top left,
    $color-body-dark,
    $color-body 60%,
    $color-body 70%,
    lighten($color-body, 15%) 100%
  );
  
  &, &:before {
    border-top-left-radius: 40% 50%;
    border-top-right-radius: 40% 50%;
    border-bottom-left-radius: 50% 30%;
    border-bottom-right-radius: 50% 30%;
  }
  
  &:before {
    animation: a(head-shadow);
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background: radial-gradient(farthest-side,
      rgba(black, 0.6),
      transparent
    );
    z-index: -1;
    top: 20%;
    left: 0%;
  }
}

.ears {
  width: 100%;
  height: 54px;
  z-index: -2;
}

.ear {
  width: 160px;
  height: 70px;
  left: 50%;
  bottom: 10%;
  transform-origin: bottom left;
  transform: translateX(40px);
  
  &:before, &:after {
    animation: a(ear, 0.1s);
    animation-delay: 50ms;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: skewX(-25deg) skewY(5deg);
    background: radial-gradient(farthest-side, $color-ear, darken($color-ear, 4%));
    transform-origin: bottom left;
    border: 12px solid $color-eye;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  
  &:after {
    border: 8px solid $color-body-dark;
    background: transparent;
  }
  
  + .ear {
    transform: translateX(-40px) rotateY(180deg);
  }
  
  > .lobe {
    height: 20%;
    width: 20%;
    background: $color-body-dark;
    bottom: 25%;
    left: -5%;
    transform: skewX(-50deg);
    border-top-right-radius: 15%;
    box-shadow: 9px 6px 0 $color-body-dark;
  }
}

.eyes {
  width: 77%;
  height: 33%;
  left: 5%;
  top: 35%;
  animation: a(eyes);
}

.eye {
  height: 100%;
  width: 28%;
  border-top-left-radius: 50% 65%;
  border-top-right-radius: 50% 65%;
  border-bottom-left-radius: 50% 35%;
  border-bottom-right-radius: 50% 35%;
  background-color: $color-eye;
  box-shadow:
    inset 0 0 0 3px $color-eye;
  background-image:
    radial-gradient(ellipse 5px 10px at 50% 65%,
      $color-eye 0%,
      $color-eye 99%,
      transparent 100%),
    radial-gradient(ellipse 10px 20px at 50% 90%,
      #955D27 0%,
      #955D27 99%,
      transparent 100%),
    radial-gradient(ellipse 4px 6px at 55% 20%,
      white 0%,
      white 99%,
      transparent 100%)
    ;
  
  &:last-child {
    right: 10%;
    transform: rotateY(180deg);
    
    // &:before {
    //   border-left: 3px solid $color-eye;
    //   border-right: 1px solid transparent;
    //   border-top: 1px solid transparent;
    //   border-bottom: 1px solid transparent;
    //   transform: rotate(38deg);
    //   left: 2px;
    // }
  }
  
  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 30%;
    width: 30%;
    background: transparent;
    border-radius: 50%;
    border-right: 3px solid $color-eye;
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    z-index: -1;
    transform: rotate(-38deg);
    top: -4px;
    left: initial;
    right: 2px;
    opacity: 0.6;
    z-index: 1;
  }
  
  > .eyelid {
    height: 102%;
    width: 102%;
    left: -1%;
    top: -1%;
    overflow: hidden;
    
    &:before {
      animation: a(eyelid);
      content: '';
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: $color-body;
      border-bottom: 3px solid $color-eye;
      transform-origin: center bottom;
      transform: translateY(-100%);
      border-radius: 50% 50% 15% 15%;
    }
  }
}

.mouth {
  animation: a(mouth), a(mouth-move);
  animation-timing-function: step-end, $easing;
  animation-fill-mode: none;
  width: 12%;
  height: 6%;
  bottom: 13%;
  left: 33%;
  border-radius: 50%;
  box-shadow: 0 -2px $color-eye;
  
  &:before, &:after {
    animation: a(mouth-side);
    animation-timing-function: step-end;
    content: '';
    display: block;
    position: absolute;
    width: 60%;
    height: 100%;
    border-radius: 50%;
    bottom: 53%;
    border-bottom: 2px solid $color-eye;
  }
  
  &:before {
    right: 87%;
  }
  
  &:after {
    left: 87%;
  }
}

.nose {
  animation: a(nose);
  width: 6%;
  height: 4%;
  background: $color-eye;
  border-bottom-left-radius: 50% 65%;
  border-bottom-right-radius: 50% 65%;
  border-top-left-radius: 50% 35%;
  border-top-right-radius: 50% 35%;
  bottom: 26%;
  left: 35%;
}

.tail {
  height: 120px;
  width: 120px;
  z-index: -1;
  animation: a(tail);
  
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  &:after {
    background: $color-body;
    border-radius: 50%;
    transform: rotate(-135deg);
  }
  
  .body > & {
    z-index: -2;
    right: -40px;
    top: -70px;
    
    &:after {    
      background: linear-gradient(to bottom right,
        $color-body-dark,
        $color-body-dark 20%,
        $color-body,
        $color-body);
    }
  }
  
  .tail {
    top: -35px;
    transform-origin: center bottom;
    transform: scale(0.85);
  }
  
  > .tail .tail {
    z-index: 1
  }
  
  &.-end {
    top: -60px;
    
    &:after {
      background: $color-fur;
      background: linear-gradient(to bottom right, $color-fur, white);
      // box-shadow: 0 0 0 6px $color-fur;
      border-radius: initial;
      border-bottom-left-radius: 100% 50%;
      border-top-right-radius: 50% 100%;
      border-top-left-radius: 50%;
    }
    
    &:before {
      content: '';
      display: block;
      position: absolute;
      background: $color-body;
      height: 40%;
      width: 40%;
      z-index: 1;
      border-radius: 50% 50% 0 0;
      top: initial;
      bottom: -15%;
      left: 30%;
      box-shadow:
        -20px -5px $color-body,
        20px -5px $color-body;
    }
  }
  
  > .tail > .tail * {
    animation: a(tail-end);
  }
}

.legs {
  animation: a(legs);
  top: 70%;
  width: 100%;
  height: 100%;
}

@mixin bend-leg($deg) {
  > .inner-leg {
    transform: skewX($deg);

    &:before {
      transform: skewX(-$deg);
    }
  }
}

.leg {
  top: 0;
  background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light);
  transform-origin: center top;
  animation: a(leg);
  
  &, > .inner-leg {
    height: 40px;
    width: 30px;
    border-radius: 35%;
  }
  
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
  }
  
  > .inner-leg {
    top: 50%;
    transform-origin: center 10%;
    animation: a(leg-inner);

    &:before {
      animation: a(paw-inner);
    }
  }
  
  &:nth-child(1) {
    left: 20px;
    top: -2px;
  }
  
  &:nth-child(2) {
    left: 70px;
    
    ~ * {
      z-index: -1;
    
      &, & > .inner-leg, & > .inner-leg:before {
        
        animation-delay: 0.07s;
      }
    }
  }
  
  &:nth-child(3) {
    left: 35px;
    top: -10px;
  }
  
  &:nth-child(4) {
    left: 90px;
    top: -10px;
  }
}

.inner-leg {
  background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light);
  &:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -10%;
    width: 105%;
    height: 50%;
    border-top-left-radius: 40% 40%;
    border-top-right-radius: 40% 40%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    background-image:
      linear-gradient(
        to bottom,
        $color-body 0%,
        $color-body 50%,
        transparent 100%
      ),
      linear-gradient(
        to right,
        transparent 0%,
        transparent 25%,
        rgba(black, 0.5) 26%,
        rgba(black, 0.5) 35%,
        transparent 36%,
        transparent 65%,
        rgba(black, 0.5) 66%, 
        rgba(black, 0.5) 75%,
        transparent 76%
      ),
      linear-gradient(to top,
        $color-body-dark,
        $color-body,
        $color-body-light
      );
  }
}

html body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 100%;
  height: auto;
  align-items: center;
  $light: rgba(white, 0.6);
  $lighter: rgba(white, 0.3);
  background-image:
  repeating-linear-gradient(120deg,
    $light,
    $light 1px,
    transparent 1px,
    transparent 30px,
    $lighter 30px,
    $lighter 31px,
    transparent 31px,
    transparent 60px
  ),
  repeating-linear-gradient(60deg,
    $light,
    $light 1px,
    transparent 1px,
    transparent 30px,
    $lighter 30px,
    $lighter 31px,
    transparent 31px,
    transparent 60px
  ),
    repeating-linear-gradient(to bottom,
    $lighter,
    $lighter 1px,
    transparent 1px,
    transparent 30px);
  background-size: 70px 120px;
  
  @media (max-width: 600px) {
    flex-direction: column;
    
    .dex {
      max-width: 100%;
    }
  }
}

.dex {
  font-family: Lato, sans-serif;
  max-width: 40%;
  font-size: 14px;
  color: white;
  font-weight: 300;
  padding: 1rem 2rem;
}

.heading {
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 14px;
  letter-spacing: 0.25ch;
  
  > span {
    font-weight: 100;
    margin-right: 0.5ch;
  }
  
  > strong {
    font-size: 28px;
    font-weight: 300;
  }
  
}

.pokeball {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: radial-gradient(0.4rem, white, white 50%, transparent 50%);
  margin-right: 1rem;
  
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -0.063rem;
    left: 0;
    height: 50%;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    box-shadow:
      inset 0 -0.09rem 0 0.09rem white,
      inset 0.09rem -0.09rem 0 0.09rem white,
      inset -0.09rem -0.09rem 0 0.09rem white
      ;
  }
  
  &:after {
    transform-origin: top center;
    transform: rotateX(180deg);
    bottom: 0.063rem;
  }
}
.info {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 14px;
}

.subheading {
  font-size: 18px;
  line-height: 28px;
}

p {
  line-height: 18px;
  margin: 0;
  margin-bottom: 1rem;
}

a {
  transition: opacity 0.3s $easing;
  &, &:active, &:visited {
    color: white;
  }
  
  &:hover {
    opacity: 0.8;
  }
}

html {
  background: radial-gradient(50vmin 50vmin, #FEB4FF, #A3A3EC);

  background-position: -20vw center;
  background-repeat: no-repeat;
  background-color: #a3a3ec;
  
  @media (max-width: 600px) {
    background-position: center -20vw;
  }
  
  @media (max-width: 300px) {
    background-position: center -30vw;
  }
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console