428 行
22 KiB
HTML
428 行
22 KiB
HTML
<!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="../../../styles/style.css">
|
|
<title>project</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="productoverviewmain vh-100">
|
|
|
|
<!-- navbar -->
|
|
<div id="navbar-head"></div>
|
|
<!-- end-navbar -->
|
|
|
|
<div class="container h-100 text-white ">
|
|
<div class="row h-100">
|
|
<div class="col-sm-4 padding_top_10 ">
|
|
<h1 class="banner_heading_4 pb-4">Anwi XCreate</h1>
|
|
<div class="subtitle_1 satoshi_font">2.5K Resolution | 120 Hz Refresh Rate</div>
|
|
</div>
|
|
<!-- <div class="col-sm-7 h-100">
|
|
<div class="d-flex align-items-end justify-content-end h-100">
|
|
<div class="photo_dual">
|
|
<img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
<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">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/box.png" alt="box" />
|
|
</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>
|
|
</div>
|
|
<div class="d-flex align-items-center ">
|
|
<div class="pe-5">
|
|
<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>
|
|
<a class="btn btn-dark button_dark" href="#">Add to cart</a>
|
|
</div>
|
|
<div class="satoshi_font PO_learnMore mt-2">No Cost EMI Available <span>Learn more</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
<section class="productOverview container">
|
|
<div class=" d-flex flex-column p-6 align-items-center container justify-content-between">
|
|
<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
|
|
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 -->
|
|
<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" />
|
|
</div>
|
|
<div class="d-flex h-200p pt-5 justify-content-between align-items-center">
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
<span class="PO_gallery_box h-100">
|
|
<div class="PO_gallery_box_inner h-100">
|
|
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
|
</div>
|
|
</span>
|
|
</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 -->
|
|
<!-- <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="../../js/navbar.js"></script>
|
|
<script src="../../js/footer.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |