Update style.css

[TheRidham]

• { margin: 0%; padding: 0%; box-sizing: border-box; font-family: SF PRO DISPLAY; } html, body { height: 100%; width: 100%; }

  main{

  position: relative; overflow: hidden; }

  page{

  position: relative; height: 100vh; width: 100vw; background-color: #000000;

  }

  page>nav{

  display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; height: 7vh; width: 50vw; position: absolute; top: 0%; left: 50%; transform: translateX(-50%); color: #fff; }

  page>nav>button{

  padding: 7px 20px; border-radius: 50px; border: none; background-color: #6496ed; }

  page>nav>h3{

  font-weight: 400; }

  page>video{

  height: 99%; width: 55%; object-fit: cover; position: relative; left: 50%; transform: translateX(-50%); }

  page-bottom{

  height: 20%; width: 20%; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; }

  page-bottom>h1{

  color:#dadada93; margin-bottom: 1vw; }

  newpage1{

  position: relative; height: 70vh; width: 1000vw; background-color: #000;

}

newpage1>h1{

font-size: 7vw;
color: #f5f5f7;
position: relative;
margin-left: 2%;
margin-right: 2%;
display: flex;
text-align: center;

}

newpage1>h2{

font-size: 4vw;
color: #f5f5f7;
position: relative;
margin-left: 4%;
margin-right: 2%;

}

page1{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000000;

}

page1>video{

  height: 110%;
  width: 100%;
  object-fit:contain;

}

page1>h1{

  font-size: 4vw;
  color: #fff;
  font-weight: 400;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

}

page2{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;

}

page2>video{

  height: 100%;
  width: 100%;
  object-fit: contain;

}

page2>h1{

  font-size: 4vw;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  color: #fff;
  font-weight: 400;

}

page3{

display: flex;
position: relative;
height: 80vh;
width: 100vw;
background-color: #000;

} .left3{ position: relative; height: 100%; width: 50%; } .left3>h1{ font-size: 2.3vw; color: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 10%; } .right3{ display: flex; align-items: start; justify-content: center; flex-direction: column; height: 100%; width: 50%; padding-left: 5vw; } .right3>h3{ font-size: 2vw; width: 80%; color: #d1d0d0d7; } .right3>button{ padding: 10px 20px; border: none; background-color: #ff823d; color: #fff; font-weight: 400; border-radius: 50px; font-size: 1.3vw; margin-top: 1.5vw; }

page4{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;

}

page4>video{

  height: 100%;
  width: 100%;
  object-fit: contain;

}

center-page4{

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: #fff;
  font-size: 2vw;

}

page5{

position: relative;
height: 100vh;
width: 100vw;
background-color: #fff;

}

page5>img{

width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

}

page5-upper{

height: 25%;
width: 35%;
position: absolute;
z-index: 9;
top: 5%;
left: 50%;
transform: translateX(-50%);

}

page5-upper>img{

position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 70%;

}

page5-upper-inner{

position: absolute;
bottom: 0%;
height: 60%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 80px; 
color: #ff823d;

}

page5-upper-inner>h3{

font-weight: 500;

}

page5>button{

position: absolute;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
padding: 15px 30px;
border: 1px solid #000;
font-weight: 500;
background-color: #fff;
border-radius: 50px;
font-size: 1.4vw;

}

page6{

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  height: 70vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page6>h3{

  margin-bottom: 1vw;
  font-size: 2vw;

}

page6>h1{

  margin-bottom: 1.5vw;
  font-size: 4vw;

}

page6>p{

  font-size: 1.2vw;
  width: 60%;
  font-weight: 700;
  color: #545454c9;

}

page7{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page7>canvas{

  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 99;

}

page8{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page8>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page8>h1>span{

  color: #000;

}

page9{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page9>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page9>h1>span{

  color: #000;

}

page10{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page10>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page10>h1>span{

  color: #000;

}

page11{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page11>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page11>h1>span{

  color: #000;

}

page12{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page12>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page12>h1>span{

  color: #000;

}

page13{

  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

}

page13>h1{

  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;

}

page13>h1>span{

  color: #000;

}

page14{

  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #fff;

} .left14{ height: 90%; width: 45%; position: relative; background-image: url(https://www.apple.com/v/apple-vision-pro/e/images/overview/design/glass_top__k3b8lzqd1l2m_large_2x.jpg); background-size: cover; } .right14{ height: 90%; width: 45%; position: relative; background-image: url(https://www.apple.com/v/apple-vision-pro/e/images/overview/design/glass_side__gm4agomrwl2e_large_2x.jpg); background-size: cover; }

page15{

  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;

}

center-page15{

  height: 90%;
  width: 95%;
  position: relative;
  overflow: hidden;

}

center-page15>video{

  height: 100%;
  width: 100%;
  object-fit: cover;

}

page16{

  position: relative;
  height: 120vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

page16>h2{

  position: absolute;
  width: 50%;
  color: #434343c7;
  font-weight: 500;
  top: 5%;

}

page16>h2>span{

  color: #000;

}

page16>img{

  width: 60%;
  position: absolute;
  bottom: 0%;

}

page16>button{

  position: absolute;
  bottom: 10%;
  padding: 10px 20px;
  font-size: 1.5vw;
  border-radius: 50px;
  background-color: #ff823d;
  color: #fff;
  font-weight: 500;
  border: none;

}

page17{

  position: relative;
  height: 110vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #000;
  color: #fff;

}

page17>h4{

  font-size: 2.5vw;
  font-weight: 600;
  margin-bottom: 2vw;

}

page17>h1{

  font-size: 7vw;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 3vw;

}

page17>p{

  font-size: 2vw;
  font-weight: 600;
  margin-bottom: 2vw;
  color: #ffffff7c;
  width: 60%;
  text-align: center;

}

page17>p>span{

  color: #fff;

}

page18{

  position: relative;
  height: 100vh;
  width: 100vw;
  top: 0%;
  background-color: #000;

}

page18>img{

width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

}

page19{

  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  height: 35vw;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;

}

page19>h5{

  width: 50%;
  color: #ffffff7c;;
  font-weight: 500;
  font-size: 2vw;

}

page19>h5>span{

color: #fff;

}

page20{

  position: relative;
  height: 150vh;
  width: 100vw;
  background-color: #000;

}

page20>video{

  height: 100%;
  width: 100%;
  object-fit: contain;

}

center-page20{

  position: absolute;
  height: 20%;
  width: 30%;
  bottom: 25%;
  right: 2%;
  color: #fff;

}

center-page20>h1{

color: #fff;

}

center-page20>p{

color: #ffffff7c;
width: 100%;
font-size: 2vw;
font-weight: 500;

}

center-page20>p>span{

color: #ffffff;
font-size: 2vw;

}

page21{

position: relative;
height: 80vh;
width: 100vw;
background-color: #000;

}

page21>#troff{

top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
width: 50%;
z-index: 0;

}

page21>#tron{

top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
width: 50%;

}

newpage21{

display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  height: 30vw;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;

}

newpage21>h1{

color: #fff;

}

newpage21>h2{

color: #ffffff7c;
width: 50%;
font-size: 2vw;
font-weight: 500;

}

newpage21>h2>span{

color: #ffffff;
font-size: 2vw;

}

page22{

  position: relative;
  height: 80vh;
  width: 100vw;
  background-color: #000;

}

page22>#snroff{

  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 50%;
  z-index: 0;

}

page22>#snron{

  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 50%;

}

newpage22{

display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  height: 30vw;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;

}

newpage22>h1{

color: #fff;

}

newpage22>h2{

color: #ffffff7c;
width: 50%;
font-size: 2vw;
font-weight: 500;

}

newpage22>h2>span{

color: #ffffff;
font-size: 2vw;

}

page23{

  position: relative;
  height: 80vh;
  width: 100vw;
  background-color: #000;

}

page23>img{

margin-top: 5%;
  height: 100%;
  width: 100%;
  object-fit: contain;

}

newpage23{

display: flex;
  align-items: center;
  justify-content: top;
  color: #fff;
  position: relative;
  height: 45vw;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;
  top:0%;

}

newpage23>h1{

color: #fff;

}

newpage23>h2{

color: #ffffff7c;
width: 50%;
font-size: 2vw;
font-weight: 500;

}

newpage23>h2>span{

color: #ffffff;
font-size: 2vw;

}

newpage23>button{

position: absolute;
bottom: 20%;
padding: 10px 10px;
font-size: 1.5vw;
border-radius: 45px;
background-color: #ffffff;
color: #000000;
font-weight: 550;
border: none;

}