Merge branch 'master' of https://code.bizgaze.com/sachin.ganesh/anwi_website

dist/html/pages/laptopmulti.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
     <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="./../../css/main.css" />
+    <!-- <link rel="stylesheet" href="./../../css/main.css" /> -->
     <link rel="stylesheet" href="../../../styles/style.css">
     <title>project</title>
 </head>
@@ -36,7 +36,7 @@
             </div>
 
         </div>
-        <div class="price_footer py-4 w-100 ">
+        <div class="price_footer  py-4 w-100 ">
             <div class="d-flex align-items-center container justify-content-between">
                 <div class="d-flex">
                     <div class="boxImgContainer">
@@ -44,22 +44,23 @@
                     </div>
                     <div class="ps-3 ">
                         <div class="satoshi_font fw-700">Delivery</div>
-                        <div  class="satoshi_font">See estimated delivery times by</div>
-                        <div  class="satoshi_font ">entering your PIN code</div>
+                        <div class="satoshi_font">See estimated delivery times by</div>
+                        <div class="satoshi_font ">entering your PIN code</div>
                     </div>
                 </div>
-                <div class="d-flex align-items-center">
+                <div class="d-flex align-items-center ">
                     <div class="pe-5">
-                        <div class="font-1_5 fw-bold">$69,999.00</div>
-                        <div class="d-flex align-items-center justify-content-end gap-1 priceCut_multi">
-                            <span class="text-decoration-line-through  pe-3">$ 89,999</span><span> Save $ 19,999</span>
+                        <div class="font-1_5  fw-700 satoshi_font">$69,999.00</div>
+                        <div class="d-flex align-items-center pt-1 justify-content-end gap-1 priceCut_multi">
+                            <span class="text-decoration-line-through  pe-3 satoshi_font">$ 89,999</span><span
+                                class="satoshi_font text-green-Awni"> Save $ 19,999</span>
                         </div>
                     </div>
                     <div>
                         <div>
-                            <button>Add to Cart</button>
+                            <a class="btn btn-dark button_dark" href="#">Add to cart</a>
                         </div>
-                        <div>No Cost EMI Available <span>Learn more</span></div>
+                        <div class="satoshi_font PO_learnMore mt-2">No Cost EMI Available <span>Learn more</span></div>
                     </div>
                 </div>
             </div>
@@ -71,17 +72,18 @@
             <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
             <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
                 4K OLED Dual Screen for Creative Multitasking</div>
-            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                eirmod tempor
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
         </div>
     </section>
 
     <!-- photos display -->
-    <div class="container PO_galleryContainer">
+    <section class="container  PO_galleryContainer">
         <div class="p-6 pt-0">
             <div class="PO_gallery_display">
-               <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
+                <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
             </div>
             <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
                 <span class="PO_gallery_box h-100">
@@ -116,16 +118,304 @@
                 </span>
             </div>
         </div>
-    </div>
+    </section>
     <!-- photos display end -->
 
 
     <!-- specs  -->
