- 
-
+
-
+
-
+
+ 
+
+
+
+ 
+
+
-
-
-
-
-
-
-
-
AIO24 - 1700N
+
+
-
-
-
-
-
-
- Laptops
+AIO24 - 1700N
+
+
Laptops
+
-
-
- Extraordinary Performance
-
+
-
+
-
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
-
-
-
-
-
- AIO24 - 1700N
-
Laptops
+ Learn More
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
AIO24 - 1700N
+
+
-
-
-
- Laptops
+AIO24 - 1700N
+
+
Laptops
+
-
+
+
- Extraordinary Performance
-
+
-
+
+
-
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+ and Unparalleled Flexibility
-
+
+
+
+
+
+
+
+
+
+
+
-
- 
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
-
+
+
+
+
+
+
+
+
@@ -565,8 +617,7 @@
diff --git a/dist/Js/allInOne.js b/dist/Js/allInOne.js
index 1985ae0..7eef198 100644
--- a/dist/Js/allInOne.js
+++ b/dist/Js/allInOne.js
@@ -1,7 +1,8 @@
$('.owl-carousel').owlCarousel({
- rtl:true,
- loop:true,
+ // rtl: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,
- nav:false
- },
+ items:2,
+ nav:false,
+ margin:200
+ },
+
1000:{
+ items:3,
+ nav:true,
+ loop:false,
+ margin:10
+ },
+ 1400:{
items:5,
nav:true,
- loop:false
+ loop:false,
+ margin:200
}
}
-})
\ No newline at end of file
+})
+
+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)
+
+
+
+
diff --git a/dist/assets/imgs/allinone/fourall.png b/dist/assets/imgs/allinone/fourall.png
new file mode 100644
index 0000000..d1ea8ef
Binary files /dev/null and b/dist/assets/imgs/allinone/fourall.png differ
diff --git a/dist/assets/imgs/allinone/threeall.png b/dist/assets/imgs/allinone/threeall.png
new file mode 100644
index 0000000..463ace9
Binary files /dev/null and b/dist/assets/imgs/allinone/threeall.png differ
diff --git a/dist/assets/imgs/allinone/twoall.png b/dist/assets/imgs/allinone/twoall.png
new file mode 100644
index 0000000..e02addc
Binary files /dev/null and b/dist/assets/imgs/allinone/twoall.png differ
diff --git a/laptopmulti.html b/laptopmulti.html
index 3180345..8491f52 100644
--- a/laptopmulti.html
+++ b/laptopmulti.html
@@ -460,7 +460,7 @@
+
-
-
+
+
+
+
+
+
+ AIO24 - 1700N
@@ -166,7 +144,7 @@
@@ -175,386 +153,460 @@
Extraordinary Performance
-
+
and Unparalleled Flexibility
- 
+
-
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AIO24 - 1700N
+
+
+ Laptops
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+
+ Peripherals
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+
+
+
+ Moniters
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+
+ Peripherals
+
+
+
+ Extraordinary Performance
+
+
+ and Unparalleled Flexibility
+
+ Learn More
+
+
+
+
+ 
+
+
+
+
+ Announcements
+and Events
+
+ 
+
+
+
+
+
+
+ Solution Focus
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invconsetetur sadipscing elitr, sed
+
+
+ 
+
+
+
+
+ Restless
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invconsetetur sadipscing elitr, sed
+
+
+ 
+
+
+
+
+ Out of world
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invconsetetur sadipscing elitr, sed
+
+
+
+
+ Insights / Advance
+
+
+
+
+
+ -
+
- Server +
- servers +
- servers +
- servers +
- servers +
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Support / Download
+
+
+
+
+
+
+
+
+
+
+ Product Registration
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
+
+
+
+
+
+
+
+
+
+ Product Warranty
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
+
+
+
+
+
+
+
+
+
+
+
+ Customer / Support
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
- Peripherals
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
- Moniters
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
- Peripherals
-
-
-
- Extraordinary Performance
-
-
- and Unparalleled Flexibility
-
- Learn More
-
-
-
-
-
-
-
-
-
- Announcements
-and Events
-
-
-
-
-
-
-
-
- Solution Focus
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
-
-
-
-
-
-
-
- Restless
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
-
-
-
-
-
-
-
- Out of world
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
-
-
-
-
- Insights / Advance
-
-
-
-
-
- -
-
- Server -
- servers -
- servers -
- servers -
- servers -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Support / Download
-
-
-
-
-
-
-
-
-
-
- Product Registration
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
-
-
-
-
-
-
-
-
-
- Product Warranty
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
-
-
-
-
-
-
-
-
-
-
-
- Customer / Support
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
-
-
-
+
Two Screens
@@ -501,7 +501,7 @@
-
+
-
@@ -808,56 +808,56 @@
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index 58be924..c443dfc 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -1,3 +1,5 @@
// $primary-color: steelblue;
-$grey-bg:#EEEEEE;
\ No newline at end of file
+$grey-bg:#EEEEEE;
+
+$animation-timer:.8s;
\ No newline at end of file
diff --git a/styles/pages/_allInOne.scss b/styles/pages/_allInOne.scss
index 74f7e0c..8436baf 100644
--- a/styles/pages/_allInOne.scss
+++ b/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-color: white;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
+ // background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
+ // background-color: white;
+ // background-size: cover;
+ // background-repeat: no-repeat;
+ // background-position: center;
position: relative;
- width: 100vw;
- height: 100vh;
+ // width: 100vw;
+ // 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) {
@@ -379,4 +440,68 @@
top:0;
}
}
- }
\ No newline at end of file
+ }
+
+.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%);
+}
+
diff --git a/styles/pages/_productOverview.scss b/styles/pages/_productOverview.scss
index 3d10776..85d6c87 100644
--- a/styles/pages/_productOverview.scss
+++ b/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;
}
}
diff --git a/styles/pages/productOverview/_controlPanel.scss b/styles/pages/productOverview/_controlPanel.scss
index 58eee1d..efeadb9 100644
--- a/styles/pages/productOverview/_controlPanel.scss
+++ b/styles/pages/productOverview/_controlPanel.scss
@@ -1,69 +1,91 @@
.controlPanel {
- margin-top: 10rem;
- padding-bottom: 300px;
-
- .controlPanel_des {
+ margin-top: 10rem;
+ padding-bottom: 300px;
+
+ .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;
- left: 80px;
- }
-
- .bgControlpanel {
- min-height: 100vh;
- background-color: #ececec;
- border-radius: 157px;
- position: relative;
-
- .bgControlpaneltabs {
+ top: 100px;
+ right: 0;
+
+ .nav-link:focus-visible,
+ .nav-item:focus-visible {
+ outline: none !important;
+ }
+
+ .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;
-
- .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;
- }
+ display: none;
+ background-color: black;
}
}
}
+}
- @media (max-width:768px) {
- .controlPanel{
- padding-bottom: 100px;
- .bgControlpanel{
- min-height: 50vh;
- }
+@media (max-width:768px) {
+ .controlPanel {
+ padding-bottom: 100px;
+ .bgControlpanel {
+ min-height: 50vh;
}
- }
\ No newline at end of file
+
+ }
+}
+
+@media (max-width:600px) {
+
+ .controlPanel {
+
+ .controlPanel_des {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ left: 50%;
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/styles/pages/productOverview/_professinalGrade.scss b/styles/pages/productOverview/_professinalGrade.scss
index 47ef929..13f4c62 100644
--- a/styles/pages/productOverview/_professinalGrade.scss
+++ b/styles/pages/productOverview/_professinalGrade.scss
@@ -45,5 +45,10 @@
p{
padding-left: 1rem;
}
+
+ .professinalGradeImg {
+
+ width: 80%;
+ }
}
}
\ No newline at end of file
diff --git a/styles/pages/productOverview/_stunningsound.scss b/styles/pages/productOverview/_stunningsound.scss
index 78a0be0..ad09951 100644
--- a/styles/pages/productOverview/_stunningsound.scss
+++ b/styles/pages/productOverview/_stunningsound.scss
@@ -102,7 +102,7 @@
@media (max-width:576px) {
.stunningSound {
-
+ padding-top: 1rem;
.stunningSound_heading {
diff --git a/styles/style.scss b/styles/style.scss
index 62f78db..6961e1d 100644
--- a/styles/style.scss
+++ b/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 {
@@ -211,4 +211,21 @@ body {
// footer
.footer-socailImg{
width: 30px;
-}
\ No newline at end of file
+}
+
+.footer-rocket-img{
+ width: 80px;
+}
+
+.footer-rkt:hover{
+ animation: rocketRotate 2s infinite;
+}
+
+@keyframes rocketRotate {
+ from {
+ transform: rotate(0);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
\ No newline at end of file
Complemented by Multi-touch Brilliance
@@ -568,7 +568,7 @@
-
Two Screens
+Two Screens
To Display
True Colors
@@ -670,18 +670,18 @@ class="w-100 h-100" alt="">ProgrammerTab
+ aria-labelledby="ProgrammerTab-tab">
- Music_Artist
+ game
+
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
-
Ergonomic
ScreenPad™ Plus
+ ScreenPad™ Plus
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
-
OLED HDR
Vivid colors
+ Vivid colors
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
-
100%
DCI-P3 color gamut
+ DCI-P3 color gamut
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
-
OLED HDR
Vivid colors
+ Vivid colors
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
@@ -865,21 +865,21 @@
-
Delta-E 2
+
color accuracy
+ class="anwi_grey_bg anwi_BoxLen w-100 d-flex flex-column justify-content-center align-items-center p-3 py-4 h-100">
-
3840X2160
4K UHD main display
+ 4K UHD main display