diff --git a/dex.css b/dex.css
new file mode 100644
index 0000000..7ab9c46
--- /dev/null
+++ b/dex.css
@@ -0,0 +1,797 @@
+@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%;
+    max-width: 100%;
+}
+#main{
+    background-color: #000;
+    max-width: 100%;
+}
+@media (max-width: 768px) {
+    #main {
+        max-width: 100%;
+    }
+}
+#home-page{
+    height: 100vh;
+    width: 100em;
+    position: relative;
+    overflow: hidden;
+    
+}
+#phone1{
+    position: absolute;
+    background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+    background-size: cover;
+    background-position: center;
+    height: 450px;
+    width: 430px;
+    top: 90px;
+    rotate: -25deg;
+    right: 25%;
+}
+#phone2{
+    position: absolute;
+    background-image: url(./NothingPhoneImages/BA_ABR_300_1001.png);
+    background-size: cover;
+    background-position: center;
+    height: 450px;
+    width: 430px;
+    top: 100px;
+    rotate: -25deg;
+    right: 20%;
+}
+#pag{
+    height: 100vh;
+    width: 100%;
+    position: relative;
+    
+    
+}
+#page{
+    height: 100vh;
+    width: 100%;
+    position: relative;
+    
+}
+#page #imgdiv{
+    height: 100%;
+    width: 30%;
+    position: relative;
+    background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+    background-position: center;
+    background-size: cover;
+    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: 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.png);
+    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.png);
+    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;
+}
+#page1 #imgdiv{
+    height: 100vh;
+    width: 40vh;
+    position: relative;
+    background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+    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;
+}
+#page00 #imgdiv00{
+    height: 100vh;
+    width: 40vh;
+    position: relative;
+    background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+    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:5vh;
+    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: 35vh;
+    letter-spacing: 1.5px;
+    text-align: center;
+    margin-top: 10px;
+    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.png);
+    background-position: center;
+    background-size: cover;
+    left: 50%;
+    top: 50%;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    
+    
+}
+/* #page2 #imgdiv3{
+    height: 71.5%;
+    width: 15%;
+    position: absolute;
+    background-image: url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg);
+    background-position: center;
+    background-size: cover;
+    top: 14.5%;
+    left: 42.5%;
+    
+    border-radius: 25px;
+    opacity: 1;
+    z-index: 99;
+    opacity:1;
+} */
+#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.jpeg);
+    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.png);
+    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.png);
+    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: 38vh;
+    top: 56.4%;
+    left: 49.9%;
+    transform: translate(-50%,-50%);
+    width: 85vh;
+    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.png);
+    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.png);
+    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: absolute;
+    background-image: url(./NothingPhoneImages/new3.png);
+    background-position: center;
+    background-size: cover;
+    left: -30%;
+    top: 60%;
+    transform: translate(-50%,-50%);
+    z-index: 2;
+    
+    
+}
+#page5 #imgdiv9{
+    height: 100%;
+    width: 105vh;
+    position: absolute;
+    background-image: url(./NothingPhoneImages/new4.png);
+    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 */
+.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;
+}
+.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 .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 .links 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{
+    font-size: 1vw;
+    font-weight: 100;
+    
+}
+.footer-bottom h3 a{
+    text-decoration: none;
+    color: white;
+    font-family: kor;
+    font-weight: 100;
+}
+.footer-bottom .icons a{
+    font-size: 1.7vw;
+    background-color: #fff;
+    color: #000;
+    text-decoration: none;
+    padding: 0.3vw;
+    border-radius: 50%;
+}