[html5] html

Viewer

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" contentContainerContainer="IE=edge">
  6.   <meta name="viewport" contentContainerContainer="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" contentContainer="IE=edge">
  19. <meta name="viewport" contentContainer="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.     
  53.     <!-- ################Start of Navigation Bar################# -->
  54.     <div class="header">
  55.  
  56.         <div class="row-1">
  57.           <div class="container">
  58.             <div class="announcement">
  59.     
  60.               <p class="white">Free Delivery & Assembly in Cairo & Giza</p>
  61.     
  62.             </div>
  63.           </div>
  64.     
  65.         </div>
  66.     
  67.         <div class="row-2">
  68.           <div class="container">
  69.             <div class="announcement">
  70.     
  71.               <p class="black">Winter Sale Discount <strong class="strong1">40%</strong> off <a class="shop-now" href="#"
  72.                   title="All Products">Shop Now</a></p>
  73.     
  74.             </div>
  75.           </div>
  76.     
  77.         </div>
  78.     
  79.         <div class="container-1">
  80.           <div class="row-3">
  81.     
  82.             <div class="col-1">
  83.     
  84.               <div class="col-11">
  85.     
  86.               
  87.     
  88.                 <a href="index.html"><img  class="im" style="padding: 0 5px;" src="./Images/logo.png"alt="FRNTR" width="85px" height="95px"></a>
  89.     
  90.               </div>
  91.     
  92.             </div>
  93.     
  94.             <div class="col-2">
  95.     
  96.               <div class="col-22">
  97.     
  98.                 <nav class="nav1">
  99.                   <button class="dropbtn"><a class="anor" href="#">Furniture</a>
  100.     
  101.     
  102.                     <div class="content">
  103.                       <a class="anor" href="#">Sofas</a>
  104.                       <a class="anor" href="#">Beds</a>
  105.                       <a class="anor" href="#">Arm chairs</a>
  106.                       <a class="anor" href="#">Chaise Lounges</a>
  107.                       <a class="anor" href="#">Ottmans & Benches</a>
  108.                       <a class="anor" href="#">outdoor Furniture</a>
  109.                       <a class="anor" href="#">Living Room Sets</a>
  110.                       <a class="anor" href="#">Space Friendly</a>
  111.                       <a class="anor" href="#">Kids Furniture</a>
  112.                       <a class="anor" href="#">Bean Bags</a>
  113.                       <a class="anor" href="#">Pets Furniture</a>
  114.                     </div>
  115.     
  116.     
  117.                     <button class="dropbtn"><a class="anor" href="#">Storage & Display</a>
  118.                       <div class="content">
  119.                         <a class="anor" href="#">Dressers</a>
  120.                         <a class="anor" href="#">TV Units</a>
  121.                         <a class="anor" href="#">Consoles</a>
  122.                         <a class="anor" href="#">Make-up-Vanity</a>
  123.                       </div>
  124.                     </button>
  125.                     <button class="dropbtn"><a class="anor" href="#">Tables</a>
  126.                       <div class="content">
  127.                         <a class="anor" href="#">Night Tables</a>
  128.                         <a class="anor" href="#">Coffee Tables</a>
  129.                         <a class="anor" href="#">Stands</a>
  130.                         <a class="anor" href="#">Night Stands</a>
  131.                       </div>
  132.                     </button>
  133.     
  134.     
  135.                     <button class="dropbtn"><a class="anor" href="#">Walls Nation Moods</a>
  136.                       <div class="content">
  137.                         <a class="anor" href="#">Modern</a>
  138.                         <a class="anor" href="#">Boho</a>
  139.                       </div>
  140.                     </button>
  141.     
  142.                     
  143.                 </nav>
  144.               </div>
  145.             </div>
  146.             <div class="col-3">
  147.     
  148.               <div class="col-33">
  149.                   <nav class="nav11">
  150.                           
  151.                       <ul>
  152.                         <button class="side-btn" onclick=></button><i class="material-icons">search</i></button>
  153.                         <button class="side-btn"  onclick="signOpen()"><i class="material-icons">person</i></button> 
  154.                         <button class="side-btn" onclick=></button><i class="material-icons">favorite</i></button>
  155.                         <button class="side-btn" onclick="cartOpen()"><i class="material-icons">shopping_cart</i></button>
  156.                       </ul>
  157.                   </nav>
  158.               </div>
  159.     
  160.              </div>
  161.     
  162.          </div>
  163.     
  164.       </div>
  165.     </div>
  166.     
  167.     
  168.     <div id="sidebar-1" class="sidebar">
  169.     
  170.     <div class="insidesidebar">
  171.       <div class="title1">
  172.           <span id="log">LOGIN</span>
  173.           <button class="side-btn1"><i class="material-icons" onclick="signclose()">close</i></button>
  174.       </div>
  175.      
  176.     </div>
  177.     <div class="sign">
  178.           <form name="sign-in" action="#" method="get" onsubmit="return validate1(this)">
  179.               <input id="ema1" type="email" class="element" name="email" placeholder="Email" >
  180.               <div id="em1" class="err1"></div>
  181.               <input id="pas1"style="margin-top: 10px; margin-bottom: 5px;" type="password" class="element" name="pas" placeholder="Password">
  182.               <div id="passwor" class="err1"></div>
  183.               <span class="forgot"><button class="forgot1" name="forgotpassword" onclick="openforgotsidebar()">Forgot your password?</button></span><br>
  184.               <input class="sub" type="submit" value="Sign In"><br>
  185.               <a href="Sign Up.html" class="forgot">New customer? Create your account</a>
  186.           </form>
  187.       </div>
  188.     </div>
  189.     <div id="forgotsidebar" class="sidebar">
  190.     
  191.       <div class="insidesidebar">
  192.         <div class="firstline1">
  193.             <span id="log">RESET PASSWORD</span>
  194.             <button class="side-btn1" id="btnfor"><i class="material-icons" onclick="forgotclose()">close</i></button>
  195.         </div>
  196.       </div>
  197.     
  198.     <div class="sign">
  199.       <div>  <p id="p11">Lost your password? Please enter your email address.
  200.          You will receive a link to create a new password via email.</p></div>
  201.     
  202.       <form name="sign-in" action="#" method="get" onsubmit="return validate1(this)">
  203.           <input id="ema1" type="email" class="element" name="email" placeholder="Email Address" required >
  204.           <div id="em1" class="err1"></div>
  205.           <input class="sub" type="submit" value="Reset Password"><br>
  206.           <a class="forgot" onclick="backtosidebar()">Cancel</a>
  207.       </form>
  208.     </div>
  209.     </div>
  210.     <div id="cartsidebar">
  211.     
  212.     
  213.       <div id="insidecart">
  214.         <div id="firstline">
  215.           <span id = "cartName">Shopping Cart</span>
  216.             <button id ="CloseButton" onclick="cartClose()"><span class="material-icons">close</span></button>
  217.             
  218.         </div>
  219.     
  220.         <div id="listOfItems">
  221.           <div id = "checkoutItem">
  222.             <div id = "imageOfItem">
  223.               <img src="./Images/AcadiaChaise.webp" width="140px" height="140px">
  224.             </div>
  225.             <div id="itemDetails">
  226.               <p id="itemName">Acadia Chaise Lounge / 183 x 83 CM Velvet Upholstery</p>
  227.               <p id="itemAttributes">Velvet Mondo (V901-17)</p> <br>
  228.               <div id="priceContainer"><span id="priceBeforeSale">8,870</span> <span id="priceAfterSale"> 5,390</span></div><br>
  229.               <div id="buttonsContainer">
  230.                 <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>
  231.               </div>
  232.               <div>
  233.                 <span>Delete item: </span><button class="material-symbols-outlined" id="trashBarDelete">delete</button>
  234.               </div>
  235.               
  236.             </div>
  237.     
  238.             
  239.           </div>
  240.           <div class="checkoutSidebarBottom">
  241.             <div class="addOrderStuff">
  242.               <input type="text" placeholder="Add order note" id="addNote"><br>
  243.               <input type="text" placeholder="Add coupon code" id="addCoupon">
  244.             </div>
  245.             <div class="subtotalContainer">
  246.               <span id="subtotalMessage">Subtotal:</span><span id="subtotalPrice">5,390 EGP</span>
  247.             </div>
  248.           
  249.             <div class="acceptTermsContainer">
  250.               <span style="float: left;">
  251.                 <input type="checkbox" id="checkboxid"><span id="agreewithterms">I agree with the terms and conditions.</span>
  252.               </span>
  253.             </div>
  254.             <div class="viewandcheckcontainer">
  255.               <button id="viewcart">
  256.                 <a href="cart.html">View Cart</a>
  257.               </button>
  258.               <button id="checkout">
  259.                 Checkout
  260.               </button>
  261.             </div>
  262.           </div>
  263.           </div>
  264.           </div>
  265.           </div>
  266.           <!-- #################End of Navigation Bar################## -->
  267.     <div style="text-align: center;" data-mce-fragment="1" data-mce-style="text-align: center;">
  268.  
  269.         <img class="sofaMainFarrah" src="./Images/sofas_main.jpg" ></div>
  270.         
  271.     <div class="gallery">
  272.  
  273.         <div class="contentContainer">
  274.              <img class="productImage" src="./Images/pic1.webp" alt="">
  275.             <h3 class="sofa">Beige Sofa</h3>
  276.             <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  277.  
  278.             <h6>$100.00</h6>
  279.              <ul class="rating">>
  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 checked"></i></li>
  283.                 <li> <i class="fa fa-star checked"></i></li>
  284.                 <li> <i class="fa fa-star"></i></li>
  285.                 <li> <i class="fa fa-star"></i></li>
  286.             </ul>    
  287.             <button class="buy-1">Buy Now</button>
  288.         </div>
  289.         
  290.         <div class="contentContainer">
  291.              <img class="productImage" src="./Images/pic2.jpeg" alt="">
  292.             <h3 class="sofa">Grey Sofa</h3>
  293.             <p class="description">Leonie Design Sofa / 125 x 94 CM Linen Upholstery. </p>
  294.  
  295.             <h6>$56.00</h6>
  296.              <ul class="rating">>
  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 checked"></i></li>
  301.                 <li> <i class="fa fa-star checked"></i></li>
  302.                 <li> <i class="fa fa-star"></i></li>
  303.             </ul> 
  304.             <button class="buy-1">Buy Now</button>   
  305.         </div>
  306.  
  307.  
  308.  
  309.         <div class="contentContainer">
  310.             <img class="productImage" src="./Images/pic3.webp" alt="">
  311.            <h3 class="sofa">Pink Sofa</h3>
  312.            <p class="description">Dijon Chesterfield 2S. Sofa/Majlis Linen Upholstery </p>
  313.  
  314.            <h6>$100.00</h6>
  315.             <ul class="rating">>
  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 checked"></i></li>
  319.                <li> <i class="fa fa-star checked"></i></li>
  320.                <li> <i class="fa fa-star"></i></li>
  321.                <li> <i class="fa fa-star"></i></li>
  322.            </ul>    
  323.            <button class="buy-1">Buy Now</button>
  324.        </div>
  325.        
  326.  
  327.         <div class="contentContainer">
  328.              <img class="productImage" src="./Images/pic4.webp" alt="">
  329.             <h3 class="sofa">Green Sofa</h3>
  330.             <p class="description">Akira 2S. Sofa / Jade Finish 140 L x 65 D CM</p>
  331.  
  332.             <h6>$400.00</h6>
  333.              <ul class="rating">
  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 checked"></i></li>
  338.                 <li> <i class="fa fa-star checked"></i></li>
  339.                 <li> <i class="fa fa-star"></i></li>
  340.             </ul>
  341.             <button class="buy-1">Buy Now</button>    
  342.         </div>
  343.  
  344.  
  345.         
  346.  
  347.  
  348.     </div>
  349.     
  350. </body>
  351. </html>

Editor

You can edit this paste and save as new: