Skip to content

Commit 5321389

Browse files
sahilataharsahilatahar
committed
React Logo
1 parent 914b168 commit 5321389

File tree

3 files changed

+151
-2
lines changed

3 files changed

+151
-2
lines changed

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,9 @@ https://user-images.githubusercontent.com/100127570/228227870-ddec4d9b-bfe4-4d0d
112112

113113
https://user-images.githubusercontent.com/100127570/230267601-a17ce84e-7979-4fed-bb20-9adb25d29d9b.mp4
114114

115-
116115
## (23) Image Frame
117116

118-
<img src="screenshots/image_frame.png">
117+
<img src="screenshots/image_frame.png">
118+
119+
## (24) React Logo
120+

‎React Logo/index.html

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

‎React Logo/style.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
:root {
2+
--logo-color: #61dafb;
3+
--bg-color: #222222;
4+
}
5+
6+
* {
7+
padding: 0;
8+
margin: 0;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
height: 100vh;
14+
display: grid;
15+
place-items: center;
16+
background-color: var(--bg-color);
17+
overflow: hidden;
18+
}
19+
20+
.container {
21+
width: 500px;
22+
height: 500px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
animation: rotateLogo 10s linear infinite;
27+
-webkit-animation: rotateLogo 10s linear infinite;
28+
-o-animation: rotateLogo 10s linear infinite;
29+
-moz-animation: rotateLogo 10s linear infinite;
30+
-ms-animation: rotateLogo 10s linear infinite;
31+
}
32+
33+
34+
.react_logo {
35+
--border-width: 15px;
36+
width: 100%;
37+
height: 40%;
38+
border: var(--border-width) solid var(--logo-color);
39+
border-radius: 50%;
40+
transform: rotate(180deg);
41+
position: relative;
42+
}
43+
44+
.react_logo::before {
45+
content: '';
46+
position: absolute;
47+
top: calc(-1*var(--border-width));
48+
left: calc(-1*var(--border-width));
49+
width: 100%;
50+
height: 100%;
51+
border: var(--border-width) solid var(--logo-color);
52+
border-radius: 50%;
53+
transform: rotate(120deg);
54+
}
55+
56+
.react_logo::after {
57+
content: '';
58+
position: absolute;
59+
top: calc(-1*var(--border-width));
60+
left: calc(-1*var(--border-width));
61+
width: 100%;
62+
height: 100%;
63+
border: var(--border-width) solid var(--logo-color);
64+
border-radius: 50%;
65+
transform: rotate(240deg);
66+
}
67+
68+
.circle {
69+
width: 18%;
70+
height: 50%;
71+
border-radius: 50%;
72+
position: absolute;
73+
top: 50%;
74+
left: 50%;
75+
transform: translate(-50%, -50%);
76+
background-color: var(--logo-color);
77+
}
78+
79+
@-webkit-keyframes rotateLogo {
80+
0% {
81+
transform: rotate(0deg);
82+
}
83+
84+
100% {
85+
transform: rotate(360deg);
86+
}
87+
}
88+
89+
@-moz-keyframes rotateLogo {
90+
0% {
91+
transform: rotate(0deg);
92+
}
93+
94+
100% {
95+
transform: rotate(360deg);
96+
}
97+
}
98+
99+
@-ms-keyframes rotateLogo {
100+
0% {
101+
transform: rotate(0deg);
102+
}
103+
104+
100% {
105+
transform: rotate(360deg);
106+
}
107+
}
108+
109+
@-o-keyframes rotateLogo {
110+
0% {
111+
transform: rotate(0deg);
112+
}
113+
114+
100% {
115+
transform: rotate(360deg);
116+
}
117+
}
118+
119+
@keyframes rotateLogo {
120+
0% {
121+
transform: rotate(0deg);
122+
}
123+
124+
100% {
125+
transform: rotate(360deg);
126+
}
127+
}

0 commit comments

Comments
 (0)