sachin.ganesh
/
anwi_website
Наблюдаван 1
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Няма описание
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 Ревизии
1 Клон
ИН на ревизия: 6a27d0502f
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от '6a27d0502f'
${ noResults }
anwi_website/dist/html/pages/laptopmulti.html

laptopmulti.html 21KB
История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5.     <meta charset="UTF-8" />

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  8. 

  9.     <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />

  10.     <!-- <link rel="stylesheet" href="./../../css/main.css" /> -->

  11.     <link rel="stylesheet" href="../../../styles/style.css">

  12.     <title>project</title>

  13. </head>

  14. 

  15. <body>

  16. 

  17.     <header class="productoverviewmain  vh-100">

  18. 

  19.         <!-- navbar -->

  20.         <div id="navbar-head"></div>

  21.         <!-- end-navbar -->

  22. 

  23.         <div class="container h-100 text-white ">

  24.             <div class="row h-100">

  25.                 <div class="col-sm-4 padding_top_10 ">

  26.                     <h1 class="banner_heading_4 pb-4">Anwi XCreate</h1>

  27.                     <div class="subtitle_1 satoshi_font">2.5K Resolution | 120 Hz Refresh Rate</div>

  28.                 </div>

  29.                 <!-- <div class="col-sm-7 h-100">

  30.                     <div class="d-flex align-items-end justify-content-end h-100">

  31.                         <div class="photo_dual">

  32.                             <img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop">

  33.                         </div>

  34.                     </div>

  35.                 </div> -->

  36.             </div>

  37. 

  38.         </div>

  39.         <div class="price_footer  py-4 w-100 ">

  40.             <div class="d-flex align-items-center container justify-content-between">

  41.                 <div class="d-flex">

  42.                     <div class="boxImgContainer">

  43.                         <img class="w-100 h-100" src="./../../assets/imgs/box.png" alt="box" />

  44.                     </div>

  45.                     <div class="ps-3 ">

  46.                         <div class="satoshi_font fw-700">Delivery</div>

  47.                         <div class="satoshi_font">See estimated delivery times by</div>

  48.                         <div class="satoshi_font ">entering your PIN code</div>

  49.                     </div>

  50.                 </div>

  51.                 <div class="d-flex align-items-center ">

  52.                     <div class="pe-5">

  53.                         <div class="font-1_5  fw-700 satoshi_font">$69,999.00</div>

  54.                         <div class="d-flex align-items-center pt-1 justify-content-end gap-1 priceCut_multi">

  55.                             <span class="text-decoration-line-through  pe-3 satoshi_font">$ 89,999</span><span

  56.                                 class="satoshi_font text-green-Awni"> Save $ 19,999</span>

  57.                         </div>

  58.                     </div>

  59.                     <div>

  60.                         <div>

  61.                             <a class="btn btn-dark button_dark" href="#">Add to cart</a>

  62.                         </div>

  63.                         <div class="satoshi_font PO_learnMore mt-2">No Cost EMI Available <span>Learn more</span></div>

  64.                     </div>

  65.                 </div>

  66.             </div>

  67.         </div>

  68. 

  69.     </header>

  70.     <section class="productOverview container">

  71.         <div class=" d-flex flex-column p-6  align-items-center container justify-content-between">

  72.             <div class="font-1_7 overviewProductHeading fw-600">Overview</div>

  73.             <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with

  74.                 4K OLED Dual Screen for Creative Multitasking</div>

  75.             <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

  76.                 eirmod tempor

  77.                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit

  78.                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>

  79.         </div>

  80.     </section>

  81. 

  82.     <!-- photos display -->

  83.     <section class="container  PO_galleryContainer">

  84.         <div class="p-6 pt-0">

  85.             <div class="PO_gallery_display">

  86.                 <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />

  87.             </div>

  88.             <div class="d-flex h-200p pt-5 justify-content-between align-items-center">

  89.                 <span class="PO_gallery_box h-100">

  90.                     <div class="PO_gallery_box_inner h-100">

  91.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  92.                     </div>

  93.                 </span>

  94.                 <span class="PO_gallery_box h-100">

  95.                     <div class="PO_gallery_box_inner h-100">

  96.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  97.                     </div>

  98.                 </span>

  99.                 <span class="PO_gallery_box h-100">

  100.                     <div class="PO_gallery_box_inner h-100">

  101.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  102.                     </div>

  103.                 </span>

  104.                 <span class="PO_gallery_box h-100">

  105.                     <div class="PO_gallery_box_inner h-100">

  106.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  107.                     </div>

  108.                 </span>

  109.                 <span class="PO_gallery_box h-100">

  110.                     <div class="PO_gallery_box_inner h-100">

  111.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  112.                     </div>

  113.                 </span>

  114.                 <span class="PO_gallery_box h-100">

  115.                     <div class="PO_gallery_box_inner h-100">

  116.                         <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">

  117.                     </div>

  118.                 </span>

  119.             </div>

  120.         </div>

  121.     </section>

  122.     <!-- photos display end -->

  123. 

  124. 

  125.     <!-- specs  -->

  126.     <section class="container p-6">

  127.         <div class="productoverBox row w-100 h-700p">

  128.             <div class="col-sm-5">

  129.                 <div class="PO_box">

  130.                     <div class="h-40 ">

  131.                         <div class="box_inner bgBox_Content  br-1">

  132.                             <div class="row h-100">

  133.                                 <div class="svg_container col-6 d-flex justify-content-center align-items-center">

  134.                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

  135.                                         width="120" height="120" viewBox="0 0 169 169">

  136.                                         <defs>

  137.                                             <clipPath id="clip-path">

  138.                                                 <rect id="Rectangle_619" data-name="Rectangle 619" width="169"

  139.                                                     height="169" transform="translate(0.5 0.5)" />

  140.                                             </clipPath>

  141.                                         </defs>

  142.                                         <g id="Group_929" data-name="Group 929" transform="translate(-0.5 -0.5)">

  143.                                             <g id="Group_928" data-name="Group 928" clip-path="url(#clip-path)">

  144.                                                 <path id="Path_654" data-name="Path 654"

  145.                                                     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" />

  146.                                                 <path id="Path_655" data-name="Path 655"

  147.                                                     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"

  148.                                                     transform="translate(-46.65 -46.65)" />

  149.                                             </g>

  150.                                         </g>

  151.                                     </svg>

  152. 

  153.                                 </div>

  154.                                 <div class="col-6 d-flex justify-content-center align-items-center">

  155.                                     <span> Latest 11th Gen Intel Core i5/i7 H35 </span>

  156.                                 </div>

  157.                             </div>

  158.                         </div>

  159. 

  160.                     </div>

  161.                     <div class="h-40 ">

  162.                         <div class="box_inner bgBox_Content br-1">

  163.                             2

  164.                         </div>

  165. 

  166.                     </div>

  167.                     <div class="d-flex h-20 w-100">

  168.                         <div class="box_inner  box_inner_left w-50">

  169.                             <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">4</div>

  170. 

  171.                         </div>

  172.                         <div class="box_inner box_inner_right w-50">

  173.                             <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">5</div>

  174.                         </div>

  175. 

  176.                     </div>

  177.                 </div>

  178. 

  179.             </div>

  180.             <div class="col-sm-4">

  181.                 <div class="PO_box">

  182.                     <div class="h-30 ">

  183.                         <div class="box_inner bgBox_Content br-1">

  184.                             1

  185.                         </div>

  186. 

  187.                     </div>

  188.                     <div class="h-20 ">

  189.                         <div class="box_inner bgBox_Content br-1">

  190.                             2

  191.                         </div>

  192. 

  193.                     </div>

  194.                     <div class="h-40 ">

  195.                         <div class="box_inner bgBox_Content br-1">

  196.                             2

  197.                         </div>

  198. 

  199.                     </div>

  200.                     <div class="h-10">

  201.                         <div class="box_inner bgBox_Content br-1">

  202.                             2

  203.                         </div>

  204.                     </div>

  205.                 </div>

  206. 

  207.             </div>

  208.             <div class="col-sm-3">

  209.                 <div class="PO_box">

  210.                     <div class="h-35">

  211.                         <div class="box_inner bgBox_Content br-1  ">

  212.                             2

  213.                         </div>

  214.                     </div>

  215.                     <div class="h-20">

  216.                         <div class="box_inner bgBox_Content br-1  ">

  217.                             2

  218.                         </div>

  219.                     </div>

  220.                     <div class="h-30">

  221.                         <div class="box_inner bgBox_Content br-1  ">

  222.                             2

  223.                         </div>

  224.                     </div>

  225.                     <div class="h-15">

  226.                         <div class="box_inner bgBox_Content br-1  ">

  227.                             2

  228.                         </div>

  229.                     </div>

  230.                 </div>

  231. 

  232.             </div>

  233.         </div>

  234. 

  235.     </section>

  236.     <!-- specs end -->

  237. 

  238.     <!-- TWO SCREENS ZERO BOUNDARIES  -->

  239.     <section class="displayscreenpad">

  240.         <div class="">

  241.             <div class=" d-flex flex-column align-items-center justify-content-center">

  242.                 <div class="satoshi_font font-1_7 fw-600">

  243.                     Display / Screenpad

  244.                 </div>

  245.                 <div class="displayscreenpadContainer">

  246.                     <h1 class="displayscreenpadHeading orbitron_font">TWO SCREENS.</h1>

  247.                     <h1 class="displayscreenpadHeading orbitron_font">ZERO BOUNDARIES</h1>

  248.                 </div>

  249.                 <!-- <div class="w-100 d-flex">

  250.                 <div class="displayscreenpadleft w-50  position-relative">

  251.                     <img class="h-100 position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">

  252.                 </div>

  253.                 <div class="displayscreenpadright w-50  position-relative">

  254.                     <img class="h-100  position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">

  255.                 </div>

  256.                </div> -->

  257.                 <div class="container-fluid w-100 d-flex  position-relative displayscreenpadMain">

  258.                     <div class="displayscreenpadleft w-50">

  259.                         <img class="h-100 position-relative w-100"

  260.                             src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">

  261.                     </div>

  262.                     <div class="displayscreenpadright w-50">

  263.                         <img class="h-100 position-relative w-100"

  264.                             src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">

  265.                     </div>

  266.                 </div>

  267.             </div>

  268.         </div>

  269.     </section>

  270.     <section>

  271. 

  272.     </section>

  273.     

  274. 

  275.     <section class="dualLaptop">

  276.         <div class="zeroBMain_des">

  277.             <div>

  278.                 <h1 class="dual_des_heading orbitron_font">Experience Ultimate</h1>

  279.                 <h1 class="dual_des_heading orbitron_font">productivity</h1>

  280.             </div>

  281.             <div class="satoshi_font zeroBMain_desP">

  282.                 Cooperation with leading component suppliers and compatibility testing ensure a wide range of product

  283.                 availability Experience

  284.                 ultimate productivityExperience ultimate productivity

  285.                 Cooperation with leading component suppliers and compatibility testing ensure a wide range of product

  286.                 availability Experience

  287.                 ultimate productivityExperience ultimate productivity

  288.             </div>

  289.         </div>

  290.         <div class="w-100 h-100 dualImgs dualImgsOne">

  291.             <div class="dualImgsInner">

  292.                 <img src="./../../assets/imgs/productoverview/boudone.png" alt="" class="w-100 h-100">

  293.             </div>

  294.         </div>

  295.         <div class="w-100 h-100 dualImgs dualImgsTwo">

  296.             <div class="dualImgsInner">  

  297.                 <img src="./../../assets/imgs/productoverview/boudtwo.png" alt="" class="w-100 h-100">

  298.             </div>

  299.         </div>

  300.     </section>

  301.     <section  class="tableLaptop d-flex justify-content-center align-items-center">

  302.         <div class="justTableLaptop">

  303.             <img src="./../../assets/imgs/productoverview/justtablelaptop.png" alt="" class="w-100 h-100">

  304.         </div>

  305.         <div class="circleTableLaptop">

  306.             <div class="circleTableLaptop_Heading text-center">

  307.                 <h1 class="dual_des_heading orbitron_font fw-700">Two Screens.</h1>

  308.                 <h1 class="dual_des_heading orbitron_font fw-700"> Zero BOUNDARIES.</h1>

  309.             </div>

  310.             <div class="circleTableLaptopTop">

  311.                 <img src="./../../assets/imgs/productoverview/laptoptable.png" alt="" class="w-100 h-100">

  312.             </div>

  313.             <div class="circleTableLaptop_text font_p_Dual">

  314.                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed

  315.                 diam nonumy eirmod tempor invidunt ut labore et dolore

  316.                 magna aliquyam erat, sed diam voluptua. Lorem ipsum

  317.                 dolor sit amet, consetetur sadipscing elitr, sed diam

  318.                 nonumy eirmodorem ipsum dolor sit amet, consetetur

  319.                 sadipscing elitr, sed

  320.             </div>

  321.         </div>

  322.     </section>

  323. 

  324.     <section class="trueLifeDisplay">

  325.         <div class="trueLifeDisplay_headingHD text-center pb-5">

  326.             <h1 class="orbitron_font headingLife fw-700">2.5k QHD +</h1>

  327.             <h1 class="orbitron_font  fw-700">Anwi Truelife Display</h1>

  328.         </div>

  329.         <div class="trueLifeDisplay_des">

  330.             <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

  331.                 and excellent viewing angles.</p>

  332.         </div>

  333.         <div>

  334.             <img src="../../assets/imgs/productoverview/plantlaptop.png" alt="" class="w-100 h-100">

  335.         </div>

  336.     </section>

  337. 

  338.     <section class="controlPanel container">

  339.        <div class="p-5">

  340.            

  341.         <div class="bgControlpanel ">

  342.             <div class="controlPanel_des">

  343.                 <h1 class="orbitron_font font_4 fw-700">Customize</h1>

  344.                 <h1 class="orbitron_font font_4 fw-700">your workflow</h1>

  345.                 <h1 class="orbitron_font font_4 fw-700">with Control Panel</h1>

  346.             </div>

  347.             <div class="bgControlpaneltabs w-100 px-5">

  348.                 <ul class="nav nav-tabs d-flex justify-content-between" id="myTab" role="tablist">

  349.                     <li class="nav-item" role="presentation">

  350.                       <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>

  351.                     </li>

  352.                     <li class="nav-item" role="presentation">

  353.                       <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>

  354.                     </li>

  355.                     <li class="nav-item" role="presentation">

  356.                       <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>

  357.                     </li>

  358.                   

  359.                     <li class="nav-item" role="presentation">

  360.                       <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>

  361.                     </li>

  362.                     <li class="nav-item" role="presentation">

  363.                       <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>

  364.                     </li>

  365.                     <li class="nav-item" role="presentation">

  366.                         <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>

  367.                       </li>

  368.                   </ul>

  369.                   <div class="tab-content" id="tabLaptopContent">

  370.     

  371.                     <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>

  372.     

  373.                     <div class="tab-pane fade" id="ProgrammerTab" role="tabpanel" aria-labelledby="ProgrammerTab-tab">ProgrammerTab</div>

  374.     

  375.                     <div class="tab-pane fade" id="VideoEdtior" role="tabpanel" aria-labelledby="VideoEdtior-tab">

  376.                         <img src="./../../assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">

  377.                     </div>

  378.     

  379.                     <div class="tab-pane fade" id="Music_Artist" role="tabpanel" aria-labelledby="Music_Artist-tab">Music_Artist</div>

  380.     

  381.                     <div class="tab-pane fade" id="3D_ARTIST" role="tabpanel" aria-labelledby="3D_ARTIST-tab">3d</div>

  382.     

  383.                     <div class="tab-pane fade" id="gamerTab" role="tabpanel" aria-labelledby="gamerTab-tab">game</div>

  384.                   </div>

  385.             </div>

  386.         </div>

  387.     </div>

  388.     </section>

  389.     <section class="designedProLaptop">

  390.         <div class="px-5 designedProLaptop_title">

  391.             <h1 class="designedProLaptop_title_text orbitron_font">Designed for

  392.                </h1>

  393.                <h1 class="designedProLaptop_title_text orbitron_font"> a Pro</h1>

  394.         </div>

  395.        <div class="designedProLaptop_img">

  396.         <img src="./../../assets/imgs/productoverview/designedPro.png" alt="" class="img-fluid">

  397.        </div>

  398.        <ul class="">

  399.         <li>

  400.             <span>17.3</span> mm Thin   

  401.            

  402.         </li> 

  403.         <li>

  404.             <span>1.46</span> kg Light

  405.            

  406.         </li>

  407.         <li>

  408.             <span>0.3</span> mm Depeth

  409.           

  410.         </li>

  411.         <li>  <span></span> Superior quality 

  412.             hinge tested for up 

  413.             to <span> 30,000 operations</span></li>

  414.        </ul>

  415.     </section>

  416. 

  417.     <!-- footer -->

  418.     <!-- <section id="footer-head"></section> -->

  419.     <!-- end-footer -->

  420. 

  421.     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>

  422.     <script src="../../js/jquery.min.js"></script>

  423.     <script src="../../js/navbar.js"></script>

  424.     <script src="../../js/footer.js"></script>

  425. 

  426. </body>

  427. 

  428. </html>