code added
Dieser Commit ist enthalten in:
@@ -0,0 +1 @@
|
|||||||
|
libs
|
||||||
Vendored
+24
@@ -0,0 +1,24 @@
|
|||||||
|
$('.owl-carousel').owlCarousel({
|
||||||
|
rtl:true,
|
||||||
|
loop:true,
|
||||||
|
margin:200,
|
||||||
|
nav:true,
|
||||||
|
URLhashListener:true,
|
||||||
|
autoplayHoverPause:true,
|
||||||
|
responsiveClass:true,
|
||||||
|
responsive:{
|
||||||
|
0:{
|
||||||
|
items:1,
|
||||||
|
nav:true
|
||||||
|
},
|
||||||
|
600:{
|
||||||
|
items:3,
|
||||||
|
nav:false
|
||||||
|
},
|
||||||
|
1000:{
|
||||||
|
items:5,
|
||||||
|
nav:true,
|
||||||
|
loop:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 3.6 MiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 466 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 261 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 278 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 173 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 141 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 478 KiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 36 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 22 KiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 257 KiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 672 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 393 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 36 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 22 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 266 KiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 794 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 419 KiB Nachher Breite: | Höhe: | Größe: 916 KiB |
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 1.2 MiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 582 KiB |
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 1.7 MiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 2.4 MiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 131 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 31 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 118 KiB |
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 3.6 MiB |
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 83 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 2.9 MiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 23 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 984 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 2.6 MiB |
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 1.3 MiB |
Binäre Datei nicht angezeigt.
|
Vorher Breite: | Höhe: | Größe: 3.1 MiB Nachher Breite: | Höhe: | Größe: 3.1 MiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 1.2 MiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 217 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 524 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 910 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 678 KiB |
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 1.3 MiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="51.211" height="48.01" viewBox="0 0 51.211 48.01">
|
||||||
|
<g id="windows" transform="translate(0 -16)">
|
||||||
|
<g id="Group_921" data-name="Group 921" transform="translate(0 19.601)">
|
||||||
|
<g id="Group_920" data-name="Group 920">
|
||||||
|
<path id="Path_650" data-name="Path 650" d="M0,54.8v16H22.4V52Z" transform="translate(0 -52)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_923" data-name="Group 923" transform="translate(25.605 16)">
|
||||||
|
<g id="Group_922" data-name="Group 922">
|
||||||
|
<path id="Path_651" data-name="Path 651" d="M256,19.2V38.4h25.605V16Z" transform="translate(-256 -16)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_925" data-name="Group 925" transform="translate(25.605 41.605)">
|
||||||
|
<g id="Group_924" data-name="Group 924">
|
||||||
|
<path id="Path_652" data-name="Path 652" d="M256,272v19.2l25.605,3.2V272Z" transform="translate(-256 -272)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_927" data-name="Group 927" transform="translate(0 41.605)">
|
||||||
|
<g id="Group_926" data-name="Group 926">
|
||||||
|
<path id="Path_653" data-name="Path 653" d="M0,272v16l22.4,2.8V272Z" transform="translate(0 -272)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 1.2 KiB |
Vendored
BIN
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 515 KiB |
Vendored
+538
@@ -0,0 +1,538 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
|
||||||
|
<!-- <link rel="stylesheet" href="./../../css/main.css" /> -->
|
||||||
|
<link rel="stylesheet" href="../../../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="../../../styles/style.css">
|
||||||
|
<title>project</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<section class="allinoneLanding overflow-hidden">
|
||||||
|
<!-- navbar -->
|
||||||
|
<div id="navbar-head"></div>
|
||||||
|
<!-- end-navbar -->
|
||||||
|
|
||||||
|
<!-- heading -->
|
||||||
|
<div class="headingAllinOne px-6 orbitron_font w-100 text-white">
|
||||||
|
<h1 class="font-5 ">All-in-One</h1>
|
||||||
|
<div class="satoshi_font">AIO24 <span class="px-1 ">-</span>1700N</div>
|
||||||
|
</div>
|
||||||
|
<!-- heading end -->
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="laptopsSection overflow-hidden">
|
||||||
|
<div class="row ">
|
||||||
|
<div class="col-sm-7 d-none d-sm-block clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop">
|
||||||
|
<img src="./../../assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImg">
|
||||||
|
<img src="./../../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="d-flex flex-column justify-content-center h-100 gap-5">
|
||||||
|
<div>
|
||||||
|
<div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-2 headinglaptopSub">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- mobile -->
|
||||||
|
<div class="innerClipPathImg d-block d-sm-none">
|
||||||
|
<img src="./../../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="d-flex flex-column laptopSectionDesP gap-5">
|
||||||
|
<div>
|
||||||
|
<div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-2 headinglaptopSub">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-7 d-sm-none d-block clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop ">
|
||||||
|
<img src="./../../assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100 d-none d-sm-block">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImg">
|
||||||
|
<img src="./../../assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- mobile end -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section 2 -->
|
||||||
|
<section class="laptopsSection overflow-hidden">
|
||||||
|
<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>
|
||||||
|
<div class="font-1-5">AIO24 - 1700N</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-2 headinglaptopSub">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-7 clipPathSectionCol">
|
||||||
|
<div class="innerClipPathImgSectionTwo d-none d-sm-block">
|
||||||
|
<img src="./../../assets/imgs/allinone/sectiontwo.png" alt="" class="w-100 h-100 sectionTwoImgAllInone">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<img src="./../../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">
|
||||||
|
<div class="d-flex flex-column gap-5 laptopSectionDesP">
|
||||||
|
<div>
|
||||||
|
<div class="font-1-5">AIO24 - 1700N</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-2 headinglaptopSub">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leftClipPathLaptop d-none d-sm-block">
|
||||||
|
<img src="./../../assets/imgs/allinone/rightclippath.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- section 2 end -->
|
||||||
|
|
||||||
|
<!-- section 3 -->
|
||||||
|
|
||||||
|
<section class="allinoneDualMarginTop overflow-hidden">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 pe-5 clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop d-none d-sm-block">
|
||||||
|
<img src="./../../assets/imgs/allinone/ll.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImgFirstThree d-none d-sm-block">
|
||||||
|
<img src="./../../assets/imgs/allinone/montier.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
<img src="./../../assets/imgs/allinone/montier.png" alt="" class="img-fluid d-block d-sm-none">
|
||||||
|
|
||||||
|
<div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 ps-5 clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop d-none d-sm-block">
|
||||||
|
<img src="./../../assets/imgs/allinone/rr.png" alt="" class="w-100 h-100">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImgSectionThree d-none d-sm-block">
|
||||||
|
<img src="../../assets/imgs/allinone/keyboardandmouse.png" alt="" class="w-100 h-100 ">
|
||||||
|
</div>
|
||||||
|
<img src="../../assets/imgs/allinone/keyboardandmouse.png" alt="" class="img-fluid d-block d-sm-none">
|
||||||
|
|
||||||
|
<div class="d-flex d-sm-none d-block allinoneDualMarginTop_pContainer flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between allinoneDualMarginTop_desContainer p-7 d-none d-sm-flex">
|
||||||
|
<div class="d-flex flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Peripherals</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- section 3 end -->
|
||||||
|
|
||||||
|
<!-- section 4 -->
|
||||||
|
|
||||||
|
<section class=" overflow-hidden allinoneDualMarginTop">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 pe-5 clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop ">
|
||||||
|
<img src="./../../assets/imgs/allinone/ll.png" alt="" class="w-100 h-100 d-none d-sm-block">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImgFirstFour">
|
||||||
|
<img src="./../../assets/imgs/allinone/cpus.png" alt="" class="w-100 h-100 d-none d-sm-block">
|
||||||
|
</div>
|
||||||
|
<img src="./../../assets/imgs/allinone/cpus.png" alt="" class="img-fluid d-block d-sm-none">
|
||||||
|
|
||||||
|
<div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 ps-5 clipPathSectionCol">
|
||||||
|
<div class="leftClipPathLaptop ">
|
||||||
|
<img src="./../../assets/imgs/allinone/rr.png" alt="" class="w-100 h-100 d-none d-sm-block">
|
||||||
|
</div>
|
||||||
|
<div class="innerClipPathImgSectionFour">
|
||||||
|
<img src="../../assets/imgs/allinone/rams.png" alt="" class="w-100 h-100 d-none d-sm-block">
|
||||||
|
</div>
|
||||||
|
<img src="../../assets/imgs/allinone/rams.png" alt="" class="img-fluid d-block d-sm-none">
|
||||||
|
<div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between allinoneDualMarginTop_desContainer p-7 d-none d-sm-flex">
|
||||||
|
<div class="d-flex flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Moniters</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column gap-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="orbitron_font font-3">Peripherals</h1>
|
||||||
|
</div>
|
||||||
|
<div class="font-1-5 allinoneDualMarginTop_p">
|
||||||
|
<div class="satoshi_font">
|
||||||
|
Extraordinary Performance
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="satoshi_font"> and Unparalleled Flexibility</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- section 4 end -->
|
||||||
|
|
||||||
|
<!-- section 5 -->
|
||||||
|
<section class="sectionfiveAllinOne container overflow-hidden">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/imgs/allinone/info1.png" alt="">
|
||||||
|
<div class="orbitron_font text-white infoContainerOneText">
|
||||||
|
<h1>Announcements</h1>
|
||||||
|
<h1>and Events</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
|
||||||
|
<img class="w-100 h-70" src="./../../assets/imgs/allinone/info2.png" alt="">
|
||||||
|
<!-- <img class="w-100 h-70" src="./../../assets/imgs/allinone/info2.png" alt=""> -->
|
||||||
|
<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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
|
||||||
|
<img class="w-100 h-70" src="./../../assets/imgs/allinone/info3.png" alt="">
|
||||||
|
<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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
|
||||||
|
<img class="w-100 h-70" src="./../../assets/imgs/allinone/info4.png" alt="">
|
||||||
|
<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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section 5 end -->
|
||||||
|
|
||||||
|
<!-- section 6 -->
|
||||||
|
<section>
|
||||||
|
<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">
|
||||||
|
<div class="p-6 pt-5 insightsAdv">
|
||||||
|
<ul class="list-inline d-flex gap-5">
|
||||||
|
<li class="cursor-pointer orbitron_font fw-600">Server</li>
|
||||||
|
<li class="cursor-pointer orbitron_font" data-hash="3"> servers</li>
|
||||||
|
<li class="cursor-pointer orbitron_font"> servers</li>
|
||||||
|
<li class="cursor-pointer orbitron_font"> servers</li>
|
||||||
|
<li class="cursor-pointer orbitron_font"> servers</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carouselLanding owl-carousel d-flex p-4">
|
||||||
|
<div class="carouselLandingItem">
|
||||||
|
<div class="mt-5C carouselLandingItemInner">
|
||||||
|
<img src="./../../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 class="carouselLandingItem ">
|
||||||
|
<div class=" carouselLandingItemInner">
|
||||||
|
<img src="./../../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 class="carouselLandingItem " data-hash="3">
|
||||||
|
<div class="mt-5C carouselLandingItemInner">
|
||||||
|
<img src="./../../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 class="carouselLandingItem">
|
||||||
|
<div class=" carouselLandingItemInner">
|
||||||
|
<img src="./../../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 class="carouselLandingItem ">
|
||||||
|
<div class="mt-5C carouselLandingItemInner">
|
||||||
|
<img src="./../../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>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- section 6 end -->
|
||||||
|
|
||||||
|
<!-- section 7 -->
|
||||||
|
<section class="p-6 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">
|
||||||
|
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<div class="supportBoxCircle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column gap-3">
|
||||||
|
<div class="text-center font-1-2 orbitron_font fw-600">
|
||||||
|
Product Registration
|
||||||
|
</div>
|
||||||
|
<div class="text-center satoshi_font">
|
||||||
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<div class="supportBoxCircle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column gap-3">
|
||||||
|
<div class="text-center font-1-2 orbitron_font fw-600">
|
||||||
|
Product Warranty
|
||||||
|
</div>
|
||||||
|
<div class="text-center satoshi_font">
|
||||||
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<div class="supportBoxCircle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column gap-3">
|
||||||
|
<div class="text-center font-1-2 orbitron_font fw-600">
|
||||||
|
Customer / Support
|
||||||
|
</div>
|
||||||
|
<div class="text-center satoshi_font">
|
||||||
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section 7 end -->
|
||||||
|
<!-- footer -->
|
||||||
|
<!-- <section id="footer-head"></section> -->
|
||||||
|
<!-- end-footer -->
|
||||||
|
|
||||||
|
<script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="../../js/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="./../../../libs/owlcarousel/dist/owl.carousel.min.js"></script>
|
||||||
|
<script src="../../js/navbar.js"></script>
|
||||||
|
<script src="../../js/footer.js"></script>
|
||||||
|
<script src="./../../Js/allInOne.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Vendored
+786
-136
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
@@ -27,15 +27,17 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
|||||||
*/
|
*/
|
||||||
@mixin respond($breakpoint) {
|
@mixin respond($breakpoint) {
|
||||||
@if $breakpoint == phone {
|
@if $breakpoint == phone {
|
||||||
@media only screen and (max-width: 37.5em) { @content }; //600px
|
@media only screen and (max-width: 600px) { @content }; //600px
|
||||||
}
|
}
|
||||||
@if $breakpoint == tab-port {
|
@if $breakpoint == tab-port {
|
||||||
@media only screen and (max-width: 56.25em) { @content }; //900px
|
@media only screen and (max-width: 900px) { @content }; //900px
|
||||||
}
|
}
|
||||||
@if $breakpoint == tab-land {
|
@if $breakpoint == tab-land {
|
||||||
@media only screen and (max-width: 75em) { @content }; //1200px
|
@media only screen and (max-width: 1200px) { @content }; //1200px
|
||||||
}
|
}
|
||||||
@if $breakpoint == big-desktop {
|
@if $breakpoint == big-desktop {
|
||||||
@media only screen and (min-width: 112.5em) { @content }; //1800
|
@media only screen and (min-width: 1800) { @content }; //1800
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,181 +1,273 @@
|
|||||||
// colors
|
// colors
|
||||||
.bg-green {
|
.bg-green {
|
||||||
background-color: #3bb78f;
|
background-color: #3bb78f;
|
||||||
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-green-Awni {
|
.text-green-Awni{
|
||||||
color: #0A886A;
|
color: #0A886A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbitron_font {
|
.anwi_grey_bg{
|
||||||
font-family: 'Orbitron', sans-serif;
|
background-color: #ECECEC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbitron_font{
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.satoshi_font{
|
||||||
|
font-family: "Satoshi", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
// font size
|
// font size
|
||||||
|
.font-1{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
.font-3 {
|
.font-3 {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-1-2{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-1-5{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
.font-1_5 {
|
.font-1_5 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-1_7 {
|
.font-1_7{
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-2 {
|
|
||||||
font-size: 2.2rem;
|
.font-2{
|
||||||
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-2_2 {
|
.font-2_2{
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-2_7 {
|
.font-2_7{
|
||||||
font-size: 2.7rem;
|
font-size: 2.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font_4 {
|
|
||||||
font-size: 4rem;
|
.font_4{
|
||||||
|
font-size: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-5{
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-6{
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-7{
|
||||||
|
font-size: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-10{
|
||||||
|
font-size: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.subtitle_1 {
|
.subtitle_1 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-1 {
|
|
||||||
gap: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner_heading_4 {
|
.banner_heading_4 {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// padding
|
// padding
|
||||||
|
|
||||||
.padding_top_14 {
|
.padding_top_14 {
|
||||||
padding-top: 14rem;
|
padding-top: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-6 {
|
.p-6{
|
||||||
padding: 5rem;
|
padding:5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-7{
|
||||||
|
padding-left: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-6{
|
||||||
|
padding-left: 6rem;
|
||||||
|
padding-right: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-7{
|
||||||
|
padding: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding_top_10 {
|
.padding_top_10 {
|
||||||
padding-top: 10rem;
|
padding-top: 10rem; }
|
||||||
}
|
|
||||||
|
|
||||||
// heights
|
// heights
|
||||||
.h-10 {
|
|
||||||
height: 10%;
|
.h-10{
|
||||||
|
height: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-15 {
|
.h-15{
|
||||||
height: 15%;
|
height: 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-20 {
|
.h-20{
|
||||||
height: 20%;
|
height: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-30 {
|
.h-30{
|
||||||
height: 30%;
|
height: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-33 {
|
.h-33{
|
||||||
height: 33%;
|
height: 33%;
|
||||||
|
}
|
||||||
|
.h-34{
|
||||||
|
height: 34%;
|
||||||
|
}
|
||||||
|
.h-35{
|
||||||
|
height: 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-34 {
|
.h-40{
|
||||||
height: 34%;
|
height: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-35 {
|
.vh_60{
|
||||||
height: 35%;
|
height: 60vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-40 {
|
.vh-70{
|
||||||
height: 40%;
|
height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vh_60 {
|
.vh-77{
|
||||||
height: 60vh;
|
height: 77vh;
|
||||||
}
|
|
||||||
|
|
||||||
.vh-70 {
|
|
||||||
height: 70vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vh-77 {
|
|
||||||
height: 77vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vh-85 {
|
.vh-85 {
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vh-15 {
|
.vh-15 {
|
||||||
height: 15vh;
|
height: 15vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-700p {
|
.h-700p{
|
||||||
height: 700px;
|
height: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-25{
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-60{
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-75{
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-60{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.w-20p{
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// font weight
|
||||||
|
|
||||||
|
|
||||||
|
.fw-500{
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fw-600{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fw-700 {
|
||||||
|
font-weight: 700; }
|
||||||
|
|
||||||
|
|
||||||
|
.h-200p{
|
||||||
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// margin
|
// margin
|
||||||
.mt-7 {
|
.mt-7 {
|
||||||
margin-top: 7rem;
|
margin-top: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// font weight
|
|
||||||
.fw-600 {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fw-700 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-200p {
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// spacing
|
// spacing
|
||||||
.sec-space-1 {
|
.sec-space-1 {
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-space-2 {
|
.sec-space-2 {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-space-3 {
|
.sec-space-3 {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-space-4 {
|
.sec-space-4 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-space-5 {
|
.sec-space-5 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-100p {
|
.h-100p {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// gap
|
// gap
|
||||||
|
|
||||||
.gap-1 {
|
.gap-1 {
|
||||||
gap: 0.7rem;
|
gap: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-2 {
|
.gap-2{
|
||||||
gap: 2rem
|
gap:2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
// border-radius
|
// border-radius
|
||||||
.br-1 {
|
|
||||||
border-radius: 1rem;
|
.br-1{
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-pointer{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// margin
|
||||||
|
.mt-5C{
|
||||||
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,382 @@
|
|||||||
|
|
||||||
|
.clipPathSectionCol{
|
||||||
|
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.innerClipPathImg{
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
left: 9%;
|
||||||
|
width: 81%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgFirstThree{
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
left:5%;
|
||||||
|
width: 81%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgFirstFour{
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
left:5%;
|
||||||
|
width: 81%;
|
||||||
|
>img{
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgSectionTwo{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 50%;
|
||||||
|
left: 28%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 81%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgSectionThree{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 50%;
|
||||||
|
left:17%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 81%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.innerClipPathImgSectionFour{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 50%;
|
||||||
|
left: 17%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 81%;
|
||||||
|
// >img{
|
||||||
|
// transform: scale(0.7);
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.allinoneLanding{
|
||||||
|
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;
|
||||||
|
#navbar-head *{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headingAllinOne{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTwoImgAllInone{
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop{
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionfiveAllinOne{
|
||||||
|
.infoContainer{
|
||||||
|
position: relative;
|
||||||
|
.infoContainerOneText{
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
>h1{
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// width: 100%;
|
||||||
|
// max-height: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoContainerYellow{
|
||||||
|
background-color: #FFB518;
|
||||||
|
|
||||||
|
}
|
||||||
|
.infoContainerOrange{
|
||||||
|
background-color: #E05E00;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.infoContainerBlue{
|
||||||
|
background-color: #461DCF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoContainer_des{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.supportBoxCircle{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// carouselLanding
|
||||||
|
|
||||||
|
.carouselLanding{
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
gap: 50px;
|
||||||
|
margin-bottom:4rem;
|
||||||
|
.carouselLandingItem{
|
||||||
|
width: 300px;
|
||||||
|
>div{
|
||||||
|
border-radius: 25px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselLandingItemInner{
|
||||||
|
position: relative;
|
||||||
|
.carouselLandingItemInnerOverlay{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.453);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
.laptopsSection .headinglaptop{
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headinglaptopSub{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
.laptopsSection .headinglaptop{
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headinglaptopSub{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// allinoneDual
|
||||||
|
|
||||||
|
.allinoneDualMarginTop {
|
||||||
|
.allinoneDualMarginTop_desContainer {
|
||||||
|
padding: 2rem;
|
||||||
|
h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop_p{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop{
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (tab-port) {
|
||||||
|
.laptopsSection .headinglaptop{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.headinglaptopSub{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond(phone) {
|
||||||
|
.headingAllinOne > h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px) {
|
||||||
|
.supTitleSection{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop .clipPathSectionCol{
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
.headingAllinOne{
|
||||||
|
padding-left: 2rem !important;
|
||||||
|
padding-right: 2rem !important;
|
||||||
|
> h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.laptopSectionDesP{
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.allinoneDualMarginTop {
|
||||||
|
.clipPathSectionCol{
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.clipPathSectionCol{
|
||||||
|
//padding-left: 1rem !important;
|
||||||
|
.allinoneDualMarginTop_pContainer{
|
||||||
|
padding: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.innerClipPathImgSectionThree{
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgSectionFour{
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.supportBoxParent{
|
||||||
|
padding: 2rem;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop_p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.insightsAdvHeading{
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.insightsAdv{
|
||||||
|
width: 100vw;
|
||||||
|
padding: 1rem;
|
||||||
|
>ul{
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselLanding{
|
||||||
|
overflow-x: auto;
|
||||||
|
display: block;
|
||||||
|
gap:0;
|
||||||
|
margin-bottom:1rem;
|
||||||
|
.carouselLandingItem{
|
||||||
|
width: 100%;
|
||||||
|
>div{
|
||||||
|
border-radius: 25px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselLandingItemInner{
|
||||||
|
position: relative;
|
||||||
|
.carouselLandingItemInnerOverlay{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.453);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-5C{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:320px) {
|
||||||
|
|
||||||
|
|
||||||
|
.laptopsSection {
|
||||||
|
.headinglaptopSub{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.laptopSectionDesP {
|
||||||
|
gap: 2rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.allinoneDualMarginTop {
|
||||||
|
.allinoneDualMarginTop_p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop_pContainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipPathSectionCol{
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipPathSectionCol {
|
||||||
|
|
||||||
|
.innerClipPathImgSectionThree{
|
||||||
|
top: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerClipPathImgSectionFour{
|
||||||
|
top: 22%;
|
||||||
|
}
|
||||||
|
.innerClipPathImgFirstFour{
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allinoneDualMarginTop {
|
||||||
|
margin-top: 100px;
|
||||||
|
.innerClipPathImgFirstThree{
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -65,88 +65,214 @@ $PO_footerText: 0.7rem;
|
|||||||
background: white;
|
background: white;
|
||||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
|
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -46%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.PO_gallery_box {
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.PO_galleryContainer .PO_gallery_box_inner {
|
.PO_galleryContainer .PO_gallery_box_inner {
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
background-color: #eeeeee;
|
background-color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobileAw{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.productoverBox {
|
.productoverBox {
|
||||||
|
height: 900px;
|
||||||
|
|
||||||
|
.productoverBox-1 {
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-2 {
|
||||||
|
height: 225px;
|
||||||
|
|
||||||
|
.futureProof {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.futureProofImg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-3 {
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-4 {
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-5 {
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.box_innerImg {
|
||||||
|
position: absolute;
|
||||||
|
right: 8%;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
scale: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-6 {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-7 {
|
||||||
|
height: 225px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.gridTruelifeImg {
|
||||||
|
position: absolute;
|
||||||
|
width: 85%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-8 {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-9 {
|
||||||
|
height: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-10 {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-11 {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox-12 {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
.PO_box {
|
.PO_box {
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
> div {
|
|
||||||
|
>div {
|
||||||
padding: 1rem 0rem;
|
padding: 1rem 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box_inner {
|
.box_inner {
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bgBox_Content {
|
.bgBox_Content {
|
||||||
background: rgb(236, 236, 236);
|
background: rgb(236, 236, 236);
|
||||||
background: linear-gradient(
|
background: linear-gradient(90deg,
|
||||||
90deg,
|
rgba(236, 236, 236, 1) 4%,
|
||||||
rgba(236, 236, 236, 1) 4%,
|
rgba(118, 118, 118, 1) 100%);
|
||||||
rgba(118, 118, 118, 1) 100%
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box_inner_right {
|
.box_inner_right {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box_inner_left {
|
.box_inner_left {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// specsgrid
|
||||||
|
|
||||||
|
.specsgrid {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
gap: 20px;
|
||||||
|
grid-template-columns: repeat(8, minmax(5%, 1fr));
|
||||||
|
grid-template-rows: repeat(12, minmax(5%, 1fr));
|
||||||
|
|
||||||
|
.specsItem {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specsItem-1 {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 1/4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specsItem-2 {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 1/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// specsgrid end
|
||||||
|
|
||||||
.displayscreenpad {
|
.displayscreenpad {
|
||||||
.displayscreenpadContainer {
|
.displayscreenpadContainer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.displayscreenpadHeading {
|
.displayscreenpadHeading {
|
||||||
font-size: 8rem;
|
font-size: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.displayscreenpadMain {
|
.displayscreenpadMain {
|
||||||
top: -108px;
|
// top: -108px;
|
||||||
|
margin-top: -8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.displayscreenpadleft {
|
.displayscreenpadleft {
|
||||||
> img {
|
>img {
|
||||||
left: -8%;
|
left: -8%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.displayscreenpadright {
|
.displayscreenpadright {
|
||||||
> img {
|
>img {
|
||||||
right: -10%;
|
right: -10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dual_des_heading{
|
.dual_des_heading {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dualLaptop {
|
||||||
|
|
||||||
.dualLaptop{
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 1000px;
|
// height: 1300px;
|
||||||
top:-100px;
|
top: -100px;
|
||||||
|
margin-top: 100px;
|
||||||
margin-bottom: -100px;
|
margin-bottom: -100px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// overflow-x: hidden;
|
||||||
.zeroBMain_desP{
|
.zeroBMain_desP {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.zeroBMain_des{
|
|
||||||
|
.zeroBMain_des {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -154,52 +280,51 @@ $PO_footerText: 0.7rem;
|
|||||||
padding-right: 9rem;
|
padding-right: 9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dualImgs{
|
.dualImgs {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
.dualImgsInner {
|
||||||
.dualImgsInner{
|
width: 50rem;
|
||||||
width: 63%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dualImgsOne {
|
||||||
|
top: 0;
|
||||||
.dualImgsOne{
|
left: -10rem;
|
||||||
top:0;
|
|
||||||
left: -10%;
|
|
||||||
transform: rotate(343deg);
|
transform: rotate(343deg);
|
||||||
width: 68%;
|
width: 68%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dualImgsTwo{
|
.dualImgsTwo {
|
||||||
// top:0;
|
// top:0;
|
||||||
// right: -80%;
|
// right: -80%;
|
||||||
// transform: rotate(330deg);
|
// transform: rotate(330deg);
|
||||||
|
|
||||||
top: 31%;
|
top: 14rem;
|
||||||
right: -68%;
|
right: -62%;
|
||||||
transform: rotate(339deg);
|
transform: rotate(339deg);
|
||||||
.dualImgsInner{
|
.dualImgsInner {
|
||||||
width: 82%;
|
width: 82%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableLaptop{
|
.tableLaptop {
|
||||||
margin-top: 300px;
|
margin-top: 300px;
|
||||||
|
|
||||||
// border: 1px solid;
|
// border: 1px solid;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
.circleTableLaptop_Heading{
|
|
||||||
|
.circleTableLaptop_Heading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -311%);
|
transform: translate(-50%, -311%);
|
||||||
}
|
}
|
||||||
.justTableLaptop{
|
|
||||||
|
.justTableLaptop {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 86%;
|
width: 86%;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
@@ -207,94 +332,98 @@ $PO_footerText: 0.7rem;
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circleTableLaptop{
|
.circleTableLaptop {
|
||||||
background-color: #ECECEC;
|
background-color: #ececec;
|
||||||
height: 70rem;
|
height: 70rem;
|
||||||
width: 70rem;
|
width: 70rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
.circleTableLaptopTop {
|
||||||
.circleTableLaptopTop{
|
bottom: -3%;
|
||||||
|
width: 80%;
|
||||||
bottom: -3%;
|
position: absolute;
|
||||||
width: 80%;
|
top: 50%;
|
||||||
position: absolute;
|
left: 50%;
|
||||||
top: 50%;
|
transform: translate(-50%, 2%);
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 2%);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.circleTableLaptop_text{
|
.circleTableLaptop_text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 168%);
|
transform: translate(-50%, 106%);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
margin-bottom: 300px;
|
margin-bottom: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trueLifeDisplay{
|
.trueLifeDisplay {
|
||||||
.trueLifeDisplay_headingHD{
|
.trueLifeDisplay_headingHD {
|
||||||
>.headingLife{
|
>.headingLife {
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.trueLifeDisplay_des{
|
.trueLifeDisplay_des {
|
||||||
padding: 0 10rem;
|
padding: 0 10rem;
|
||||||
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.font_p_Dual{
|
.font_p_Dual {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controlPanel{
|
.tableLaptopTwo{
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url("../../dist/assets/imgs/sectiontest.png");
|
||||||
|
background-color: white;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlPanel {
|
||||||
margin-top: 10rem;
|
margin-top: 10rem;
|
||||||
padding-bottom: 550px;
|
padding-bottom: 300px;
|
||||||
.controlPanel_des{
|
|
||||||
|
.controlPanel_des {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -170px;
|
top: -170px;
|
||||||
left: 80px;
|
left: 80px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.bgControlpanel{
|
|
||||||
|
.bgControlpanel {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #ECECEC;
|
background-color: #ececec;
|
||||||
border-radius: 157px;
|
border-radius: 157px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.bgControlpaneltabs{
|
.bgControlpaneltabs {
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100px;
|
top: 100px;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
.nav-tabs{
|
.nav-tabs {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
.nav-item{
|
|
||||||
|
.nav-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-tabs .nav-link {
|
.nav-tabs .nav-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs .nav-link.active{
|
.nav-tabs .nav-link.active {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
@@ -303,8 +432,8 @@ $PO_footerText: 0.7rem;
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item .nav-link::before{
|
.nav-item .nav-link::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
@@ -315,26 +444,431 @@ $PO_footerText: 0.7rem;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.designedProLaptop{
|
|
||||||
|
|
||||||
|
|
||||||
|
.dragondisplay {
|
||||||
position: relative;
|
position: relative;
|
||||||
.designedProLaptop_title{
|
background: rgb(255, 255, 255);
|
||||||
position: absolute;
|
background: linear-gradient(184deg,
|
||||||
top: -200px;
|
rgba(255, 255, 255, 1) 4%,
|
||||||
left: 0;
|
rgba(235, 255, 133, 1) 100%);
|
||||||
z-index: 1;
|
overflow: hidden;
|
||||||
|
|
||||||
|
.dragondisplay_heading {
|
||||||
}
|
|
||||||
.designedProLaptop_title_text{
|
|
||||||
font-size: 10rem;
|
|
||||||
}
|
|
||||||
.designedProLaptop_img{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
bottom: -4%;
|
||||||
right: 700px;
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 8rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragondisplay_des {
|
||||||
|
max-width: 600px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 13%;
|
||||||
|
padding: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.intelGen {
|
||||||
|
.intelGenUL {
|
||||||
|
max-width: 250px;
|
||||||
|
gap: 8rem;
|
||||||
|
|
||||||
|
.intelGenULHeading {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cpuSection {
|
||||||
|
background-image: url("./../../dist/assets/imgs/productoverview/cpu.png");
|
||||||
|
background-color: white;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.osPlusSoftware {
|
||||||
|
width: 100vw;
|
||||||
|
height: 140vh;
|
||||||
|
margin-top: 14rem;
|
||||||
|
|
||||||
|
.osContianer {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 30%;
|
||||||
|
|
||||||
|
.osContianer_des_fontParent {
|
||||||
|
position: relative;
|
||||||
|
top: -8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.osContianer_des_font {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.osContianerHeading {
|
||||||
|
position: relative;
|
||||||
|
top: -15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.osContianerImg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
|
||||||
|
// section
|
||||||
|
|
||||||
|
.productOverview {
|
||||||
|
.p-6{
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.overviewProductFullTitle{
|
||||||
|
padding: 2rem 5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section
|
||||||
|
.productOverview {
|
||||||
|
>div {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// seciton
|
||||||
|
.dualLaptop .dualImgsTwo .dualImgsInner {
|
||||||
|
transform: rotate(339deg) translateX(57%) translateY(55%);
|
||||||
|
}
|
||||||
|
// section
|
||||||
|
|
||||||
|
.productOverview .overviewProductFullTitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 2rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productOverview .overviewProductDes {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PO_galleryContainer .PO_gallery_display {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PO_gallery_box {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PO_galleryContainer .PO_gallery_box_inner {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverBox.px-6 {
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ssection end
|
||||||
|
|
||||||
|
.displayscreenpad {
|
||||||
|
.displayscreenpadHeading {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section end
|
||||||
|
|
||||||
|
.dualLaptop {
|
||||||
|
.dual_des_heading {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zeroBMain_des {
|
||||||
|
padding-right: 0;
|
||||||
|
|
||||||
|
.zeroBMain_desP {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
max-width: 400px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//section
|
||||||
|
.controlPanel {
|
||||||
|
|
||||||
|
.controlPanel_des{
|
||||||
|
top: -110px;
|
||||||
|
>h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:790px) {
|
||||||
|
|
||||||
|
.productOverview {
|
||||||
|
.p-6{
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.overviewProductFullTitle{
|
||||||
|
padding: 2rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.overviewProductDes{
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section
|
||||||
|
|
||||||
|
|
||||||
|
// section
|
||||||
|
|
||||||
|
.displayscreenpad {
|
||||||
|
.displayscreenpadHeading {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dualLaptop {
|
||||||
|
.dual_des_heading {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zeroBMain_des {
|
||||||
|
// padding-right: 3rem;
|
||||||
|
|
||||||
|
.zeroBMain_desP {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
max-width: 400px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section
|
||||||
|
.controlPanel{
|
||||||
|
.controlPanel_des{
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 1.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:670px) {
|
||||||
|
.zeroBMain_des{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mobileAw{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// media quiue
|
||||||
|
|
||||||
|
@include respond(phone) {
|
||||||
|
.p-6 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productoverviewmain .displayscreenpad .displayscreenpadHeading {
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner_heading_4 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// section 3
|
||||||
|
.displayscreenpad {
|
||||||
|
.displayscreenpadHeading {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.displayscreenpadMain {
|
||||||
|
top: -26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section 5
|
||||||
|
.tableLaptop {
|
||||||
|
margin-top: 20%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
height: max-content;
|
||||||
|
|
||||||
|
.dual_des_heading {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleTableLaptop {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleTableLaptop .circleTableLaptopTop {
|
||||||
|
bottom: -3%;
|
||||||
|
width: 80%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 2%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleTableLaptop_Heading {
|
||||||
|
position: absolute;
|
||||||
|
top: 4%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.justTableLaptop {
|
||||||
|
position: absolute;
|
||||||
|
width: 86%;
|
||||||
|
top: 26%;
|
||||||
|
right: 30px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleTableLaptop_text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trueLifeDisplay {
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
.trueLifeDisplay_headingHD {
|
||||||
|
|
||||||
|
>h1,
|
||||||
|
.headingLife {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trueLifeDisplay_des {
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.font_p_Dual {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section 6
|
||||||
|
.controlPanel {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
|
||||||
|
//heading h1
|
||||||
|
>.p-5 {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgControlpanel {
|
||||||
|
min-height: 85vh;
|
||||||
|
|
||||||
|
.bgControlpaneltabs {
|
||||||
|
top: 55%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlPanel_des {
|
||||||
|
top:0%;
|
||||||
|
width: 100%;
|
||||||
|
left: 50%;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
margin: 1rem 0;
|
||||||
|
margin: 1rem 0;
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgControlpaneltabs {
|
||||||
|
padding: 0.1rem !important;
|
||||||
|
padding-top: 3rem !important;
|
||||||
|
|
||||||
|
>.nav-tabs {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
>ul {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabLaptopContent {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// section 7
|
||||||
|
.proSection{
|
||||||
|
.designedProLaptop_title{
|
||||||
|
.designedProLaptop_title_text {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// // popupKeyboard
|
||||||
|
// .popupKeyboard {
|
||||||
|
// padding: 1rem;
|
||||||
|
|
||||||
|
// .popupKeyboard_heading {
|
||||||
|
// >h1 {
|
||||||
|
// font-size: 2rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .popupKeyboard_hParent .popupKeyboard_des {
|
||||||
|
// max-width: max-content;
|
||||||
|
// font-size: 0.9rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
.proSection{
|
||||||
|
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designedProLaptopList{
|
||||||
|
> li{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.proSection{
|
||||||
|
.designedProLaptopList{
|
||||||
|
> li{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px){
|
||||||
|
.proSection{
|
||||||
|
padding: 1rem;
|
||||||
|
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designedProLaptopList {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
.proSection{
|
||||||
|
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
.dragondisplay {
|
||||||
|
position: relative;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
background: linear-gradient(184deg,
|
||||||
|
rgba(255, 255, 255, 1) 4%,
|
||||||
|
rgba(235, 255, 133, 1) 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.dragondisplay_heading {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 8rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragondisplay_des {
|
||||||
|
max-width: 600px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 13%;
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.dragondisplay{
|
||||||
|
.dragondisplay_heading{
|
||||||
|
>h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.dragondisplay{
|
||||||
|
.dragondisplay_heading{
|
||||||
|
>h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
.dragondisplay{
|
||||||
|
.dragondisplay_heading{
|
||||||
|
>h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
.lensAnwi {
|
||||||
|
.box_lens {
|
||||||
|
.anwi_BoxLen {
|
||||||
|
border-radius: 40px;
|
||||||
|
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||||
|
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||||
|
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_lens_img {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenpadLens {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lenHeading{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anwi_BoxLen {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1400px) {
|
||||||
|
.lensAnwi {
|
||||||
|
.box_lens {
|
||||||
|
.lenHeading{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.screenpadLens {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.lensAnwi {
|
||||||
|
.row_lensAnwi {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.box_lens {
|
||||||
|
.lenHeading{
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
.screenpadLens {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.lensAnwi {}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.lensAnwi {
|
||||||
|
.box_lens {
|
||||||
|
.box_lens_img {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragondisplay {
|
||||||
|
.dragondisplay_heading {
|
||||||
|
>h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
// pop up keyboard
|
||||||
|
.popupKeyboard {
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-top: 11rem;
|
||||||
|
.popupKeyboard_hParent {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popupKeyboard_heading {
|
||||||
|
>h1{
|
||||||
|
font-size: 9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.popupKeyboard {
|
||||||
|
.popupKeyboard_heading {
|
||||||
|
>h1{
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.controlPanel{
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
.popupKeyboard {
|
||||||
|
|
||||||
|
.popupKeyboard_heading {
|
||||||
|
padding: 1rem;
|
||||||
|
>h1{
|
||||||
|
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.popupKeyboard_des {
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popupKeyboard_hParent {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
.popupKeyboard {
|
||||||
|
|
||||||
|
.popupKeyboard_heading {
|
||||||
|
padding: 1rem;
|
||||||
|
>h1{
|
||||||
|
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.popupKeyboard_des {
|
||||||
|
padding: 2rem;
|
||||||
|
padding-top: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
.professinalGrade {
|
||||||
|
.professinalGradeImgContainer {
|
||||||
|
background-image: url("./../../dist/assets/imgs/productoverview/promask.png");
|
||||||
|
background-color: white;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.professinalGradeImg {
|
||||||
|
@include absCenter;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1400px) {
|
||||||
|
.professinalGrade{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.professinalGrade{
|
||||||
|
h1{
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.professinalGrade{
|
||||||
|
h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font_p_Dual{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
.professinalGrade{
|
||||||
|
p{
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
.stunningSound {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 15rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
.stunningSound_heading {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stunningSound_des {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 30%;
|
||||||
|
transform: translate(0%, 0%);
|
||||||
|
|
||||||
|
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// @media (max-width:1400px) {}
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.stunningSound {
|
||||||
|
|
||||||
|
|
||||||
|
.stunningSound_heading {
|
||||||
|
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stunningSound_des{
|
||||||
|
|
||||||
|
padding-right: 1rem;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
.stunningSound {
|
||||||
|
|
||||||
|
|
||||||
|
.stunningSound_heading {
|
||||||
|
|
||||||
|
top: 20%;
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stunningSound_des {
|
||||||
|
|
||||||
|
top: 40%;
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.stunningSound {
|
||||||
|
|
||||||
|
|
||||||
|
.stunningSound_heading {
|
||||||
|
|
||||||
|
|
||||||
|
>h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stunningSound_des {
|
||||||
|
max-width: 270px;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
p{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:576px) {
|
||||||
|
.stunningSound {
|
||||||
|
|
||||||
|
|
||||||
|
.stunningSound_heading {
|
||||||
|
|
||||||
|
top: 15%;
|
||||||
|
>h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stunningSound_des {
|
||||||
|
padding: 2rem;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 100%;
|
||||||
|
left: 0;
|
||||||
|
// top: 50%;
|
||||||
|
// right: -19%;
|
||||||
|
// p{
|
||||||
|
// font-size: 1rem;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
.circleTableLaptop_Heading {
|
||||||
|
top: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleTableLaptop_text{
|
||||||
|
bottom: 25%;
|
||||||
|
>div{
|
||||||
|
padding: 0px 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
.circleTableLaptop_text {
|
||||||
|
bottom: 18%;
|
||||||
|
>div{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
.circleTableLaptop_Heading {
|
||||||
|
h1{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circleTableLaptop_text {
|
||||||
|
bottom: 25%;
|
||||||
|
>div{
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px) {
|
||||||
|
.circleTableLaptop_Heading {
|
||||||
|
top: 0;
|
||||||
|
h1{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
|
||||||
|
.wifiSection {
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// .wifiSectionImg {
|
||||||
|
// width: 100vw;
|
||||||
|
// height: 100vh;
|
||||||
|
// margin: 10rem 0;
|
||||||
|
// background-image: url("./../../dist/assets/imgs/productoverview/wifilap.png");
|
||||||
|
// background-color: white;
|
||||||
|
// background-size: cover;
|
||||||
|
// background-repeat: no-repeat;
|
||||||
|
// background-position: center;
|
||||||
|
// }
|
||||||
|
.wifiSectionDes{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.textWifiContainer {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.wifiSection_des {
|
||||||
|
max-width: 500px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -48%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textWifiContainerHeading {
|
||||||
|
>h1 {
|
||||||
|
font-size: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
.wifiSection{
|
||||||
|
.textWifiContainer {
|
||||||
|
.textWifiContainerHeading {
|
||||||
|
>h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
.wifiSection{
|
||||||
|
.textWifiContainer {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifiSectionDes{
|
||||||
|
padding: 2rem;
|
||||||
|
display: block;
|
||||||
|
.wifiSection_des {
|
||||||
|
>p{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
+1082
-202
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
+22
-2
@@ -8,9 +8,18 @@
|
|||||||
@import "components/button";
|
@import "components/button";
|
||||||
// pages
|
// pages
|
||||||
@import "pages/productOverview";
|
@import "pages/productOverview";
|
||||||
@import "pages/home";
|
@import "pages/productOverview/designedpro";
|
||||||
@import "pages/shopping-cart";
|
@import "pages/productOverview/popupkeyboard";
|
||||||
|
@import "pages/productOverview/dragondisplay";
|
||||||
|
@import "pages/productOverview/lens";
|
||||||
|
@import "pages/productOverview/professinalGrade";
|
||||||
|
@import "pages/productOverview/stunningsound";
|
||||||
|
@import "pages/productOverview/wifisection";
|
||||||
|
@import "pages/productOverview/tablesection";
|
||||||
|
|
||||||
|
// @import "pages/home";
|
||||||
|
// @import "pages/shopping-cart";
|
||||||
|
@import "pages/allInOne";
|
||||||
/*
|
/*
|
||||||
0 - 600px: Phone
|
0 - 600px: Phone
|
||||||
600 - 900px: Tablet portrait
|
600 - 900px: Tablet portrait
|
||||||
@@ -186,3 +195,14 @@ body {
|
|||||||
font-family: "Satoshi", sans-serif;
|
font-family: "Satoshi", sans-serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// sachin
|
||||||
|
/* footer */
|
||||||
|
.footer-wrapper {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
border-radius: 0 275px 0 0;
|
||||||
|
clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
|
||||||
|
}
|
||||||
|
.footer-wrapper li {
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
In neuem Issue referenzieren
Einen Benutzer sperren