diff --git a/dex.css b/dex.css
new file mode 100644
index 0000000..a71f81e
--- /dev/null
+++ b/dex.css
@@ -0,0 +1,2120 @@
+@font-face {
+ font-family: kor;
+ src: url(./fonts/korataki-rg-3cf0d889.ttf);
+}
+@font-face {
+ font-family: Sansation;
+ src: url(./fonts/Sansation_Regular.ttf);
+}
+
+*{
+ margin:0;
+ padding: 0;
+ box-sizing: border-box;
+
+}
+html,body{
+ height: 100%;
+ width: 100%;
+}
+#loader{
+ height: 100%;
+ width: 100%;
+ background-color: black;
+ z-index: 999;
+ position: fixed;
+ top: 0;
+ transition: all linear 0.3s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+}
+#loader h1{
+ color: transparent;
+ font-family: kor;
+ font-size: 4vw;
+ letter-spacing: 1.5px;
+ position: absolute;
+ background-image: linear-gradient(to right, #d7d7d7 0%, #353535 74%);
+ -webkit-background-clip: text;
+ opacity: 0;
+ animation-name: load;
+
+ animation-duration: 1s;
+ animation-delay: 1s;
+ animation-timing-function: linear;
+}
+#loader h1:nth-child(2){
+ animation-delay: 2s;
+}
+#loader h1:nth-child(3){
+ animation-delay: 3s;
+}
+#loader h1:nth-child(4){
+ animation-delay: 4s;
+}
+#loader h1:nth-child(5){
+ animation-delay: 5s;
+}
+@keyframes load {
+ 0%{
+ opacity: 0;
+ }
+ 10%{
+ opacity: 1;
+ }
+ 90%{
+ opacity: 1;
+ }
+ 100%{
+ opacity: 0;
+ }
+}
+#main{
+ background-color: #000;
+ position: relative;
+ overflow: hidden;
+}
+#home-page{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+
+}
+
+#header{
+ height: 12%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+}
+#nothing{
+ height: 100%;
+ width: 20vw;
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).webp);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ position: relative;
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 4vh;
+ font-family: kor;
+ color: white;
+
+}
+
+#rest{
+
+ height: 100%;
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+ margin-right: -30%;
+ margin-top: 10px;
+}
+#men{
+ font-size: 4vh;
+ opacity:0;
+ color: white;
+}
+#page-0 #up{
+ font-size: 4vh;
+ opacity:1;
+ color: white;
+ margin-top: 10%;
+ left: 50%;
+
+}
+#page-0{
+ position: absolute;
+ height: 100vh;
+ width: 100%;
+ background-color: black;
+ z-index: 99;
+ top:-100%;
+}
+#page-0 #list{
+ font-size: 5vh;
+ font-family: kor;
+ color: white;
+ position: relative;
+ text-decoration: none;
+ top: 20%;
+ left: 5%;
+ list-style-type: none;
+
+}
+.el{
+ height: 100%;
+ width: 22%;
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).webp);
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+ background-size: contain;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2.8vh;
+
+ font-family: kor;
+ color: white;
+}
+#bodyel{
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.on{
+ height:100%;
+ width: 100%;
+ margin-left: 16%;
+ margin-bottom: 6%;
+ background-image: url(./NothingPhoneImages/Group\ 6\ \(1\).webp);
+ background-position: bottom;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.ont{
+ height: 100%;
+ width: 100%;
+ background-image: url(./NothingPhoneImages/Group\ 8\ \(1\).webp);
+ background-position: center;
+ background-size: contain;
+ margin-bottom: 5%;
+ background-repeat: no-repeat;
+
+}#snap{
+ position: absolute;
+ height: 10%;
+ width: 40%;
+ top: 83%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: kor;
+ font-size: 1em;
+ color: #999D9C;
+ left: 5%;
+}
+#text-box{
+ height:40%;
+ width: 50%;
+ position: relative;
+ top: -10%;
+ font-family: kor;
+ letter-spacing: 1.5px;
+ font-size: 3vh;
+ line-height: 60px;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+}
+
+.txt-Features{
+ color: white;
+ font-size: 4.5em;
+ font-family: kor;
+ font-weight: 400;
+ word-wrap: break-word;
+ position: absolute;
+ left: 65vh;
+ top: 9vh;
+ opacity: 1;
+}
+
+#phone1{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-size: contain;
+ background-position: center;
+ height: 100%;
+ width: 40%;
+ top: 8%;
+ rotate: -25deg;
+ right:10%;
+ background-repeat: no-repeat;
+}
+#phone2{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_300_1001.webp);
+ background-size:contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 35%;
+ top: 8%;
+ rotate: -25deg;
+ right: 7%;
+}
+#feature-box{
+ height: 87%;
+ width: 95%;
+ background-image: url(./NothingPhoneImages/Group\ 60.webp);
+ background-size:contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ position: relative;
+ top: 10%;
+ left: 2%;
+ opacity: 0;
+}
+#pag{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+
+}
+#page{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+}
+#page #imgdiv{
+ height: 100%;
+ width: 50%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-position: center;
+ background-size:contain;
+ background-repeat: no-repeat;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+}
+#page h2{
+
+ background: url(./NothingPhoneImages/10628409-water-droplets-on-a-metal-surface.webp);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 900;
+ opacity: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ background-position: center;
+ background-size: cover;
+
+}
+#page #splash1{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash2.webp);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 5%;
+ left: -50%;
+ z-index:3;
+ opacity: 0;
+}
+#page #splash2{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash1.webp);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 50%;
+ right: -50%;
+ z-index:3;
+ transform: translate(-50%,-50%);
+ opacity: 0;
+}
+#page1{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page1 #imgdiv{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+}
+#page00{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page00 #imgdiv00{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+
+}
+#page00 .Group50::before{
+ content: "Front Camera";
+ position: absolute;
+ top: -5vh;
+ left:4vh;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 40vh;
+ letter-spacing: 1.5px;
+}
+#page00 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page00 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group50 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ margin-left: 30%;
+ font-family: Sansation;
+}
+#page2{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page2 #imgdiv2{
+ height: 100%;
+ width: 40vh;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+}
+#page1 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page1 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group4::after{
+ content: "Ultra Wide";
+ position: absolute;
+ bottom: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3::before{
+ content: "Main Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+.Group4 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+#page2 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 30vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+}
+@keyframes shine{
+ 0%{
+ background-position: 0;
+ }
+ 60%{
+ background-position: 500px;
+ }
+ 100%{
+ background-position: 1000px;
+ }
+}
+#page2 h3{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+}
+#page2 h4{
+ color: #999D9C;
+
+ text-align: center;
+ position: absolute;
+ top: 75%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 20vh;
+ font-weight: 100;
+ opacity: 1;
+ background:url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.webp);
+ background-position:center;
+ background-size: cover;
+ color: transparent;
+ -webkit-background-clip: text;
+
+}
+#page2 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page2 span{
+ color: white;
+}
+#page3{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page3 #imgdiv4{
+ height: 100%;
+ width: 40%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: cover;
+ left: 53%;
+ top: -37%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+ rotate: -90deg;
+
+}
+#page3 #imgdiv5{
+ height: 65%;
+ width: 45%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/enter2-hand.webp);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 100%;
+ transform: translate(-50%,-50%);
+ z-index: 3;
+
+ opacity: 0;
+}
+#page3 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 51%;
+
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size:50vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+ width: 100%;
+ white-space: nowrap;
+}
+#page3 h3{
+ color: #999D9C;
+ text-align: center;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+
+}
+#page3 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page3 span{
+ color: white;
+}
+#page3 video{
+ position: absolute;
+ z-index: 2;
+ border-radius: 25px;
+ height: 43%;
+ top: 58.4%;
+ left: 49.9%;
+ transform: translate(-50%,-50%);
+ width:39%;
+ object-fit: cover;
+
+}
+#page4{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page4 #imgdiv6{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new.webp);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 40%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+}
+#page4 #imgdiv7{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new2.webp);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 70%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+}
+#page4 #txt1{
+ position: absolute;
+ top: 25%;
+ left: -80%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 10vh;
+ white-space: nowrap;
+}
+#page4 #txt2{
+ position: absolute;
+ top: 83%;
+ left: 100%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 10vh;
+ white-space: nowrap;
+}
+#page5{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page5 #imgdiv8{
+ height: 100%;
+ width: 105vh;
+ position: relative;
+ background-image: url(./NothingPhoneImages/new3.webp);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 65%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+}
+#page5 #imgdiv9{
+ height: 100%;
+ width: 105vh;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new4.webp);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 75%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+}
+#page5 p{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page5 #up{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
+#page5 #down{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
+.design-section{
+ padding-top: 3vh;
+ width: 100%;
+ background: #000;
+}
+.design-section>h1{
+ font-size: 4vw;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C .1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+}
+.elem , .elem2{
+ width: 100%;
+ /* background: red; */
+ border-top: 2px solid white;
+ cursor: pointer;
+ font-family: kor;
+ font-weight: 100;
+}
+.elem .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vw;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+ font-family: kor;
+ font-weight: 100;
+}
+.details{
+ overflow: hidden;
+ background: #999d9c;
+ height: 0vh;
+}
+.details p{
+ line-height: 2vw;
+ padding: 2vw 3vw;
+ color: #000;
+ height: fit-content;
+}
+.elem-box{
+ border-bottom: 2px solid white;
+}
+.camera-section{
+ padding-top: 3vh;
+ width: 100%;
+ padding-top: 4vh;
+ background-color: #000;
+
+}
+.camera-section>h1{
+ font-size: 4vw;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C .1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+}
+.camera-elem{
+ width: 100%;
+}
+.camera-details{
+ display: flex;
+ /* justify-content: space-between; */
+ gap: 10vw;
+}
+.elem2 .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vw;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+}
+.footer{
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 10vh;
+ background-color: #000;
+ position: relative;
+}
+.footer-top{
+ width: 100%;
+ /* background: rgb(70, 110, 110); */
+ display: grid;
+ grid-template-columns: 20% 20% 20% 30% ;
+ grid-row: 20% 20% 20% ;
+ gap: 3vw;
+ margin-top: 10vh;
+ padding: 0 5vh;
+}
+.footer .links h1{
+ color: white;
+ font-size: 1.3vw;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer .join h1{
+ color: white;
+ font-size: 1.3vw;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer .links h4{
+ line-height: 2vw;
+ color: white;
+ font-weight: 100;
+ font-size: .8vw;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer .links h4 a{
+ text-decoration: none;
+ color: white;
+}
+.footer-top .join input{
+ background: #000;
+ border: 2px solid #fff;
+ border-radius: 8px;
+ padding: 1vw .5vw;
+ color: #fff;
+ font-family: kor;
+ font-weight: 100;
+ padding-left: 20%;
+}
+.footer-bottom{
+ border-top: 2px solid #fff;
+ display: flex;
+ padding: 4vh 2vw;
+ gap: 4vw;
+
+ justify-content: space-between;
+}
+.footer-bottom h3 a{
+ font-size: 1vh;
+ font-weight: 100;
+ color: white;
+ text-decoration: none;
+ font-family: kor;
+ letter-spacing: 1.5px;
+}
+.footer-bottom h4 a{
+ text-decoration: none;
+ color: white;
+ font-family: kor;
+ font-weight: 100;
+ font-size: 1vw;
+}
+.footer-bottom .icons a{
+ font-size: 1.7vw;
+ background-color: #fff;
+ color: #000;
+ text-decoration: none;
+ padding: 0.3vw;
+ border-radius: 50%;
+}
+.Group3{
+ width: 207px;
+ height: 61px;
+ position: relative;
+ top:-50vh;
+ left:10vh;
+ opacity:0;
+}
+.Group4{
+ width: 207px;
+ height: 61px;
+ position: relative;
+ top:-40vh;
+ left:10vh;
+ opacity:0;
+}
+.Group4::before{
+ opacity: 0;
+}
+.Group50{
+ width: 20vh;
+ height: 20vh;
+ position: relative;
+ top:-59vh;
+ left:10vh;
+ opacity:0;
+}
+.Group3 .Line8{
+ width: 145.16px; height: 0px; left: 205.76px; top:12px; position: absolute; background: #999D9C; border: 1px #999D9C solid
+}
+.Group3 .Line1{
+ width: 170.16px; height: 0px; left: 25.76px; top: 0px; position: absolute; background: #999D9C; border: 1px #999D9C solid
+}
+.Group3 .Line4{
+ width: 183.77px; height: 0px; left: 0px; top: 61px; position: absolute; background: #999D9C; border: 1px #999D9C solid
+}
+.Group3 .Line5{
+ width: 31.5px; height: 0px; left: 182.77px; top: 61px; position: absolute; transform: rotate(-37.76deg); transform-origin: 0 0; background: #999D9C; border: 1px #999D9C solid
+}
+.Group3 .Line6{
+ width: 29px; height: 0px; left: 207px; top: 42.23px; position: absolute; transform: rotate(-90deg); transform-origin: 0 0; background: #999D9C; border: 1px #999D9C solid;
+}
+.Group3 .Line7{
+ width: 18.68px; height: 0px; left: 208px; top: 15px; position: absolute; transform: rotate(-136.57deg); transform-origin: 0 0; background: #999D9C; border: 1px #999D9C solid
+}
+.Group50 .Line8{
+ width: 120px;
+}
+@media screen and (min-width: 1536px){
+
+ #phone1{
+ height: 600px;
+ width: 480px;
+ top: 70px;
+ rotate: -25deg;
+ right: 20%;
+ }
+ #phone2{
+ height: 600px;
+ width: 480px;
+ top: 70px;
+ rotate: -25deg;
+ right: 15%;
+ }
+ .Group3{
+ left:20vh;
+ }
+ .Group4{
+ left:20vh;
+ }
+ .Group50{
+ left:20vh;
+ }
+ #page3 #imgdiv5{
+ left: 52%;
+ }
+ .on{
+ position:relative;
+ left: 5.3%;
+ top: 1%;
+ }
+ #nothing{
+ margin-left: 4.7%;
+ margin-top: 1.4%;
+ }
+}
+@media only screen and (min-width: 1440px){
+
+ #rest{
+ position: relative;
+ left: 0%;
+
+ }
+ .on{
+ margin-left: 12.8%;
+ margin-top: 0.1%;
+
+ }
+ #feature-box{
+ height: 86%;
+ width: 87%;
+ left: 7%;
+ }
+ .txt-Features{
+ left: 34%;
+ }
+ #page3 video{
+ height: 45vh;
+ width:91vh;
+ left: 51.5%;
+ top: 59.6%;
+ }
+ #page3 #imgdiv5{
+ height: 68.5%;
+ top:120%;
+ left: 52%;
+ }
+ #phone1{
+ height: 100%;
+ width: 40%;
+ top: 8%;
+ rotate: -25deg;
+ right: 10%;
+ }
+ #phone2{
+
+ height: 100%;
+ width: 40%;
+ top: 8%;
+ rotate: -25deg;
+ right: 5%;
+ }
+ .Group3{
+ left:20vh;
+ }
+ .Group4{
+ left:20vh;
+ }
+ .Group50{
+ left:20vh;
+ }
+ .Group50 p{
+ width: 200%;
+ left: -45%;
+ }
+ #page5 p{
+ left: 60%;
+ }
+ #page3 h1{
+ left: 55%;
+ }
+}
+@media screen and (max-width:600px) {
+ #main{
+ overflow: hidden;
+ position: relative;
+ }
+ #home-page{
+ width: 100%;
+ }
+
+ #nothing{
+ height: 100%;
+ width: 40%;
+
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).webp);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size:contain;
+ position: relative;
+ margin-top: 10px;
+ margin-left: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2vh;
+ font-family: kor;
+ color: white;
+ }
+
+ #rest{
+ opacity: 0;
+ height: 100%;
+ width: 60%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ opacity: 0;
+ margin-top: 10px;
+ position: relative;
+ }
+ .el{
+ height: 100%;
+ width: 20%;
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).webp);
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+ opacity: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.3em;
+ margin-left: 20px;
+ font-family: kor;
+ color: white;
+ opacity: 0;
+ }
+ #bodyel{
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .on{
+ height: 30dvh;
+ width: 100dvh;
+ background-repeat: no-repeat;
+ position: relative;
+ top:-17dvh;
+ left: 21dvw;
+ background-image: url(./NothingPhoneImages/Group\ 6\ \(1\).webp);
+ background-position: bottom;
+ background-size: contain;
+ }
+ .ont{
+ height: 30%;
+ width: 100%;
+ background-image: url(./NothingPhoneImages/Group\ 8\ \(1\).webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ margin-bottom: 20%;
+
+
+ }#snap{
+ position: absolute;
+ height: 10%;
+ width: 40%;
+ top: 87%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: kor;
+ font-size: 1em;
+ color: #999D9C;
+ left: 5%;
+ }
+ #text-box{
+ height:30%;
+ width: auto;
+ text-align: center;
+ font-family: kor;
+ letter-spacing: 1.5px;
+ font-size: 1vh;
+ line-height: 60px;
+ color: white;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ }
+ .txt-Features{
+ color: white;
+ font-size: 4.5em;
+ font-family: kor;
+ font-weight: 400;
+ word-wrap: break-word;
+ position: absolute;
+ left: 65%;
+ top: 9px;
+ opacity: 1;
+ }
+ #phone1{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-size: contain;
+ background-position: center;
+ height:100%;
+ width:70%;
+ top: 20%;
+ rotate: -25deg;
+ right: 17%;
+ }
+ #phone2{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_300_1001.webp);
+ background-size: contain;
+ background-position: center;
+ height: 100%;
+ background-repeat: no-repeat;
+ width: 70%;
+ top: 20%;
+ rotate: -25deg;
+ right: 5%;
+ }
+ #snap{
+ top: 40%;
+ width: 100%;
+ font-size: 1.3vh;
+ left: 0;
+ text-align: center;
+ }
+ #text-box{
+ height:40%;
+ width: 100%;
+ position: relative;
+ top: -30%;
+ font-family: kor;
+ letter-spacing: 1.5px;
+ font-size: 1.5vh;
+ line-height: 40px;
+ color: white;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ }
+ #feature-box{
+ height:80%;
+ width:95%;
+ background-repeat: no-repeat;
+ background-image: url(./NothingPhoneImages/Group\ 80.webp);
+ background-size: contain;
+ background-position: center;
+ position: relative;
+ top: 12dvh;
+ left: 10px;
+ opacity: 0;
+ }
+
+ #page #imgdiv{
+ height: 100%;
+ width: 100%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+
+ }
+ #page h2{
+
+ background: url(./NothingPhoneImages/10628409-water-droplets-on-a-metal-surface.jpg);
+ position: absolute;
+ top: 15%;
+ left: 46%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 1.7vh;
+ font-weight: 900;
+ opacity: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ background-position: center;
+ background-size: contain;
+
+ }
+ #page #splash1{
+ height: 100%;
+ width: 70%;
+ background-image: url(./NothingPhoneImages/splash2.webp);
+ position: absolute;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ top: 5%;
+ left: -100%;
+ z-index:3;
+ opacity: 0;
+ }
+ #page #splash2{
+ height: 100%;
+ width: 70%;
+ background-image: url(./NothingPhoneImages/splash1.webp);
+ position: absolute;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ top: 50%;
+ right: -100%;
+ z-index:3;
+ transform: translate(-50%,-50%);
+ opacity: 0;
+ }
+ #page00 #imgdiv00{
+ height: 100%;
+ width: 70%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: 50%;
+ top: 0%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+
+ }
+ #page00 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 4vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+ }
+ #page00 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 35dvh;
+ right:6dvw;
+ rotate: 0deg;
+ font-family: kor;
+ font-size: 9vh;
+ font-weight: 900;
+ opacity: 0;
+ rotate: 0deg;
+ }
+ #page1 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ width: 100dvw;
+ opacity: 0;
+ }
+ #page1 h2{
+ text-align: center;
+ position: absolute;
+ top: 45dvw;
+ right: 4dvw;
+ rotate: 0deg;
+ font-family: kor;
+ font-size: 18dvw;
+ font-weight: 900;
+ opacity: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 1px;
+ -webkit-text-stroke-color:#999D9C;
+
+ }
+ .Group4::after{
+ content: "Ultra Wide";
+ position: absolute;
+ bottom: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ }
+ .Group3::before{
+ content: "Main Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ }
+ .Group3 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+ }
+ .Group4 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+ }
+
+ #page1 #imgdiv{
+ height: 100dvh;
+ width: 90dvw;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+
+ }
+ #page2 h3{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 5vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+ }
+ #page2 h4{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 75%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 8vh;
+ font-weight: 100;
+ opacity: 1;
+ background:url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg);
+ background-position:center;
+ background-size: cover;
+ color: transparent;
+ -webkit-background-clip: text;
+
+ }
+ #page2 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ margin-top: 30%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 2vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+ }
+ #page2 span{
+ color: white;
+ }
+ #page2 #imgdiv2{
+ height: 100%;
+ width: 65%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: 50%;
+ top: 50%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+ }
+ #page2 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 65%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 6vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+ }
+ #page3 #imgdiv4{
+ height: 100%;
+ width: 80%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left:115%;
+ top:1%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+ rotate: -90deg;
+
+ }
+ #page3 #imgdiv5{
+ height: 65%;
+ width: 95%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/enter2-hand.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: 48%;
+ top: 100%;
+ transform: translate(-50%,-50%);
+ z-index: 3;
+
+ opacity: 0;
+ }
+ #page3 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 70%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size:7vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+ width: 100%;
+ white-space: nowrap;
+ }
+ #page3 h3{
+ color: #999D9C;
+ text-align: center;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3.6vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+
+ }
+ #page3 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 2vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+ }
+ #page3 span{
+ color: white;
+ }
+ #page3 video{
+ position: absolute;
+ z-index: 2;
+ border-radius: 20px;
+ height: 18.9%;
+ top: 69.5%;
+ left: 48%;
+ transform: translate(-50%,-50%);
+ width:79.5%;
+ object-fit: cover;
+ }
+ #page4 #imgdiv6{
+ height: 100dvw;
+ width: 100dvw;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: -100%;
+ top: 40%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+ }
+ #page4 #imgdiv7{
+ height: 100dvw;
+ width:100dvw;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new2.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ right:-100%;
+ top: 70%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+ }
+ #page4 #txt1{
+ position: absolute;
+ top: 25%;
+ left: -80%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.5dvw;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 10vh;
+ white-space: nowrap;
+ }
+ #page4 #txt2{
+ position: absolute;
+ top: 83%;
+ left: 100%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.5dvw;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 10vh;
+ white-space: nowrap;
+ }
+ #page5{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+ }
+ #page5 #imgdiv8{
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new3.webp);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: -30%;
+ top: 60%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+ }
+ #page5 #imgdiv9{
+ height: 100%;
+ width: 100%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/new4.webp);
+ background-position: center;
+ background-size:contain;
+ background-repeat: no-repeat;
+ right:-100%;
+ top: 75%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+ }
+ #page5 p{
+ position: absolute;
+ top: 17%;
+ left: 50%;
+ letter-spacing: 1px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 3.5dvw;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ text-align: center;
+ }
+ #page5 #up{
+ position: relative;
+ top: 17%;
+ left: 54%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 3.5dvw;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 0.5px;
+ }
+ #page5 #down{
+ position: absolute;
+ top: 17%;
+ left: 55%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 3.5dvw;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 0.5px;
+ }
+ .design-section{
+ padding-top: 3vh;
+ width: 100%;
+ background: #000;
+ }
+ .design-section>h1{
+ font-size: 5vh;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C 1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+ }
+ .elem , .elem2{
+ width: 100%;
+ /* background: red; */
+ border-top: 2px solid white;
+ cursor: pointer;
+ font-family: kor;
+ font-weight: 100;
+ }
+ .elem .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vh;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+ font-family: kor;
+ font-weight: 100;
+ }
+ .details{
+ overflow: hidden;
+ background: #999d9c;
+ height: 0vh;
+ }
+ .details p{
+ font-size: 1vh;
+ line-height: 25px;
+ color: #000;
+ height: fit-content;
+ width: 100%;
+ }
+ .elem-box{
+ border-bottom: 2px solid white;
+ }
+
+ /* camera section */
+ .camera-section{
+ padding-top: 3vh;
+ width: 100%;
+ padding-top: 4vh;
+ background-color: #000;
+
+ }
+ .camera-section>h1{
+ font-size: 5vh;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C 1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+ }
+ .camera-elem{
+ width: 100%;
+ }
+ .camera-details{
+ display: flex;
+ /* justify-content: space-between; */
+ gap: 10vw;
+ }
+ .elem2 .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vh;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+ }
+ .footer{
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 5vh;
+ background-color: #000;
+ }
+ .footer-top{
+ width: 100%;
+ /* background: rgb(70, 110, 110); */
+ display: grid;
+ grid-template-columns: 25% 25% 25% 30% ;
+ grid-row: 25% 25% 25% ;
+ gap: 12vw;
+ margin-top: 10vh;
+
+ }
+ .footer .links h1{
+ position: relative;
+
+ color: white;
+ font-size: 1.7vh;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+ left:-20%;
+ top: 60%;
+ }
+ .footer .join h1{
+ position: relative;
+ left: -370%;
+ color: white;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+ font-size: 1.5vh;
+ width: 300%;
+
+ }
+ .footer .links h4{
+ position: relative;
+ line-height: 2vh;
+ color: white;
+ font-weight: 100;
+ font-size: 1vh;
+ font-family: kor;
+ font-weight: 100;
+ top: 70%;
+ width: 100%;
+ left: -20%;
+ }
+ .footer .links h4 a{
+ text-decoration: none;
+ color: white;
+ }
+ .footer-top .join input{
+ position: relative;
+ left: -380%;
+ background: #000;
+ border: 2px solid #fff;
+ border-radius: 8px;
+ padding: .5vw .5vw;
+ color: #fff;
+ text-align: center;
+ font-family: kor;
+ font-weight: 100;
+ padding: 5%;
+ }
+ .footer-bottom{
+ border-top: 2px solid #fff;
+ display: flex;
+
+ flex-direction: column;
+ padding: 7vh 2vw;
+ gap: 4vw;
+ justify-content: space-between;
+ }
+ .footer-bottom h3{
+ font-size: 2vw;
+ font-weight: 100;
+
+ }
+ .footer-bottom h4 a{
+ text-decoration: none;
+ color: white;
+ font-family: kor;
+ font-weight: 100;
+ margin-bottom: 0;
+ margin-left: 45%;
+
+ font-size: 3vw;
+ }
+ .footer-bottom .icons a{
+ position: relative;
+ font-size: 6vw;
+ background-color: #fff;
+ color: #000;
+ text-decoration: none;
+ padding: 1vw;
+ border-radius: 50%;
+
+ }
+ .icons{
+ position: relative;
+ right: -50%;
+ top: -50%;
+
+ }
+ .Group3{
+ width: 207px;
+ height: 61px;
+ position: relative;
+ top:-83dvw;
+ left:2dvh;
+ opacity:0;
+
+ }
+ .Group3 p{
+ font-size: 1.3vh;
+ left: -16%;
+ }
+ .Group3 .Line1{
+ width: 97px;
+ }
+ .Group3 .Line4{
+ width: 110px;
+ }
+ .Group3 .Line5{
+ left: 110px;
+ }
+ .Group3 .Line6{
+ left: 135px;
+ }
+ .Group3 .Line7{
+ left:135px
+ }
+ .Group3 .Line8{
+ left: 65%;
+ width: 115px;
+ }
+ .Group3::before{
+ font-size: 1.3vh;
+ }
+ .Group4{
+ width: 207px;
+ height: 61px;
+ position: relative;
+ top:-73dvw;
+ left:2vh;
+ opacity:0;
+ }
+ .Group4::before{
+ opacity: 0;
+ }
+ .Group4::after{
+ font-size: 1.4vh;
+ }
+ .Group50{
+ width: 10dvw;
+ height: 10dvw;
+ position: relative;
+ top:-80dvw;
+ left:2dvh;
+ opacity:0;
+ }
+ .Group50 p{
+ top: 5%;
+ left: -35dvw;
+ width: 100dvw;
+ }
+ .Group50 .Line8{
+ left:34dvw;
+ width: 95px;
+ }
+ #page00 .Group50::before{
+ font-size: 1.3vh;
+ top: -8dvw;
+ left: 20%;
+ }
+ .txt-Features{
+ top: 5dvh;
+ font-size: 5vh;
+ left: 16dvw;
+ }
+ #men{
+ opacity: 1;
+ position: relative;
+ right: 5%;
+ z-index: 99;
+ }
+ #page-0 #up{
+ font-size: 6vh;
+ opacity:1;
+ color: white;
+ top: 2%;
+ position: relative;
+ left: 45%;
+ }
+ #page-0{
+ position: absolute;
+ height: 100vh;
+ width: 100%;
+ background-color: #999D9C;
+ z-index: 99;
+ top:-100%;
+ transition: all ease 1s;
+ }
+}
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4de3025
--- /dev/null
+++ b/index.html
@@ -0,0 +1,424 @@
+
+
+
+
+
+ Nothing Phone (1) - Nothing India
+
+
+
+
+
+
+
+
+
+
PURE INSTINCT
+ BRILLIANT
+ CONSIDERED
+ PERFECTED
+ TOGETHER
+
+
+
+
+
+
+
+
+ Store
+ Support
+ Community
+ Buy Now
+
+
+
+
+
+
+
NOTHING PHONE (1) PURE INSTINCT
+
+
+
+
+
+
Snapdragon 778G+ | 50 MP Dual Camera
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Shoot Every Detail Feel Every Emotion
+
50MP
+
+
+
+
+
+
+
+
+
50 MP Sony IMX766 sensor
+
+
+
+
+
+
+
+
+
+
+
50 MP Samsung JN1 sensor
+
+
+
+
+
+
Include yourself with every moment
+
16MP
+
+
+
+
+
+
+
+
+
16 MP Sony IMX471 sensor
+
+
+
+
+
+
+
HDR10+
+
Outshine the Ordinary 10 Bit AMOLED Display
+
1200nits Peak Brightness
+
120HZ
+
+
+
+
Experience the Ultimate Performance with Snapdragon 778G+ chipset
+
596815 Antutu benchmark score
+
+
+
+
+
+
+
6 nm
+
+
+
+
+
+
The symmetrical bezels and aluminium frame
+
adds elegance, lightness and durability
+
+
+
+
Shining White and Shining Black
+
Shining White and Shining Black
+
Shining White and Shining Black
+
+
+
+
+
+
Design
+
+
+
+
Display
+
+
+
6.55” flexible AMOLED display
+ Corning® Gorilla® Glass
+ HDR10+
+ 10-bit colour depth
+ 2400x1080-pixel resolution at 402 ppi
+ 1,000,000:1 contrast ratio
+ 500 nits brightness; 1200 nits peak brightness
+ 60Hz - 120Hz adaptive refresh rate
+ 240Hz touch sampling rate
+ Haptic touch motors
+
+
+
+
+
Capacity
+
+
+
8 RAM + 128 GB memory
+ 8 RAM + 256 GB memory
+ 12 RAM + 256 GB memory
+
+
+
+
+
Dimensions
+
+
+
Height: 159.2 mm
+ Width: 75.8 mm
+ Depth: 8.3 mm
+ Weight: 193.5 g
+
+
+
+
+
In The Box
+
+
+
Nothing Phone (1)
+ Type-C cable
+ Safety information and warranty card
+ Screen protector
+ (pre-applied)
+ SIM tray ejector
+
+
+
+
+
+
+
+
+
Camera
+
+
+
+
Main camera
+
+
+
50 MP Sony IMX766 sensor Focal length: 24 mm OIS and EIS image stabilisation Panorama Night Mode Portrait Mode Beauty Mode Bokeh Time-lapse
+ HDR
+
+
Google Filter Scence Detection Live Photo Document Mode Night Mode Extreme Night Mode Night Video Export Mode Panorama Slo-Mo (120 fps)
+
+
+
+
+
+
+
Video
+
+
+
4K recording at 30 fps
+ 1080p recording at 30 or 60 fps
+ Live HDR at 30 fps
+
+
Slo-mo (120 fps)
+ Night Mode
+ (720p/1080p at 30 fps)
+ OIS and EIS image stabilisation
+
+
+
+
+
+
Front Camera
+
+
+
16 MP Sony IMX471 sensor ƒ/2.45 aperture 1/3.1” sensor size Live Photo HD Portrait
+
+
Google Filter
+ Beauty Mode
+ Night Mode
+ 1080p video recording
+ 30 fps
+
+
+
+
+
+
+
Ultra wide
+
+
+
50 MP Samsung JN1 sensor ƒ/2.2 aperture 1/2.76” sensor size EIS image stabilisation 114° field of view Night Mode Macro (4 cm) HDR
+
+
+
+
+
+
+
+
Features
+
+
+
+
Battery
+
+
+
4500 mAh battery size
+ 33W PD3.0 wired charging: full charge in 70 mins
+ 15W Qi wireless charging with dual charging support: full charge in 120 mins
+ 5W reverse charging
+ Only use with chargers compatible with Quick Charge 4.0.
+
+
+
+
+
Sensors
+
+
+
In-display Fingerprint Sensor
+ Accelerometer
+ Electronic Compass
+ Gyroscope
+ Ambient Light Sensor
+ Proximity Sensor
+ Sensor Core
+ Front RGB sensor
+
+
+
+
+
Memory
+
+
+
RAM: 8/12GB LPDDR5
+ Storage: 128/256GB UFS 3.1
+
+
+
+
+
Face & Finger Unlock
+
+
+
Unlock Phone (1) using fingerprint or facial recognition. Works with face coverings
+
+
+
+
+
Audio
+
+
+
3 high definition mics
+ Dual stereo speakers
+
+
+
+
+
+
Chipset
+
+
+
Snapdragon™ 778G+
+ 6nm TSMC process
+ 1xA78 2.5GHz+3xA78 2.4GHz+4xA55 1.8GHz
+ Adreno 642L GPU
+ Hexagon 770 AI processor.
+
+
+
+
+
Splash, Water & Dust Resistance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..60a47f9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,689 @@
+ScrollTrigger.normalizeScroll(true);
+ScrollTrigger.defaults({ ignoreMobileResize: true });
+
+gsap.registerPlugin(ScrollTrigger);
+
+// Initialize Locomotive Scroll
+const locoScroll = new LocomotiveScroll({
+ el: document.querySelector("#main"),
+ smooth: true,
+ smoothMobile: 0.1,
+
+});
+
+// Sync ScrollTrigger with Locomotive Scroll
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// Tell ScrollTrigger to use Locomotive Scroll's proxy methods
+ScrollTrigger.scrollerProxy("#main", {
+ scrollTop(value) {
+ return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+ },
+ getBoundingClientRect() {
+ return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
+ },
+ pinType: document.querySelector("#main").style.transform ? "transform" : "fixed",
+});
+
+// Refresh ScrollTrigger and Locomotive Scroll on window resize
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+ScrollTrigger.refresh();
+
+// Loader animation
+const loader = document.getElementById("loader");
+setTimeout(() => {
+ loader.style.top = "-100%";
+}, 5400);
+
+// Menu interaction
+const page0 = document.getElementById("page-0");
+const menu = document.getElementById("men");
+const close0 = document.getElementById("up");
+
+menu.addEventListener("click", () => {
+ page0.style.top = "0%";
+ menu.style.opacity = "0";
+});
+
+close0.addEventListener("click", () => {
+ page0.style.top = "-100%";
+ menu.style.opacity = "1";
+});
+
+// GSAP timeline for animations
+const t1 = gsap.timeline();
+
+// Animation targets
+const group3 = document.getElementsByClassName("Group3");
+const group4 = document.getElementsByClassName("Group4");
+const group50 = document.getElementsByClassName("Group50");
+const phone1 = document.getElementById("phone1");
+const phone2 = document.getElementById("phone2");
+const pure = document.getElementsByClassName("pure");
+const home = document.getElementById("home-page");
+const snap = document.getElementsByClassName("snap");
+const one = document.getElementById("one");
+const two = document.getElementById("two");
+const three = document.getElementById("three");
+
+// Initial animations
+t1.from(".el", {
+ y: -100,
+ opacity: 0,
+ duration: 0.5,
+ stagger: 0.25,
+ delay: 6,
+});
+
+t1.from([phone1, phone2], {
+ opacity: 0,
+ duration: 0.5,
+ stagger: 0.5,
+ y: 200,
+});
+
+t1.from("#text-box", {
+ opacity: 0,
+ duration: 0.5,
+ stagger: 0.5,
+ y: 50,
+});
+
+t1.from("#snap", {
+ opacity: 0,
+ duration: 0.5,
+ stagger: 0.5,
+ y: 10,
+});
+
+// Feature box animation with ScrollTrigger
+t1.to("#feature-box", {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#pag",
+ scroller: "#main",
+ scrub: 2,
+ pin: true,
+ start: "top top",
+ end: "bottom 20%",
+ },
+});
+
+// Page animations (responsive handling)
+const media1 = window.matchMedia('(max-width: 600px)');
+
+function setPageAnimations(media) {
+ t1.to("#page", {
+ scrollTrigger: {
+ trigger: "#page",
+ scroller: "#main",
+ pin: true,
+ },
+ });
+
+ t1.to("#page h2", {
+ scale: 7,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page h2",
+ scroller: "#main",
+ scrub: 2,
+ preventOverlaps: true,
+ },
+ });
+
+ if (media.matches) {
+ t1.to("#page #splash1", {
+ left: "10%",
+ duration: 3,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page #splash1",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+ } else {
+ t1.to("#page #splash1", {
+ left: "30%",
+ duration: 3,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page #splash1",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+ }
+
+ if (media.matches) {
+ t1.to("#page #splash2", {
+ left: "55%",
+ opacity: 1,
+ duration: 3,
+ scrollTrigger: {
+ trigger: "#page #splash2",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+ } else {
+ t1.to("#page #splash2", {
+ left: "55%",
+ opacity: 1,
+ duration: 3,
+ scrollTrigger: {
+ trigger: "#page #splash2",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+ }
+}
+
+setPageAnimations(media1);
+media1.addEventListener('change', (e) => setPageAnimations(e.matches));
+
+
+// Page 1 animations
+t1.to("#page1", {
+ scrollTrigger: {
+ trigger: "#page1",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+if (media1.matches) {
+ t1.to("#page1 #imgdiv", {
+ scale: 3,
+ stagger: 0.25,
+ duration: 3,
+ opacity: 1,
+ top: "110%",
+ left: "110%",
+ scrollTrigger: {
+ trigger: "#page1 #imgdiv",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page1 #imgdiv", {
+ scale: 3,
+ stagger: 0.25,
+ duration: 3,
+ opacity: 1,
+ top: "145%",
+ scrollTrigger: {
+ trigger: "#page1 #imgdiv",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+t1.to("#page1 h1", {
+ opacity: 1,
+ top: "5%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page1 h1",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to("#page1 h2", {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 3,
+ scrollTrigger: {
+ trigger: "#page1 h2",
+ scroller: "#main",
+ start: "top 30%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to(one, {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 3,
+ scrollTrigger: {
+ trigger: one,
+ scroller: "#main",
+ start: "top 30%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to(two, {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 3,
+ scrollTrigger: {
+ trigger: two,
+ scroller: "#main",
+ start: "top 20%",
+ end: "top 5%",
+ scrub: 2,
+ },
+});
+
+// Page 00 animations
+t1.to("#page00", {
+ scrollTrigger: {
+ trigger: "#page00",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+if (media1.matches) {
+ t1.to("#page00 #imgdiv00", {
+ scale: 3,
+ stagger: 0.25,
+ duration: 3,
+ top: "110%",
+ left: "100%",
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page00 #imgdiv00",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page00 #imgdiv00", {
+ scale: 3,
+ stagger: 0.25,
+ duration: 3,
+ top: "145%",
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page00 #imgdiv00",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+t1.to(three, {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 3,
+ scrollTrigger: {
+ trigger: three,
+ scroller: "#main",
+ start: "top 20%",
+ end: "top 5%",
+ scrub: 2,
+ },
+});
+
+t1.to("#page00 h2", {
+ opacity: 1,
+ stagger: 0.25,
+ duration: 3,
+ scrollTrigger: {
+ trigger: "#page00 h2",
+ scroller: "#main",
+ start: "top 30%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to("#page00 h1", {
+ opacity: 1,
+ top: "5%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page00 h1",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+// Page 2 animations
+t1.to("#page2", {
+ scrollTrigger: {
+ trigger: "#page2",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+t1.to("#page2 #imgdiv2", {
+ scale: 1.4,
+ rotation: -90,
+ opacity: 1,
+ duration: 3,
+ smooth: true,
+ scrollTrigger: {
+ trigger: "#page2 #imgdiv2",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+t1.to("#page2 h3", {
+ opacity: 1,
+ top: "0%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page2 h3",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to("#page2 p", {
+ opacity: 1,
+ top: "20%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page2 p",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+// t1.to("#page2 #imgdiv3", {
+// scale: 4,
+// duration: 3,
+// rotation: -90,
+// opacity: 0,
+// scrollTrigger: {
+// trigger: "#page2 #imgdiv3",
+// scroller: "#main",
+// scrub: 2,
+// start: "top 15%",
+// }
+// });
+
+t1.from("#page2 h4", {
+ y: -100,
+ scale: 3.5,
+ stagger: 3,
+ duration: 3,
+ opacity: 0,
+ scrollTrigger: {
+ trigger: "#page2 h4",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+// Page 3 animations
+t1.to("#page3 h3", {
+ opacity: 1,
+ top: "0%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page3 h3",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+t1.to("#page3", {
+ scrollTrigger: {
+ trigger: "#page3",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+t1.to("#page3 #imgdiv5", {
+ top: "78%",
+ stagger: 0.25,
+ duration: 1,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page3 #imgdiv5",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+t1.to("#page3 p", {
+ opacity: 1,
+ top: "30%",
+ stagger: 0.25,
+ duration: 2,
+ scrollTrigger: {
+ trigger: "#page3 p",
+ scroller: "#main",
+ start: "top 50%",
+ end: "top 10%",
+ scrub: 2,
+ },
+});
+
+// Page 4 animations
+t1.to("#page4", {
+ scrollTrigger: {
+ trigger: "#page4",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+if (media1.matches) {
+ t1.to("#page4 #imgdiv6", {
+ left: "30%",
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page4 #imgdiv6",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page4 #imgdiv6", {
+ x: 600,
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page4 #imgdiv6",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+if (media1.matches) {
+ t1.to("#page4 #imgdiv7", {
+ right: "-60%",
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page4 #imgdiv7",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page4 #imgdiv7", {
+ x: -600,
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page4 #imgdiv7",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+if (media1.matches) {
+ t1.to("#page4 #txt1", {
+ left: "15%",
+ duration: 4,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page4 #txt1",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page4 #txt1", {
+ left: "8%",
+ duration: 4,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page4 #txt1",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+if (media1.matches) {
+ t1.to("#page4 #txt2", {
+ left: "25%",
+ duration: 4,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page4 #txt2",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page4 #txt2", {
+ left: "17%",
+ duration: 4,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page4 #txt2",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+// Page 5 animations
+t1.to("#page5", {
+ scrollTrigger: {
+ trigger: "#page5",
+ scroller: "#main",
+ pin: true,
+ },
+});
+
+t1.to("#page5 #imgdiv8", {
+ left: "20%",
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page5 #imgdiv8",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+if (media1.matches) {
+ t1.to("#page5 #imgdiv9", {
+ left: "80%",
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page5 #imgdiv9",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+} else {
+ t1.to("#page5 #imgdiv9", {
+ left: "80%",
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page5 #imgdiv9",
+ scroller: "#main",
+ scrub: 2,
+ },
+ });
+}
+
+t1.to("#page5 p", {
+ scale: 1.1,
+ opacity: 1,
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page5 p",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+t1.to("#page5 #up", {
+ top: "8%",
+ duration: 4,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: "#page5 #up",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+t1.to("#page5 #down", {
+ top: "27%",
+ opacity: 1,
+ duration: 4,
+ scrollTrigger: {
+ trigger: "#page5 #up",
+ scroller: "#main",
+ scrub: 2,
+ },
+});
+
+// Accordion functionality
+let currentlyOpenElement = null;
+
+function handleClick(event) {
+ const detailsElement = this.querySelector('.details');
+ if (currentlyOpenElement && currentlyOpenElement !== detailsElement) {
+ gsap.to(currentlyOpenElement, {
+ height: "0vh"
+ });
+ }
+
+ if (detailsElement === currentlyOpenElement) {
+ gsap.to(detailsElement, {
+ height: "0vh"
+ });
+ currentlyOpenElement = null;
+ } else {
+ gsap.to(detailsElement, {
+ height: "auto"
+ });
+ currentlyOpenElement = detailsElement;
+ }
+}
+
+document.querySelectorAll('.elem').forEach(el => el.addEventListener('click', handleClick));
+document.querySelectorAll('.elem2').forEach(el => el.addEventListener('click', handleClick));
+
+// No need for additional code within the media query, as the page animations are already set up to be responsive.
+// The setPageAnimations function handles the adjustments based on the media query.
+
+// ...rest of your code...
\ No newline at end of file