Skip to content

Commit 79e9add

Browse files
RAHULBAWA777RAHULBAWA777
committed
Web blinkers added with readme
1 parent 81d0f73 commit 79e9add

File tree

3 files changed

+134
-0
lines changed

3 files changed

+134
-0
lines changed

‎web blinkers/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# web blinkers
3+
4+
## 🚀 About Me
5+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
6+
7+
8+
## Run Locally
9+
10+
Clone the project
11+
12+
13+
Start the live server
14+
15+
16+
## Used By
17+
18+
This project is used by the following companies:
19+
20+
-https://github.com/Dezenix/frontend-html-css-js

‎web blinkers/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>WEB Blinkers</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<main class="container">
12+
<div class="strip">
13+
<div class="dots"></div>
14+
<div class="dots"></div>
15+
<div class="dots"></div>
16+
<div class="dots"></div>
17+
<div class="dots"></div>
18+
</div>
19+
</main>
20+
</body>
21+
</html>

‎web blinkers/style.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: #000;
9+
}
10+
11+
.container {
12+
width: 100%;
13+
height: 100vh;
14+
display: flex;
15+
align-items: center;
16+
justify-content: space-around;
17+
}
18+
19+
.strip {
20+
width: 60rem;
21+
display: flex;
22+
justify-content: space-around;
23+
align-items: center;
24+
}
25+
26+
.dots {
27+
width: 5rem;
28+
height:5rem;
29+
border-radius: 50%;
30+
position: relative;
31+
}
32+
33+
.dots:nth-child(1) {
34+
background-color: blue;
35+
}
36+
.dots:nth-child(2) {
37+
background-color: green;
38+
}
39+
.dots:nth-child(3) {
40+
background-color: yellow;
41+
}
42+
.dots:nth-child(4) {
43+
background-color: red;
44+
}
45+
.dots:nth-child(5) {
46+
background-color: pink;
47+
}
48+
49+
.dots::before {
50+
content: "";
51+
width: 100%;
52+
height: 100%;
53+
position: absolute;
54+
border-radius: 50%;
55+
opacity: 0.5;
56+
animation: glow 3s ease-out infinite;
57+
}
58+
59+
.dots:nth-child(1)::before {
60+
background-color: blue;
61+
}
62+
.dots:nth-child(2)::before {
63+
background-color: green;
64+
animation-delay: 0.2s;
65+
}
66+
.dots:nth-child(3)::before {
67+
background-color: yellow;
68+
animation-delay: 0.4s;
69+
}
70+
.dots:nth-child(4)::before {
71+
background-color: red;
72+
animation-delay: 0.6s;
73+
}
74+
.dots:nth-child(5)::before {
75+
background-color: pink;
76+
animation-delay: 0.8s;
77+
}
78+
79+
@keyframes glow {
80+
0% {
81+
transform: scale(1);
82+
}
83+
84+
50%,
85+
75% {
86+
transform: scale(2.5);
87+
}
88+
89+
80%,
90+
100% {
91+
opacity: 0;
92+
}
93+
}

0 commit comments

Comments
 (0)