code added

dist/Js/allInOne.js

@@ -1,7 +1,8 @@
 $('.owl-carousel').owlCarousel({
-    rtl:true,
+    // rtl:true,
-    loop:true,
+    // loop:true,
     margin:200,
+ 
     nav:true,
     URLhashListener:true,
         autoplayHoverPause:true,
@@ -9,16 +10,87 @@ $('.owl-carousel').owlCarousel({
         responsive:{
             0:{
                 items:1,
-                nav:true
+                nav:true,
+                margin:10
             },
+
             600:{
-                items:3,
+                items:2,
-                nav:false
+                nav:false,
+                margin:200
             },  
+
             1000:{
+                items:3,
+                nav:true,
+                loop:false,
+                margin:10
+            },
+            1400:{
                 items:5,
                 nav:true,
-                loop:false
+                loop:false,
+                margin:200
             }
         }
 })
+
+const controller  = new ScrollMagic.Controller();
+const exploreSence = new ScrollMagic.Scene({
+    triggerElement:".animateHeadingLeft",
+    triggerHook:0.5,
+    reverse:false
+}).setClassToggle('.animateHeadingLeft','addTextanimationLeft').addTo(controller)
+const controllerNew  = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".animateHeadingRight",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.animateHeadingRight','addTextanimationRight').addTo(controllerNew)
+
+const controllerThree  = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".laptoponanimation",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.laptoponanimation','addOpacity').addTo(controllerThree)
+
+const controllerFour  = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".allinOnepc",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.allinOnepc','addOpacity').addTo(controllerFour)
+
+
+const controllerFive = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".dualLaptopSlideone",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.dualLaptopSlideone','addTextanimationRight').addTo(controllerFive)
+
+const controllerSix = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".dualLaptopSlideLeftone",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.dualLaptopSlideLeftone','dualLaptopSlideLeftoneLeft').addTo(controllerSix)
+
+const controllerSeven = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".cpuSlideLeftone",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.cpuSlideLeftone','traslateZero').addTo(controllerSeven)
+
+const controllerEight = new ScrollMagic.Controller();
+new ScrollMagic.Scene({
+    triggerElement:".controllerEight",
+    triggerHook:0.9,
+    reverse:false
+}).setClassToggle('.controllerEight','traslateZero').addTo(controllerSeven)
+
+
+
+

laptopmulti.html

@@ -460,7 +460,7 @@
         <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">
+                    <div class="satoshi_font twoScreenHeading font-1_7 fw-600">
                         Two Screens
                     </div>
                     <div class="displayscreenpadContainer">
@@ -501,7 +501,7 @@
                     <img src="dist/assets/imgs/productoverview/leftlap.png" alt="" class="img-fluid">
                 </div>
                 <div class="col-5 ps-0 ">
-                    <div class="zeroBMain_des d-none d-md-block" style="margin-left: -200px;">
+                    <div class="zeroBMain_des dualpassage p-6 d-none d-md-block" style="margin-left: -200px;">
                         <div>
                             <h1 class="dual_des_heading orbitron_font">Complemented by Multi-touch Brilliance
                             </h1>
@@ -568,7 +568,7 @@
             <div class="position-relative">
                 <img src="dist/assets/imgs/sectiontest.png" alt="" class="img-fluid w-100">
                     <div class="circleTableLaptop_Heading text-center position-absolute w-100 ">
-                        <h1 class="orbitron_font fw-700">Two Screens</h1>
+                        <h1 class="orbitron_font fw-700 ">Two Screens</h1>
                         <h1 class="orbitron_font fw-700"> To Display</h1>
                         <h1 class="orbitron_font fw-700">True Colors
                         </h1>
@@ -670,18 +670,18 @@
                                     class="w-100 h-100" alt=""></div>
         
                             <div class="tab-pane fade" id="ProgrammerTab" role="tabpanel"
-                                aria-labelledby="ProgrammerTab-tab">ProgrammerTab</div>
+                                aria-labelledby="ProgrammerTab-tab"><img src="dist/assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt=""></div>
         
                             <div class="tab-pane fade" id="VideoEdtior" role="tabpanel" aria-labelledby="VideoEdtior-tab">
                                 <img src="dist/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>
+                                <img src="dist/assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt=""></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 class="tab-pane fade" id="gamerTab" role="tabpanel" aria-labelledby="gamerTab-tab"><img src="dist/assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">
                             </div>
                         </div>
                     </div>
@@ -808,56 +808,56 @@
             <div class="row row_lensAnwi p-6">
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
                         <div>
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">Ergonomic</h1>
                         </div>
-                        <div class="screenpadLens">ScreenPad™ Plus</div>
+                        <div class="screenpadLens text-center fw-500">ScreenPad™ Plus</div>
                     </div>
                 </div>
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
                         <div>
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1>
                         </div>
-                        <div class="screenpadLens">Vivid colors</div>
+                        <div class="screenpadLens text-center fw-500">Vivid colors</div>
                     </div>
                 </div>
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
                         <div>
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">100%</h1>
                         </div>
-                        <div class="screenpadLens">DCI-P3 color gamut</div>
+                        <div class="screenpadLens text-center fw-500">DCI-P3 color gamut</div>
                     </div>
                 </div>
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
                         <div>
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1>
                         </div>
-                        <div class="screenpadLens">Vivid colors</div>
+                        <div class="screenpadLens text-center fw-500">Vivid colors</div>
                     </div>
                 </div>
     
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
@@ -865,21 +865,21 @@
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">
                                 Delta-E  2</h1> 
                         </div> 
-                        <div class="screenpadLens">
+                        <div class="screenpadLens text-center fw-500">
                                     color accuracy
                         </div>
                     </div>
                 </div>
                 <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
                     <div
-                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4">
+                        class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
                         <div class="box_lens_img">
                             <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
                         </div>
                         <div>
                             <h1 class="orbitron_font lenHeading m-0 p-0 font-2">3840X2160</h1>
                         </div>
-                        <div class="screenpadLens">4K UHD main display</div>
+                        <div class="screenpadLens text-center fw-500">4K UHD main display</div>
                     </div>
                 </div>
         

styles/abstracts/_variables.scss

@@ -1,3 +1,5 @@
 // $primary-color: steelblue;
 
 $grey-bg:#EEEEEE;
+
+$animation-timer:.8s;

styles/pages/_allInOne.scss

@@ -19,6 +19,8 @@
     }
 
     .innerClipPathImgFirstFour{
+      
+    
         position: absolute;
         top: 12%;
         left:5%;
@@ -62,16 +64,16 @@
     
 }
 .allinoneLanding{
-    background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
+    // background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
-    background-color: white;
+    // background-color: white;
-    background-size: cover;
+    // background-size: cover;
-    background-repeat: no-repeat;
+    // background-repeat: no-repeat;
-    background-position: center;
+    // background-position: center;
 
     position: relative;
 
-    width: 100vw;
+    // width: 100vw;
-    height: 100vh;
+    // height: 100vh;
     #navbar-head *{
         color: white;
     }
@@ -161,6 +163,44 @@
     }
 }
 