-        
+    <section class="container p-6">
+        <div class="productoverBox row w-100 h-700p">
+            <div class="col-sm-5">
+                <div class="PO_box">
+                    <div class="h-40 ">
+                        <div class="box_inner bgBox_Content  br-1">
+                            <div class="row h-100">
+                                <div class="svg_container col-6 d-flex justify-content-center align-items-center">
+                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        width="120" height="120" viewBox="0 0 169 169">
+                                        <defs>
+                                            <clipPath id="clip-path">
+                                                <rect id="Rectangle_619" data-name="Rectangle 619" width="169"
+                                                    height="169" transform="translate(0.5 0.5)" />
+                                            </clipPath>
+                                        </defs>
+                                        <g id="Group_929" data-name="Group 929" transform="translate(-0.5 -0.5)">
+                                            <g id="Group_928" data-name="Group 928" clip-path="url(#clip-path)">
+                                                <path id="Path_654" data-name="Path 654"
+                                                    d="M169,30.983V25.35H154.917V22.533a8.45,8.45,0,0,0-8.45-8.45H143.65V0h-5.633V14.083h-5.633V0H126.75V14.083h-5.633V0h-5.633V14.083H109.85V0h-5.633V14.083H98.583V0H92.95V14.083H87.317V0H81.683V14.083H76.05V0H70.417V14.083H64.783V0H59.15V14.083H53.517V0H47.883V14.083H42.25V0H36.617V14.083H30.983V0H25.35V14.083H22.533a8.45,8.45,0,0,0-8.45,8.45V25.35H0v5.633H14.083v5.633H0V42.25H14.083v5.633H0v5.633H14.083V59.15H0v5.633H14.083v5.633H0V76.05H14.083v5.633H0v5.633H14.083V92.95H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v2.817a8.45,8.45,0,0,0,8.45,8.45H25.35V169h5.633V154.917h5.633V169H42.25V154.917h5.633V169h5.633V154.917H59.15V169h5.633V154.917h5.633V169H76.05V154.917h5.633V169h5.633V154.917H92.95V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h2.817a8.45,8.45,0,0,0,8.45-8.45V143.65H169v-5.633H154.917v-5.633H169V126.75H154.917v-5.633H169v-5.633H154.917V109.85H169v-5.633H154.917V98.583H169V92.95H154.917V87.317H169V81.683H154.917V76.05H169V70.417H154.917V64.783H169V59.15H154.917V53.517H169V47.883H154.917V42.25H169V36.617H154.917V30.983ZM149.283,146.467a2.817,2.817,0,0,1-2.817,2.817H22.533a2.817,2.817,0,0,1-2.817-2.817V22.533a2.817,2.817,0,0,1,2.817-2.817H146.467a2.817,2.817,0,0,1,2.817,2.817Z" />
+                                                <path id="Path_655" data-name="Path 655"
+                                                    d="M187.483,72H74.817A2.817,2.817,0,0,0,72,74.817V187.483a2.817,2.817,0,0,0,2.817,2.817H187.483a2.817,2.817,0,0,0,2.817-2.817V74.817A2.817,2.817,0,0,0,187.483,72m-2.817,112.667H77.633V77.633H184.667Z"
+                                                    transform="translate(-46.65 -46.65)" />
+                                            </g>
+                                        </g>
+                                    </svg>
+
+                                </div>
+                                <div class="col-6 d-flex justify-content-center align-items-center">
+                                    <span> Latest 11th Gen Intel Core i5/i7 H35 </span>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="h-40 ">
+                        <div class="box_inner bgBox_Content br-1">
+                            2
+                        </div>
+
+                    </div>
+                    <div class="d-flex h-20 w-100">
+                        <div class="box_inner  box_inner_left w-50">
+                            <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">4</div>
+
+                        </div>
+                        <div class="box_inner box_inner_right w-50">
+                            <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">5</div>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-sm-4">
+                <div class="PO_box">
+                    <div class="h-30 ">
+                        <div class="box_inner bgBox_Content br-1">
+                            1
+                        </div>
+
+                    </div>
+                    <div class="h-20 ">
+                        <div class="box_inner bgBox_Content br-1">
+                            2
+                        </div>
+
+                    </div>
+                    <div class="h-40 ">
+                        <div class="box_inner bgBox_Content br-1">
+                            2
+                        </div>
+
+                    </div>
+                    <div class="h-10">
+                        <div class="box_inner bgBox_Content br-1">
+                            2
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-sm-3">
+                <div class="PO_box">
+                    <div class="h-35">
+                        <div class="box_inner bgBox_Content br-1  ">
+                            2
+                        </div>
+                    </div>
+                    <div class="h-20">
+                        <div class="box_inner bgBox_Content br-1  ">
+                            2
+                        </div>
+                    </div>
+                    <div class="h-30">
+                        <div class="box_inner bgBox_Content br-1  ">
+                            2
+                        </div>
+                    </div>
+                    <div class="h-15">
+                        <div class="box_inner bgBox_Content br-1  ">
+                            2
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </section>
     <!-- specs end -->
 
