< Back to Frontend Friday Folks Index

Elephant

Highlighted solution (1437 characters)
1 
<div class=head>
2 
<div class=teeth></div>
3 
<div class=nose></div>
4 
<div class="ear l"></div>
5 
<div class="ear r"></div>
6 
<div class=face></div>
7 
</div>
8 
<style>
9 
  body {
10 
    display: grid;
11 
    place-items:center;
12 
    background:#998235;
13 
  }
14 
  .head {
15 
    position:relative;
16 
  }
17 
  .nose {
18 
    position: absolute;
19 
    bottom:-99;
20 
    border-radius:20px;
21 
    left:70;
22 
    top:120;
23 
    width:40;
24 
    background:#0B2429;
25 
  }
26 
  .teeth {
27 
    content:'';
28 
    position:absolute;
29 
    border-radius: 50%;
30 
    border: 20px solid #fff;
31 
    border-top-color: #0000;
32 
    border-left-color: #0000;
33 
    rotate:225deg;
34 
    top:130;
35 
    left:30;
36 
    height:80;
37 
    width:80;
38 
  }
39 
  .face,.ear {
40 
    border-radius: 50%;
41 
    width: 180px;
42 
    height: 180px;
43 
    background: #1A4341;
44 
  }
45 
  .face {
46 
    background:
47 
      linear-gradient(#1A4341 50%, #0000 0),
48 
      radial-gradient(circle at 60px 50%, #0B2429 10px, #998235 0 20px, #0000 0),
49 
      radial-gradient(circle at 120px 50%, #0B2429 10px, #998235 0 20px, #0000 0),
50 
      #1A4341;
51 
  }
52 
  .ear {
53 
    position:absolute;
54 
    background:#1A4341;
55 
    content:'';
56 
    overflow:hidden;
57 
    width: 80px;
58 
    z-index:-1;
59 
  }
60 
  .ear::before {
61 
    position: absolute;
62 
    background: #0B2429;
63 
    border-radius: 50%;
64 
    content: '';
65 
    height: 100%;
66 
    width: 100%;
67 
  }
68 
  .ear.l {
69 
    left:-60px;
70 
  }
71 
  .ear.l::before {
72 
    left:15px;
73 
  }
74 
  .ear.r::before {
75 
    right:16px;
76 
  }
77 
  .ear.r {
78 
    right:-60px;
79 
  }
80 
</style>
I couldn't make it this week. Thanks to David, it still happened and a solution for this puzzle has been posted. I only got 99.9% this time.
< Back to Frontend Friday Folks Index