SHARE
TWEET

Untitled

a guest Mar 26th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!Doctype html>
  2. <html>
  3. <style>
  4.   .penguin {
  5.    
  6.     /* add code below */
  7.    
  8.     /* add code above */
  9.     position: relative;
  10.     margin: auto;
  11.     display: block;
  12.     margin-top: 5%;
  13.     width: 300px;
  14.     height: 300px;
  15.   }
  16.  
  17.   .penguin-top {
  18.     top: 10%;
  19.     left: 25%;
  20.     background: black;
  21.     width: 50%;
  22.     height: 45%;
  23.     border-radius: 70% 70% 60% 60%;
  24.   }
  25.  
  26.   .penguin-bottom {
  27.     top: 40%;
  28.     left: 23.5%;
  29.     background: black;
  30.     width: 53%;
  31.     height: 45%;
  32.     border-radius: 70% 70% 100% 100%;
  33.   }
  34.  
  35.   .right-hand {
  36.     top: 0%;
  37.     left: -5%;
  38.     background: black;
  39.     width: 30%;
  40.     height: 60%;
  41.     border-radius: 30% 30% 120% 30%;
  42.     transform: rotate(45deg);
  43.     z-index: -1;
  44.   }
  45.  
  46.   .left-hand {
  47.     top: 0%;
  48.     left: 75%;
  49.     background: black;
  50.     width: 30%;
  51.     height: 60%;
  52.     border-radius: 30% 30% 30% 120%;
  53.     transform: rotate(-45deg);
  54.     z-index: -1;
  55.   }
  56.  
  57.   .right-cheek {
  58.     top: 15%;
  59.     left: 35%;
  60.     background: white;
  61.     width: 60%;
  62.     height: 70%;
  63.     border-radius: 70% 70% 60% 60%;
  64.   }
  65.  
  66.   .left-cheek {
  67.     top: 15%;
  68.     left: 5%;
  69.     background: white;
  70.     width: 60%;
  71.     height: 70%;
  72.     border-radius: 70% 70% 60% 60%;
  73.   }
  74.  
  75.   .belly {
  76.     top: 60%;
  77.     left: 2.5%;
  78.     background: white;
  79.     width: 95%;
  80.     height: 100%;
  81.     border-radius: 120% 120% 100% 100%;
  82.   }
  83.  
  84.   .right-feet {
  85.     top: 85%;
  86.     left: 60%;
  87.     background: orange;
  88.     width: 15%;
  89.     height: 30%;
  90.     border-radius: 50% 50% 50% 50%;
  91.     transform: rotate(-80deg);
  92.     z-index: -2222;  
  93.   }
  94.  
  95.   .left-feet {
  96.     top: 85%;
  97.     left: 25%;
  98.     background: orange;
  99.     width: 15%;
  100.     height: 30%;
  101.     border-radius: 50% 50% 50% 50%;
  102.     transform: rotate(80deg);
  103.     z-index: -2222;  
  104.   }
  105.  
  106.   .right-eye {
  107.     top: 45%;
  108.     left: 60%;
  109.     background: black;
  110.     width: 15%;
  111.     height: 17%;
  112.     border-radius: 50%;
  113.   }
  114.  
  115.   .left-eye {
  116.     top: 45%;
  117.     left: 25%;
  118.     background: black;
  119.     width: 15%;
  120.     height: 17%;
  121.     border-radius: 50%;  
  122.   }
  123.  
  124.   .sparkle {
  125.     top: 25%;
  126.     left: 15%;
  127.     background: white;
  128.     width: 35%;
  129.     height: 35%;
  130.     border-radius: 50%;  
  131.   }
  132.  
  133.   .blush-right {
  134.     top: 65%;
  135.     left: 15%;
  136.     background: pink;
  137.     width: 15%;
  138.     height: 10%;
  139.     border-radius: 50%;  
  140.   }
  141.  
  142.   .blush-left {
  143.     top: 65%;
  144.     left: 70%;
  145.     background: pink;
  146.     width: 15%;
  147.     height: 10%;
  148.     border-radius: 50%;  
  149.   }
  150.  
  151.   .beak-top {
  152.     top: 60%;
  153.     left: 40%;
  154.     background: orange;
  155.     width: 20%;
  156.     height: 10%;
  157.     border-radius: 50%;  
  158.   }
  159.  
  160.   .beak-bottom {
  161.     top: 65%;
  162.     left: 42%;
  163.     background: orange;
  164.     width: 16%;
  165.     height: 10%;
  166.     border-radius: 50%;  
  167.   }
  168.  
  169.   body {
  170.     background:#c6faf1;
  171.   }
  172.  
  173.   .penguin * {
  174.     position: absolute;
  175.   }
  176. </style>
  177. <div class="penguin">
  178.   <div class="penguin-bottom">
  179.     <div class="right-hand"></div>
  180.     <div class="left-hand"></div>
  181.     <div class="right-feet"></div>
  182.     <div class="left-feet"></div>
  183.   </div>
  184.   <div class="penguin-top">
  185.     <div class="right-cheek"></div>
  186.     <div class="left-cheek"></div>
  187.     <div class="belly"></div>
  188.     <div class="right-eye">
  189.       <div class="sparkle"></div>
  190.     </div>
  191.     <div class="left-eye">
  192.       <div class="sparkle"></div>
  193.     </div>
  194.     <div class="blush-right"></div>
  195.     <div class="blush-left"></div>
  196.     <div class="beak-top"></div>
  197.     <div class="beak-bottom"></div>
  198.   </div>
  199. </div>
  200. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top