+    <!-- TWO SCREENS ZERO BOUNDARIES  -->
+    <section class="displayscreenpad">
+        <div class="">
+            <div class=" d-flex flex-column align-items-center justify-content-center">
+                <div class="satoshi_font font-1_7 fw-600">
+                    Display / Screenpad
+                </div>
+                <div class="displayscreenpadContainer">
+                    <h1 class="displayscreenpadHeading orbitron_font">TWO SCREENS.</h1>
+                    <h1 class="displayscreenpadHeading orbitron_font">ZERO BOUNDARIES</h1>
+                </div>
+                <!-- <div class="w-100 d-flex">
+                <div class="displayscreenpadleft w-50  position-relative">
+                    <img class="h-100 position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
+                </div>
+                <div class="displayscreenpadright w-50  position-relative">
+                    <img class="h-100  position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
+                </div>
+               </div> -->
+                <div class="container-fluid w-100 d-flex  position-relative displayscreenpadMain">
+                    <div class="displayscreenpadleft w-50">
+                        <img class="h-100 position-relative w-100"
+                            src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
+                    </div>
+                    <div class="displayscreenpadright w-50">
+                        <img class="h-100 position-relative w-100"
+                            src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section>
+
+    </section>
+    
+
+    <section class="dualLaptop">
+        <div class="zeroBMain_des">
+            <div>
+                <h1 class="dual_des_heading orbitron_font">Experience Ultimate</h1>
+                <h1 class="dual_des_heading orbitron_font">productivity</h1>
+            </div>
+            <div class="satoshi_font zeroBMain_desP">
+                Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
+                availability Experience
+                ultimate productivityExperience ultimate productivity
+                Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
+                availability Experience
+                ultimate productivityExperience ultimate productivity
+            </div>
+        </div>
+        <div class="w-100 h-100 dualImgs dualImgsOne">
+            <div class="dualImgsInner">
+                <img src="./../../assets/imgs/productoverview/boudone.png" alt="" class="w-100 h-100">
+            </div>
+        </div>
+        <div class="w-100 h-100 dualImgs dualImgsTwo">
+            <div class="dualImgsInner">  
+                <img src="./../../assets/imgs/productoverview/boudtwo.png" alt="" class="w-100 h-100">
+            </div>
+        </div>
+    </section>
+    <section  class="tableLaptop d-flex justify-content-center align-items-center">
+        <div class="justTableLaptop">
+            <img src="./../../assets/imgs/productoverview/justtablelaptop.png" alt="" class="w-100 h-100">
+        </div>
+        <div class="circleTableLaptop">
+            <div class="circleTableLaptop_Heading text-center">
+                <h1 class="dual_des_heading orbitron_font fw-700">Two Screens.</h1>
+                <h1 class="dual_des_heading orbitron_font fw-700"> Zero BOUNDARIES.</h1>
+            </div>
+            <div class="circleTableLaptopTop">
+                <img src="./../../assets/imgs/productoverview/laptoptable.png" alt="" class="w-100 h-100">
+            </div>
+            <div class="circleTableLaptop_text font_p_Dual">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore
+                magna aliquyam erat, sed diam voluptua. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam
+                nonumy eirmodorem ipsum dolor sit amet, consetetur
+                sadipscing elitr, sed
+            </div>
+        </div>
+    </section>
+
+    <section class="trueLifeDisplay">
+        <div class="trueLifeDisplay_headingHD text-center pb-5">
+            <h1 class="orbitron_font headingLife fw-700">2.5k QHD +</h1>
+            <h1 class="orbitron_font  fw-700">Anwi Truelife Display</h1>
+        </div>
+        <div class="trueLifeDisplay_des">
+            <p class="satoshi_font font_p_Dual">Witness never before like visuals on the "2.5K (QHD+) Mi TrueLife Display that has twice as many pixels as a Full-HD display. Higher contrast ratio combined with up to 300 Nits of brightness ensures vivid colours
+                and excellent viewing angles.</p>
+        </div>
+        <div>
+            <img src="../../assets/imgs/productoverview/plantlaptop.png" alt="" class="w-100 h-100">
+        </div>
+    </section>
+
+    <section class="controlPanel container">
+       <div class="p-5">
+           
+        <div class="bgControlpanel ">
+            <div class="controlPanel_des">
+                <h1 class="orbitron_font font_4 fw-700">Customize</h1>
+                <h1 class="orbitron_font font_4 fw-700">your workflow</h1>
+                <h1 class="orbitron_font font_4 fw-700">with Control Panel</h1>
+            </div>
+            <div class="bgControlpaneltabs w-100 px-5">
+                <ul class="nav nav-tabs d-flex justify-content-between" id="myTab" role="tablist">
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link active" id="PhotoTab-tab" data-bs-toggle="tab" data-bs-target="#PhotoTab" type="button" role="tab" aria-controls="PhotoTab" aria-selected="true">Photo</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link" id="ProgrammerTab-tab" data-bs-toggle="tab" data-bs-target="#ProgrammerTab" type="button" role="tab" aria-controls="ProgrammerTab" aria-selected="false">ProgrammerTab</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link" id="VideoEdtior-tab" data-bs-toggle="tab" data-bs-target="#VideoEdtior" type="button" role="tab" aria-controls="VideoEdtior" aria-selected="false">VideoEdtior</button>
+                    </li>
+                  
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link" id="Music_Artist-tab" data-bs-toggle="tab" data-bs-target="#Music_Artist" type="button" role="tab" aria-controls="Music_Artist" aria-selected="false">Music Artist</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button class="nav-link" id="3D_ARTIST-tab" data-bs-toggle="tab" data-bs-target="#    " type="button" role="tab" aria-controls="3D_ARTIST" aria-selected="false">3D_ARTIST</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link " id="gamerTab-tab" data-bs-toggle="tab" data-bs-target="#gamerTab" type="button" role="tab" aria-controls="gamerTab" aria-selected="false">Game</button>
+                      </li>
+                  </ul>
+                  <div class="tab-content" id="tabLaptopContent">
+    
+                    <div class="tab-pane fade show active" id="PhotoTab" role="tabpanel" aria-labelledby="PhotoTab-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, deleniti!</div>
+    
+                    <div class="tab-pane fade" id="ProgrammerTab" role="tabpanel" aria-labelledby="ProgrammerTab-tab">ProgrammerTab</div>
+    
+                    <div class="tab-pane fade" id="VideoEdtior" role="tabpanel" aria-labelledby="VideoEdtior-tab">
+                        <img src="./../../assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">
+                    </div>
+    
+                    <div class="tab-pane fade" id="Music_Artist" role="tabpanel" aria-labelledby="Music_Artist-tab">Music_Artist</div>
+    
+                    <div class="tab-pane fade" id="3D_ARTIST" role="tabpanel" aria-labelledby="3D_ARTIST-tab">3d</div>
+    
+                    <div class="tab-pane fade" id="gamerTab" role="tabpanel" aria-labelledby="gamerTab-tab">game</div>
+                  </div>
+            </div>
+        </div>
+    </div>
+    </section>
+    <section class="designedProLaptop">
+        <div class="px-5 designedProLaptop_title">
+            <h1 class="designedProLaptop_title_text orbitron_font">Designed for
+               </h1>
+               <h1 class="designedProLaptop_title_text orbitron_font"> a Pro</h1>
+        </div>
+       <div class="designedProLaptop_img">
+        <img src="./../../assets/imgs/productoverview/designedPro.png" alt="" class="img-fluid">
+       </div>
+       <ul class="">
+        <li>
+            <span>17.3</span> mm Thin   
+           
+        </li> 
+        <li>
+            <span>1.46</span> kg Light
+           
+        </li>
+        <li>
+            <span>0.3</span> mm Depeth
+          
+        </li>
+        <li>  <span></span> Superior quality 
+            hinge tested for up 
+            to <span> 30,000 operations</span></li>
+       </ul>
+    </section>
+
     <!-- footer -->
