[html5] code

Viewer

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" contentContainer="IE=edge">
  6.     <meta name="viewport" contentContainer="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
  9.   <link href='https://unpkg.com/[email protected]/icons/css/coffee.css' rel='stylesheet'>
  10.   <link href='https://unpkg.com/[email protected]/icons/css/edit-fade.css' rel='stylesheet'>
  11.   <link href='https://unpkg.com/[email protected]/icons/css/arrow-left-o.css' rel='stylesheet'>
  12.   <link href='https://unpkg.com/[email protected]/icons/css/maximize.css' rel='stylesheet'>
  13.   <link rel="preconnect" href="https://fonts.googleapis.com">
  14.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  15.   <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  16.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  17.   <meta charset="UTF-8">
  18.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  19.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.   <link rel="preconnect" href="https://fonts.googleapis.com">
  21.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  22.   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  23.   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  24.   <link rel="stylesheet"
  25.     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  26.  
  27.     <link rel="stylesheet" href="./CSS/categories.css" />
  28.  
  29.   <style>
  30.     .material-symbols-outlined {
  31.       font-variation-settings:
  32.         'FILL' 0,
  33.         'wght' 400,
  34.         'GRAD' 0,
  35.         'opsz' 48
  36.     }
  37.   </style>
  38.   <link rel="stylesheet" href="./CSS/style.css">
  39.   <link rel="stylesheet" href="./CSS/cartsidebar.css">
  40. <link rel="stylesheet" href="./CSS/categories.css" />
  41. <link rel="stylesheet" href="./CSS/furniture.css" />
  42. <link rel="stylesheet" href="./CSS/cartsidebar.css">
  43. <link rel="stylesheet" href="./CSS/style.css">
  44.     <!-- Font Awesome Icon Library -->
  45. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  46. <script src="https://cdn.lordicon.com/ritcuqlt.js"></script>
  47.  
  48. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  49.  
  50. </head>
  51. <body>
  52.     <!-- ################Start of Navigation Bar################# -->
  53.     <div class="header">
  54.  
  55.         <div class="row-1">
  56.           <div class="container">
  57.             <div class="announcement">
  58.     
  59.               <p class="white">Free Delivery & Assembly in Cairo & Giza</p>
  60.     
  61.             </div>
  62.           </div>
  63.     
  64.         </div>
  65.     
  66.         <div class="row-2">
  67.           <div class="container">
  68.             <div class="announcement">
  69.     
  70.               <p class="black">Winter Sale Discount <strong class="strong1">40%</strong> off <a class="shop-now" href="#"
  71.                   title="All Products">Shop Now</a></p>
  72.     
  73.             </div>
  74.           </div>
  75.     
  76.         </div>
  77.     
  78.         <div class="container-1">
  79.           <div class="row-3">
  80.     
  81.             <div class="col-1">
  82.     
  83.               <div class="col-11">
  84.     
  85.               
  86.     
  87.                 <a href="index.html"><img  class="im" style="padding: 0 5px;" src="./Images/logo.png"alt="FRNTR" width="85px" height="95px"></a>
  88.     
  89.               </div>
  90.     
  91.             </div>
  92.     
  93.             <div class="col-2">
  94.     
  95.               <div class="col-22">
  96.     
  97.                 <nav class="nav1">
  98.                   <button class="dropbtn"><a class="anor" href="#">Furniture</a>
  99.     
  100.     
  101.                     <div class="content">
  102.                       <a class="anor" href="#">Sofas</a>
  103.                       <a class="anor" href="#">Beds</a>
  104.                       <a class="anor" href="#">Arm chairs</a>
  105.                       <a class="anor" href="#">Chaise Lounges</a>
  106.                       <a class="anor" href="#">Ottmans & Benches</a>
  107.                       <a class="anor" href="#">outdoor Furniture</a>
  108.                       <a class="anor" href="#">Living Room Sets</a>
  109.                       <a class="anor" href="#">Space Friendly</a>
  110.                       <a class="anor" href="#">Kids Furniture</a>
  111.                       <a class="anor" href="#">Bean Bags</a>
  112.                       <a class="anor" href="#">Pets Furniture</a>
  113.                     </div>
  114.     
  115.     
  116.                     <button class="dropbtn"><a class="anor" href="#">Storage & Display</a>
  117.                       <div class="content">
  118.                         <a class="anor" href="#">Dressers</a>
  119.                         <a class="anor" href="#">TV Units</a>
  120.                         <a class="anor" href="#">Consoles</a>
  121.                         <a class="anor" href="#">Make-up-Vanity</a>
  122.                       </div>
  123.                     </button>
  124.                     <button class="dropbtn"><a class="anor" href="#">Tables</a>
  125.                       <div class="content">
  126.                         <a class="anor" href="#">Night Tables</a>
  127.                         <a class="anor" href="#">Coffee Tables</a>
  128.                         <a class="anor" href="#">Stands</a>
  129.                         <a class="anor" href="#">Night Stands</a>
  130.                       </div>
  131.                     </button>
  132.     
  133.     
  134.                     <button class="dropbtn"><a class="anor" href="#">Walls Nation Moods</a>
  135.                       <div class="content">
  136.                         <a class="anor" href="#">Modern</a>
  137.                         <a class="anor" href="#">Boho</a>
  138.                       </div>
  139.                     </button>
  140.     
  141.                     
  142.                 </nav>
  143.               </div>
  144.             </div>
  145.             <div class="col-3">
  146.     
  147.               <div class="col-33">
  148.                   <nav class="nav11">
  149.                           
  150.                       <ul>
  151.                         <button class="side-btn" onclick=></button><i class="material-icons">search</i></button>
  152.                         <button class="side-btn"  onclick="signOpen()"><i class="material-icons">person</i></button> 
  153.                         <button class="side-btn" onclick=></button><i class="material-icons">favorite</i></button>
  154.                         <button class="side-btn" onclick="cartOpen()"><i class="material-icons">shopping_cart</i></button>
  155.                       </ul>
  156.                   </nav>
  157.               </div>
  158.     
  159.              </div>
  160.     
  161.          </div>
  162.     
  163.       </div>
  164.     </div>
  165.     
  166.     
  167.     <div id="sidebar-1" class="sidebar">
  168.     
  169.     <div class="insidesidebar">
  170.       <div class="title1">
  171.           <span id="log">LOGIN</span>
  172.           <button class="side-btn1"><i class="material-icons" onclick="signclose()">close</i></button>
  173.       </div>
  174.      
  175.     </div>
  176.     <div class="sign">
  177.           <form name="sign-in" action="#" method="get" onsubmit="return validate1(this)">
  178.               <input id="ema1" type="email" class="element" name="email" placeholder="Email" >
  179.               <div id="em1" class="err1"></div>
  180.               <input id="pas1"style="margin-top: 10px; margin-bottom: 5px;" type="password" class="element" name="pas" placeholder="Password">
  181.               <div id="passwor" class="err1"></div>
  182.               <span class="forgot"><button class="forgot1" name="forgotpassword" onclick="openforgotsidebar()">Forgot your password?</button></span><br>
  183.               <input class="sub" type="submit" value="Sign In"><br>
  184.               <a href="Sign Up.html" class="forgot">New customer? Create your account</a>
  185.           </form>
  186.       </div>
  187.     </div>
  188.     <div id="forgotsidebar" class="sidebar">
  189.     
  190.       <div class="insidesidebar">
  191.         <div class="firstline1">
  192.             <span id="log">RESET PASSWORD</span>
  193.             <button class="side-btn1" id="btnfor"><i class="material-icons" onclick="forgotclose()">close</i></button>
  194.         </div>
  195.       </div>
  196.     
  197.     <div class="sign">
  198.       <div>  <p id="p11">Lost your password? Please enter your email address.
  199.          You will receive a link to create a new password via email.</p></div>
  200.     
  201.       <form name="sign-in" action="#" method="get" onsubmit="return validate1(this)">
  202.           <input id="ema1" type="email" class="element" name="email" placeholder="Email Address" required >
  203.           <div id="em1" class="err1"></div>
  204.           <input class="sub" type="submit" value="Reset Password"><br>
  205.           <a class="forgot" onclick="backtosidebar()">Cancel</a>
  206.       </form>
  207.     </div>
  208.     </div>
  209.     <div id="cartsidebar">
  210.     
  211.     
  212.       <div id="insidecart">
  213.         <div id="firstline">
  214.           <span id = "cartName">Shopping Cart</span>
  215.             <button id ="CloseButton" onclick="cartClose()"><span class="material-icons">close</span></button>
  216.             
  217.         </div>
  218.     
  219.         <div id="listOfItems">
  220.           <div id = "checkoutItem">
  221.             <div id = "imageOfItem">
  222.               <img src="./Images/AcadiaChaise.webp" width="140px" height="140px">
  223.             </div>
  224.             <div id="itemDetails">
  225.               <p id="itemName">Acadia Chaise Lounge / 183 x 83 CM Velvet Upholstery</p>
  226.               <p id="itemAttributes">Velvet Mondo (V901-17)</p> <br>
  227.               <div id="priceContainer"><span id="priceBeforeSale">8,870</span> <span id="priceAfterSale"> 5,390</span></div><br>
  228.               <div id="buttonsContainer">
  229.                 <button class="material-symbols-outlined" id="trashBar" onclick="removeItemCart()">delete</button><span id = "totalAmountBar" >1</span><button class="material-symbols-outlined" id="plusBar" onclick="addItemCart()">add</button>
  230.               </div>
  231.               <div>
  232.                 <span>Delete item: </span><button class="material-symbols-outlined" id="trashBarDelete">delete</button>
  233.               </div>
  234.               
  235.             </div>
  236.     
  237.             
  238.           </div>
  239.           <div class="checkoutSidebarBottom">
  240.             <div class="addOrderStuff">
  241.               <input type="text" placeholder="Add order note" id="addNote"><br>
  242.               <input type="text" placeholder="Add coupon code" id="addCoupon">
  243.             </div>
  244.             <div class="subtotalContainer">
  245.               <span id="subtotalMessage">Subtotal:</span><span id="subtotalPrice">5,390 EGP</span>
  246.             </div>
  247.           
  248.             <div class="acceptTermsContainer">
  249.               <span style="float: left;">
  250.                 <input type="checkbox" id="checkboxid"><span id="agreewithterms">I agree with the terms and conditions.</span>
  251.               </span>
  252.             </div>
  253.             <div class="viewandcheckcontainer">
  254.               <button id="viewcart">
  255.                 <a href="cart.html">View Cart</a>
  256.               </button>
  257.               <button id="checkout">
  258.                 Checkout
  259.               </button>
  260.             </div>
  261.           </div>
  262.           </div>
  263.           </div>
  264.           </div>
  265.           <!-- #################End of Navigation Bar################## -->
  266.     <div style="text-align: center;" data-mce-fragment="1" data-mce-style="text-align: center;">
  267.       <img class="bed_main"src="./Images/bed_main.jpg"></div>
  268.  
  269.     <div class="gallery">
  270.  
  271.         <div class="contentContainer">
  272.              <img class="productImage" src="./Images/bedd1.webp" alt="">
  273.             <h3 class="sofa">Green Bed</h3>
  274.             <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  275.  
  276.             <h6>$100.00</h6>
  277.              <ul class="rating">>
  278.                 <li> <i class="fa fa-star checked" ></i></li>
  279.                 <li> <i class="fa fa-star checked"></i></li>
  280.                 <li> <i class="fa fa-star checked"></i></li>
  281.                 <li> <i class="fa fa-star checked"></i></li>
  282.                 <li> <i class="fa fa-star"></i></li>
  283.                 <li> <i class="fa fa-star"></i></li>
  284.             </ul>    
  285.             <button class="buy-1">Buy Now</button>
  286.         </div>
  287.         
  288.         <div class="contentContainer">
  289.              <img class="productImage" src="./Images/bed2.webp" alt="">
  290.             <h3 class="sofa">Grey Bed</h3>
  291.             <p class="description">Leonie Design Sofa / 125 x 94 CM Linen Upholstery. </p>
  292.  
  293.             <h6>$56.00</h6>
  294.              <ul class="rating">>
  295.                 <li> <i class="fa fa-star checked" ></i></li>
  296.                 <li> <i class="fa fa-star checked"></i></li>
  297.                 <li> <i class="fa fa-star checked"></i></li>
  298.                 <li> <i class="fa fa-star checked"></i></li>
  299.                 <li> <i class="fa fa-star checked"></i></li>
  300.                 <li> <i class="fa fa-star"></i></li>
  301.             </ul> 
  302.             <button class="buy-1">Buy Now</button>   
  303.         </div>
  304.  
  305.  
  306.  
  307.         <div class="contentContainer">
  308.             <img class="productImage" src="./Images/bed4.webp" alt="">
  309.            <h3 class="sofa">Turquoise Bed</h3>
  310.            <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  311.  
  312.            <h6>$100.00</h6>
  313.             <ul class="rating">>
  314.                <li> <i class="fa fa-star checked" ></i></li>
  315.                <li> <i class="fa fa-star checked"></i></li>
  316.                <li> <i class="fa fa-star checked"></i></li>
  317.                <li> <i class="fa fa-star checked"></i></li>
  318.                <li> <i class="fa fa-star"></i></li>
  319.                <li> <i class="fa fa-star"></i></li>
  320.            </ul>    
  321.            <button class="buy-1">Buy Now</button>
  322.        </div>
  323.        
  324.  
  325.         <div class="contentContainer">
  326.              <img class="productImage" src="./Images/bed3.webp" alt="">
  327.             <h3 class="sofa">Boho Bed</h3>
  328.             <p class="description">Akira 2S. Sofa / Jade Finish 140 L x 65 D CM</p>
  329.  
  330.             <h6>$400.00</h6>
  331.              <ul class="rating">>
  332.                 <li> <i class="fa fa-star checked" ></i></li>
  333.                 <li> <i class="fa fa-star checked"></i></li>
  334.                 <li> <i class="fa fa-star checked"></i></li>
  335.                 <li> <i class="fa fa-star checked"></i></li>
  336.                 <li> <i class="fa fa-star checked"></i></li>
  337.                 <li> <i class="fa fa-star"></i></li>
  338.             </ul>
  339.             <button class="buy-1">Buy Now</button>    
  340.         </div>
  341.  
  342.  
  343.         <div class="contentContainer">
  344.             <img class="productImage" src="./Images/bedd3.webp" alt="">
  345.            <h3 class="sofa">Navy Bed</h3>
  346.            <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  347.  
  348.            <h6>$100.00</h6>
  349.             <ul class="rating">>
  350.                <li> <i class="fa fa-star checked" ></i></li>
  351.                <li> <i class="fa fa-star checked"></i></li>
  352.                <li> <i class="fa fa-star checked"></i></li>
  353.                <li> <i class="fa fa-star checked"></i></li>
  354.                <li> <i class="fa fa-star"></i></li>
  355.                <li> <i class="fa fa-star"></i></li>
  356.            </ul>    
  357.            <button class="buy-1">Buy Now</button>
  358.        </div>
  359.        
  360.  
  361.  
  362.        <div class="contentContainer">
  363.         <img class="productImage" src="./Images/bedd2.webp" alt="">
  364.        <h3 class="sofa">Metalic Bed</h3>
  365.        <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  366.  
  367.        <h6>$100.00</h6>
  368.         <ul class="rating">>
  369.            <li> <i class="fa fa-star checked" ></i></li>
  370.            <li> <i class="fa fa-star checked"></i></li>
  371.            <li> <i class="fa fa-star checked"></i></li>
  372.            <li> <i class="fa fa-star checked"></i></li>
  373.            <li> <i class="fa fa-star"></i></li>
  374.            <li> <i class="fa fa-star"></i></li>
  375.        </ul>    
  376.        <button class="buy-1">Buy Now</button>
  377.    </div>
  378.    
  379.  
  380.  
  381.  
  382.    <div class="contentContainer">
  383.     <img class="productImage" src="./Images/bedd4.webp" alt="">
  384.    <h3 class="sofa">Red Bed</h3>
  385.    <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  386.  
  387.    <h6>$100.00</h6>
  388.     <ul class="rating">>
  389.        <li> <i class="fa fa-star checked" ></i></li>
  390.        <li> <i class="fa fa-star checked"></i></li>
  391.        <li> <i class="fa fa-star checked"></i></li>
  392.        <li> <i class="fa fa-star checked"></i></li>
  393.        <li> <i class="fa fa-star"></i></li>
  394.        <li> <i class="fa fa-star"></i></li>
  395.    </ul>    
  396.    <button class="buy-1">Buy Now</button>
  397. </div>
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404. <div class="contentContainer">
  405.     <img class="productImage" src="./Images/bedd5.webp" alt="">
  406.    <h3 class="sofa">Beige Sofa</h3>
  407.    <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  408.  
  409.    <h6>$100.00</h6>
  410.     <ul class="rating">>
  411.        <li> <i class="fa fa-star checked" ></i></li>
  412.        <li> <i class="fa fa-star checked"></i></li>
  413.        <li> <i class="fa fa-star checked"></i></li>
  414.        <li> <i class="fa fa-star checked"></i></li>
  415.        <li> <i class="fa fa-star"></i></li>
  416.        <li> <i class="fa fa-star"></i></li>
  417.    </ul>    
  418.    <button class="buy-1">Buy Now</button>
  419. </div>
  420.  
  421.  
  422.  
  423.     </div>
  424.     <script type="text/javascript"  src="./JS/handler.js"></script>
  425. </body>
  426. </html>

Editor

You can edit this paste and save as new:


File Description
  • code
  • Paste Code
  • 23 Mar-2023
  • 17.29 Kb
You can Share it: