Skip to content

Commit 91e1bcb

Browse files
Akash-Gupta-gitAkash-Gupta-git
authored
rough.html
1 parent 7a26c32 commit 91e1bcb

File tree

1 file changed

+47
-112
lines changed

1 file changed

+47
-112
lines changed

‎rough.html

Lines changed: 47 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -19,38 +19,35 @@
1919
display: flex;
2020
justify-content: center;
2121
align-items: center;
22+
background-color: #000;
2223

2324
}
2425
#img {
2526
width: 100%;
26-
height: 100%;
27+
28+
position: absolute;
2729
}
2830
#video-box-container {
2931
/* background-image: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png"); */
3032
width: 110vw;
31-
3233
height: 100vh;
33-
3434
z-index: -1;
3535
display: flex;
3636
justify-content: center;
37-
align-items: center;
38-
background: linear-gradient(rgb(80, 81, 82), rgb(15, 15, 15)); */
39-
40-
37+
align-items: center;
4138
}
4239
#video-box {
43-
width: 72vw;
44-
height: 41vw;
45-
z-index: -1;
46-
margin: 0vw 1vw 2.5vw 0vw;
40+
41+
width: 75vw;
42+
height: 42vw;
43+
margin: 0vw 1vw 3.5vw 0vw;
4744
display: flex;
4845
background-color: rgb(223, 212, 166);
4946
background-size: cover;
5047
position: absolute;
51-
48+
z-index: -1;
5249
background-image: url("https://imgs.search.brave.com/5fjjllNhqSPA30th1FUGfD8A7QV2gr9FHy89CRD8M70/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L01pcnphcHVy/LmpwZw");
53-
border: 2px solid rgb(99, 97, 97);
50+
border: 2px solid rgb(15, 15, 15);
5451
border-bottom: 1vw solid rgb(99,97,97);
5552
}
5653
#icon-container {
@@ -62,24 +59,19 @@
6259
box-shadow: inset 10px 10px 150px 0px black;
6360
background-color: transparent;
6461
animation: colorNav ;
65-
/* overflow: hidden; */
66-
/* background-color: greenyellow; */
6762
}
6863
#icon {
6964
width: 100%;
7065
height: 100%;
7166
margin-left: 1%;
72-
/* padding: 50px 0px; */
7367
display: flex;
7468
font-size: 12px;
7569
justify-content: space-around;
7670
align-items: center;
7771
flex-direction: column;
78-
color: white;
79-
72+
color: white;
8073
background-color: rgb(51, 50, 50);
8174
animation : navbar 5s linear infinite alternate ;
82-
/* animation-delay: 10s; */
8375
transition: transform 1s;
8476
overflow: hidden;
8577
}
@@ -110,9 +102,7 @@
110102
width: 0%;
111103
}
112104
}
113-
#icon fa-tv-retro {
114-
border: 2px solid green;
115-
}
105+
116106
#navbarHomeBox {
117107
width: 100%;
118108
height: 20%;
@@ -136,7 +126,6 @@
136126
#img-slider {
137127
width: 70%;
138128
height: 100%;
139-
/* z-index: -1; */
140129
background-color: transparent;
141130
background-repeat: no-repeat;
142131
background-size: 100% 100%;
@@ -178,12 +167,8 @@
178167
font-size: 2vw;
179168
margin-left: 0.2vw;
180169
color: white;
181-
/* position: absolute; */
182170
justify-content: left;
183171
}
184-
185-
186-
187172
#downImgContainer-container {
188173

189174
width: 100%;
@@ -194,22 +179,19 @@
194179
place-items: center;
195180
overflow: hidden;
196181
align-content: flex-start;
197-
/* align-items: end; */
182+
198183

199184

200185
position: absolute;
201186
bottom: 0;
202-
/* padding: 1%; */
187+
203188

204189
}
205190
.downImgContainer
206-
{
207-
191+
{
208192
display: flex;
209-
width: calc(8% *20);
210-
211-
animation: stepScroll 10s linear infinite;
212-
193+
width: calc(8% *20);
194+
animation: stepScroll 10s linear infinite;
213195
}
214196
@keyframes stepScroll {
215197
0% {
@@ -218,43 +200,38 @@
218200
} 15% {
219201
margin-left: 0%;
220202
} 20% {
221-
margin-left: -11%;
203+
margin-left: -10%;
222204
} 34% {
223-
margin-left: -11%;
205+
margin-left: -10%;
224206
} 40% {
225-
margin-left: -22.2%;
207+
margin-left: -20%;
226208
} 55% {
227-
margin-left: -22.2%;
209+
margin-left: -20%;
228210
} 60% {
229-
margin-left: -33.5%;
211+
margin-left: -30%;
230212
} 75% {
231-
margin-left: -33.5%;
213+
margin-left: -30%;
232214
} 80% {
233-
margin-left: -44%;
215+
margin-left: -40%;
234216
} 100% {
235-
margin-left: -44%;
217+
margin-left: -40%;
236218
}
237-
}
238-
239-
240-
.Small-img {
241-
219+
}
220+
.Small-img {
242221
width: 12vw;
243-
height: 45%;
244-
222+
height: 45%;
245223
padding: 0.1vw;
246224
display: flex;
247225
align-items: center;
248226
perspective: 100px;
249227

250228
}
251229
.img-s {
252-
253-
width: 100%;
254-
230+
width: 100%;
255231
height: 100%;
256232
transition: transform 1s;
257233
}
234+
258235
#text {
259236
width: 100%;
260237
height: 100%;
@@ -263,52 +240,33 @@
263240
color: white;
264241
font-weight: 900;
265242
display: flex;
266-
/
267-
268-
/* background-color: rgb(0, 255, 0); */
269-
243+
270244
}
271245
#imgBorder {
272246
width: 12.1vw;
273247
height: 8.2vw;
274248
z-index: 2;
275249
margin-right: 43.8vw;
276-
/* margin-bottom: 0.10vw; */
277-
position: absolute;
278-
/* position: fixed; */
250+
margin-bottom: 1vw;
251+
position: absolute;
279252
border: 0.2vw solid rgb(244, 243, 248);
280253
border-radius: 0.2vw;
281-
/* margin-top: 1.6vw; */
282-
/* margin: 0vw 1vw 2.5vw 0vw; */
283-
284-
285-
286-
287-
288-
289-
254+
290255
}
291256
span {
292257
display: grid;
293-
/* background-color: #ffd700; */
294-
margin-left: 7.9vw;
295-
258+
margin-left: 9.4vw;
296259
animation: spanUP 10s linear infinite;
297260
}
298261
@keyframes spanUP {
299262
0% {
300263
margin-top: 8%;
301-
302264
} 5% {
303265
margin-top: 8%;
304-
305266
} 10% {
306267
margin-top: 0%;
307-
268+
}
308269
}
309-
310-
}
311-
312270
#mouse {
313271
width: 1vw;
314272
height: 1vw;
@@ -357,33 +315,24 @@
357315
font-family: Georgia, 'Times New Roman', Times, serif;
358316
animation: textChange 10s linear infinite;;
359317
}
360-
@keyframes textChange {
361-
0% {
362-
margin
363-
}
364-
365-
}
366-
318+
367319