-    <div id="footer-head"></div>
+    <!-- <section id="footer-head"></section> -->
     <!-- end-footer -->
 
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>

styles/base/_base.scss

@@ -6,14 +6,14 @@
     box-sizing: inherit;
 }
 
-html {
-   font-size: 100%;
-}
+// html {  
+//     font-size: 62.5%;
+// }
 
 body {
     box-sizing: border-box;
-  
-
+    // font-size: 62.5%;
+    overflow-x: hidden;
     @include respond(tab-port) {
         padding: 0;
     }

styles/base/_utilities.scss

@@ -4,6 +4,14 @@
   background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
 }
 
+.text-green-Awni{
+  color: #0A886A;
+}
+
+.orbitron_font{
+  font-family: 'Orbitron', sans-serif;
+}
+
 // font size
 .font-3 {
   font-size: 3rem;
@@ -24,15 +32,21 @@
   font-size: 2.2rem;
 }
 
+.font-2_7{
+  font-size: 2.7rem;
+}
+
+
+.font_4{
+  font-size: 4rem;
+}
 
 
 .subtitle_1 {
   font-size: 1.5rem;
 }
 
-.gap-1 {
-  gap: 0.7rem;
-}
+
 
 .banner_heading_4 {
   font-size: 3rem;
@@ -55,10 +69,44 @@
 
 // heights
 
+.h-10{
+  height: 10%;
+}
+
+.h-15{
+  height: 15%;
+}
+
+.h-20{
+  height: 20%;
+}
+
+.h-30{
+  height: 30%;
+}
+
+.h-33{
+  height: 33%;
+}
+.h-34{
+  height: 34%;
+}
+.h-35{
+  height: 35%;
+}
+
+.h-40{
+  height: 40%;
+}
+
 .vh_60{
   height: 60vh;
 }
 
+.vh-70{
+  height: 70vh;
+}
+
 .vh-77{
   height: 77vh;
 }
@@ -71,6 +119,10 @@
   height: 15vh;
 }
 
