Skip to content

Commit 50f2617

Browse files
deep100xdeep100x
committed
Created Netflix UI
1 parent ebf1f02 commit 50f2617

File tree

2 files changed

+255
-2
lines changed

2 files changed

+255
-2
lines changed

‎projects/netflix/index.html

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,78 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>NETFLIX - Mr. KOTHARI</title>
6+
<title>Netflix Clone</title>
77
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
11+
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
12+
crossorigin="anonymous"
13+
/>
814
<link rel="stylesheet" href="style.css" />
15+
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
916
</head>
1017
<body>
11-
<script src="./script.js"></script>
18+
<header></header>
19+
<main>
20+
<div class="featured">
21+
<h2>Title</h2>
22+
<div class="featured__buttons">
23+
<button class="button__play"><i class="fas fa-play"></i>Play</button>
24+
<button>My List</button>
25+
</div>
26+
<div class="featured__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique magna magna, vit...</div>
27+
</div>
28+
<div class="netflixOriginals">
29+
<div class="original__header">
30+
<h2>NETFLIX ORIGINALS</h2>
31+
</div>
32+
<div class="original__movies">
33+
<!-- Orignal Movies List Here -->
34+
</div>
35+
</div>
36+
<div class="movies">
37+
<div class="movies__header">
38+
<h2>Wishlist</h2>
39+
</div>
40+
<div id="wishlist" class="movies__container"></div>
41+
<div class="movies__header">
42+
<h2>Trending Now</h2>
43+
</div>
44+
<div id="trending" class="movies__container">
45+
<!-- Trending Movies List Here -->
46+
</div>
47+
<div class="movies__header">
48+
<h2>Top Rated</h2>
49+
</div>
50+
<div id="top_rated" class="movies__container">
51+
<!-- Top Rated Movies List Here -->
52+
</div>
53+
</div>
54+
</main>
55+
<!-- Modal -->
56+
<div class="modal fade" id="trailerModal" tabindex="-1" role="dialog" aria-hidden="true">
57+
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
58+
<div class="modal-content">
59+
<div class="modal-header">
60+
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
61+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
62+
<span aria-hidden="true">&times;</span>
63+
</button>
64+
</div>
65+
<div class="modal-body">
66+
<span class="movieNotFound">Trailer Not Found</span>
67+
<iframe id="movieTrailer" height="400" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
73+
<script
74+
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
75+
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
76+
crossorigin="anonymous"
77+
></script>
78+
<script src="script.js"></script>
1279
</body>
1380
</html>

‎projects/netflix/style.css

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
body {
2+
background-color: #111;
3+
color: white;
4+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5+
margin: 0;
6+
}
7+
8+
.dropdown-container {
9+
position: absolute;
10+
top: 100%;
11+
right: 0;
12+
padding-top: 3px;
13+
display: none;
14+
}
15+
16+
.dropdown {
17+
background-color: black;
18+
padding: 8px;
19+
border-radius: 4px;
20+
width: 100px;
21+
}
22+
23+
.dropdown span {
24+
cursor: pointer;
25+
}
26+
27+
.original__movies {
28+
padding-top: 20px;
29+
padding-bottom: 20px;
30+
}
31+
32+
.profile:hover .dropdown-container {
33+
display: block;
34+
}
35+
36+
.original__movies,
37+
.movies__container {
38+
padding-left: 50px;
39+
display: flex;
40+
overflow-x: scroll;
41+
overflow: hidden;
42+
}
43+
44+
.original__movies::-webkit-scrollbar {
45+
display: none;
46+
}
47+
48+
.original__movies img {
49+
margin-right: 10px;
50+
height: 250px;
51+
width: auto;
52+
}
53+
54+
.original__movies img,
55+
.movies__container img {
56+
transition: all 0.2s ease-out;
57+
cursor: pointer;
58+
}
59+
60+
.original__movies img:hover,
61+
.movies__container img:hover {
62+
transform: scale(1.1);
63+
}
64+
65+
.movies__container img {
66+
margin-right: 10px;
67+
width: 200px;
68+
}
69+
70+
header {
71+
display: flex;
72+
justify-content: space-between;
73+
align-items: center;
74+
padding-left: 15px;
75+
padding-right: 15px;
76+
position: absolute;
77+
z-index: 100;
78+
top: 0;
79+
left: 0;
80+
right: 0;
81+
padding-top: 15px;
82+
}
83+
84+
.logo > img {
85+
width: 120px;
86+
}
87+
88+
.profile {
89+
position: relative;
90+
}
91+
92+
.profile > img {
93+
width: 40px;
94+
}
95+
96+
img {
97+
width: 100px;
98+
}
99+
100+
.featured {
101+
height: 400px;
102+
position: relative;
103+
background-image: url('https://image.tmdb.org/t/p/original//3lBDg3i6nn5R2NKFCJ6oKyUo2j5.jpg');
104+
background-size: cover;
105+
background-position: center;
106+
padding: 0 0 0 30px;
107+
display: flex;
108+
flex-direction: column;
109+
justify-content: center;
110+
}
111+
112+
.featured::after {
113+
content: '';
114+
position: absolute;
115+
bottom: 0;
116+
left: 0;
117+
right: 0;
118+
height: 7.4rem;
119+
background-image: linear-gradient(180deg,
120+
transparent,
121+
rgba(37, 37, 37, 0.61),
122+
#111);
123+
}
124+
125+
.netflixOriginals h2,
126+
.movies__header h2 {
127+
padding-left: 30px;
128+
}
129+
130+
.featured h2 {
131+
font-size: 50px;
132+
margin: 0;
133+
z-index: 10;
134+
}
135+
136+
.featured .featured__buttons {
137+
z-index: 10;
138+
}
139+
140+
.featured .featured__buttons button {
141+
font-size: 16px;
142+
color: white;
143+
background-color: rgba(109, 109, 110, 0.7);
144+
border: none;
145+
padding: 8px 24px;
146+
border-radius: 4px;
147+
}
148+
149+
.featured::before {
150+
content: '';
151+
position: absolute;
152+
top: 0;
153+
left: 0;
154+
right: 0;
155+
bottom: 0;
156+
background-color: rgba(0, 0, 0, 0.3);
157+
}
158+
159+
.featured .featured__buttons .button__play {
160+
background-color: white;
161+
color: black;
162+
}
163+
164+
.button__play i {
165+
margin-right: 6px;
166+
}
167+
168+
.featured .featured__description {
169+
max-width: 350px;
170+
font-weight: 400;
171+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
172+
z-index: 10;
173+
}
174+
175+
.modal-body iframe {
176+
width: 100%;
177+
}
178+
179+
.modal-body span {
180+
color: #333;
181+
width: 100%;
182+
display: flex;
183+
height: 60px;
184+
justify-content: center;
185+
align-items: center;
186+
}

0 commit comments

Comments
 (0)