Skip to content

Commit bec6fb5

Browse files
CodeTBArchiveCodeTBArchive
committed
first-commit
0 parents commit bec6fb5

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎images/unnamed.png‎

59.8 KB
Loading

‎index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Traffic Light Project</title>
6+
<meta name="description" content="The HTML5 Herald">
7+
<meta name="sachindu" content="SitePoint">
8+
<link rel='stylesheet' href='./style.css'>
9+
</head>
10+
<body>
11+
<div class='container'>
12+
<div class='traffic-lights'>
13+
<div class='inside-traffic'>
14+
<div class='red'></div>
15+
<div class='yellow'></div>
16+
<div class='green'></div>
17+
</div>
18+
</div>
19+
<div class='massage'>
20+
<h1 class='one'>Stop !</h1>
21+
<h1 class='two'>Wait !</h1>
22+
<h1 class='three'>Go !</h1>
23+
</div>
24+
<div class='car'>
25+
<img class='image' src='./images/unnamed.png' alt='car'>
26+
</div>
27+
</div>
28+
29+
30+
</body>
31+
</html>

‎style.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
* {
2+
box-sizing:border-box;
3+
overflow:hidden;
4+
}
5+
.inside-traffic {
6+
margin:5px 0 0 10px;
7+
width:120px;
8+
height:380px;
9+
background:#000;
10+
border-radius:20px;
11+
}
12+
.inside-traffic .red , .inside-traffic .yellow , .inside-traffic .green {
13+
width:100px;
14+
height:100px;
15+
border:4px solid #000;
16+
border-radius:50%;
17+
background:#fff;
18+
}
19+
.red {
20+
margin:20px 10px 20px 10px;
21+
animation-name:traffic-red;
22+
animation-delay:1s;
23+
animation-duration:4s;
24+
}
25+
@keyframes traffic-red {
26+
0%,100%{
27+
background:red;
28+
}
29+
}
30+
.yellow {
31+
margin:10px 10px 20px 10px;
32+
animation-name:traffic-yellow;
33+
animation-delay:5s;
34+
animation-duration:2s;
35+
}
36+
@keyframes traffic-yellow {
37+
0%,100% {
38+
background:yellow;
39+
}
40+
}
41+
.green {
42+
margin:10px 10px 20px 10px;
43+
animation-name:traffic-green;
44+
animation-delay:7s;
45+
animation-duration:8s;
46+
}
47+
@keyframes traffic-green {
48+
0%,100% {
49+
background:green;
50+
}
51+
}
52+
.massage .one {
53+
color:#fff;
54+
position:absolute;
55+
top:20px;
56+
right:600px;
57+
font-size:50px;
58+
animation-name:massage-animation-1;
59+
animation-delay:1s;
60+
animation-duration:4s;
61+
font-family:courier;
62+
}
63+
@keyframes massage-animation-1 {
64+
0%,99% {
65+
color:red
66+
}
67+
}
68+
.massage .two {
69+
color:#fff;
70+
position:absolute;
71+
top:20px;
72+
right:400px;
73+
font-size:50px;
74+
animation-name:massage-animation-2;
75+
animation-delay:5s;
76+
animation-duration:2s;
77+
font-family:courier;
78+
}
79+
@keyframes massage-animation-2 {
80+
0%,99% {
81+
color:yellow;
82+
}
83+
}
84+
.massage .three {
85+
color:#fff;
86+
position:absolute;
87+
top:20px;
88+
right:300px;
89+
font-size:50px;
90+
animation-name:massage-animation-3;
91+
animation-delay:7s;
92+
animation-duration:8s;
93+
font-family:courier;
94+
}
95+
@keyframes massage-animation-3 {
96+
0%,99% {
97+
color:green;
98+
}
99+
}
100+
/**/
101+
.car .image {
102+
width:12%;
103+
position:relative;
104+
animation-name:car-drive;
105+
animation-delay:7s;
106+
animation-duration:3s;
107+
animation-iteration-count:3;
108+
}
109+
@keyframes car-drive {
110+
0% {
111+
left:0;
112+
}
113+
100% {
114+
left:1000px;
115+
}
116+
}

0 commit comments

Comments
 (0)