+.h-700p{
+  height: 700px;
+}
+
 
 // font weight
 
@@ -89,3 +141,18 @@
 
 
 
+// gap
+
+.gap-1 {
+  gap: 0.7rem;
+}
+
+.gap-2{
+  gap:2rem
+}
+
+// border-radius
+
+.br-1{
+  border-radius: 1rem;
+}

styles/pages/_productOverview.scss

@@ -1,27 +1,30 @@
-.productoverviewmain{
+.productoverviewmain {
   background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
-  background-color: #C9DBB5;
-  background-size:     cover;                    
-  background-repeat:   no-repeat;
-  background-position: center; 
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 
   position: relative;
-}  
+}
+
+$PO_footerText: 0.7rem;
 
 .photo_dual {
   width: 40rem;
 }
 
 .price_footer {
-  background: rgba( 255, 255, 255, 0.25 );
-/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
-backdrop-filter: blur( 4px );
--webkit-backdrop-filter: blur( 4px );
+  background: rgba(255, 255, 255, 0.25);
+  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 
-border: 1px solid rgba( 255, 255, 255, 0.18 );
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border: 2px solid;
 
   position: absolute;
+  z-index: 999;
   bottom: 0;
   left: 0;
 }
@@ -31,21 +34,29 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
 }
 
 .priceCut_multi {
-  font-size: 0.7rem;
+  font-size: $PO_footerText;
+}
+
+.PO_learnMore {
+  font-size: $PO_footerText;
 }
 
 .productOverview .overviewProductHeading {
   font-size: 2.1rem;
+  font-family: "satoshi", sans-serif;
+  font-weight: 500;
 }
 
 .productOverview .overviewProductFullTitle {
-  padding: 2rem 13rem;
+  padding: 2rem 11rem;
   font-size: 3rem;
+  font-family: "orbitron", sans-serif;
 }
 
 .productOverview .overviewProductDes {
   padding: 0 2rem;
   font-size: 1.5rem;
+  font-family: "satoshi", sans-serif;
 }
 
 .PO_galleryContainer .PO_gallery_display {
@@ -66,3 +77,264 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
   padding: 2rem;
   background-color: #eeeeee;
 }
