Skip to content

Commit 91a0335

Browse files
Aniruddhadwivedi07Aniruddhadwivedi07
authored
Added a CSS Robot (#900)
1 parent c7a9fa8 commit 91a0335

File tree

3 files changed

+191
-0
lines changed

3 files changed

+191
-0
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1344,6 +1344,12 @@ An interactive resume built entirely using **HTML and CSS** — featuring animat
13441344
---
13451345

13461346

1347+
**[⬆ back to top](#quick-links)**
1348+
1349+
## <a id="Robot"></a>Carousel
1350+
1351+
[<img src="images/Robot.png" height="230" title="Robot">](Robot/Robot.html)
1352+
13471353
**[⬆ back to top](#quick-links)**
13481354

13491355
## Contributors

‎Robot/Robot.html‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simple Robot</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
background: linear-gradient(to bottom, #87ceeb, #e0f6ff);
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
17+
.robot {
18+
width: 200px;
19+
}
20+
21+
.head {
22+
width: 120px;
23+
height: 100px;
24+
background: #4a90e2;
25+
margin: 0 auto 10px;
26+
border-radius: 15px;
27+
}
28+
29+
.antenna {
30+
width: 4px;
31+
height: 30px;
32+
background: #333;
33+
margin: 0 auto;
34+
}
35+
36+
.antenna-ball {
37+
width: 12px;
38+
height: 12px;
39+
background: red;
40+
border-radius: 50%;
41+
margin: 0 auto;
42+
}
43+
44+
.eyes {
45+
padding-top: 30px;
46+
text-align: center;
47+
}
48+
49+
.eye {
50+
width: 25px;
51+
height: 25px;
52+
background: white;
53+
border-radius: 50%;
54+
display: inline-block;
55+
margin: 0 10px;
56+
border: 3px solid #333;
57+
}
58+
59+
.mouth {
60+
width: 60px;
61+
height: 20px;
62+
background: #333;
63+
margin: 15px auto 0;
64+
border-radius: 0 0 30px 30px;
65+
}
66+
67+
.body {
68+
width: 140px;
69+
height: 120px;
70+
background: #5fa3e8;
71+
margin: 0 auto;
72+
border-radius: 10px;
73+
}
74+
75+
.chest {
76+
width: 60px;
77+
height: 60px;
78+
background: #7fb8f0;
79+
margin: 0 auto;
80+
padding-top: 20px;
81+
border-radius: 10px;
82+
}
83+
84+
.button {
85+
width: 15px;
86+
height: 15px;
87+
background: #ff6b6b;
88+
border-radius: 50%;
89+
margin: 5px auto;
90+
}
91+
92+
.arms {
93+
display: flex;
94+
justify-content: space-between;
95+
margin-top: -100px;
96+
}
97+
98+
.arm {
99+
width: 30px;
100+
height: 90px;
101+
background: #4a90e2;
102+
border-radius: 15px;
103+
}
104+
105+
.arm-left {
106+
margin-left: -40px;
107+
}
108+
109+
.arm-right {
110+
margin-right: -40px;
111+
}
112+
113+
.hand {
114+
width: 35px;
115+
height: 35px;
116+
background: #3a7bc8;
117+
border-radius: 50%;
118+
margin-top: 5px;
119+
margin-left: -2px;
120+
}
121+
122+
.legs {
123+
display: flex;
124+
justify-content: center;
125+
gap: 20px;
126+
margin-top: 10px;
127+
}
128+
129+
.leg {
130+
width: 35px;
131+
height: 70px;
132+
background: #4a90e2;
133+
border-radius: 8px;
134+
}
135+
136+
.foot {
137+
width: 45px;
138+
height: 20px;
139+
background: #3a7bc8;
140+
border-radius: 10px;
141+
margin-left: -5px;
142+
}
143+
</style>
144+
</head>
145+
<body>
146+
<div class="robot">
147+
<div class="antenna-ball"></div>
148+
<div class="antenna"></div>
149+
150+
<div class="head">
151+
<div class="eyes">
152+
<div class="eye"></div>
153+
<div class="eye"></div>
154+
</div>
155+
<div class="mouth"></div>
156+
</div>
157+
158+
<div class="arms">
159+
<div class="arm arm-left">
160+
<div class="hand"></div>
161+
</div>
162+
<div class="arm arm-right">
163+
<div class="hand"></div>
164+
</div>
165+
</div>
166+
167+
<div class="body">
168+
<div class="chest">
169+
<div class="button"></div>
170+
<div class="button"></div>
171+
<div class="button"></div>
172+
</div>
173+
</div>
174+
175+
<div class="legs">
176+
<div class="leg">
177+
<div class="foot"></div>
178+
</div>
179+
<div class="leg">
180+
<div class="foot"></div>
181+
</div>
182+
</div>
183+
</div>
184+
</body>
185+
</html>

‎Robot/Robot.png‎

469 KB
Loading

0 commit comments

Comments
 (0)