sachin.ganesh/anwi_website
1
0
Fork 0
程式碼 問題 合併請求 版本發布 Wiki 動態

code added

瀏覽代碼
此提交包含在：
sachinganesh
2023-02-06 18:05:23 +05:30
父節點 6e3f74a33b
當前提交 6ee8f169d2
共有 13 個檔案被更改，包括 885 行新增 和 580 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案
allinone.html
+106 -55
查看文件
@@ -9,11 +9,14 @@
<!-- <link rel="stylesheet" href="./../../css/main.css" /> --> <!-- <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.carousel.min.css">
<link rel="stylesheet" href="libs/owlcarousel/dist/assets/owl.theme.default.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"> <link rel="stylesheet" href="styles/style.css">
<title>project</title> <title>project</title>
</head> </head>
<body> <body>
<div id="navbar-head"></div> <div id="navbar-head"></div>
<main class="main-body"> <main class="main-body">
<section class="allinoneLanding overflow-hidden"> <section class="allinoneLanding overflow-hidden">
@@ -40,11 +43,13 @@
</div> </div>
</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="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </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="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
@@ -52,6 +57,7 @@
<!-- heading end --> <!-- heading end -->
</section> </section>
<section class="content-main-allinone">
<section class="laptopsSection overflow-hidden"> <section class="laptopsSection overflow-hidden">
<div class="row "> <div class="row ">
<div class="col-sm-7 d-none d-sm-block clipPathSectionCol"> <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"> -->
<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>
<div class="innerClipPathImg"> <div class="innerClipPathImg laptoponanimation">
<img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100"> <img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
</div> </div>
</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 class="d-flex flex-column justify-content-center h-100 gap-5">
<div> <div>
<div class="font-1-5 supTitleSection">AIO24 - 1700N</div> <div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
@@ -89,7 +95,7 @@
<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"> <img src="dist/assets/imgs/allinone/onesection.png" alt="" class="img-fluid">
</div> </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 class="d-flex flex-column laptopSectionDesP gap-5">
<div> <div>
<div class="font-1-5 supTitleSection">AIO24 - 1700N</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="col-sm-7 d-sm-none d-block clipPathSectionCol">
<div class="leftClipPathLaptop "> <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>
<div class="innerClipPathImg"> <div class="innerClipPathImg laptoponanimation">
<img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100"> <img src="dist/assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
</div> </div>
</div> </div>
@@ -127,7 +134,7 @@
<div class="row "> <div class="row ">
<div class="align-items-center d-none d-sm-block col-sm-5 p-6 d-flex"> <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>
<div class="font-1-5">AIO24 - 1700N</div> <div class="font-1-5">AIO24 - 1700N</div>
<div> <div>
@@ -146,13 +153,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-7 clipPathSectionCol"> <div class="col-sm-7 clipPathSectionCol allinInMargintop">
<div class="innerClipPathImgSectionTwo d-none d-sm-block"> <div class="innerClipPathImgSectionTwo d-none d-sm-block allinOnepc">
<img src="dist/assets/imgs/allinone/sectiontwo.png" alt="" class="w-100 h-100 sectionTwoImgAllInone"> <img src="dist/assets/imgs/allinone/sectiontwo.png" alt=""
class="w-100 h-100 sectionTwoImgAllInone">
</div> </div>
<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>
<div class="align-items-center d-block d-sm-none col-sm-5 p-6 d-flex"> <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"> <div class="leftClipPathLaptop d-none d-sm-block">
<img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100"> <img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100">
</div> </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"> <img src="dist/assets/imgs/allinone/montier.png" alt="" class="w-100 h-100">
</div> </div>
<img src="dist/assets/imgs/allinone/montier.png" alt="" class="img-fluid d-block d-sm-none"> <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>
</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"> <div class="leftClipPathLaptop d-none d-sm-block">
<img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100"> <img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100">
</div> </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 "> <img src="dist/assets/imgs/allinone/keyboardandmouse.png" alt="" class="w-100 h-100 ">
</div> </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 class="d-flex d-sm-none d-block allinoneDualMarginTop_pContainer flex-column gap-5">
<div> <div>
@@ -287,7 +297,7 @@
<div class="leftClipPathLaptop "> <div class="leftClipPathLaptop ">
<img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100 d-none d-sm-block"> <img src="dist/assets/imgs/allinone/ll.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div> </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"> <img src="dist/assets/imgs/allinone/cpus.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div> </div>
<img src="dist/assets/imgs/allinone/cpus.png" alt="" class="img-fluid d-block d-sm-none"> <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>
</div> </div>
<div class="col-sm-6 ps-5 clipPathSectionCol"> <div class="col-sm-6 ps-5 clipPathSectionCol allinInMargintop">
<div class="leftClipPathLaptop "> <div class="leftClipPathLaptop ">
<img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100 d-none d-sm-block"> <img src="dist/assets/imgs/allinone/rr.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div> </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"> <img src="dist/assets/imgs/allinone/rams.png" alt="" class="w-100 h-100 d-none d-sm-block">
</div> </div>
@@ -386,7 +396,8 @@
<div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center "> <div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Solution Focus</h1> <h1 class="font-1-5 orbitron_font">Solution Focus</h1>
<div class="infoContainer_des satoshi_font"> <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> </div>
</div> </div>
@@ -395,7 +406,8 @@
<div class=" infoContainerOrange p-4 d-flex flex-column justify-content-center "> <div class=" infoContainerOrange p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Restless</h1> <h1 class="font-1-5 orbitron_font">Restless</h1>
<div class="infoContainer_des satoshi_font"> <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> </div>
</div> </div>
@@ -404,7 +416,8 @@
<div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center "> <div class=" infoContainerBlue p-4 d-flex flex-column justify-content-center ">
<h1 class="font-1-5 orbitron_font">Out of world</h1> <h1 class="font-1-5 orbitron_font">Out of world</h1>
<div class="infoContainer_des satoshi_font"> <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> </div>
</div> </div>
@@ -413,7 +426,7 @@
<!-- section 5 end --> <!-- section 5 end -->
<!-- section 6 --> <!-- section 6 -->
<section> <section class="allinoneslider" >
<div class=" d-flex flex-column justify-content-center align-items-center overflow-hidden"> <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> <h1 class="orbitron_font pb-0 p-6 insightsAdvHeading">Insights / Advance</h1>
<div class="d-none"> <div class="d-none">
@@ -428,26 +441,34 @@
</div> </div>
</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="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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="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"/> 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> </svg>
</div> </div>
</div> </div>
</div> </div>
<div class="carouselLandingItem "> <div class="carouselLandingItem ">
<div class=" carouselLandingItemInner"> <div class=" 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"> <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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="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"/> 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> </svg>
</div> </div>
@@ -455,12 +476,16 @@
</div> </div>
<div class="carouselLandingItem " data-hash="3"> <div class="carouselLandingItem " data-hash="3">
<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"> <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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="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"/> 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> </svg>
</div> </div>
@@ -468,29 +493,24 @@
</div> </div>
<div class="carouselLandingItem"> <div class="carouselLandingItem">
<div class=" carouselLandingItemInner"> <div class=" 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"> <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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="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"/> 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> </svg>
</div> </div>
</div> </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>
</div> </div>
@@ -499,7 +519,7 @@
<!-- section 6 end --> <!-- section 6 end -->
<!-- section 7 --> <!-- 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> <h1 class="orbitron_font pb-5">Support / Download</h1>
<div class="row supportBoxParent"> <div class="row supportBoxParent">
<div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center"> <div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
@@ -545,8 +565,27 @@
</div> </div>
</section> </section>
</section>
</main> </main>
<!-- 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 --> <!-- section 7 end -->
<!-- footer --> <!-- footer -->
<section id="footer-head"></section> <section id="footer-head"></section>
@@ -554,6 +593,19 @@
<script src="libs/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/Js/jquery.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="libs/owlcarousel/dist/owl.carousel.min.js"></script>
<script src="dist/Js/navbar.js"></script> <script src="dist/Js/navbar.js"></script>
@@ -565,7 +617,6 @@
<script src="dist/Js/laptopmuti.js"></script> <script src="dist/Js/laptopmuti.js"></script>
<script> <script>
$('#navbar-head').css("background", "rgba( 255, 255, 255, 0.25 )") $('#navbar-head').css("background", "rgba( 255, 255, 255, 0.25 )")
</script> </script>
dist/Js/allInOne.js
已供應
+78 -6
查看文件
@@ -1,7 +1,8 @@
$('.owl-carousel').owlCarousel({ $('.owl-carousel').owlCarousel({
rtl:true, // rtl:true,
loop:true, // loop:true,
margin:200, margin:200,
nav:true, nav:true,
URLhashListener:true, URLhashListener:true,
autoplayHoverPause:true, autoplayHoverPause:true,
@@ -9,16 +10,87 @@ $('.owl-carousel').owlCarousel({
responsive:{ responsive:{
0:{ 0:{
items:1, items:1,
nav:true nav:true,
margin:10
}, },
600:{ 600:{
items:3, items:2,
nav:false nav:false,
margin:200
}, },
1000:{ 1000:{
items:3,
nav:true,
loop:false,
margin:10
},
1400:{
items:5, items:5,
nav:true, 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
已供應
二進制
查看文件
未顯示二進位檔案。
並列

之後

寬度:  |  高度:  |  大小: 249 KiB

dist/assets/imgs/allinone/threeall.png
已供應
二進制
查看文件
未顯示二進位檔案。
並列

之後

寬度:  |  高度:  |  大小: 230 KiB

dist/assets/imgs/allinone/twoall.png
已供應
二進制
查看文件
未顯示二進位檔案。
並列

之後

寬度:  |  高度:  |  大小: 274 KiB

laptopmulti.html
+17 -17
查看文件
@@ -460,7 +460,7 @@
<section class="displayscreenpad"> <section class="displayscreenpad">
<div class=""> <div class="">
<div class=" d-flex flex-column align-items-center justify-content-center"> <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 Two Screens
</div> </div>
<div class="displayscreenpadContainer"> <div class="displayscreenpadContainer">
@@ -501,7 +501,7 @@
<img src="dist/assets/imgs/productoverview/leftlap.png" alt="" class="img-fluid"> <img src="dist/assets/imgs/productoverview/leftlap.png" alt="" class="img-fluid">
</div> </div>
<div class="col-5 ps-0 "> <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> <div>
<h1 class="dual_des_heading orbitron_font">Complemented by Multi-touch Brilliance <h1 class="dual_des_heading orbitron_font">Complemented by Multi-touch Brilliance
</h1> </h1>
@@ -670,18 +670,18 @@
class="w-100 h-100" alt=""></div> class="w-100 h-100" alt=""></div>
<div class="tab-pane fade" id="ProgrammerTab" role="tabpanel" <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"> <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=""> <img src="dist/assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">
</div> </div>
<div class="tab-pane fade" id="Music_Artist" role="tabpanel" aria-labelledby="Music_Artist-tab"> <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="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> </div>
</div> </div>
@@ -808,56 +808,56 @@
<div class="row row_lensAnwi p-6"> <div class="row row_lensAnwi p-6">
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
<div> <div>
<h1 class="orbitron_font lenHeading m-0 p-0 font-2">Ergonomic</h1> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">Ergonomic</h1>
</div> </div>
<div class="screenpadLens">ScreenPad™ Plus</div> <div class="screenpadLens text-center fw-500">ScreenPad™ Plus</div>
</div> </div>
</div> </div>
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
<div> <div>
<h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1>
</div> </div>
<div class="screenpadLens">Vivid colors</div> <div class="screenpadLens text-center fw-500">Vivid colors</div>
</div> </div>
</div> </div>
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
<div> <div>
<h1 class="orbitron_font lenHeading m-0 p-0 font-2">100%</h1> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">100%</h1>
</div> </div>
<div class="screenpadLens">DCI-P3 color gamut</div> <div class="screenpadLens text-center fw-500">DCI-P3 color gamut</div>
</div> </div>
</div> </div>
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
<div> <div>
<h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">OLED HDR</h1>
</div> </div>
<div class="screenpadLens">Vivid colors</div> <div class="screenpadLens text-center fw-500">Vivid colors</div>
</div> </div>
</div> </div>
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
@@ -865,21 +865,21 @@
<h1 class="orbitron_font lenHeading m-0 p-0 font-2"> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">
Delta-E 2</h1> Delta-E 2</h1>
</div> </div>
<div class="screenpadLens"> <div class="screenpadLens text-center fw-500">
color accuracy color accuracy
</div> </div>
</div> </div>
</div> </div>
<div class="box_lens p-3 col-6 col-md-4 col-lg-3"> <div class="box_lens p-3 col-6 col-md-4 col-lg-3">
<div <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"> <div class="box_lens_img">
<img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens"> <img class="w-100 h-100" src="dist/assets/imgs/productoverview/lens.png" alt="lens">
</div> </div>
<div> <div>
<h1 class="orbitron_font lenHeading m-0 p-0 font-2">3840X2160</h1> <h1 class="orbitron_font lenHeading m-0 p-0 font-2">3840X2160</h1>
</div> </div>
<div class="screenpadLens">4K UHD main display</div> <div class="screenpadLens text-center fw-500">4K UHD main display</div>
</div> </div>
</div> </div>
styles/abstracts/_variables.scss
+2
查看文件
@@ -1,3 +1,5 @@
// $primary-color: steelblue; // $primary-color: steelblue;
$grey-bg:#EEEEEE; $grey-bg:#EEEEEE;
$animation-timer:.8s;
styles/pages/_allInOne.scss
+132 -7
查看文件
@@ -19,6 +19,8 @@
} }
.innerClipPathImgFirstFour{ .innerClipPathImgFirstFour{
position: absolute; position: absolute;
top: 12%; top: 12%;
left:5%; left:5%;
@@ -62,16 +64,16 @@
} }
.allinoneLanding{ .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; position: relative;
width: 100vw; // width: 100vw;
height: 100vh; // height: 100vh;
#navbar-head *{ #navbar-head *{
color: white; 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) { @media (max-width:1300px) {
.laptopsSection .headinglaptop{ .laptopsSection .headinglaptop{
font-size: 5rem; font-size: 5rem;
@@ -220,6 +260,8 @@
} }
@media (max-width:600px) { @media (max-width:600px) {
.supTitleSection{ .supTitleSection{
text-align: center; text-align: center;
font-size: 1rem; 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) { @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
查看文件
@@ -26,7 +26,7 @@ $PO_footerText: 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
border: 2px solid; border: 2px solid;
position: fixed; position: absolute; //head
z-index: 999; z-index: 999;
bottom: 0; bottom: 0;
left: 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) { @media (max-width:790px) {
.productOverview { .productOverview {
@@ -649,7 +656,11 @@ $PO_footerText: 0.7rem;
} }
.displayscreenpadMain { .displayscreenpadMain {
top: -26px; top: 0;
}
.twoScreenHeading{
font-size: 1rem;
} }
} }
styles/pages/productOverview/_controlPanel.scss
+22
查看文件
@@ -19,6 +19,11 @@
top: 100px; top: 100px;
right: 0; right: 0;
.nav-link:focus-visible,
.nav-item:focus-visible {
outline: none !important;
}
.nav-tabs { .nav-tabs {
border-bottom: 1px solid; border-bottom: 1px solid;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -61,9 +66,26 @@
@media (max-width:768px) { @media (max-width:768px) {
.controlPanel { .controlPanel {
padding-bottom: 100px; padding-bottom: 100px;
.bgControlpanel { .bgControlpanel {
min-height: 50vh; 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
查看文件
@@ -45,5 +45,10 @@
p{ p{
padding-left: 1rem; padding-left: 1rem;
} }
.professinalGradeImg {
width: 80%;
}
} }
} }
styles/pages/productOverview/_stunningsound.scss
+1 -1
查看文件
@@ -102,7 +102,7 @@
@media (max-width:576px) { @media (max-width:576px) {
.stunningSound { .stunningSound {
padding-top: 1rem;
.stunningSound_heading { .stunningSound_heading {
styles/style.scss
+18 -1
查看文件
@@ -158,7 +158,7 @@ body {
#navbar-head{ #navbar-head{
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 9999; z-index: 20;
top: 0; top: 0;
} }
.biz-nav-wrapper { .biz-nav-wrapper {
@@ -212,3 +212,20 @@ body {
.footer-socailImg{ .footer-socailImg{
width: 30px; width: 30px;
} }
.footer-rocket-img{
width: 80px;
}
.footer-rkt:hover{
animation: rocketRotate 2s infinite;
}
@keyframes rocketRotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}