+
+.productoverBox {
+  .PO_box {
+    // background-color: red;
+    height: 100%;
+    > div {
+      padding: 1rem 0rem;
+    }
+    .box_inner {
+      height: 100%;
+    }
+
+    .bgBox_Content {
+      background: rgb(236, 236, 236);
+      background: linear-gradient(
+        90deg,
+        rgba(236, 236, 236, 1) 4%,
+        rgba(118, 118, 118, 1) 100%
+      );
+    }
+    .box_inner_right {
+      padding-left: 1rem;
+    }
+    .box_inner_left {
+      padding-right: 1rem;
+    }
+  }
+}
+
+.displayscreenpad {
+  .displayscreenpadContainer {
+    text-align: center;
+  }
+  .displayscreenpadHeading {
+    font-size: 8rem;
+  }
+
+  .displayscreenpadMain {
+    top: -108px;
+  }
+  .displayscreenpadleft {
+    > img {
+      left: -8%;
+    }
+  }
+
+  .displayscreenpadright {
+    > img {
+      right: -10%;
+    }
+  }
+}
+
+.dual_des_heading{
+  font-size: 3rem;
+}
+
+
+.dualLaptop{
+  width: 100vw;
+  height: 1000px;
+  top:-100px;
+  margin-bottom: -100px;
+  position: relative;
+
+
+  .zeroBMain_desP{
+    font-size: 1.2rem;
+  }
+  .zeroBMain_des{
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 700px;
+    padding-right: 9rem;
+  }
+
+  .dualImgs{
+    position: absolute;
+
+
+    .dualImgsInner{
+      width: 63%;
+    }
+  }
+
+  
+  
+  .dualImgsOne{
+    top:0;
+    left: -10%;
+    transform: rotate(343deg);
+    width: 68%;
+  }
+  
+  .dualImgsTwo{
+    // top:0;
+    // right: -80%;
+    // transform: rotate(330deg);
+
+    top: 31%;
+    right: -68%;
+    transform: rotate(339deg);
+    .dualImgsInner{
+      width: 82%;
+    }
+  }
+}
+
+.tableLaptop{
+  margin-top: 300px;
+
+  // border: 1px solid;
+  height: 90vh;
+  width: 100vw;
+  position: relative;
+  .circleTableLaptop_Heading{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -311%);
+  }
+  .justTableLaptop{
+    position: absolute;
+    width: 86%;
+    top: -10px;
+    right: 128px;
+    z-index: 1;
+  }
+
+  .circleTableLaptop{
+    background-color: #ECECEC;
+    height: 70rem;
+    width: 70rem;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+
+   
+    .circleTableLaptopTop{
+      
+    bottom: -3%;
+    width: 80%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 2%);
+
+    }
+  }
+
+  .circleTableLaptop_text{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 168%);
+
+  }
+
+  margin-bottom: 300px;
+}
+
+.trueLifeDisplay{
+ .trueLifeDisplay_headingHD{
+  >.headingLife{
+    font-size: 6rem; 
+  }
+ }
+
+ .trueLifeDisplay_des{
+  padding: 0 10rem;
+
+ }
+}
+
+.font_p_Dual{
+  font-size: 1.2rem;
+}
+
+.controlPanel{
+  
+  margin-top: 10rem;
+  padding-bottom: 550px;
+  .controlPanel_des{
+    position: absolute;
+    top: -170px;
+    left: 80px;
+
+  }
+  .bgControlpanel{
+    min-height: 100vh;
+    background-color: #ECECEC;
+    border-radius: 157px;
+    position: relative;
+
+    .bgControlpaneltabs{
+      
+      position: absolute;
+      top: 100px;
+      right: 0;
+
+      .nav-tabs{
+        border-bottom: 1px solid;
+        margin-bottom: 2rem;
+      }
+      .nav-item{
+        position: relative;
+        border: none;
+      }
+     
+    
+      .nav-tabs .nav-link {
+       position: relative;
+       color: black;
+       font-weight: 500;
+      }
+    
+      .nav-tabs .nav-link.active{
+        border: none;
+        background-color: transparent;
+      }
+    
+      .nav-tabs .nav-link.active::before {
+        display: block;
+      }
+    
+      .nav-item .nav-link::before{
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 5px;
+        bottom: -2px;
+        right: 0;
+        display: none;
+        background-color: black;
+      }
+    }
+  }
+ 
+
+}
+
+.designedProLaptop{
+  position: relative;
+  .designedProLaptop_title{
+    position: absolute;
+    top: -200px;
+    left: 0;
+    z-index: 1;
+
+    
+  }
+  .designedProLaptop_title_text{
+    font-size: 10rem;
+  }
+  .designedProLaptop_img{
+    position: absolute;
+    top: 0;
+    right: 700px;
+  }
+}

styles/style.css

