daily pastebin goal
16%
SHARE
TWEET

Untitled

a guest Dec 16th, 2018 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3.     <style>
  4.         body {
  5.             background: #accaf9;
  6.         }
  7.  
  8.         .body {
  9.             position: relative;
  10.             margin: auto;
  11.             display: block;
  12.             width: 200px;
  13.             height: 500px;
  14.             background: none;
  15.             margin-top: 1em
  16.         }
  17.  
  18.         .head {
  19.             position: absolute;
  20.             top: 0;
  21.             left: 50%;
  22.             width: 50%;
  23.             height: 17.5%;
  24.             border-radius: 50%;
  25.             transform: translateX(-50%);
  26.             z-index: 21;
  27.         }
  28.  
  29.         .face {
  30.             position: absolute;
  31.             z-index: 20;
  32.             top: 10%;
  33.             left: 50%;
  34.             width: 70%;
  35.             height: 100%;
  36.             background: #F0BEAF;
  37.             transform: translateX(-50%);
  38.             border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  39.         }
  40.  
  41.         .hair {
  42.             z-index: 3;
  43.             top: 0;
  44.             position: absolute;
  45.             left: 50%;
  46.             transform: translateX(-50%);
  47.             width: 90%;
  48.             height: 100%;
  49.             border-radius: 100%;
  50.             background: #424B54;
  51.         }
  52.  
  53.         .fringe {
  54.             z-index: 99;
  55.             position: absolute;
  56.             top: 1%;
  57.             left: 50%;
  58.             transform: translateX(-50%);
  59.             width: 50%;
  60.             height: 40%;
  61.             background: #424B54;
  62.             border-radius: 100% 0% 100% 100%;
  63.         }
  64.  
  65.         .fringe:before, .fringe:after {
  66.             position: absolute;
  67.             content: '';
  68.             top: 40%;
  69.             width: 30%;
  70.             height: 70%;
  71.             background: #424B54;
  72.             border-radius: 100%;
  73.         }
  74.  
  75.         .fringe:before {
  76.             left: -28%;
  77.             transform: rotate(10deg);
  78.         }
  79.  
  80.         .fringe:after {
  81.             right: -28%;
  82.             transform: rotate(-10deg);
  83.         }
  84.  
  85.         .ear {
  86.             z-index: 5;
  87.             position: absolute;
  88.             top: 41%;
  89.             width: 25%;
  90.             height: 30%;
  91.             border-radius: 100%;
  92.             background: #F0BEAF;
  93.         }
  94.  
  95.         .ear:after {
  96.             content: ' ';
  97.             background: #D7A596;
  98.             border-radius: 100%;
  99.             position: absolute;
  100.             width: 45%;
  101.             height: 60%;
  102.             top: 20%;
  103.         }
  104.  
  105.         .ear.left {
  106.             left: 8%;
  107.         }
  108.  
  109.         .ear.left:after {
  110.             left: 11%;
  111.         }
  112.  
  113.         .ear.right {
  114.             right: 8%;
  115.         }
  116.  
  117.         .ear.right:after {
  118.             right: 8%;
  119.         }
  120.  
  121.         .eye {
  122.             z-index: 30;
  123.             top: 46%;
  124.             width: 15%;
  125.             height: 8%;
  126.             background: #424B54;
  127.             border-radius: 100%;
  128.             position: absolute;
  129.         }
  130.  
  131.         .eye.left {
  132.             left: 22%;
  133.         }
  134.  
  135.  
  136.         .eye.right {
  137.             right: 22%;
  138.         }
  139.  
  140.         .glasses {
  141.             z-index: 35;
  142.             background-color: rgba(0, 0, 0, 0.2);
  143.             border: solid 2px #0081AB;
  144.             border-bottom-color: transparent;
  145.             position: absolute;
  146.             top: 42%;
  147.             height: 13%;
  148.             width: 24%;
  149.         }
  150.  
  151.         .glasses.left {
  152.             left: 15%;
  153.             border-radius: 60% 40% 90% 80%;
  154.         }
  155.  
  156.  
  157.         .glasses:before {
  158.             content: ' ';
  159.             position: absolute;
  160.             height: 19%;
  161.             width: 92%;
  162.             background-color: #0081AB;
  163.             top: -50%;
  164.  
  165.         }
  166.  
  167.         .glasses.left:before {
  168.             right: 84%;
  169.             transform: rotate(38deg);
  170.         }
  171.  
  172.         .glasses.right:before {
  173.             left: 84%;
  174.             transform: rotate(-38deg);
  175.  
  176.         }
  177.  
  178.         .glasses:after {
  179.             content: ' ';
  180.             position: absolute;
  181.             height: 20%;
  182.             width: 37%;
  183.             background-color: #0081AB;
  184.             top: -1px;
  185.         }
  186.  
  187.         .glasses.left:after {
  188.             left: 100%;
  189.         }
  190.  
  191.         .glasses.right:after {
  192.             right: 100%;
  193.         }
  194.  
  195.         .glasses.right {
  196.             right: 15%;
  197.             border-radius: 40% 60% 80% 90%;
  198.         }
  199.  
  200.         .nose {
  201.             z-index: 20;
  202.             top: 45%;
  203.             left: 50%;
  204.             width: 10%;
  205.             height: 20%;
  206.             background: #D7A596;
  207.             border-radius: 100% 100% 50% 50%;
  208.             position: absolute;
  209.             transform: translateX(-50%);
  210.         }
  211.  
  212.         .mouth {
  213.             z-index: 20;
  214.             top: 75%;
  215.             left: 50%;
  216.             transform: translateX(-50%);
  217.             width: 40%;
  218.             height: 15%;
  219.             position: absolute;
  220.             border-radius: 0 0 100px 100px;
  221.             background: #424B54;
  222.             overflow: hidden;
  223.         }
  224.  
  225.         .tongue {
  226.             position: absolute;
  227.             bottom: -48%;
  228.             right: 0;
  229.             width: 60%;
  230.             height: 107%;
  231.             background: #F6828C;
  232.             border-radius: 100%;
  233.         }
  234.  
  235.         .neck {
  236.             position: absolute;
  237.             top: 17.5%;
  238.             left: 50%;
  239.             width: 10%;
  240.             height: 2%;
  241.             border-radius: 10%;
  242.             transform: translateX(-50%);
  243.             background: #F0BEAF;
  244.             z-index: 20;
  245.         }
  246.  
  247.         .shirt {
  248.             position: absolute;
  249.             top: 19.5%;
  250.             left: 50%;
  251.             width: 55%;
  252.             height: 30%;
  253.             border-radius: 20% 20% 5% 5%;
  254.             transform: translateX(-50%);
  255.             background: #fff;
  256.             z-index: 19;
  257.         }
  258.  
  259.         .collar {
  260.             position: absolute;
  261.             top: 0;
  262.             left: 50%;
  263.             width: 30%;
  264.             height: 10%;
  265.             border-radius: 0 0 100px 100px;
  266.             border-color: black;
  267.             border-style: solid;
  268.             border-width: 1px;
  269.             border-top-color: transparent;
  270.             transform: translateX(-50%);
  271.             background: #F0BEAF;
  272.         }
  273.  
  274.         .sleeve {
  275.             position: absolute;
  276.             top: 20%;
  277.             left: 50%;
  278.             transform: translateX(-50%);
  279.         }
  280.  
  281.         .logo {
  282.             position: absolute;
  283.             top: 20%;
  284.             left: 50%;
  285.             transform: translateX(-50%);
  286.             font-size: 1em;
  287.             background: #F0BEAF;
  288.         }
  289.     </style>
  290. </head>
  291. <body>
  292. <!-- Begin Image -->
  293.  
  294. <!-- Circular Head-->
  295. <div class="body">
  296.     <div class="head">
  297.         <div class="hair"></div>
  298.         <div class="fringe"></div>
  299.         <div class="ear left"></div>
  300.         <div class="ear right"></div>
  301.         <div class="face">
  302.             <div class="eye left"></div>
  303.             <div class="eye right"></div>
  304.             <div class="glasses left"></div>
  305.             <div class="glasses right"></div>
  306.             <div class="nose">
  307.             </div>
  308.             <div class="mouth">
  309.                 <div class="tongue">
  310.  
  311.                 </div>
  312.             </div>
  313.         </div>
  314.     </div>
  315.     <div class="neck"></div>
  316.     <div class="shirt">
  317.         <div class="collar">
  318.         </div>
  319.         <div class="logo">
  320.             Capoeira
  321.         </div>
  322.         <div class="sleeve"></div>
  323.     </div>
  324. </div>
  325. </body>
  326. </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
 
Top