sachin.ganesh/anwi_website
1
0
Vork 0
Code Kwesties Pull-aanvragen Publicaties Wiki Activiteit

code added

Bladeren bron
This commit is contained in:
sachinganesh
2023-02-06 18:05:23 +05:30
bovenliggende 6e3f74a33b
commit 6ee8f169d2
13 gewijzigde bestanden met toevoegingen van 885 en 580 verwijderingen
Download Patch-bestand Download Diff-bestand Expand all files Collapse all files
allinone.html
+110 -59
Bestand weergeven
@@ -9,11 +9,14 @@
<!-- <link rel="stylesheet" href="./../../css/main.css" /> -->
<link rel="stylesheet" href="libs/owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="libs/owlcarousel/dist/assets/owl.theme.default.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<title>project</title>
</head>
<body>
<div id="navbar-head"></div>
<main class="main-body">
<section class="allinoneLanding overflow-hidden">
@@ -40,11 +43,13 @@
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -52,6 +57,7 @@
<!-- heading end -->
</section>
<section class="content-main-allinone">
<section class="laptopsSection overflow-hidden">
<div class="row ">
<div class="col-sm-7 d-none d-sm-block clipPathSectionCol">
@@ -59,11 +65,11 @@
<!-- <img src="dist/assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100"> -->
<img src="dist/assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100">
</div>
<div class="innerClipPathImg">
<div class="innerClipPathImg laptoponanimation">
<img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
</div>
</div>
<div class="align-items-center d-none d-sm-block col-sm-5 d-flex">
<div class="align-items-center animateHeadingLeft d-none d-sm-block col-sm-5 d-flex">
<div class="d-flex flex-column justify-content-center h-100 gap-5">
<div>
<div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
@@ -71,7 +77,7 @@
<h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
</div>
</div>
<div class="font-2 headinglaptopSub">
<div class="font-2 headinglaptopSub ">
<div class="satoshi_font">
Extraordinary Performance
@@ -86,10 +92,10 @@
<!-- mobile -->
<div class="innerClipPathImg d-block d-sm-none">
<div class="innerClipPathImg d-block d-sm-none ">
<img src="dist/assets/imgs/allinone/onesection.png" alt="" class="img-fluid">
</div>
<div class="align-items-center d-sm-none d-block col-sm-5 d-flex">
<div class="align-items-center d-sm-none animateHeading d-block col-sm-5 d-flex">
<div class="d-flex flex-column laptopSectionDesP gap-5">
<div>
<div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
@@ -112,9 +118,10 @@
<div class="col-sm-7 d-sm-none d-block clipPathSectionCol">
<div class="leftClipPathLaptop ">
<img src="dist/assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100 d-none d-sm-block">
<img src="dist/assets/imgs/allinone/leftclippath.png" alt=""
class="w-100 h-100 d-none d-sm-block">
</div>
<div class="innerClipPathImg">
<div class="innerClipPathImg laptoponanimation">
<img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
</div>
</div>
@@ -127,7 +134,7 @@
<div class="row ">
<div class="align-items-center d-none d-sm-block col-sm-5 p-6 d-flex">
<div class="d-flex flex-column gap-5 laptopSectionDesP">
<div class="d-flex flex-column animateHeadingRight gap-5 laptopSectionDesP">
<div>
<div class="font-1-5">AIO24 - 1700N</div>
<div>
@@ -146,13 +153,15 @@
</div>
</div>
</div>
<div class="col-sm-7 clipPathSectionCol">
<div class="innerClipPathImgSectionTwo d-none d-sm-block">
<img src="dist/assets/imgs/allinone/sectiontwo.png" alt="" class="w-100 h-100 sectionTwoImgAllInone">
<div class="col-sm-7 clipPathSectionCol allinInMargintop">
<div class="innerClipPathImgSectionTwo d-none d-sm-block allinOnepc">
<img src="dist/assets/imgs/allinone/sectiontwo.png" alt=""
class="w-100 h-100 sectionTwoImgAllInone">
</div>
<div>
<img src="dist/assets/imgs/allinone/sectiontwo.png" alt="" class="img-fluid d-block d-sm-none">
<img src="dist/assets/imgs/allinone/sectiontwo.png" alt=""
class="img-fluid d-block d-sm-none">
</div>
<div class="align-items-center d-block d-sm-none col-sm-5 p-6 d-flex">
@@ -196,7 +205,7 @@
<div class="leftClipPathLaptop d-none d-sm-block">
<img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100">
</div>
<div class="innerClipPathImgFirstThree d-none d-sm-block">
<div class="innerClipPathImgFirstThree dualLaptopSlideone d-none d-sm-block">
<img src="dist/assets/imgs/allinone/montier.png" alt="" class="w-100 h-100">
</div>
<img src="dist/assets/imgs/allinone/montier.png" alt="" class="img-fluid d-block d-sm-none">
@@ -217,14 +226,15 @@
</div>
</div>
</div>
<div class="col-sm-6 ps-5 clipPathSectionCol">
<div class="col-sm-6 ps-5 clipPathSectionCol allinInMargintop">
<div class="leftClipPathLaptop d-none d-sm-block">
<img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100">
</div>
<div class="innerClipPathImgSectionThree d-none d-sm-block">
<div class="innerClipPathImgSectionThree dualLaptopSlideLeftone d-none d-sm-block">
<img src="dist/assets/imgs/allinone/keyboardandmouse.png" alt="" class="w-100 h-100 ">
</div>
<img src="dist/assets/imgs/allinone/keyboardandmouse.png" alt="" class="img-fluid d-block d-sm-none">
<img src="dist/assets/imgs/allinone/keyboardandmouse.png" alt=""
class="img-fluid d-block d-sm-none scaleSmallAllinone">
<div class="d-flex d-sm-none d-block allinoneDualMarginTop_pContainer flex-column gap-5">
<div>
@@ -287,7 +297,7 @@
<div class="leftClipPathLaptop ">
<img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div>
<div class="innerClipPathImgFirstFour">
<div class="innerClipPathImgFirstFour cpuSlideLeftone">
<img src="dist/assets/imgs/allinone/cpus.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div>
<img src="dist/assets/imgs/allinone/cpus.png" alt="" class="img-fluid d-block d-sm-none">
@@ -308,11 +318,11 @@
</div>
</div>
</div>
<div class="col-sm-6 ps-5 clipPathSectionCol">
<div class="col-sm-6 ps-5 clipPathSectionCol allinInMargintop">
<div class="leftClipPathLaptop ">
<img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div>
<div class="innerClipPathImgSectionFour">
<div class="innerClipPathImgSectionFour controllerEight">
<img src="dist/assets/imgs/allinone/rams.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div>
@@ -386,7 +396,8 @@
<div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Solution Focus</h1>
<div class="infoContainer_des satoshi_font">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invconsetetur sadipscing elitr, sed
</div>
</div>
</div>
@@ -395,7 +406,8 @@
<div class=" infoContainerOrange p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Restless</h1>
<div class="infoContainer_des satoshi_font">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invconsetetur sadipscing elitr, sed
</div>
</div>
</div>
@@ -404,7 +416,8 @@
<div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Out of world</h1>
<div class="infoContainer_des satoshi_font">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invconsetetur sadipscing elitr, sed
</div>
</div>
</div>
@@ -413,7 +426,7 @@
<!-- section 5 end -->
<!-- section 6 -->
<section>
<section class="allinoneslider" >
<div class=" d-flex flex-column justify-content-center align-items-center overflow-hidden">
<h1 class="orbitron_font pb-0 p-6 insightsAdvHeading">Insights / Advance</h1>
<div class="d-none">
@@ -428,26 +441,34 @@
</div>
</div>
<div class="carouselLanding owl-carousel d-flex p-4">
<div class="carouselLanding owl-carousel d-flex p-5 pb-2">
<div class="carouselLandingItem">
<div class="mt-5C carouselLandingItemInner">
<div class="mt-5C carouselLandingItemInner cursor-pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="dist/assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
<div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<div
class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176"
viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle"
d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z"
transform="translate(-0.563 -0.563)" fill="#fff" />
</svg>
</div>
</div>
</div>
<div class="carouselLandingItem ">
<div class=" carouselLandingItemInner">
<img src="dist/assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
<div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<div class=" carouselLandingItemInner cursor-pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="dist/assets/imgs/allinone/fourall.png" alt="" class="w-100 h-100">
<div
class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176"
viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle"
d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z"
transform="translate(-0.563 -0.563)" fill="#fff" />
</svg>
</div>
@@ -455,12 +476,16 @@
</div>
<div class="carouselLandingItem " data-hash="3">
<div class="mt-5C carouselLandingItemInner">
<img src="dist/assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
<div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<div class="mt-5C carouselLandingItemInner cursor-pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="dist/assets/imgs/allinone/twoall.png" alt="" class="w-100 h-100">
<div
class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176"
viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle"
d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z"
transform="translate(-0.563 -0.563)" fill="#fff" />
</svg>
</div>
@@ -468,29 +493,24 @@
</div>
<div class="carouselLandingItem">
<div class=" carouselLandingItemInner">
<img src="dist/assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
<div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<div class=" carouselLandingItemInner cursor-pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="dist/assets/imgs/allinone/threeall.png" alt="" class="w-100 h-100">
<div
class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176"
viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle"
d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z"
transform="translate(-0.563 -0.563)" fill="#fff" />
</svg>
</div>
</div>
</div>
<div class="carouselLandingItem ">
<div class="mt-5C carouselLandingItemInner">
<img src="dist/assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
<div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
<path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
</svg>
</div>
</div>
</div>
</div>
</div>
@@ -499,7 +519,7 @@
<!-- section 6 end -->
<!-- section 7 -->
<section class="p-6 d-flex flex-column justify-content-center overflow-hidden align-items-center ">
<section class="p-6 pt-3 d-flex flex-column justify-content-center overflow-hidden align-items-center ">
<h1 class="orbitron_font pb-5">Support / Download</h1>
<div class="row supportBoxParent">
<div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
@@ -545,15 +565,47 @@
</div>
</section>
</section>
</main>
<!-- section 7 end -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog h-100 d-flex align-items-center justify-content-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Laptop</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- section 7 end -->
<!-- footer -->
<section id="footer-head"></section>
<!-- end-footer -->
<script src="libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/Js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"
integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="libs/owlcarousel/dist/owl.carousel.min.js"></script>
<script src="dist/Js/navbar.js"></script>
@@ -565,8 +617,7 @@
<script src="dist/Js/laptopmuti.js"></script>
<script>
$('#navbar-head').css("background","rgba( 255, 255, 255, 0.25 )")
$('#navbar-head').css("background", "rgba( 255, 255, 255, 0.25 )")
</script>
</body>
dist/Js/allInOne.js
Vendored
+78 -6
Bestand weergeven
@@ -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
}
}
})
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)
dist/assets/imgs/allinone/fourall.png
Vendored
BIN
Bestand weergeven
Binair bestand niet weergegeven.
Zij aan zij

