HTML5   23

product.html

Guest on 18th May 2022 12:26:28 AM

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

Raw Paste


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