+// owl-nav
+.allinoneslider{
+    .carouselLanding {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .owl-nav{
+        bottom: 0;
+        position: absolute;
+        display: none;
+        right: 15%;
+        border: 1px solid;
+        padding: 0.5rem 1.3rem;
+        border-radius: 70px;
+        span{
+            font-size: 2rem;
+            text-align: center;
+        }
+    }
+    
+    .owl-stage{
+        width: 100% !important;
+    }
+}
+
+@media (max-width:1400px) {
+    .allinoneslider{
+       
+        
+        .owl-stage{
+            width: max-content !important;
+        }
+    }
+}
+
+
 @media (max-width:1300px) {
    .laptopsSection .headinglaptop{
         font-size: 5rem;
@@ -220,6 +260,8 @@
 }
 
 @media (max-width:600px) {
+
+    
     .supTitleSection{
         text-align: center;
         font-size: 1rem;
@@ -326,6 +368,25 @@
     
  }
 
+ @media (max-width:576px){
+    .allinInMargintop{
+        margin-top: 100px;
+    }
+    .content-main-allinone{
+        padding: 1rem;
+    }
+    .scaleSmallAllinone{
+        scale: 0.9;
+    }
+    .allinoneslider{
+       
+        
+        .owl-stage{
+            width: max-content !important;
+        }
+    }
+ }
+
 
  @media (max-width:320px) {
     
@@ -380,3 +441,67 @@
         }
     }
  }
+
+.animateHeadingLeft,.dualLaptopSlideLeftone{
+    transform: translateX(1000%);
+    transition: $animation-timer ease;
+}
+
+.addTextanimationLeft{
+    transform: translateX(0);
+}
+
+.animateHeadingRight,.dualLaptopSlideone{
+    transform: translateX(-1000%);
+    transition: $animation-timer ease;
+}
+
+.addTextanimationRight{
+    transform: translateX(0);
+}
+
+// laptop 1
+.laptoponanimation,.allinOnepc{
+    opacity: 0;
+    transition: $animation-timer ease;
+}
+
+.addOpacity{
+    opacity: 1;
+}
+
+
+
+.clipPathSectionCol {
+    .dualLaptopSlideLeftone{
+        transform: translate(1000%,-50%);
+        transition: $animation-timer ease;
+    }
+    
+    .dualLaptopSlideLeftoneLeft{
+        transform: translate(0,-50%);
+    }
+
+   
+}
+
+.cpuSlideLeftone{
+    transform: translateX(-1000%);
+    transition: $animation-timer ease;
+}
+.controllerEight{
+    transform: translateX(1000%);
+}
+.traslateZero{
+    transform: translateX(0);
+}
+
+.clipPathSectionCol .innerClipPathImgSectionFour.controllerEight{
+    transform: translate(1000%,-50%);
+    transition: $animation-timer ease;
+}
+
+.clipPathSectionCol .innerClipPathImgSectionFour.traslateZero{
+    transform: translate(0,-50%);
+}
+

styles/pages/_productOverview.scss

@@ -26,7 +26,7 @@ $PO_footerText: 0.7rem;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border: 2px solid;
 
-  position: fixed;
+  position: absolute; //head
   z-index: 999;
   bottom: 0;
   left: 0;
@@ -559,6 +559,13 @@ $PO_footerText: 0.7rem;
   
 }
 