@@ -0,0 +1,555 @@
+/*
+0 - 600px:      Phone
+600 - 900px:    Tablet portrait
+900 - 1200px:   Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + :      Big desktop
+
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+body {
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+@media only screen and (max-width: 56.25em) {
+  body {
+    padding: 0;
+  }
+}
+
+.bg-green {
+  background-color: #3bb78f;
+  background: linear-gradient(90deg, #3bb78f 0%, rgb(11, 171, 100) 35%, rgb(59, 183, 143) 100%);
+}
+
+.text-green-Awni {
+  color: #0A886A;
+}
+
+.orbitron_font {
+  font-family: "Orbitron", sans-serif;
+}
+
+.font-3 {
+  font-size: 3rem;
+}
+
+.font-1_5 {
+  font-size: 2rem;
+}
+
+.font-1_7 {
+  font-size: 1.7rem;
+}
+
+.font-2 {
+  font-size: 2.2rem;
+}
+
+.font-2_2 {
+  font-size: 2.2rem;
+}
+
+.font-2_7 {
+  font-size: 2.7rem;
+}
+
+.font_4 {
+  font-size: 4rem;
+}
+
+.subtitle_1 {
+  font-size: 1.5rem;
+}
+
+.banner_heading_4 {
+  font-size: 3rem;
+}
+
+.padding_top_14 {
+  padding-top: 14rem;
+}
+
+.p-6 {
+  padding: 5rem;
+}
+
+.padding_top_10 {
+  padding-top: 10rem;
+}
+
+.h-10 {
+  height: 10%;
+}
+
+.h-15 {
+  height: 15%;
+}
+
+.h-20 {
+  height: 20%;
+}
+
+.h-30 {
+  height: 30%;
+}
+
+.h-33 {
+  height: 33%;
+}
+
+.h-34 {
+  height: 34%;
+}
+
+.h-35 {
+  height: 35%;
+}
+
+.h-40 {
+  height: 40%;
+}
+
+.vh_60 {
+  height: 60vh;
+}
+
+.vh-70 {
+  height: 70vh;
+}
+
+.vh-77 {
+  height: 77vh;
+}
+
+.vh-85 {
+  height: 85vh;
+}
+
+.vh-15 {
+  height: 15vh;
+}
+
+.h-700p {
+  height: 700px;
+}
+
+.fw-600 {
+  font-weight: 600;
+}
+
+.fw-700 {
+  font-weight: 700;
+}
+
+.h-200p {
+  height: 200px;
+}
+
+.gap-1 {
+  gap: 0.7rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.br-1 {
+  border-radius: 1rem;
+}
+
+.button_dark {
+  -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+          clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+  padding-right: 1.7rem;
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+  border-radius: 10px;
+}
+
+.productoverviewmain {
+  background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+}
+
+.photo_dual {
+  width: 40rem;
+}
+
+.price_footer {
+  background: rgba(255, 255, 255, 0.25);
+  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 2px solid;
+  position: absolute;
+  z-index: 999;
+  bottom: 0;
+  left: 0;
+}
+
+.boxImgContainer {
+  width: 4rem;
+}
+
+.priceCut_multi {
+  font-size: 0.7rem;
+}
+
+.PO_learnMore {
+  font-size: 0.7rem;
+}
+
+.productOverview .overviewProductHeading {
+  font-size: 2.1rem;
+  font-family: "satoshi", sans-serif;
+  font-weight: 500;
+}
+
+.productOverview .overviewProductFullTitle {
+  padding: 2rem 11rem;
+  font-size: 3rem;
+  font-family: "orbitron", sans-serif;
+}
+
+.productOverview .overviewProductDes {
+  padding: 0 2rem;
+  font-size: 1.5rem;
+  font-family: "satoshi", sans-serif;
+}
+
+.PO_galleryContainer .PO_gallery_display {
+  min-height: 500px;
+  width: 100%;
+  background: white;
+  background: linear-gradient(180deg, white 7%, rgba(255, 142, 158, 0.3019607843) 52%, rgba(235, 134, 148, 0.4705882353) 100%);
+  position: relative;
+}
+
+.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.PO_galleryContainer .PO_gallery_box_inner {
+  padding: 2rem;
+  background-color: #eeeeee;
+}
+
+.productoverBox .PO_box {
+  height: 100%;
+}
+.productoverBox .PO_box > div {
+  padding: 1rem 0rem;
+}
+.productoverBox .PO_box .box_inner {
+  height: 100%;
+}
+.productoverBox .PO_box .bgBox_Content {
+  background: rgb(236, 236, 236);
+  background: linear-gradient(90deg, rgb(236, 236, 236) 4%, rgb(118, 118, 118) 100%);
+}
+.productoverBox .PO_box .box_inner_right {
+  padding-left: 1rem;
+}
+.productoverBox .PO_box .box_inner_left {
+  padding-right: 1rem;
+}
+
+.displayscreenpad .displayscreenpadContainer {
+  text-align: center;
+}
+.displayscreenpad .displayscreenpadHeading {
+  font-size: 8rem;
+}
+.displayscreenpad .displayscreenpadMain {
+  top: -108px;
+}
+.displayscreenpad .displayscreenpadleft > img {
+  left: -8%;
+}
+.displayscreenpad .displayscreenpadright > img {
+  right: -10%;
+}
+
+.dual_des_heading {
+  font-size: 3rem;
+}
+
+.dualLaptop {
+  width: 100vw;
+  height: 1000px;
+  top: -100px;
+  margin-bottom: -100px;
+  position: relative;
+}
+.dualLaptop .zeroBMain_desP {
+  font-size: 1.2rem;
+}
+.dualLaptop .zeroBMain_des {
+  position: absolute;
+  top: 0;
+  right: 0;
+  max-width: 700px;
+  padding-right: 9rem;
+}
+.dualLaptop .dualImgs {
+  position: absolute;
+}
+.dualLaptop .dualImgs .dualImgsInner {
+  width: 63%;
+}
+.dualLaptop .dualImgsOne {
+  top: 0;
+  left: -10%;
+  transform: rotate(343deg);
+  width: 68%;
+}
+.dualLaptop .dualImgsTwo {
+  top: 31%;
+  right: -68%;
+  transform: rotate(339deg);
+}
+.dualLaptop .dualImgsTwo .dualImgsInner {
+  width: 82%;
+}
+
+.tableLaptop {
+  margin-top: 300px;
+  height: 90vh;
+  width: 100vw;
+  position: relative;
+  margin-bottom: 300px;
+}
+.tableLaptop .circleTableLaptop_Heading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -311%);
+}
+.tableLaptop .justTableLaptop {
+  position: absolute;
+  width: 86%;
+  top: -10px;
+  right: 128px;
+  z-index: 1;
+}
+.tableLaptop .circleTableLaptop {
+  background-color: #ECECEC;
+  height: 70rem;
+  width: 70rem;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+.tableLaptop .circleTableLaptop .circleTableLaptopTop {
+  bottom: -3%;
+  width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 2%);
+}
+.tableLaptop .circleTableLaptop_text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 168%);
+}
+
+.trueLifeDisplay .trueLifeDisplay_headingHD > .headingLife {
+  font-size: 6rem;
+}
+.trueLifeDisplay .trueLifeDisplay_des {
+  padding: 0 10rem;
+}
+
+.font_p_Dual {
+  font-size: 1.2rem;
+}
+
+.controlPanel {
+  margin-top: 10rem;
+  padding-bottom: 550px;
+}
+.controlPanel .controlPanel_des {
+  position: absolute;
+  top: -170px;
+  left: 80px;
+}
+.controlPanel .bgControlpanel {
+  min-height: 100vh;
+  background-color: #ECECEC;
+  border-radius: 157px;
+  position: relative;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs {
+  position: absolute;
+  top: 100px;
+  right: 0;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs {
+  border-bottom: 1px solid;
+  margin-bottom: 2rem;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item {
+  position: relative;
+  border: none;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link {
+  position: relative;
+  color: black;
+  font-weight: 500;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active {
+  border: none;
+  background-color: transparent;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active::before {
+  display: block;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item .nav-link::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  bottom: -2px;
+  right: 0;
+  display: none;
+  background-color: black;
+}
+
+.designedProLaptop {
+  position: relative;
+}
+.designedProLaptop .designedProLaptop_title {
+  position: absolute;
+  top: -200px;
+  left: 0;
+  z-index: 1;
+}
+.designedProLaptop .designedProLaptop_title_text {
+  font-size: 10rem;
+}
+.designedProLaptop .designedProLaptop_img {
+  position: absolute;
+  top: 0;
+  right: 700px;
+}
+
+/*
+0 - 600px:      Phone
+600 - 900px:    Tablet portrait
+900 - 1200px:   Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + :      Big desktop
+
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+/* Orbitron */
+@font-face {
+  font-family: "Orbitron";
+  src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Orbitron";
+  src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Orbitron";
+  src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Orbitron";
+  src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+/* Orbitron end */
+/* Satoshi */
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+/* Satoshi end */
+.satoshi_font {
+  font-family: "Satoshi", sans-serif;
+}
+
+.bg-green {
+  background-color: #3bb78f;
+  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
+}
+
+/* button */
+.button_dark {
+  -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+          clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+  padding-right: 1.7rem;
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+  border-radius: 10px;
+}
+
+/* footer */
+.footer-wrapper {
+  background-color: rgb(0, 0, 0);
+  border-radius: 0 275px 0 0;
+  -webkit-clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
+          clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
+}
+
+.footer-wrapper li {
+  line-height: 2rem;
+}/*# sourceMappingURL=style.css.map */

styles/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["abstracts/_mixins.scss","base/_base.scss","style.css","base/_utilities.scss","components/_button.scss","pages/_productOverview.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}

styles/style.scss

@@ -78,31 +78,22 @@ ORDER: Base + typography > general layout + grid > page layout > components
   }
   
   /* Satoshi end */
-  *,
-  *::after,
-  *::before {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit; 
-  
-    font-family: "Orbitron" ,sans-serif;
-  }
-  
+
   .satoshi_font{
     font-family: "Satoshi", sans-serif;
   }
   
-  html {
-    font-size: 100%; }
+  // html {
+  //   font-size: 100%; }
   
-  body {
-    box-sizing: border-box; 
-    overflow-x: hidden;
-  }
-    @media only screen and (max-width: 56.25em) {
-      body {
-        padding: 0; } 
-    }
+  // body {
+  //   box-sizing: border-box; 
+  //   overflow-x: hidden;
+  // }
+  //   @media only screen and (max-width: 56.25em) {
+  //     body {
+  //       padding: 0; } 
+  //   }
   
   .bg-green {
     background-color: #3bb78f;