Gettin' Festive!

gettin-festive.markdown

Gettin' Festive!

Almost turkey day!

A Pen by Jeff Boshers on CodePen.

License.

index.haml

.turkey
  .feathers.feathers__red
    .feather
      .feather
  .feathers.feathers__orange
    .feather
      .feather
  .hat
    .belt
  .head
    .eyes
    .beak
    .snood
    .neck
  .body
    .wings
    .feet

style.scss

$color-brown-light: #9e724e;
$color-brown-mid: #90603a;
$color-brown-dark: #6e4324;
$color-orange-light: #fdb62e;
$color-orange-mid: #ff822f;
$color-red-light: #b81e21;
$color-red-mid: #b62026;
$color-golden: #ffba06 ;
$color-black: #202020;

@mixin position($position, $top, $left) { 
  position: $position;
  top: $top;
  left: $left;
  transform: translate(-50%,-50%);
}

%feather {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 300px;
  transform-origin: 100% 100%;
}

.turkey {
  position: relative;
  margin: 100px auto;
  width: 600px;
  height: 600px;
}

.body {
  position: relative;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  background-color: $color-brown-mid;
  &:before{
    position: absolute;
    bottom: -3%;
    left: 25%;
    content: "";
    border-radius: 50%;
    background-color: $color-brown-mid;
    width: 15%;
    height: 15%;
    -webkit-box-reflect: right 150%;
    z-index: 3;
  }
}

.wings {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 50%;
  left: -1rem;
  height: 60%;
  border-radius: 100% 1%;
  background-color: $color-brown-dark;
  -webkit-box-reflect: right 2rem;
}

.head {
  position: relative;
  margin: 0 auto;
  height: 25%;
  width: 25%;
  border-radius: 50%;
  background-color: $color-brown-light;
  z-index: 2;
}

.eyes{
  @include position(relative, 43%, 33%);
  height: 10%;
  width: 10%;
  border-radius: 50%;
  background-color: $color-black;
  z-index: 3;
  -webkit-box-reflect: right 2rem;
}
  
.beak {
  @include position(relative, 50%, 55%);
  background-color: $color-orange-light;
  width: 25%;
  height: 25%;
  margin-top: 10px;
  z-index: 4;
  border-radius: 50% 60% 10%;
}

.snood {
  @include position(relative, 35%, 46%);
  background-color: $color-red-light;
  width: 30%;
  height: 45%;
  border-radius: 90px 60px 50px 200px;
  transform: translate(-50%, -50%) rotate(15deg);
  z-index: 3;
}

.neck {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  height: 200%;
  width: 33%;
  border-radius: 40px;
  background-color: $color-brown-light;
  z-index: 2;
}

.feathers {
  @include position(absolute, 50%, 50%);
}

.feathers__orange {
  top: 75%;
  left: 57%;
  transform: rotate(35deg) translate(-50%, -50%);
  width: 100%;
  height: 100%;
  .feather {
    @extend %feather;
    content: "";
    background: linear-gradient(
  to bottom,
  $color-orange-light,
  $color-orange-light 50%,
  $color-orange-mid 50%,
  $color-orange-mid
);background-size: 100% 10px;
    border-radius: 80%;
    border: 2px solid rgba($color-black, .2);
    transform: rotate(-35deg);
    z-index: 2;
    -webkit-box-reflect:left 2px;
  }
}

.feathers__red {
  top: -20%;
  left: 110%;
  transform: rotate(-50deg) translate(-50%, -50%);
  width: 100%;
  height: 100%;
  .feather {
    @extend %feather;
    content: "";
    background: linear-gradient(
  to bottom,
  $color-red-light 50%,
      $color-red-mid 50%
);border: 2px solid rgba($color-black, .2);
    border-radius: 80%;
    transform: rotate(50deg) translate(-10px, 40px);
    z-index: 1;
    -webkit-box-reflect:left;
  }
}
.feet {
  width: 15px;
  height: 80px;
  background-color: $color-orange-mid;
  border-radius: 8px;
  position: absolute;
  bottom: -24%;
  left: 29%;
  -webkit-box-reflect: right 700%;
  z-index: 1;
  &:before{
    width: 15px;
    height: 50px;
    background-color: $color-orange-mid;
    border-radius: 8px;
    position: absolute;
    bottom: 0;
    left: 0%;
    content: '';
    transform: rotate(90deg);
   
  }
}
.hat {
  position: relative;
  background-color: $color-black;
  width: 65px;
  height: 50px;
  margin: 0 auto;
  z-index: 1;
  border-radius: 50% 50% 0 0;
  &:before {
    position: absolute;
    top: 94%;
    left: -100%;
    width: 200px;
    height: 70px;
    border-radius: 100%;
    background-color: $color-black;
    content: "";
  }
}
.belt {}