+@media (max-width:1000px){
+  .dualpassage{
+    padding-left: 10rem;
+    padding-right: 2rem;
+  }
+}
+
 @media (max-width:790px) {
 
   .productOverview {
@@ -649,7 +656,11 @@ $PO_footerText: 0.7rem;
     }
 
     .displayscreenpadMain {
-      top: -26px;
+      top: 0;
+    }
+
+    .twoScreenHeading{
+      font-size: 1rem;
     }
   }
 

styles/pages/productOverview/_controlPanel.scss

@@ -1,69 +1,91 @@
 .controlPanel {
-    margin-top: 10rem;
+  margin-top: 10rem;
-    padding-bottom: 300px;
+  padding-bottom: 300px;
 
-    .controlPanel_des {
+  .controlPanel_des {
+    position: absolute;
+    top: -170px;
+    left: 80px;
+  }
+
+  .bgControlpanel {
+    min-height: 100vh;
+    background-color: #ececec;
+    border-radius: 157px;
+    position: relative;
+
+    .bgControlpaneltabs {
       position: absolute;
-      top: -170px;
+      top: 100px;
-      left: 80px;
+      right: 0;
-    }
 
-    .bgControlpanel {
+      .nav-link:focus-visible,
-      min-height: 100vh;
+      .nav-item:focus-visible {
-      background-color: #ececec;
+        outline: none !important;
-      border-radius: 157px;
+      }
-      position: relative;
 
-      .bgControlpaneltabs {
+      .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;
-        top: 100px;
+        width: 100%;
+        height: 5px;
+        bottom: -2px;
         right: 0;
-  
+        display: none;
-        .nav-tabs {
+        background-color: black;
-          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;
-        }
       }
     }
   }
+}
 
-  @media (max-width:768px) {
+@media (max-width:768px) {
-    .controlPanel{
+  .controlPanel {
-        padding-bottom: 100px;
+    padding-bottom: 100px;
-        .bgControlpanel{
-           min-height: 50vh;
-        }
 
+    .bgControlpanel {
+      min-height: 50vh;
     }
+
   }
+}
+
+@media (max-width:600px) {
+
+  .controlPanel {
+
+    .controlPanel_des {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      left: 50%;
+    }
+
+  }
+}

styles/pages/productOverview/_professinalGrade.scss

@@ -45,5 +45,10 @@
       p{
         padding-left: 1rem;
       }
+
+      .professinalGradeImg {
+    
+        width: 80%;
+    }
     }
 }

styles/pages/productOverview/_stunningsound.scss

@@ -102,7 +102,7 @@
 
 @media (max-width:576px) {
     .stunningSound {
-
+        padding-top: 1rem;
 
         .stunningSound_heading {
 

styles/style.scss

@@ -158,7 +158,7 @@ body {
 #navbar-head{
     position: fixed;
     width: 100%;
-    z-index: 9999;
+    z-index: 20;
     top: 0;
 }
 .biz-nav-wrapper {
@@ -212,3 +212,20 @@ body {
 .footer-socailImg{
     width: 30px;
 }
+
+.footer-rocket-img{
+    width: 80px;
+}
+
+.footer-rkt:hover{
+    animation: rocketRotate 2s infinite;
+}
+
+@keyframes rocketRotate {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+  }