diff --git a/rough.html b/rough.html
index 18b8578..de6207d 100644
--- a/rough.html
+++ b/rough.html
@@ -19,38 +19,35 @@
display: flex;
justify-content: center;
align-items: center;
+ background-color: #000;
}
#img {
width: 100%;
- height: 100%;
+
+ position: absolute;
}
#video-box-container {
/* background-image: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png"); */
width: 110vw;
-
height: 100vh;
-
z-index: -1;
display: flex;
justify-content: center;
- align-items: center;
- background: linear-gradient(rgb(80, 81, 82), rgb(15, 15, 15)); */
-
-
+ align-items: center;
}
#video-box {
- width: 72vw;
- height: 41vw;
- z-index: -1;
- margin: 0vw 1vw 2.5vw 0vw;
+
+ width: 75vw;
+ height: 42vw;
+ margin: 0vw 1vw 3.5vw 0vw;
display: flex;
background-color: rgb(223, 212, 166);
background-size: cover;
position: absolute;
-
+ z-index: -1;
background-image: url("https://imgs.search.brave.com/5fjjllNhqSPA30th1FUGfD8A7QV2gr9FHy89CRD8M70/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aW1l/c25leHQuY29tL2Nv/bnRlbnQvaW1hZ2Vz/L3dwLWNvbnRlbnQv/dXBsb2Fkcy8yMDIw/LzA0L01pcnphcHVy/LmpwZw");
- border: 2px solid rgb(99, 97, 97);
+ border: 2px solid rgb(15, 15, 15);
border-bottom: 1vw solid rgb(99,97,97);
}
#icon-container {
@@ -62,24 +59,19 @@
box-shadow: inset 10px 10px 150px 0px black;
background-color: transparent;
animation: colorNav ;
- /* overflow: hidden; */
- /* background-color: greenyellow; */
}
#icon {
width: 100%;
height: 100%;
margin-left: 1%;
- /* padding: 50px 0px; */
display: flex;
font-size: 12px;
justify-content: space-around;
align-items: center;
flex-direction: column;
- color: white;
-
+ color: white;
background-color: rgb(51, 50, 50);
animation : navbar 5s linear infinite alternate ;
- /* animation-delay: 10s; */
transition: transform 1s;
overflow: hidden;
}
@@ -110,9 +102,7 @@
width: 0%;
}
}
- #icon fa-tv-retro {
- border: 2px solid green;
- }
+
#navbarHomeBox {
width: 100%;
height: 20%;
@@ -136,7 +126,6 @@
#img-slider {
width: 70%;
height: 100%;
- /* z-index: -1; */
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -178,12 +167,8 @@
font-size: 2vw;
margin-left: 0.2vw;
color: white;
- /* position: absolute; */
justify-content: left;
}
-
-
-
#downImgContainer-container {
width: 100%;
@@ -194,22 +179,19 @@
place-items: center;
overflow: hidden;
align-content: flex-start;
- /* align-items: end; */
+
position: absolute;
bottom: 0;
- /* padding: 1%; */
+
}
.downImgContainer
- {
-
+ {
display: flex;
- width: calc(8% *20);
-
- animation: stepScroll 10s linear infinite;
-
+ width: calc(8% *20);
+ animation: stepScroll 10s linear infinite;
}
@keyframes stepScroll {
0% {
@@ -218,30 +200,26 @@
} 15% {
margin-left: 0%;
} 20% {
- margin-left: -11%;
+ margin-left: -10%;
} 34% {
- margin-left: -11%;
+ margin-left: -10%;
} 40% {
- margin-left: -22.2%;
+ margin-left: -20%;
} 55% {
- margin-left: -22.2%;
+ margin-left: -20%;
} 60% {
- margin-left: -33.5%;
+ margin-left: -30%;
} 75% {
- margin-left: -33.5%;
+ margin-left: -30%;
} 80% {
- margin-left: -44%;
+ margin-left: -40%;
} 100% {
- margin-left: -44%;
+ margin-left: -40%;
}
- }
-
-
- .Small-img {
-
+ }
+ .Small-img {
width: 12vw;
- height: 45%;
-
+ height: 45%;
padding: 0.1vw;
display: flex;
align-items: center;
@@ -249,12 +227,11 @@
}
.img-s {
-
- width: 100%;
-
+ width: 100%;
height: 100%;
transition: transform 1s;
}
+
#text {
width: 100%;
height: 100%;
@@ -263,52 +240,33 @@
color: white;
font-weight: 900;
display: flex;
- /
-
- /* background-color: rgb(0, 255, 0); */
-
+
}
#imgBorder {
width: 12.1vw;
height: 8.2vw;
z-index: 2;
margin-right: 43.8vw;
- /* margin-bottom: 0.10vw; */
- position: absolute;
- /* position: fixed; */
+ margin-bottom: 1vw;
+ position: absolute;
border: 0.2vw solid rgb(244, 243, 248);
border-radius: 0.2vw;
- /* margin-top: 1.6vw; */
- /* margin: 0vw 1vw 2.5vw 0vw; */
-
-
-
-
-
-
-
+
}
span {
display: grid;
- /* background-color: #ffd700; */
- margin-left: 7.9vw;
-
+ margin-left: 9.4vw;
animation: spanUP 10s linear infinite;
}
@keyframes spanUP {
0% {
margin-top: 8%;
-
} 5% {
margin-top: 8%;
-
} 10% {
margin-top: 0%;
-
+ }
}
-
- }
-
#mouse {
width: 1vw;
height: 1vw;
@@ -357,33 +315,24 @@
font-family: Georgia, 'Times New Roman', Times, serif;
animation: textChange 10s linear infinite;;
}
- @keyframes textChange {
- 0% {
- margin
- }
-
- }
-
+
- 
-
-
-
-
+
+
+
+
+
-
-
+
@@ -410,23 +359,15 @@
The movie Netflix
Netflix is one of the w
-
+
-
-
+
+
-
-
-
-
-
-
-
-
@@ -457,12 +398,6 @@ The movie Netflix
Netflix is one of the w
});
- let TextHead = document.querySelector("#bigImgText")
- let head = document.querySelector(".head")
- let para = document.querySelector(".para")
-
-
-
- 
+ 
-
-
+