Basic CSS with FreeCodeCamp

Basic CSS with FreeCodeCamp

Oct 25, 2022

Basic CSS with FreeCodeCamp

<style>

  :root {

    --penguin-size: 300px;

    --penguin-skin: gray;

    --penguin-belly: white;

    --penguin-beak: orange;

  }


  @media (max-width: 350px) {    :root {      --penguin-size:200px;      --penguin-skin:black;      / Only change code below this line /
      / Only change code above this line /    }  }
  .penguin {    position: relative;    margin: auto;    display: block;    margin-top: 5%;    width: var(--penguin-size, 300px);    height: var(--penguin-size, 300px);  }
  .right-cheek {    top: 15%;    left: 35%;    background: var(--penguin-belly, white);    width: 60%;    height: 70%;    border-radius: 70% 70% 60% 60%;  }
  .left-cheek {    top: 15%;    left: 5%;    background: var(--penguin-belly, white);    width: 60%;    height: 70%;    border-radius: 70% 70% 60% 60%;  }
  .belly {    top: 60%;    left: 2.5%;    background: var(--penguin-belly, white);    width: 95%;    height: 100%;    border-radius: 120% 120% 100% 100%;  }
  .penguin-top {    top: 10%;    left: 25%;    background: var(--penguin-skin, gray);    width: 50%;    height: 45%;    border-radius: 70% 70% 60% 60%;  }
  .penguin-bottom {    top: 40%;    left: 23.5%;    background: var(--penguin-skin, gray);    width: 53%;    height: 45%;    border-radius: 70% 70% 100% 100%;  }
  .right-hand {    top: 5%;    left: 25%;    background: var(--penguin-skin, black);    width: 30%;    height: 60%;    border-radius: 30% 30% 120% 30%;    transform: rotate(130deg);    z-index: -1;    animation-duration: 3s;    animation-name: wave;    animation-iteration-count: infinite;    transform-origin:0% 0%;    animation-timing-function: linear;  }
  @keyframes wave {      10% {        transform: rotate(110deg);      }      20% {        transform: rotate(130deg);      }      30% {        transform: rotate(110deg);      }      40% {        transform: rotate(130deg);      }    }
  .left-hand {    top: 0%;    left: 75%;    background: var(--penguin-skin, gray);    width: 30%;    height: 60%;    border-radius: 30% 30% 30% 120%;    transform: rotate(-45deg);    z-index: -1;  }
  .right-feet {    top: 85%;    left: 60%;    background: var(--penguin-beak, orange);    width: 15%;    height: 30%;    border-radius: 50% 50% 50% 50%;    transform: rotate(-80deg);    z-index: -2222;  }
  .left-feet {    top: 85%;    left: 25%;    background: var(--penguin-beak, orange);    width: 15%;    height: 30%;    border-radius: 50% 50% 50% 50%;    transform: rotate(80deg);    z-index: -2222;  }
  .right-eye {    top: 45%;    left: 60%;    background: black;    width: 15%;    height: 17%;    border-radius: 50%;  }
  .left-eye {    top: 45%;    left: 25%;    background: black;    width: 15%;    height: 17%;    border-radius: 50%;  }
  .sparkle {    top: 25%;    left:-23%;    background: white;    width: 150%;    height: 100%;    border-radius: 50%;  }
  .blush-right {    top: 65%;    left: 15%;    background: pink;    width: 15%;    height: 10%;    border-radius: 50%;  }
  .blush-left {    top: 65%;    left: 70%;    background: pink;    width: 15%;    height: 10%;    border-radius: 50%;  }
  .beak-top {    top: 60%;    left: 40%;    background: var(--penguin-beak, orange);    width: 20%;    height: 10%;    border-radius: 50%;  }
  .beak-bottom {    top: 65%;    left: 42%;    background: var(--penguin-beak, orange);    width: 16%;    height: 10%;    border-radius: 50%;  }
  body {    background:#c6faf1;  }
  .penguin * {    position: absolute;  }</style><div class="penguin">  <div class="penguin-bottom">    <div class="right-hand"></div>    <div class="left-hand"></div>    <div class="right-feet"></div>    <div class="left-feet"></div>  </div>  <div class="penguin-top">    <div class="right-cheek"></div>    <div class="left-cheek"></div>    <div class="belly"></div>    <div class="right-eye">      <div class="sparkle"></div>    </div>    <div class="left-eye">      <div class="sparkle"></div>    </div>    <div class="blush-right"></div>    <div class="blush-left"></div>    <div class="beak-top"></div>    <div class="beak-bottom"></div>  </div></div>

Enjoy this post?

Buy SEMIH a coffee

More from SEMIH