Na

Breedte:  |  Hoogte:  |  Grootte: 249 KiB

dist/assets/imgs/allinone/threeall.png
Vendored
BIN
Bestand weergeven
Binair bestand niet weergegeven.
Zij aan zij

Na

Breedte:  |  Hoogte:  |  Grootte: 230 KiB

dist/assets/imgs/allinone/twoall.png
Vendored
BIN
Bestand weergeven
Binair bestand niet weergegeven.
Zij aan zij

Na

Breedte:  |  Hoogte:  |  Grootte: 274 KiB

laptopmulti.html
+18 -18
Bestand weergeven
@@ -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
+2
Bestand weergeven
@@ -1,3 +1,5 @@
// $primary-color: steelblue;
$grey-bg:#EEEEEE;
$animation-timer:.8s;
styles/pages/_allInOne.scss
+132 -7
Bestand weergeven
@@ -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) {
@@ -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
+13 -2
Bestand weergeven
@@ -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
+26 -4
Bestand weergeven
@@ -19,6 +19,11 @@
top: 100px;
right: 0;
.nav-link:focus-visible,
.nav-item:focus-visible {
outline: none !important;
}
.nav-tabs {
border-bottom: 1px solid;
margin-bottom: 2rem;
@@ -56,14 +61,31 @@
}
}
}
}
}
@media (max-width:768px) {
.controlPanel{
@media (max-width:768px) {
.controlPanel {
padding-bottom: 100px;
.bgControlpanel{
.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
+5
Bestand weergeven
@@ -45,5 +45,10 @@
p{
padding-left: 1rem;
}
.professinalGradeImg {
width: 80%;
}
}
}
styles/pages/productOverview/_stunningsound.scss
+1 -1
Bestand weergeven
@@ -102,7 +102,7 @@
@media (max-width:576px) {
.stunningSound {
padding-top: 1rem;
.stunningSound_heading {
styles/style.scss
+18 -1
Bestand weergeven
@@ -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);
}
}