368320

369321
</style>
370322
</head>
371323
<body> <div id="mouse"></div>
372-
<img id="img" src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png"
373324
<div id="video-box-container">
374-
375-
376-
377-
325+
<img id="img" src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png">
326+
327+
328+
329+
378330
<div id="video-box">
379331
<div id="icon-container">
380332
<div id="icon-container icon-container-copy"></div>
381-
<div id="icon">
382-
333+
<div id="icon">
383334
<i class="fa-solid fa-magnifying-glass"></i>
384-
<div id="navbarHomeBox"><i class="fa-solid fa-house"></i></div>
385-
386-
335+
<div id="navbarHomeBox"><i class="fa-solid fa-house"></i></div>
387336
<i class="fa-solid fa-clapperboard"></i>
388337
<i class="fa-solid fa-calendar-days"></i>
389338
</div>
@@ -410,23 +359,15 @@ <h1 class="head">The movie Netflix</h1> <p class="para"> Netflix is one of the w
410359
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/5fjjllNhqSPA30th1FUGfD8A7QV2gr9FHy89CRD8M70/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L01pcnphcHVy/LmpwZw"></div>
411360
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/_gg7bMyPmD_QYFLpt6zXEiQYMj_1DlSrTef4Lmo207E/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly93cC5z/Y29vcHdob29wLmNv/bS93cC1jb250ZW50/L3VwbG9hZHMvMjAx/OS8wNS81Y2M0M2Iw/YWQwYWEzODY3NmFh/OWUyNWRfOGZjOTEy/NmQtYTcyMS00M2My/LWJhZmQtMDZmZGRh/MjEyMjAwLmpwZw"></div>
412361
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/tF2-COIT3sc5kaNDTYmY8kPXoPU9YFQ6J_ZXEho7nfE/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L1NlbGVjdGlv/bi1EYXktd2ViLXNl/cmllcy1pbmRpYS5q/cGc"></div>
413-
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/XUr0NrTiyqQMcp-OzbtK_ifyItpIL8HdeWxH08mzm1w/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMuaW5kaWFuZXhw/cmVzcy5jb20vMjAy/MC8xMi9SZXdpbmQt/MjAyMC5qcGc_dz02/NDA"></div>
362+
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/4pV4ekk6APBL4QatFGhYli4C4lXC__ryaaWozUm_l6A/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9zdGF0/aWMuamF2YXRwb2lu/dC5jb20vYmVzdC9p/bWFnZXMvYmVzdC13/ZWItc2VyaWVzLW9u/LW5ldGZsaXg1LnBu/Zw"></div>
414363
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/hzQ4LIqTmtGKDAB2xEyaukKU7-N9CVhtuMrYIhU26Gk/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L01hZGUtaW4t/SGVhdmVuLmpwZw"></div>
415364
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/r_Nw0xyviPl5Ypi65KEvA2SeVXFtN_h0uRKvMrbK14k/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L1N0YXItQm95/ei13ZWItc2VyaWVz/LWhpbmRpLmpwZw"></div>
416-
417-
365+
<div onclick="slideImage" class="Small-img"><img class="img-s" src="https://imgs.search.brave.com/XUr0NrTiyqQMcp-OzbtK_ifyItpIL8HdeWxH08mzm1w/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMuaW5kaWFuZXhw/cmVzcy5jb20vMjAy/MC8xMi9SZXdpbmQt/MjAyMC5qcGc_dz02/NDA"></div>
366+
418367
</div>
419368
</span>
420-
421369
</div>
422-
423-
424370
</div>
425-
426-
427-
428-
429-
430371
</div>
431372

432373

@@ -457,12 +398,6 @@ <h1 class="head">The movie Netflix</h1> <p class="para"> Netflix is one of the w
457398
});
458399

459400

460-
let TextHead = document.querySelector("#bigImgText")
461-
let head = document.querySelector(".head")
462-
let para = document.querySelector(".para")
463-
464-
465-
466401

467402

468403

0 commit comments

Comments
 (0)