From 2bfd749b0c53ef5c6ae6fb403719a9e6fdf0b72c Mon Sep 17 00:00:00 2001
From: Rishabh <140707297+rishabhrawat05@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:11:57 +0530
Subject: [PATCH] Add files via upload
---
dex.css | 2115 ++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 481 ++++++++++++
script.js | 781 +++++++++++++++++++
3 files changed, 3377 insertions(+)
create mode 100644 dex.css
create mode 100644 index.html
create mode 100644 script.js
diff --git a/dex.css b/dex.css
new file mode 100644
index 0000000..46128a5
--- /dev/null
+++ b/dex.css
@@ -0,0 +1,2115 @@
+@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%;
+}
+#main{
+ background-color: #000;
+
+}
+
+#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: 20%;
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).png);
+ 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%;
+ /* justify-content: space-around; */
+ margin-top: 10px;
+
+}
+#men{
+ font-size: 4vh;
+ opacity:1;
+ 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%;
+}
+.el{
+ height: 100%;
+ width: 22%;
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).png);
+ 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\).png);
+ background-position: bottom;
+ background-repeat: no-repeat;
+ background-size: contain;
+
+}
+.ont{
+ height: 100%;
+ width: 100%;
+ background-image: url(./NothingPhoneImages/Group\ 8\ \(1\).png);
+ 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;
+ 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.png);
+ 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.png);
+ 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.png);
+ 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: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ 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: 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: 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%);
+ opacity: 0;
+
+}
+#page00{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+}
+#page00 #imgdiv00{
+ height: 100%;
+ width: 30%;
+ 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: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.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: 38%;
+ top: 56.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.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 .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: 41vh;
+ width:91vh;
+ left: 51.5%;
+ top: 59.6%;
+ }
+ #page3 #imgdiv5{
+ height: 68.5%;
+ top:120%
+ }
+ #phone1{
+ height: 100%;
+ width: 40%;
+ top: 8%;
+ rotate: -25deg;
+ right: 10%;
+ }
+ #phone2{
+
+ height: 100%;
+ width: 30%;
+ top: 8%;
+ rotate: -25deg;
+ right: 10%;
+ }
+ .Group3{
+
+ left:20vh;
+
+ }
+ .Group4{
+ left:20vh;
+
+ }
+ .Group50{
+ left:20vh;
+
+ }
+ #page5 p{
+ left: 68%;
+ }
+ #page3 h1{
+ left: 55%;
+ }
+}
+@media screen and (max-width: 600px) {
+ #main{
+ width: 100%;
+ overflow: hidden;
+ }
+ #home-page{
+ width: 100%;
+ }
+ #nothing{
+ height: 100%;
+ width: 40%;
+
+ background-image: url(./NothingPhoneImages/Group\ 2\ \(1\).png);
+ 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\).png);
+ 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: 30%;
+ width: 100%;
+ background-repeat: no-repeat;
+ position: relative;
+ top: -23%;
+ left: 19%;
+ background-image: url(./NothingPhoneImages/Group\ 6\ \(1\).png);
+ background-position: bottom;
+ background-size: contain;
+
+ }
+ .ont{
+ height: 30%;
+ width: 100%;
+ background-image: url(./NothingPhoneImages/Group\ 8\ \(1\).png);
+ 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: 65vh;
+ top: 9vh;
+ opacity: 1;
+ }
+ #phone1{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ 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.png);
+ background-size: contain;
+ background-position: center;
+ height: 100%;
+ background-repeat: no-repeat;
+ width: 70%;
+ top: 20%;
+ rotate: -25deg;
+ right: 7%;
+ }
+ #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:100%;
+ width:180%;
+ background-repeat: no-repeat;
+ background-image: url(./NothingPhoneImages/Group\ 60.png);
+ background-size: contain;
+ background-position: center;
+ position: relative;
+ top: 5%;
+ left: -50%;
+ rotate: 90deg;
+ opacity: 0;
+
+ }
+ #page #imgdiv{
+ height: 100%;
+ width: 100%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ 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.png);
+ 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.png);
+ 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.png);
+ 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: 25%;
+ right:5%;
+ 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: 100%;
+ opacity: 0;
+ }
+ #page1 h2{
+
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ right: 4%;
+ rotate: 0deg;
+ font-family: kor;
+ font-size: 8vh;
+
+ 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: 100%;
+ width: 90%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ 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.png);
+ 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.png);
+ 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: 100%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/enter2-hand.png);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ 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: 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: 16.9%;
+ top: 69.5%;
+ left: 48%;
+ transform: translate(-50%,-50%);
+ width:79.5%;
+ object-fit: cover;
+
+ }
+ #page4 #imgdiv6{
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new.png);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ left: -100%;
+ top: 40%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+ }
+ #page4 #imgdiv7{
+ height: 100%;
+ width:100%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new2.png);
+ 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: 1vh;
+ 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: 1vh;
+ 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.png);
+ 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.png);
+ background-position: center;
+ background-size:contain;
+ background-repeat: no-repeat;
+ right:-80%;
+ 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: 1.5vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+
+ text-align: center;
+ }
+ #page5 #up{
+ position: relative;
+ top: 17%;
+ left: 59%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 1.4vh;
+ 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: 59%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 1.4vh;
+ 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: 2vh;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+ left:-20%;
+ top: 60%;
+ }
+ .footer .join h1{
+ position: relative;
+ left: -350%;
+ 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: -370%;
+ background: #000;
+ border: 2px solid #fff;
+ border-radius: 8px;
+ padding: .5vw .5vw;
+ color: #fff;
+
+ font-family: kor;
+ font-weight: 100;
+ padding-left: 20%;
+ }
+ .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:-45vh;
+ left:2vh;
+ 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:-40vh;
+ left:2vh;
+ opacity:0;
+ }
+ .Group4::before{
+ opacity: 0;
+ }
+ .Group4::after{
+ font-size: 1.4vh;
+ }
+ .Group50{
+ width: 10vh;
+ height: 10vh;
+ position: relative;
+ top:-36.5vh;
+ left:2vh;
+ opacity:0;
+ }
+ .Group50 p{
+ top: 5%;
+ left: -50%;
+ width: 200%;
+ }
+ .Group50 .Line8{
+ left:160%;
+ width: 95px;
+ }
+ #page00 .Group50::before{
+ font-size: 1.3vh;
+ top: -30%;
+ left: 20%;
+
+ }
+ .txt-Features{
+ top: 50%;
+ font-size: 5vh;
+ left: 35%;
+
+ rotate: 90deg;
+ }
+ #men{
+ opacity: 1;
+ position: relative;
+ right: 5%;
+ }
+ #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%;
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f20432c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,481 @@
+
+
+
+
+
+ Nothing Phone (1) - Nothing India
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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..0575535
--- /dev/null
+++ b/script.js
@@ -0,0 +1,781 @@
+function locomotive(){
+ gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+ el: document.querySelector("#main"),
+ smooth: true,
+ mobile:{
+ smooth:true,
+ }
+
+
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy("#main", {
+ scrollTop(value) {
+ return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+ }, // we don't have to define a scrollLeft because we're only scrolling vertically.
+ getBoundingClientRect() {
+ return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+ },
+ // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+ pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+
+}
+locomotive()
+const page0=document.getElementById("page-0");
+const menu=document.querySelector("#men");
+const close0=document.querySelector("#page-0 #up")
+menu.addEventListener("click",function(){
+
+ page0.style.top="0%";
+});
+close0.addEventListener("click",function(){
+ page0.style.top="-100%";
+});
+var t1=gsap.timeline();
+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 media1 = window.matchMedia('(max-width: 600px)');
+
+// t1.to("#half1",{
+// duration:1,
+// stagger:2,
+// y:500,
+// })
+// t1.to("#half2",{
+
+// duration:1,
+// stagger:2,
+// y:-500,
+// })
+// t1.from(nothing,{
+// scale:5,
+// duration:1,
+// x:550,
+// y:300,
+
+
+// })
+t1.from(".el",{
+ y: -100,
+ opacity:0,
+ duration:0.5,
+ stagger:0.25,
+})
+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,
+})
+
+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%",
+ }
+});
+
+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,
+
+ }
+
+});
+if(media1.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(media1.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,
+
+ }
+ });
+}
+
+
+
+
+
+if(media1.matches){
+
+ t1.to("#page1 #imgdiv",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ opacity:1,
+ top:"110%",
+ left:"110%",
+ scrollTrigger:{
+ trigger:"#page1",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+ });
+}
+else{
+ t1.to("#page1 #imgdiv",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ opacity:1,
+ top:"145%",
+ scrollTrigger:{
+ trigger:"#page1",
+ scroller:"#main",
+ pin:true,
+ 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(group3,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group3,
+ scroller:"#main",
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to(group4,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group4,
+ scroller:"#main",
+
+ start:"top 20%",
+ end:"top 5%",
+ scrub:2,
+
+ }
+
+});
+if(media1.matches){
+ t1.to("#page00 #imgdiv00",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ top:"110%",
+ left:"100%",
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page00",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+ });
+}
+else{
+ t1.to("#page00 #imgdiv00",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ top:"145%",
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page00",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+ });
+}
+
+t1.to(group50,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group50,
+ 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,
+
+
+ }
+
+});
+t1.to("#page2 #imgdiv2",{
+ scale:1.4,
+ rotation: -90,
+ opacity:1,
+
+ duration:3,
+
+ scrollTrigger:{
+ trigger:"#page2",
+ scroller:"#main",
+ pin:true,
+ 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,
+ }
+});
+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,
+
+
+ }
+});
+
+
+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,
+
+ }
+ });
+}
+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,
+
+ }
+});
+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,
+ }
+});
+
+
+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: "50vh"
+ });
+ currentlyOpenElement = detailsElement;
+ }
+}
+
+
+document.querySelectorAll('.elem').forEach(function(el) {
+ el.addEventListener('click', handleClick);
+});
+
+
+document.querySelectorAll('.elem2').forEach(function(el) {
+ el.addEventListener('click', handleClick);
+});
+let mm = gsap.matchMedia();
+
+mm.add("(min-width: 1440px)", () => {
+ gsap.to("#page3 #imgdiv5",{
+ top:"80%",
+ stagger:0.25,
+ duration:1,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page3 #imgdiv5",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+ });
+});
+
+// mm.add("(max-width: 600px)",()=>{
+// const t2 = gsap.timeline();
+// t1.to("#page #splash1",{
+// left:"-20%",
+// duration:2,
+// opacity:1,
+
+// });
+// t1.to("#page #splash2",{
+// right:"-40%",
+// opacity:1,
+// duration:2,
+// scrub:2,
+// // scrollTrigger:{
+// // trigger:"#page #splash2",
+// // scroller:"#main",
+// // scrub:2,
+
+// // }
+// });
+// t1.to("#page1 #imgdiv",{
+// scale:3,
+// stagger:0.25,
+// duration:3,
+// opacity:1,
+// top:"120%",
+// left:"110%",
+// // scrollTrigger:{
+// // trigger:"#page1",
+// // scroller:"#main",
+// // pin:true,
+// // scrub:2,
+
+// // }
+
+// });
+// });
\ No newline at end of file