code added
This commit is contained in:
rodič
39f96809cc
revize
6a27d0502f
|
|
@ -7,7 +7,7 @@
|
|||
<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="./../../css/main.css" /> -->
|
||||
<link rel="stylesheet" href="../../../styles/style.css">
|
||||
<title>project</title>
|
||||
</head>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="price_footer py-4 w-100 ">
|
||||
<div class="price_footer py-4 w-100 ">
|
||||
<div class="d-flex align-items-center container justify-content-between">
|
||||
<div class="d-flex">
|
||||
<div class="boxImgContainer">
|
||||
|
|
@ -44,22 +44,23 @@
|
|||
</div>
|
||||
<div class="ps-3 ">
|
||||
<div class="satoshi_font fw-700">Delivery</div>
|
||||
<div class="satoshi_font">See estimated delivery times by</div>
|
||||
<div class="satoshi_font ">entering your PIN code</div>
|
||||
<div class="satoshi_font">See estimated delivery times by</div>
|
||||
<div class="satoshi_font ">entering your PIN code</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex align-items-center ">
|
||||
<div class="pe-5">
|
||||
<div class="font-1_5 fw-bold">$69,999.00</div>
|
||||
<div class="d-flex align-items-center justify-content-end gap-1 priceCut_multi">
|
||||
<span class="text-decoration-line-through pe-3">$ 89,999</span><span> Save $ 19,999</span>
|
||||
<div class="font-1_5 fw-700 satoshi_font">$69,999.00</div>
|
||||
<div class="d-flex align-items-center pt-1 justify-content-end gap-1 priceCut_multi">
|
||||
<span class="text-decoration-line-through pe-3 satoshi_font">$ 89,999</span><span
|
||||
class="satoshi_font text-green-Awni"> Save $ 19,999</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<button>Add to Cart</button>
|
||||
<a class="btn btn-dark button_dark" href="#">Add to cart</a>
|
||||
</div>
|
||||
<div>No Cost EMI Available <span>Learn more</span></div>
|
||||
<div class="satoshi_font PO_learnMore mt-2">No Cost EMI Available <span>Learn more</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,17 +72,18 @@
|
|||
<div class="font-1_7 overviewProductHeading fw-600">Overview</div>
|
||||
<div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
|
||||
4K OLED Dual Screen for Creative Multitasking</div>
|
||||
<div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
||||
<div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
||||
eirmod tempor
|
||||
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- photos display -->
|
||||
<div class="container PO_galleryContainer">
|
||||
<section class="container PO_galleryContainer">
|
||||
<div class="p-6 pt-0">
|
||||
<div class="PO_gallery_display">
|
||||
<img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
|
||||
<img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
|
||||
</div>
|
||||
<div class="d-flex h-200p pt-5 justify-content-between align-items-center">
|
||||
<span class="PO_gallery_box h-100">
|
||||
|
|
@ -116,16 +118,304 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- photos display end -->
|
||||
|
||||
|
||||
<!-- specs -->
|
||||
|
||||
<section class="container p-6">
|
||||
<div class="productoverBox row w-100 h-700p">
|
||||
<div class="col-sm-5">
|
||||
<div class="PO_box">
|
||||
<div class="h-40 ">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
<div class="row h-100">
|
||||
<div class="svg_container col-6 d-flex justify-content-center align-items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="120" height="120" viewBox="0 0 169 169">
|
||||
<defs>
|
||||
<clipPath id="clip-path">
|
||||
<rect id="Rectangle_619" data-name="Rectangle 619" width="169"
|
||||
height="169" transform="translate(0.5 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Group_929" data-name="Group 929" transform="translate(-0.5 -0.5)">
|
||||
<g id="Group_928" data-name="Group 928" clip-path="url(#clip-path)">
|
||||
<path id="Path_654" data-name="Path 654"
|
||||
d="M169,30.983V25.35H154.917V22.533a8.45,8.45,0,0,0-8.45-8.45H143.65V0h-5.633V14.083h-5.633V0H126.75V14.083h-5.633V0h-5.633V14.083H109.85V0h-5.633V14.083H98.583V0H92.95V14.083H87.317V0H81.683V14.083H76.05V0H70.417V14.083H64.783V0H59.15V14.083H53.517V0H47.883V14.083H42.25V0H36.617V14.083H30.983V0H25.35V14.083H22.533a8.45,8.45,0,0,0-8.45,8.45V25.35H0v5.633H14.083v5.633H0V42.25H14.083v5.633H0v5.633H14.083V59.15H0v5.633H14.083v5.633H0V76.05H14.083v5.633H0v5.633H14.083V92.95H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v2.817a8.45,8.45,0,0,0,8.45,8.45H25.35V169h5.633V154.917h5.633V169H42.25V154.917h5.633V169h5.633V154.917H59.15V169h5.633V154.917h5.633V169H76.05V154.917h5.633V169h5.633V154.917H92.95V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h2.817a8.45,8.45,0,0,0,8.45-8.45V143.65H169v-5.633H154.917v-5.633H169V126.75H154.917v-5.633H169v-5.633H154.917V109.85H169v-5.633H154.917V98.583H169V92.95H154.917V87.317H169V81.683H154.917V76.05H169V70.417H154.917V64.783H169V59.15H154.917V53.517H169V47.883H154.917V42.25H169V36.617H154.917V30.983ZM149.283,146.467a2.817,2.817,0,0,1-2.817,2.817H22.533a2.817,2.817,0,0,1-2.817-2.817V22.533a2.817,2.817,0,0,1,2.817-2.817H146.467a2.817,2.817,0,0,1,2.817,2.817Z" />
|
||||
<path id="Path_655" data-name="Path 655"
|
||||
d="M187.483,72H74.817A2.817,2.817,0,0,0,72,74.817V187.483a2.817,2.817,0,0,0,2.817,2.817H187.483a2.817,2.817,0,0,0,2.817-2.817V74.817A2.817,2.817,0,0,0,187.483,72m-2.817,112.667H77.633V77.633H184.667Z"
|
||||
transform="translate(-46.65 -46.65)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="col-6 d-flex justify-content-center align-items-center">
|
||||
<span> Latest 11th Gen Intel Core i5/i7 H35 </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-40 ">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
2
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="d-flex h-20 w-100">
|
||||
<div class="box_inner box_inner_left w-50">
|
||||
<div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">4</div>
|
||||
|
||||
</div>
|
||||
<div class="box_inner box_inner_right w-50">
|
||||
<div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">5</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="PO_box">
|
||||
<div class="h-30 ">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
1
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-20 ">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
2
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-40 ">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
2
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-10">
|
||||
<div class="box_inner bgBox_Content br-1">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="PO_box">
|
||||
<div class="h-35">
|
||||
<div class="box_inner bgBox_Content br-1 ">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-20">
|
||||
<div class="box_inner bgBox_Content br-1 ">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-30">
|
||||
<div class="box_inner bgBox_Content br-1 ">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-15">
|
||||
<div class="box_inner bgBox_Content br-1 ">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- specs end -->
|
||||
|
||||
<!-- TWO SCREENS ZERO BOUNDARIES -->
|
||||
<section class="displayscreenpad">
|
||||
<div class="">
|
||||
<div class=" d-flex flex-column align-items-center justify-content-center">
|
||||
<div class="satoshi_font font-1_7 fw-600">
|
||||
Display / Screenpad
|
||||
</div>
|
||||
<div class="displayscreenpadContainer">
|
||||
<h1 class="displayscreenpadHeading orbitron_font">TWO SCREENS.</h1>
|
||||
<h1 class="displayscreenpadHeading orbitron_font">ZERO BOUNDARIES</h1>
|
||||
</div>
|
||||
<!-- <div class="w-100 d-flex">
|
||||
<div class="displayscreenpadleft w-50 position-relative">
|
||||
<img class="h-100 position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
|
||||
</div>
|
||||
<div class="displayscreenpadright w-50 position-relative">
|
||||
<img class="h-100 position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container-fluid w-100 d-flex position-relative displayscreenpadMain">
|
||||
<div class="displayscreenpadleft w-50">
|
||||
<img class="h-100 position-relative w-100"
|
||||
src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
|
||||
</div>
|
||||
<div class="displayscreenpadright w-50">
|
||||
<img class="h-100 position-relative w-100"
|
||||
src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="dualLaptop">
|
||||
<div class="zeroBMain_des">
|
||||
<div>
|
||||
<h1 class="dual_des_heading orbitron_font">Experience Ultimate</h1>
|
||||
<h1 class="dual_des_heading orbitron_font">productivity</h1>
|
||||
</div>
|
||||
<div class="satoshi_font zeroBMain_desP">
|
||||
Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
|
||||
availability Experience
|
||||
ultimate productivityExperience ultimate productivity
|
||||
Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
|
||||
availability Experience
|
||||
ultimate productivityExperience ultimate productivity
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 h-100 dualImgs dualImgsOne">
|
||||
<div class="dualImgsInner">
|
||||
<img src="./../../assets/imgs/productoverview/boudone.png" alt="" class="w-100 h-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 h-100 dualImgs dualImgsTwo">
|
||||
<div class="dualImgsInner">
|
||||
<img src="./../../assets/imgs/productoverview/boudtwo.png" alt="" class="w-100 h-100">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tableLaptop d-flex justify-content-center align-items-center">
|
||||
<div class="justTableLaptop">
|
||||
<img src="./../../assets/imgs/productoverview/justtablelaptop.png" alt="" class="w-100 h-100">
|
||||
</div>
|
||||
<div class="circleTableLaptop">
|
||||
<div class="circleTableLaptop_Heading text-center">
|
||||
<h1 class="dual_des_heading orbitron_font fw-700">Two Screens.</h1>
|
||||
<h1 class="dual_des_heading orbitron_font fw-700"> Zero BOUNDARIES.</h1>
|
||||
</div>
|
||||
<div class="circleTableLaptopTop">
|
||||
<img src="./../../assets/imgs/productoverview/laptoptable.png" alt="" class="w-100 h-100">
|
||||
</div>
|
||||
<div class="circleTableLaptop_text font_p_Dual">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
||||
diam nonumy eirmod tempor invidunt ut labore et dolore
|
||||
magna aliquyam erat, sed diam voluptua. Lorem ipsum
|
||||
dolor sit amet, consetetur sadipscing elitr, sed diam
|
||||
nonumy eirmodorem ipsum dolor sit amet, consetetur
|
||||
sadipscing elitr, sed
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="trueLifeDisplay">
|
||||
<div class="trueLifeDisplay_headingHD text-center pb-5">
|
||||
<h1 class="orbitron_font headingLife fw-700">2.5k QHD +</h1>
|
||||
<h1 class="orbitron_font fw-700">Anwi Truelife Display</h1>
|
||||
</div>
|
||||
<div class="trueLifeDisplay_des">
|
||||
<p class="satoshi_font font_p_Dual">Witness never before like visuals on the "2.5K (QHD+) Mi TrueLife Display that has twice as many pixels as a Full-HD display. Higher contrast ratio combined with up to 300 Nits of brightness ensures vivid colours
|
||||
and excellent viewing angles.</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../assets/imgs/productoverview/plantlaptop.png" alt="" class="w-100 h-100">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="controlPanel container">
|
||||
<div class="p-5">
|
||||
|
||||
<div class="bgControlpanel ">
|
||||
<div class="controlPanel_des">
|
||||
<h1 class="orbitron_font font_4 fw-700">Customize</h1>
|
||||
<h1 class="orbitron_font font_4 fw-700">your workflow</h1>
|
||||
<h1 class="orbitron_font font_4 fw-700">with Control Panel</h1>
|
||||
</div>
|
||||
<div class="bgControlpaneltabs w-100 px-5">
|
||||
<ul class="nav nav-tabs d-flex justify-content-between" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="PhotoTab-tab" data-bs-toggle="tab" data-bs-target="#PhotoTab" type="button" role="tab" aria-controls="PhotoTab" aria-selected="true">Photo</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="ProgrammerTab-tab" data-bs-toggle="tab" data-bs-target="#ProgrammerTab" type="button" role="tab" aria-controls="ProgrammerTab" aria-selected="false">ProgrammerTab</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="VideoEdtior-tab" data-bs-toggle="tab" data-bs-target="#VideoEdtior" type="button" role="tab" aria-controls="VideoEdtior" aria-selected="false">VideoEdtior</button>
|
||||
</li>
|
||||
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="Music_Artist-tab" data-bs-toggle="tab" data-bs-target="#Music_Artist" type="button" role="tab" aria-controls="Music_Artist" aria-selected="false">Music Artist</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="3D_ARTIST-tab" data-bs-toggle="tab" data-bs-target="# " type="button" role="tab" aria-controls="3D_ARTIST" aria-selected="false">3D_ARTIST</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link " id="gamerTab-tab" data-bs-toggle="tab" data-bs-target="#gamerTab" type="button" role="tab" aria-controls="gamerTab" aria-selected="false">Game</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="tabLaptopContent">
|
||||
|
||||
<div class="tab-pane fade show active" id="PhotoTab" role="tabpanel" aria-labelledby="PhotoTab-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, deleniti!</div>
|
||||
|
||||
<div class="tab-pane fade" id="ProgrammerTab" role="tabpanel" aria-labelledby="ProgrammerTab-tab">ProgrammerTab</div>
|
||||
|
||||
<div class="tab-pane fade" id="VideoEdtior" role="tabpanel" aria-labelledby="VideoEdtior-tab">
|
||||
<img src="./../../assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="Music_Artist" role="tabpanel" aria-labelledby="Music_Artist-tab">Music_Artist</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="designedProLaptop">
|
||||
<div class="px-5 designedProLaptop_title">
|
||||
<h1 class="designedProLaptop_title_text orbitron_font">Designed for
|
||||
</h1>
|
||||
<h1 class="designedProLaptop_title_text orbitron_font"> a Pro</h1>
|
||||
</div>
|
||||
<div class="designedProLaptop_img">
|
||||
<img src="./../../assets/imgs/productoverview/designedPro.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
<ul class="">
|
||||
<li>
|
||||
<span>17.3</span> mm Thin
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<span>1.46</span> kg Light
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<span>0.3</span> mm Depeth
|
||||
|
||||
</li>
|
||||
<li> <span></span> Superior quality
|
||||
hinge tested for up
|
||||
to <span> 30,000 operations</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<div id="footer-head"></div>
|
||||
<!-- <section id="footer-head"></section> -->
|
||||
<!-- end-footer -->
|
||||
|
||||
<script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
// html {
|
||||
// font-size: 62.5%;
|
||||
// }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
// font-size: 62.5%;
|
||||
overflow-x: hidden;
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@
|
|||
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
||||
}
|
||||
|
||||
.text-green-Awni{
|
||||
color: #0A886A;
|
||||
}
|
||||
|
||||
.orbitron_font{
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
// font size
|
||||
.font-3 {
|
||||
font-size: 3rem;
|
||||
|
|
@ -24,15 +32,21 @@
|
|||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.font-2_7{
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
|
||||
.font_4{
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
|
||||
.subtitle_1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
.banner_heading_4 {
|
||||
font-size: 3rem;
|
||||
|
|
@ -55,10 +69,44 @@
|
|||
|
||||
// heights
|
||||
|
||||
.h-10{
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.h-15{
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.h-20{
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.h-30{
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.h-33{
|
||||
height: 33%;
|
||||
}
|
||||
.h-34{
|
||||
height: 34%;
|
||||
}
|
||||
.h-35{
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.h-40{
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.vh_60{
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.vh-70{
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.vh-77{
|
||||
height: 77vh;
|
||||
}
|
||||
|
|
@ -71,6 +119,10 @@
|
|||
height: 15vh;
|
||||
}
|
||||
|
||||
.h-700p{
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
|
||||
// font weight
|
||||
|
||||
|
|
@ -89,3 +141,18 @@
|
|||
|
||||
|
||||
|
||||
// gap
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.gap-2{
|
||||
gap:2rem
|
||||
}
|
||||
|
||||
// border-radius
|
||||
|
||||
.br-1{
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
|
@ -1,27 +1,30 @@
|
|||
.productoverviewmain{
|
||||
.productoverviewmain {
|
||||
background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
|
||||
background-color: #C9DBB5;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
$PO_footerText: 0.7rem;
|
||||
|
||||
.photo_dual {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.price_footer {
|
||||
background: rgba( 255, 255, 255, 0.25 );
|
||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
||||
backdrop-filter: blur( 4px );
|
||||
-webkit-backdrop-filter: blur( 4px );
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
|
||||
border: 1px solid rgba( 255, 255, 255, 0.18 );
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border: 2px solid;
|
||||
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -31,21 +34,29 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
|
|||
}
|
||||
|
||||
.priceCut_multi {
|
||||
font-size: 0.7rem;
|
||||
font-size: $PO_footerText;
|
||||
}
|
||||
|
||||
.PO_learnMore {
|
||||
font-size: $PO_footerText;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductHeading {
|
||||
font-size: 2.1rem;
|
||||
font-family: "satoshi", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductFullTitle {
|
||||
padding: 2rem 13rem;
|
||||
padding: 2rem 11rem;
|
||||
font-size: 3rem;
|
||||
font-family: "orbitron", sans-serif;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductDes {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-family: "satoshi", sans-serif;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display {
|
||||
|
|
@ -66,3 +77,264 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
|
|||
padding: 2rem;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.productoverBox {
|
||||
.PO_box {
|
||||
// background-color: red;
|
||||
height: 100%;
|
||||
> div {
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
.box_inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bgBox_Content {
|
||||
background: rgb(236, 236, 236);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 236, 236, 1) 4%,
|
||||
rgba(118, 118, 118, 1) 100%
|
||||
);
|
||||
}
|
||||
.box_inner_right {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.box_inner_left {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.displayscreenpad {
|
||||
.displayscreenpadContainer {
|
||||
text-align: center;
|
||||
}
|
||||
.displayscreenpadHeading {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.displayscreenpadMain {
|
||||
top: -108px;
|
||||
}
|
||||
.displayscreenpadleft {
|
||||
> img {
|
||||
left: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
.displayscreenpadright {
|
||||
> img {
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dual_des_heading{
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
|
||||
.dualLaptop{
|
||||
width: 100vw;
|
||||
height: 1000px;
|
||||
top:-100px;
|
||||
margin-bottom: -100px;
|
||||
position: relative;
|
||||
|
||||
|
||||
.zeroBMain_desP{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.zeroBMain_des{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 700px;
|
||||
padding-right: 9rem;
|
||||
}
|
||||
|
||||
.dualImgs{
|
||||
position: absolute;
|
||||
|
||||
|
||||
.dualImgsInner{
|
||||
width: 63%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dualImgsOne{
|
||||
top:0;
|
||||
left: -10%;
|
||||
transform: rotate(343deg);
|
||||
width: 68%;
|
||||
}
|
||||
|
||||
.dualImgsTwo{
|
||||
// top:0;
|
||||
// right: -80%;
|
||||
// transform: rotate(330deg);
|
||||
|
||||
top: 31%;
|
||||
right: -68%;
|
||||
transform: rotate(339deg);
|
||||
.dualImgsInner{
|
||||
width: 82%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableLaptop{
|
||||
margin-top: 300px;
|
||||
|
||||
// border: 1px solid;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
.circleTableLaptop_Heading{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -311%);
|
||||
}
|
||||
.justTableLaptop{
|
||||
position: absolute;
|
||||
width: 86%;
|
||||
top: -10px;
|
||||
right: 128px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circleTableLaptop{
|
||||
background-color: #ECECEC;
|
||||
height: 70rem;
|
||||
width: 70rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.circleTableLaptopTop{
|
||||
|
||||
bottom: -3%;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 2%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.circleTableLaptop_text{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 168%);
|
||||
|
||||
}
|
||||
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
|
||||
.trueLifeDisplay{
|
||||
.trueLifeDisplay_headingHD{
|
||||
>.headingLife{
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.trueLifeDisplay_des{
|
||||
padding: 0 10rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.font_p_Dual{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.controlPanel{
|
||||
|
||||
margin-top: 10rem;
|
||||
padding-bottom: 550px;
|
||||
.controlPanel_des{
|
||||
position: absolute;
|
||||
top: -170px;
|
||||
left: 80px;
|
||||
|
||||
}
|
||||
.bgControlpanel{
|
||||
min-height: 100vh;
|
||||
background-color: #ECECEC;
|
||||
border-radius: 157px;
|
||||
position: relative;
|
||||
|
||||
.bgControlpaneltabs{
|
||||
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
|
||||
.nav-tabs{
|
||||
border-bottom: 1px solid;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.nav-item{
|
||||
position: relative;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-tabs .nav-link {
|
||||
position: relative;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-item .nav-link::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
bottom: -2px;
|
||||
right: 0;
|
||||
display: none;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.designedProLaptop{
|
||||
position: relative;
|
||||
.designedProLaptop_title{
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
}
|
||||
.designedProLaptop_title_text{
|
||||
font-size: 10rem;
|
||||
}
|
||||
.designedProLaptop_img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 700px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,555 @@
|
|||
/*
|
||||
0 - 600px: Phone
|
||||
600 - 900px: Tablet portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our normal styles apply
|
||||
1800px + : Big desktop
|
||||
|
||||
$breakpoint arguement choices:
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
background: linear-gradient(90deg, #3bb78f 0%, rgb(11, 171, 100) 35%, rgb(59, 183, 143) 100%);
|
||||
}
|
||||
|
||||
.text-green-Awni {
|
||||
color: #0A886A;
|
||||
}
|
||||
|
||||
.orbitron_font {
|
||||
font-family: "Orbitron", sans-serif;
|
||||
}
|
||||
|
||||
.font-3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.font-1_5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font-1_7 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.font-2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.font-2_2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.font-2_7 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
.font_4 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.subtitle_1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.banner_heading_4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.padding_top_14 {
|
||||
padding-top: 14rem;
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.padding_top_10 {
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.h-15 {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.h-20 {
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.h-30 {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.h-33 {
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.h-34 {
|
||||
height: 34%;
|
||||
}
|
||||
|
||||
.h-35 {
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.vh_60 {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.vh-70 {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.vh-77 {
|
||||
height: 77vh;
|
||||
}
|
||||
|
||||
.vh-85 {
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.vh-15 {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.h-700p {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.fw-600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.h-200p {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.br-1 {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.button_dark {
|
||||
-webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
||||
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
||||
padding-right: 1.7rem;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-top: 0.6rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.productoverviewmain {
|
||||
background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.photo_dual {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.price_footer {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border: 2px solid;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxImgContainer {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.priceCut_multi {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.PO_learnMore {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductHeading {
|
||||
font-size: 2.1rem;
|
||||
font-family: "satoshi", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductFullTitle {
|
||||
padding: 2rem 11rem;
|
||||
font-size: 3rem;
|
||||
font-family: "orbitron", sans-serif;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductDes {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-family: "satoshi", sans-serif;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display {
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: linear-gradient(180deg, white 7%, rgba(255, 142, 158, 0.3019607843) 52%, rgba(235, 134, 148, 0.4705882353) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_box_inner {
|
||||
padding: 2rem;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.productoverBox .PO_box {
|
||||
height: 100%;
|
||||
}
|
||||
.productoverBox .PO_box > div {
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
.productoverBox .PO_box .box_inner {
|
||||
height: 100%;
|
||||
}
|
||||
.productoverBox .PO_box .bgBox_Content {
|
||||
background: rgb(236, 236, 236);
|
||||
background: linear-gradient(90deg, rgb(236, 236, 236) 4%, rgb(118, 118, 118) 100%);
|
||||
}
|
||||
.productoverBox .PO_box .box_inner_right {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.productoverBox .PO_box .box_inner_left {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.displayscreenpad .displayscreenpadContainer {
|
||||
text-align: center;
|
||||
}
|
||||
.displayscreenpad .displayscreenpadHeading {
|
||||
font-size: 8rem;
|
||||
}
|
||||
.displayscreenpad .displayscreenpadMain {
|
||||
top: -108px;
|
||||
}
|
||||
.displayscreenpad .displayscreenpadleft > img {
|
||||
left: -8%;
|
||||
}
|
||||
.displayscreenpad .displayscreenpadright > img {
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
.dual_des_heading {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.dualLaptop {
|
||||
width: 100vw;
|
||||
height: 1000px;
|
||||
top: -100px;
|
||||
margin-bottom: -100px;
|
||||
position: relative;
|
||||
}
|
||||
.dualLaptop .zeroBMain_desP {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.dualLaptop .zeroBMain_des {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 700px;
|
||||
padding-right: 9rem;
|
||||
}
|
||||
.dualLaptop .dualImgs {
|
||||
position: absolute;
|
||||
}
|
||||
.dualLaptop .dualImgs .dualImgsInner {
|
||||
width: 63%;
|
||||
}
|
||||
.dualLaptop .dualImgsOne {
|
||||
top: 0;
|
||||
left: -10%;
|
||||
transform: rotate(343deg);
|
||||
width: 68%;
|
||||
}
|
||||
.dualLaptop .dualImgsTwo {
|
||||
top: 31%;
|
||||
right: -68%;
|
||||
transform: rotate(339deg);
|
||||
}
|
||||
.dualLaptop .dualImgsTwo .dualImgsInner {
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
.tableLaptop {
|
||||
margin-top: 300px;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.tableLaptop .circleTableLaptop_Heading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -311%);
|
||||
}
|
||||
.tableLaptop .justTableLaptop {
|
||||
position: absolute;
|
||||
width: 86%;
|
||||
top: -10px;
|
||||
right: 128px;
|
||||
z-index: 1;
|
||||
}
|
||||
.tableLaptop .circleTableLaptop {
|
||||
background-color: #ECECEC;
|
||||
height: 70rem;
|
||||
width: 70rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tableLaptop .circleTableLaptop .circleTableLaptopTop {
|
||||
bottom: -3%;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 2%);
|
||||
}
|
||||
.tableLaptop .circleTableLaptop_text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 168%);
|
||||
}
|
||||
|
||||
.trueLifeDisplay .trueLifeDisplay_headingHD > .headingLife {
|
||||
font-size: 6rem;
|
||||
}
|
||||
.trueLifeDisplay .trueLifeDisplay_des {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
|
||||
.font_p_Dual {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.controlPanel {
|
||||
margin-top: 10rem;
|
||||
padding-bottom: 550px;
|
||||
}
|
||||
.controlPanel .controlPanel_des {
|
||||
position: absolute;
|
||||
top: -170px;
|
||||
left: 80px;
|
||||
}
|
||||
.controlPanel .bgControlpanel {
|
||||
min-height: 100vh;
|
||||
background-color: #ECECEC;
|
||||
border-radius: 157px;
|
||||
position: relative;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs {
|
||||
border-bottom: 1px solid;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item {
|
||||
position: relative;
|
||||
border: none;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link {
|
||||
position: relative;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active::before {
|
||||
display: block;
|
||||
}
|
||||
.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item .nav-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
bottom: -2px;
|
||||
right: 0;
|
||||
display: none;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.designedProLaptop {
|
||||
position: relative;
|
||||
}
|
||||
.designedProLaptop .designedProLaptop_title {
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.designedProLaptop .designedProLaptop_title_text {
|
||||
font-size: 10rem;
|
||||
}
|
||||
.designedProLaptop .designedProLaptop_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 700px;
|
||||
}
|
||||
|
||||
/*
|
||||
0 - 600px: Phone
|
||||
600 - 900px: Tablet portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our normal styles apply
|
||||
1800px + : Big desktop
|
||||
|
||||
$breakpoint arguement choices:
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
/* Orbitron */
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Orbitron end */
|
||||
/* Satoshi */
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Satoshi end */
|
||||
.satoshi_font {
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
|
||||
}
|
||||
|
||||
/* button */
|
||||
.button_dark {
|
||||
-webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
||||
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
||||
padding-right: 1.7rem;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-top: 0.6rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
.footer-wrapper {
|
||||
background-color: rgb(0, 0, 0);
|
||||
border-radius: 0 275px 0 0;
|
||||
-webkit-clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 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;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["abstracts/_mixins.scss","base/_base.scss","style.css","base/_utilities.scss","components/_button.scss","pages/_productOverview.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
|
||||
|
|
@ -78,31 +78,22 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
|||
}
|
||||
|
||||
/* Satoshi end */
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
|
||||
font-family: "Orbitron" ,sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.satoshi_font{
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%; }
|
||||
// html {
|
||||
// font-size: 100%; }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0; }
|
||||
}
|
||||
// body {
|
||||
// box-sizing: border-box;
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
// @media only screen and (max-width: 56.25em) {
|
||||
// body {
|
||||
// padding: 0; }
|
||||
// }
|
||||
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
|
|
|
|||
Načítá se…
Odkázat v novém úkolu