Skip to content

Commit ca1bff0

Browse files
aayush105aayush105
authored
Merge pull request #1004 from pranavpanmand/add-netflix-logo
🅽 Add Netflix Logo Animation Page (HTML & CSS Only) — Fixes #1003
2 parents ff1198a + a161a2a commit ca1bff0

File tree

3 files changed

+111
-0
lines changed

3 files changed

+111
-0
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ <h1>You Dont Need JavaScript</h1>
304304
<a href="./SolarSystem/index.html">Solar System</a>
305305
<a href="./Parallax_Effect/index.html">Parallax Portfolio</a>
306306
<a href="./Luffy Straw Hat/index.html">Luffy Straw Hat</a>
307+
<a href="./netflix-logo/index.html">Netflix Logo</a>
307308
</td>
308309
</tr>
309310

‎netflix-logo/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
<!-- CSS Link -->
8+
<link rel="stylesheet" href="style.css">
9+
<title>Netflix Logo</title>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
<div class="first-line-of-n-letter"></div>
15+
<div class="second-line-of-n-letter"></div>
16+
<div class="third-line-of-n-letter"></div>
17+
<div class="rectangular-part-to-cover-upper-part-of-the-logo"></div>
18+
<div class="taller-part-to-cover-left-part-of-the-logo"></div>
19+
<div class="circle-part-to-cover-lower-part-of-the-logo"></div>
20+
</div>
21+
22+
<div class="text-logo">NETFLIX</div>
23+
24+
</body>
25+
</html>

‎netflix-logo/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
::-webkit-scrollbar{
2+
width: 0;
3+
height: 0;
4+
}
5+
body{
6+
background-color: #251f1f;
7+
}
8+
.container{
9+
width: 300px;
10+
height: 300px;
11+
box-shadow: 0 0 100px red, 0 1px 0 red, 1px 0 0 red;
12+
border-radius: 90px;
13+
position: relative;
14+
top: 17vh;
15+
left: 14vw;
16+
}
17+
.first-line-of-n-letter{
18+
width: 40px;
19+
height: 230px;
20+
background-color: #B00710;
21+
display: inline-block;
22+
position: relative;
23+
top: -5px;
24+
left: 5.8em;
25+
}
26+
.second-line-of-n-letter{
27+
width: 40px;
28+
height: 270px;
29+
background-color: #E50914;
30+
display: inline-block;
31+
position: relative;
32+
top: 13px;
33+
left: 5.5em;
34+
rotate: 341deg;
35+
z-index: 1;
36+
box-shadow: 0 0 10px black;
37+
}
38+
.third-line-of-n-letter{
39+
width: 40px;
40+
height: 230px;
41+
background-color: #B00710;
42+
display: inline-block;
43+
position: relative;
44+
top: -5px;
45+
left: 5.4em;
46+
}
47+
.rectangular-part-to-cover-upper-part-of-the-logo{
48+
width: 150px;
49+
height: 20px;
50+
border: 1px solid #251f1f;
51+
position: relative;
52+
bottom: 260px;
53+
left: 76px;
54+
background-color: #251f1f;
55+
z-index: 1;
56+
}
57+
.taller-part-to-cover-left-part-of-the-logo{
58+
width: 50px;
59+
background-color: #251f1f;
60+
height: 230px;
61+
position: relative;
62+
bottom: 260px;
63+
left: 43px;
64+
z-index: 1;
65+
}
66+
.circle-part-to-cover-lower-part-of-the-logo{
67+
width: 150px;
68+
height: 20px;
69+
border-radius: 200%;
70+
border: 1px solid #251f1f;
71+
position: relative;
72+
bottom: 265px;
73+
left: 76px;
74+
z-index: 1;
75+
background-color: #251f1f;
76+
}
77+
.text-logo{
78+
font-weight: bold;
79+
font-family: sans-serif;
80+
font-size: 100px;
81+
color: white;
82+
position: relative;
83+
top: -100px;
84+
left: 470px;
85+
}

0 commit comments

Comments
 (0)