code added
This commit is contained in:
Vendored
+306
-16
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user