Skip to content

Commit 92e3218

Browse files
rishav30shrishav30sh
authored
robot-final-v1
1 parent 2db0d71 commit 92e3218

File tree

2 files changed

+211
-0
lines changed

2 files changed

+211
-0
lines changed

‎index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
RobotPage
6+
</title>
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Robot Friend</h1>
11+
12+
13+
<div class="robot">
14+
<div class='android'>
15+
<div class="head">
16+
<div class="left-eye"></div>
17+
<div class="right-eye"></div>
18+
<div class="mouth"> </div>
19+
</div>
20+
<div class='upper-body'>
21+
<div class='torso'>
22+
<div class='left-arm'></div>
23+
<div class='right-arm'></div>
24+
</div>
25+
</div>
26+
27+
<div class="lower-body">
28+
<div class="left-leg"></div>
29+
<div class="right-leg"></div>
30+
</div>
31+
32+
</div>
33+
34+
</div>
35+
</div>
36+
37+
38+
</body>
39+
</html>

‎style.css

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
h1{
2+
3+
text-align: center;
4+
}
5+
6+
.robot{
7+
display: flex;
8+
justify-content: center;
9+
flex-wrap: wrap;
10+
}
11+
12+
13+
.head, .left-arm, .right-arm, .torso, .left-leg, .right-leg{
14+
background-color: #5f93e8;
15+
}
16+
17+
.head
18+
{
19+
display: flex;
20+
flex-wrap: wrap;
21+
width: 200px;
22+
height: 200px;
23+
margin: 0px auto;
24+
background-color: #5f93e8;
25+
border-top-left-radius: 100px;
26+
border-top-right-radius: 100px;
27+
margin-bottom: 10px;
28+
transition: 2s;
29+
}
30+
31+
32+
.mouth{
33+
34+
width: 80px;
35+
height: 10px;
36+
border-radius :30px 30px 0 0;
37+
border-bottom-left-radius : 15px;
38+
position: relative;
39+
background-color:white;
40+
top:150px;
41+
border-bottom: 4px solid black;
42+
transition: 2s ;
43+
44+
45+
}
46+
47+
.left-eye, .right-eye{
48+
49+
display: flex;
50+
width: 30px;
51+
height: 30px;
52+
border-radius: 15px;
53+
position: relative;
54+
background-color:white;
55+
top:80px;
56+
transition: 2s;
57+
}
58+
59+
60+
.left-arm, .right-arm{
61+
62+
width:40px;
63+
height: 150px;
64+
position: relative;
65+
border-radius: 20px 20px 20px 20px;
66+
transition: transform 2s;
67+
68+
}
69+
70+
71+
.left-leg, .right-leg{
72+
width:40px;
73+
height:120px;
74+
border-radius: 40px 40px 40px 40px;
75+
transition: transform 2s;
76+
77+
}
78+
79+
80+
81+
82+
.left-eye{
83+
84+
left:25px;
85+
86+
87+
}
88+
89+
.right-eye{
90+
left:115px;
91+
}
92+
93+
.upper-body{
94+
height: 180px;
95+
}
96+
97+
.torso{
98+
99+
display: flex;
100+
width:200px;
101+
height:200px;
102+
border-radius: 0px 0px 30px 30px;
103+
}
104+
105+
106+
.left-arm{
107+
right:60px;
108+
109+
}
110+
111+
112+
.right-arm{
113+
left:180px;
114+
}
115+
116+
117+
.lower-body{
118+
display: inline-flex;
119+
}
120+
121+
122+
.left-leg{
123+
margin-left: 40px;
124+
}
125+
126+
.right-leg{
127+
flex-wrap: nowrap;
128+
margin-left: 50px;
129+
}
130+
131+
.left-leg:hover{
132+
transform: rotate(30deg);
133+
background-color: orange;
134+
135+
}
136+
137+
.right-leg:hover{
138+
transform: rotate(-30deg);
139+
background-color: orange;
140+
141+
}
142+
143+
.left-arm:hover{
144+
transform: rotate(90deg);
145+
background-color: orange;
146+
147+
}
148+
149+
.right-arm:hover{
150+
transform: rotate(-90deg);
151+
background-color: orange;
152+
153+
}
154+
155+
.mouth:hover {
156+
border-radius :0 0 15px 15px;
157+
158+
159+
}
160+
161+
.head:hover{
162+
height: 250px;
163+
background-color: orange;
164+
}
165+
166+
.left-eye:hover{
167+
background-color: red;
168+
}
169+
170+
.right-eye:hover{
171+
background-color: red;
172+
}

0 commit comments

Comments
 (0)