HTML5   24

Product.html

Guest on 18th May 2022 12:05:36 AM

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.    <meta charset="UTF-8">
  6.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9.    <!-- font awesome cdn link  -->
  10.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  11.  
  12.    <!--  js file link  -->
  13.    <script src="product.js"></script>
  14.  
  15. </head>
  16. <!-- calling function while page loads -->
  17. <body onload="showPrice()">
  18.    <style>
  19.       .button {
  20.          background-color: #27ae60;
  21.          border: none;
  22.          color: white;
  23.          padding: 15px 32px;
  24.          text-align: center;
  25.          text-decoration: none;
  26.          display: inline-block;
  27.          font-size: 16px;
  28.          margin: 4px 2px;
  29.          cursor: pointer;
  30.       }
  31.    </style>
  32.    <!-- creating a button and linkning it back to homepage  -->
  33.    <a href="homepage.html" class="button">Homepage</a>
  34.    <img style="float: right; height: 160px; width: 190px;" src="Logo.png" class="right-align">
  35.  
  36.    <div class="container">
  37. <!-- adding a heading which says products on sale-->
  38.       <h3 class="title"> Products On Sale </h3>
  39.  
  40.       <div class="products-container">
  41.  
  42.          <div class="product" data-name="p-1">
  43.             <!-- adding an image and centering it -->
  44.             <img src="surfacelaptop4.webp" alt="" class="center">
  45.             <!-- adding the laptop name -->
  46.             <h3>Surface Laptop 4</h3>
  47.             <!-- adding the laptop price  -->
  48.             <div class="price">$1199.00</div>
  49.             <!-- adding info about the laptop  -->
  50.             <p style="font-size: 20px; font-family: 'Nunito"> 13.5” AMD Ryzen™ 5 Microsoft Surface® Edition processor –
  51.                up to 19 hours, 15” AMD Ryzen™ 7 Microsoft Surface® Edition processor – up to 17.5 hours, 13.5” Intel®
  52.                Core™ i5 – up to 17 hours, 15” Intel® Core™ i7 – up to 16.5 hours. </p>
  53.          </div>
  54.  
  55.          <div class="product" data-name="p-2">
  56.              <!-- adding an image and centering it -->
  57.             <img src="Aceraspire3.webp" alt="" class="center">
  58.             <!-- adding the laptop name -->
  59.             <h3>Acer Aspire 3</h3>
  60.              <!-- adding the laptop price  -->
  61.             <div class="price">$749.99</div>
  62.             <!-- adding info about the laptop  -->
  63.             <p style="font-size: 20px; font-family: 'Nunito"> Windows 10 Home
  64.                Intel® Core™ i3-1115G4 processor Dual-core 3 GHz
  65.                Intel® UHD Graphics shared memory
  66.                17.3" HD+ (1600 x 900) 16:9
  67.                8 GB, DDR4 SDRAM
  68.                1 TB HDD</p>
  69.          </div>
  70.  
  71.          <div class="product" data-name="p-3">
  72.             <!-- adding an image and centering it -->
  73.             <img src="Omen 16.png" alt="" class="center">
  74.              <!-- adding the laptop name -->
  75.             <h3>Omen 16</h3>
  76.             <!-- adding the laptop price  -->
  77.             <div class="price">$1399.99</div>
  78.             <!-- adding info about the laptop  -->
  79.             <p style="font-size: 20px; font-family: 'Nunito"> Windows 11 Home
  80.                AMD Ryzen™ 7 processor
  81.                NVIDIA® GeForce RTX™ 3070 Laptop GPU (8 GB GDDR6 dedicated)
  82.                16 GB memory; 512 GB SSD storage
  83.                16.1" diagonal FHD display</p>
  84.          </div>
  85.  
  86.          <div class="product" data-name="p-4">
  87.              <!-- adding an image and centering it -->
  88.             <img src="Asuszephrusg14.png" alt="" Class="center">
  89.             <!-- adding the laptop name -->
  90.             <h3>Asus Zephrus G14</h3>
  91.             <!-- adding the laptop price  -->
  92.             <div class="price">$1699.99</div>
  93.              <!-- adding info about the laptop  -->
  94.             <p style="font-size: 20px; font-family: 'Nunito"> NVIDIA GeForce RTX 3050 Ti Laptop GPU 4 GB GDDR6
  95.                AMD Ryzen 7 5000 Series 5800HS (2.80GHz)
  96.                16GB Memory 512 GB PCIe SSD
  97.                14.0" 2560 x 1440 120 Hz, 300 nits, Anti-glare
  98.                12.80" x 8.70" x 0.70" 3.50 lbs.
  99.                1 x HDMI 2.0b</p>
  100.          </div>
  101.  
  102.          <div class="product" data-name="p-5">
  103.            <!-- adding an image and centering it -->
  104.             <img src="Hppavillion15.webp" alt="" class="center">
  105.             <!-- adding the laptop name -->
  106.             <h3>Hp Pavillion 15</h3>
  107.             <!-- adding the laptop price  -->
  108.             <div class="price">$1799.99</div>
  109.             <!-- adding info about the laptop  -->
  110.             <p style="font-size: 20px; font-family: 'Nunito"> Custom 11th Gen Intel Core i7-1165G7 2.80GHz Processor
  111.                (upto 4.7 GHz, 12MB Cache, 4-Cores) ; Intel Iris Xe Integrated Graphics, .; 16GB DDR4 SODIMM ; 802.11ac
  112.                Wifi, Bluetooth 5.1, 720p HD Webcam, Full Size (10 Key) Keyboard, .; 15.6" Full HD (1920x1080) 60Hz
  113.                Touchscreen IPS Display; 45W Power Supply, 3-Cell 41 WHr Battery; 512GB PCIe NVMe SSD.</p>
  114.          </div>
  115.  
  116.          <div class="product" data-name="p-6">
  117.            <!-- adding an image and centering it -->
  118.             <img src="Hpvictus.png" alt="" class="center">
  119.              <!-- adding the laptop name -->
  120.             <h3>Hp Victus</h3>
  121.             <!-- adding the laptop price  -->
  122.             <div class="price">$899.99</div>
  123.             <!-- adding info about the laptop  -->
  124.             <p style="font-size: 20px; font-family: 'Nunito"> Up to Intel® Core™ i7-12700H (up to 4.7 GHz with Intel®
  125.                Turbo Boost Technology(2g)
  126.                Up to a NVIDIA® GeForce RTX™ 3060 Laptop GPU (6 GB GDDR6 dedicated) with DLSS, Ray Tracing and Max-Q
  127.                technologies
  128.                Up to 32 GB DDR5-4800 MHz RAM (2 x 16 GB)
  129.                Up to 1 TB PCIe® Gen4 NVMe™ TLC M.2 SSD</p>
  130.          </div>
  131.  
  132.          <div class="product" data-name="p-7">
  133.             <!-- adding an image and centering it -->
  134.             <img src="msigf65.jpg" alt="" class="center">
  135.              <!-- adding the laptop name -->
  136.             <h3>Msi GF-65</h3>
  137.             <!-- adding the laptop price  -->
  138.             <div class="price">$899.99</div>
  139.             <!-- adding info about the laptop  -->
  140.             <p style="font-size: 20px; font-family: 'Nunito">15. 6" Fhd (1920*1080), IPS-Level 120Hz thin Bezel
  141.                Processor: Core i7-9750h 2. 6 - 4. 5GHz
  142.                Graphics : NVIDIA GeForce GTX1660Ti 6G GDDR6
  143.                Memory: 16GB (8G*2) DDR4 2666MHz 2 Sockets; Max Memory 64GB
  144.                Storage: 512GB NVMe SSD</p>
  145.          </div>
  146.  
  147.          <div class="product" data-name="p-8">
  148.             <!-- adding an image and centering it -->
  149.             <img src="asustuf.jpg" alt="" class="center">
  150.              <!-- adding the laptop name -->
  151.             <h3>Asus Tuf</h3>
  152.             <!-- adding the laptop price  -->
  153.             <div class="price">$1149.00</div>
  154.              <!-- adding info about the laptop  -->
  155.             <p style="font-size: 20px; font-family: 'Nunito"> NVIDIA GeForce GTX 1650 4 GB GDDR6
  156.                Intel Core i5 10th Gen 10300H (2.50GHz)
  157.                8GB Memory 1 TB PCIe SSD
  158.                15.6" 1920 x 1080 144 Hz, 250 nits, 45% NTSC, anti-glare
  159.                14.10" x 10.10" x 1.00" 5.10 lbs.
  160.                1 x HDMI 2.0b</p>
  161.          </div>
  162.  
  163.          <div class="product" data-name="p-9">
  164.             <!-- adding an image and centering it -->
  165.             <img src="razerblade15.png" alt="" class="center">
  166.             <!-- adding the laptop name -->
  167.             <h3>Razer Blade 15</h3>
  168.             <!-- adding the laptop price  -->
  169.             <div class="price">$3199.99</div>
  170.             <!-- adding info about the laptop  -->
  171.             <p style="font-size: 20px; font-family: 'Nunito"> 1.8GHz 14-core Intel i7-12800H processor, Turbo Boost up
  172.                to 4.8GHz, with 24MB of Cache
  173.                Windows 11 Home – 64 bits
  174.                15.6" QHD 240Hz, 100% DCI-P3, G-Sync, 2.5ms, individually factory calibrated
  175.                NVIDIA® GeForce RTX™ 3060 (6GB GDDR6 VRAM)
  176.                1TB SSD (M.2 NVMe PCIe 4.0 x4)
  177.                16 GB DDR5 4800MHz dual-channel memory (slotted)</p>
  178.          </div>
  179.  
  180.          <div class="product" data-name="p-10">
  181.             <!-- adding an image and centering it -->
  182.             <img src="alienwarem15.jpg" alt="" class="center">
  183.             <!-- adding the laptop name -->
  184.             <h3>Alienware M15</h3>
  185.                 <!-- adding the laptop price  -->
  186.             <div class="price">$2099.99</div>
  187.             <!-- adding info about the laptop  -->
  188.             <p style="font-size: 20px; font-family: 'Nunito"> 2.2 GHz Intel Core i7-8750H Six-Core
  189.                16GB DDR4 RAM | 512GB PCIe M.2 SSD
  190.                15.6" 1920 x 1080 Anti-Glare IPS Display
  191.                NVIDIA GeForce RTX 2060 (6GB GDDR6)
  192.                Wi-Fi 5 (802.11ac) | Bluetooth 5.0
  193.                Gigabit Ethernet Port USB 3.1 Gen 1 Type-A
  194.                Thunderbolt 3 | HDMI 2.0b | Mini DP 1.3
  195.                1080p Webcam, Dual-Array Mics, Speakers
  196.                Windows 10 Home (64-Bit)</p>
  197.  
  198.  
  199.          </div>
  200.       </div>
  201.  
  202.  
  203.    </div>
  204.    <center>
  205.       <!-- making a button so that the user can select the laptops they would like to purchase  -->
  206.       <select id="product" class="button">
  207.          <option value="1199">Surface Laptop 4</option>
  208.          <option value="749.99">Acer Aspire 3</option>
  209.          <option value="1399.99">Omen 16</option>
  210.          <option value="1699.99">Asus Zephrus G14</option>
  211.          <option value="1799.99">Hp Pavillion 15</option>
  212.          <option value="899.99">Hp Victus</option>
  213.          <option value="899.99">Msi GF-65</option>
  214.          <option value="1149.00">Asus Tuf</option>
  215.          <option value="3199.99">Razer Blade 15</option>
  216.          <option value="2099.99">Alienware M15</option>
  217.       </select>
  218.       <!-- making a button so that the user can select the quantity of the laptops they would like  -->
  219.       <select id="quantity" class="button">
  220.          <option value="1">1</option>
  221.          <option value="2">2</option>
  222.          <option value="3">3</option>
  223.          <option value="4">4</option>
  224.          <option value="5">5</option>
  225.          <option value="6">6</option>
  226.          <option value="7">7</option>
  227.          <option value="8">8</option>
  228.          <option value="9">9</option>
  229.          <option value="10">10</option>
  230.       </select>
  231.       <!-- creating an add to cart and linking the js function on the onclick  -->
  232.       <button class="button" onclick="addToCart()">Add to Cart</button>
  233.       <p id="priceArea"></p>
  234.      
  235.    </center>
  236.  
  237.  
  238.  
  239.  
  240. </body>
  241.  
  242. </html>
  243. <style>
  244.    * {
  245.       font-family: 'Nunito', sans-serif;
  246.       margin: 0;
  247.       padding: 0;
  248.       box-sizing: border-box;
  249.       outline: none;
  250.       border: none;
  251.       text-decoration: none;
  252.       transition: all .2s linear;
  253.       text-transform: capitalize;
  254.    }
  255.  
  256.    html {
  257.       font-size: 62.5%;
  258.       overflow-x: hidden;
  259.    }
  260.  
  261.    body {
  262.       background: #eee;
  263.    }
  264.  
  265.    .container {
  266.       max-width: 1200px;
  267.       margin: 0 auto;
  268.       padding: 3rem 2rem;
  269.    }
  270.  
  271.    .container .title {
  272.       font-size: 3.5rem;
  273.       color: #444;
  274.       margin-bottom: 3rem;
  275.       text-transform: uppercase;
  276.       text-align: center;
  277.    }
  278.  
  279.    .container .products-container {
  280.       display: grid;
  281.       grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  282.       gap: 2rem;
  283.    }
  284.  
  285.    .container .products-container .product {
  286.       text-align: center;
  287.       padding: 3rem 2rem;
  288.       background: #fff;
  289.       box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  290.       outline: .1rem solid #ccc;
  291.       outline-offset: -1.5rem;
  292.       cursor: pointer;
  293.    }
  294.  
  295.    .container .products-container .product:hover {
  296.       outline: .2rem solid #222;
  297.       outline-offset: 0;
  298.    }
  299.  
  300.    .container .products-container .product img {
  301.       height: 25rem;
  302.    }
  303.  
  304.    .container .products-container .product:hover img {
  305.       transform: scale(.9);
  306.    }
  307.  
  308.    .container .products-container .product h3 {
  309.       padding: .5rem 0;
  310.       font-size: 2rem;
  311.       color: #444;
  312.    }
  313.  
  314.    .container .products-container .product:hover h3 {
  315.       color: #27ae60;
  316.    }
  317.  
  318.    .container .products-container .product .price {
  319.       font-size: 2rem;
  320.       color: #444;
  321.    }
  322.  
  323.    .products-preview {
  324.       position: fixed;
  325.       top: 0;
  326.       left: 0;
  327.       min-height: 100vh;
  328.       width: 100%;
  329.       background: rgba(0, 0, 0, .8);
  330.       display: none;
  331.       align-items: center;
  332.       justify-content: center;
  333.    }
  334.  
  335.    .products-preview .preview {
  336.       display: none;
  337.       padding: 2rem;
  338.       text-align: center;
  339.       background: #fff;
  340.       position: relative;
  341.       margin: 2rem;
  342.       width: 40rem;
  343.    }
  344.  
  345.    .products-preview .preview.active {
  346.       display: inline-block;
  347.    }
  348.  
  349.    .products-preview .preview img {
  350.       height: 30rem;
  351.    }
  352.  
  353.    .products-preview .preview .fa-times {
  354.       position: absolute;
  355.       top: 1rem;
  356.       right: 1.5rem;
  357.       cursor: pointer;
  358.       color: #444;
  359.       font-size: 4rem;
  360.    }
  361.  
  362.    .products-preview .preview .fa-times:hover {
  363.       transform: rotate(90deg);
  364.    }
  365.  
  366.    .products-preview .preview h3 {
  367.       color: #444;
  368.       padding: .5rem 0;
  369.       font-size: 2.5rem;
  370.    }
  371.  
  372.    .products-preview .preview .stars {
  373.       padding: 1rem 0;
  374.       font-size: 1.7rem;
  375.    }
  376.  
  377.    .products-preview .preview .stars i {
  378.       color: #27ae60;
  379.    }
  380.  
  381.    .products-preview .preview .stars span {
  382.       color: #999;
  383.    }
  384.  
  385.    .products-preview .preview p {
  386.       line-height: 1.5;
  387.       padding: 1rem 0;
  388.       font-size: 1.6rem;
  389.       color: #777;
  390.    }
  391.  
  392.    .products-preview .preview .price {
  393.       padding: 1rem 0;
  394.       font-size: 2.5rem;
  395.       color: #27ae60;
  396.    }
  397.  
  398.    .products-preview .preview .buttons {
  399.       display: flex;
  400.       gap: 1.5rem;
  401.       flex-wrap: wrap;
  402.       margin-top: 1rem;
  403.    }
  404.  
  405.    .products-preview .preview .buttons a {
  406.       flex: 1 1 16rem;
  407.       padding: 1rem;
  408.       font-size: 1.8rem;
  409.       color: #444;
  410.       border: .1rem solid #444;
  411.    }
  412.  
  413.    .products-preview .preview .buttons a.cart {
  414.       background: #444;
  415.       color: #fff;
  416.    }
  417.  
  418.    .products-preview .preview .buttons a.cart:hover {
  419.       background: #111;
  420.    }
  421.  
  422.    .products-preview .preview .buttons a.buy:hover {
  423.       background: #444;
  424.       color: #fff;
  425.    }
  426.  
  427.    #purchase{
  428.       visibility: visible;
  429.    }
  430.  
  431.    #purchase .active{
  432.       visibility: hidden;
  433.    }
  434.  
  435.  
  436.    @media (max-width:991px) {
  437.  
  438.       html {
  439.          font-size: 55%;
  440.       }
  441.  
  442.    }
  443.  
  444.    @media (max-width:768px) {
  445.  
  446.       .products-preview .preview img {
  447.          height: 25rem;
  448.       }
  449.  
  450.    }
  451.  
  452.    @media (max-width:450px) {
  453.  
  454.       html {
  455.          font-size: 50%;
  456.       }
  457.  
  458.    }
  459.  
  460.    .center {
  461.       display: block;
  462.       margin-left: auto;
  463.       margin-right: auto;
  464.       width: 100%;
  465.    }
  466. </style>

Raw Paste

Login or Register to edit or fork this paste. It's free.