Skip to content

Commit 5d55e0a

Browse files
quintincodesquintincodes
committed
Add files to code base
0 parents  commit 5d55e0a

2 files changed

Lines changed: 308 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="stylesheet" href="./styles.css" />
6+
<title>Penguin</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
</head>
9+
10+
<body>
11+
<div class="left-mountain"></div>
12+
<div class="back-mountain"></div>
13+
<div class="sun"></div>
14+
<div class="penguin">
15+
<div class="penguin-head">
16+
<div class="face left"></div>
17+
<div class="face right"></div>
18+
<div class="chin"></div>
19+
<div class="eye left">
20+
<div class="eye-lid"></div>
21+
</div>
22+
<div class="eye right">
23+
<div class="eye-lid"></div>
24+
</div>
25+
<div class="blush left"></div>
26+
<div class="blush right"></div>
27+
<div class="beak top"></div>
28+
<div class="beak bottom"></div>
29+
</div>
30+
<div class="shirt">
31+
<div>💜</div>
32+
<p>I CSS</p>
33+
</div>
34+
<div class="penguin-body">
35+
<div class="arm left"></div>
36+
<div class="arm right"></div>
37+
<div class="foot left"></div>
38+
<div class="foot right"></div>
39+
</div>
40+
</div>
41+
42+
<div class="ground"></div>
43+
</body>
44+
</html>

‎styles.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
:root {
2+
--penguin-face: white;
3+
--penguin-picorna: orange;
4+
--penguin-skin: gray;
5+
}
6+
7+
body {
8+
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
9+
margin: 0;
10+
padding: 0;
11+
width: 100%;
12+
height: 100vh;
13+
overflow: hidden;
14+
}
15+
16+
.left-mountain {
17+
width: 300px;
18+
height: 300px;
19+
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
20+
position: absolute;
21+
transform: skew(0deg, 44deg);
22+
z-index: 2;
23+
margin-top: 100px;
24+
}
25+
26+
.back-mountain {
27+
width: 300px;
28+
height: 300px;
29+
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
30+
position: absolute;
31+
z-index: 1;
32+
transform: rotate(45deg);
33+
left: 110px;
34+
top: 225px;
35+
}
36+
37+
.sun {
38+
width: 200px;
39+
height: 200px;
40+
background-color: yellow;
41+
position: absolute;
42+
border-radius: 50%;
43+
top: -75px;
44+
right: -75px;
45+
}
46+
47+
.penguin {
48+
width: 300px;
49+
height: 300px;
50+
margin: auto;
51+
margin-top: 75px;
52+
z-index: 4;
53+
position: relative;
54+
transition: transform 1s ease-in-out 0ms;
55+
}
56+
57+
.penguin * {
58+
position: absolute;
59+
}
60+
61+
.penguin:active {
62+
transform: scale(1.5);
63+
cursor: not-allowed;
64+
}
65+
66+
.penguin-head {
67+
width: 50%;
68+
height: 45%;
69+
background: linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228));
70+
border-radius: 70% 70% 65% 65%;
71+
top: 10%;
72+
left: 25%;
73+
z-index: 1;
74+
}
75+
76+
.face {
77+
width: 60%;
78+
height: 70%;
79+
background-color: var(--penguin-face);
80+
border-radius: 70% 70% 60% 60%;
81+
top: 15%;
82+
}
83+
84+
.face.left {
85+
left: 5%;
86+
}
87+
88+
.face.right {
89+
right: 5%;
90+
}
91+
92+
.chin {
93+
width: 90%;
94+
height: 70%;
95+
background-color: var(--penguin-face);
96+
top: 25%;
97+
left: 5%;
98+
border-radius: 70% 70% 100% 100%;
99+
}
100+
101+
.eye {
102+
width: 15%;
103+
height: 17%;
104+
background-color: black;
105+
top: 45%;
106+
border-radius: 50%;
107+
}
108+
109+
.eye.left {
110+
left: 25%;
111+
}
112+
113+
.eye.right {
114+
right: 25%;
115+
}
116+
117+
.eye-lid {
118+
width: 150%;
119+
height: 100%;
120+
background-color: var(--penguin-face);
121+
top: 25%;
122+
left: -23%;
123+
border-radius: 50%;
124+
}
125+
126+
.blush {
127+
width: 15%;
128+
height: 10%;
129+
background-color: pink;
130+
top: 65%;
131+
border-radius: 50%;
132+
}
133+
134+
.blush.left {
135+
left: 15%;
136+
}
137+
138+
.blush.right {
139+
right: 15%;
140+
}
141+
142+
.beak {
143+
height: 10%;
144+
background-color: var(--penguin-picorna);
145+
border-radius: 50%;
146+
}
147+
148+
.beak.top {
149+
width: 20%;
150+
top: 60%;
151+
left: 40%;
152+
}
153+
154+
.beak.bottom {
155+
width: 16%;
156+
top: 65%;
157+
left: 42%;
158+
}
159+
160+
.shirt {
161+
font: bold 25px Helvetica, sans-serif;
162+
top: 165px;
163+
left: 127.5px;
164+
z-index: 1;
165+
color: #6a6969;
166+
}
167+
168+
.shirt div {
169+
font-weight: initial;
170+
top: 22.5px;
171+
left: 12px;
172+
}
173+
174+
.penguin-body {
175+
width: 53%;
176+
height: 45%;
177+
background: linear-gradient(
178+
45deg,
179+
rgb(134, 133, 133) 0%,
180+
rgb(234, 231, 231) 25%,
181+
white 67%
182+
);
183+
border-radius: 80% 80% 100% 100%;
184+
top: 40%;
185+
left: 23.5%;
186+
}
187+
188+
.penguin-body::before {
189+
content: '';
190+
position: absolute;
191+
width: 50%;
192+
height: 45%;
193+
background-color: var(--penguin-skin);
194+
top: 10%;
195+
left: 25%;
196+
border-radius: 0% 0% 100% 100%;
197+
opacity: 70%;
198+
}
199+
200+
.arm {
201+
width: 30%;
202+
height: 60%;
203+
background: linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199));
204+
border-radius: 30% 30% 30% 120%;
205+
z-index: -1;
206+
}
207+
208+
.arm.left {
209+
top: 35%;
210+
left: 5%;
211+
transform-origin: top left;
212+
transform: rotate(130deg) scaleX(-1);
213+
animation: 3s linear infinite wave;
214+
}
215+
216+
.arm.right {
217+
top: 0%;
218+
right: -5%;
219+
transform: rotate(-45deg);
220+
}
221+
222+
@keyframes wave {
223+
10% {
224+
transform: rotate(110deg) scaleX(-1);
225+
}
226+
20% {
227+
transform: rotate(130deg) scaleX(-1);
228+
}
229+
30% {
230+
transform: rotate(110deg) scaleX(-1);
231+
}
232+
40% {
233+
transform: rotate(130deg) scaleX(-1);
234+
}
235+
}
236+
237+
.foot {
238+
width: 15%;
239+
height: 30%;
240+
background-color: var(--penguin-picorna);
241+
top: 85%;
242+
border-radius: 50%;
243+
z-index: -1;
244+
}
245+
246+
.foot.left {
247+
left: 25%;
248+
transform: rotate(80deg);
249+
}
250+
251+
.foot.right {
252+
right: 25%;
253+
transform: rotate(-80deg);
254+
}
255+
256+
.ground {
257+
width: 100vw;
258+
height: 400px;
259+
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
260+
z-index: 3;
261+
position: absolute;
262+
margin-top: -58px;
263+
height: calc(100vh - 300px);
264+
}

0 commit comments

Comments
 (0)