html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Doraemon in Pure CSS</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="face_01">
<div class="face_02">
<div class="eye_box clearfix">
<div class="big_eye_left"> <span class="small_eye_left"></span>
</div>
<div class="big_eye_right"> <span class="small_eye_right"></span>
</div>
</div>
<div class="nose_01"> <span class="nose_01_shadow"></span>
</div>
<div class="nose_02"></div>
<div class="mouth"></div>
<div class="whisker_left"> <span class="whisker"></span>
<span class="whisker"></span>
<span class="whisker"></span>
</div>
<div class="whisker_right"> <span class="whisker"></span>
<span class="whisker"></span>
<span class="whisker"></span>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
box-sizing: border-box;
}
.font
{
font-family: 'Indie Flower', cursive;
}
body {
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
.clearfix {
content: "";
display: block;
clear: both;
}
.face_01 {
margin: 50px auto;
position: relative;
width: 420px;
height: 400px;
background-color: #1E90FF;
border: 2px solid #000;
border-radius: 47% 47% 45% 45%;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
//. Pure CSS
// Created by Madhav ..
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run