CSS quests | Penguin by Pavel

Penguin by

Pavel

On: 2 Jun 2016

<div class="penguin">
  <div class="left eye">
    <div class="pupil"></div>
  </div>
  <div class="right eye">
    <div class="pupil"></div>
  </div>
  <div class="beak"></div>
  <div class="chest"></div>
  <div class="left wing"></div>
  <div class="right wing"></div>
</div>
<div class="iceberg"></div>

body {
  background-color: #333;
  margin: 0;
  padding: 80px 0 0 0;
}

.penguin {
  background-color: black;
  border-radius: 50px;
  height: 100px;
  left: 50px;
  overflow: hidden;
  position: relative;
  width: 100px;
}

.eye {
  background-color: white;
  border-radius: 5px;
  height: 10px;
  position: absolute;
  top: 30px;
  width: 10px;
}
.left.eye { left: 30px; }
.right.eye { right: 30px; }

.pupil {
  animation: 5s linear 1s infinite move_pupil;
  background-color: black;
  border-radius: 3px;
  height: 6px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
}
@keyframes move_pupil {
  0% { top: 2px; right: 2px; }
  10% { top: 1px; right: 1px; }
  20% { top: 2px; right: 2px; }
}

.beak {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid tomato;
  height: 0px;
  left: 45px;
  position: absolute;
  top: 38px;
  width: 0px;
}

.chest {
  background-color: white;
  border-radius: 30px;
  height: 50px;
  left: 25px;
  position: absolute;
  top: 50px;
  width: 50px;
}

.wing {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid black;
  height: 0px;
  position: absolute;
  top: 60px;
  width: 0px;
}
.wing.left { left: 10px; }
.wing.right { right: 10px; }

.iceberg {
  background-color: #0EAEBE;
  border-top-right-radius: 2px;
  height: 100%;
  width: 142px;
}

CSS