SHARE
TWEET

Untitled

a guest Jul 15th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.     <head>
  9.         <title>TODO supply a title</title>
  10.         <meta charset="UTF-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  13.         <script src="function.js"></script>
  14.         <style>
  15.             #headbar {
  16.                 display: grid;
  17.                 grid-template-columns: 65% 35%;
  18.                 height: 45px;
  19.                 margin: auto;
  20.                 position: fixed;
  21.                 width: 100%;
  22.                 background-color: #555;
  23.                 top: 0;
  24.             }
  25.  
  26.             #inpageNav {
  27.  
  28.                 display: grid;
  29.                 grid-template-columns: 5% 20% 14% 14% 14% 14% 14% 5%;
  30.  
  31.             }
  32.  
  33.             #outpageNav {
  34.                 margin-right: 20px;
  35.                 display: grid;
  36.                 grid-template-columns: 20% 40% 40%;
  37.             }
  38.             .navBut {
  39.                 background-color: inherit;
  40.                 border-style: none;
  41.                 color: white;
  42.                 font-size: 15px;
  43.             }
  44.  
  45.             #cartDiv {
  46.                 padding-top: 50px;
  47.                 display: grid;
  48.                 justify-items: center;
  49.             }
  50.  
  51.             #searchBar {
  52.                 width: 600px;
  53.             }
  54.  
  55.             #preview {
  56.                 padding-top: 10px;
  57.                 margin: auto;
  58.                 display: grid;
  59.                 grid-template-columns: 65% 35%;
  60.                 transform: scale(0.75);
  61.             }
  62.  
  63.             #shoeImg {
  64.                 background-color: #F0ECCB;
  65.                 width: 100%;
  66.             }
  67.  
  68.             #shoeType {
  69.                 display: grid;
  70.                 grid-template-rows: 25% 25% 25% 25%;
  71.             }
  72.  
  73.             #mainDiv {
  74.                 display: grid;
  75.                 grid-template-columns: 25% 75%;
  76.             }
  77.  
  78.             #allShoeType {
  79.                 display: grid;
  80.                 grid-template-columns: 25% 25% 25% 25%;
  81.                 grid-template-rows: 50% 50%;
  82.                 height: auto;
  83.  
  84.             }
  85.             #shoeCatagory {
  86.                 background:
  87.             }
  88.  
  89.             #catagory, #hotShoeText {
  90.                 text-align: center;
  91.                 font-size: 20px;
  92.             }
  93.  
  94.             .shoeTypeDiv {
  95.                 display: grid;
  96.                 grid-template-rows: 80% 20%;
  97.                 cursor: pointer;
  98.  
  99.                 background-color: black;
  100.             }
  101.  
  102.             .shoeTypeName {
  103.                 text-align: center;
  104.                 margin: auto;
  105.                 font-size: 20px;
  106.                 background-color: inherit;
  107.                 color: white;
  108.             }
  109.  
  110.             .shoeTypeImg {
  111.                 width: 95%;
  112.             }
  113.         </style>
  114.     </head>
  115.     <body>
  116.         <nav id="headbar">
  117.             <div id="inpageNav">
  118.                 <div></div>
  119.                 <input type="button" class="navBut" value="Group 3" id="us">
  120.                 <input type="button" class="navBut" value="Home" id="home">
  121.                 <input type="button" class="navBut" value="Product" id="productType">
  122.                 <input type="button" class="navBut" value="Contact" id="contact">
  123.                 <input type="button" class="navBut"value="Hot trend" id="trend">
  124.                 <input type="button" class="navBut" value="About us" id="infor">
  125.                 <div></div>
  126.             </div>
  127.  
  128.             <div id="outpageNav">
  129.                 <button id="search"  class="fa fa-search" aria-hidden="true" style="background-color: inherit; border-style: none; color: white; font-size: 15px;"></button>
  130.                 <button id="login" class="fa fa-sign-in" aria-hidden="true" style="background-color: inherit; border-style: none; color: white; font-size: 15px;">  Login</button>
  131.                 <button id="sign-up"  class="fa fa-user-circle-o" aria-hidden="true"style="background-color: inherit; border-style: none; color: white; font-size: 15px;" > Sign-up </button>
  132.             </div>
  133.         </nav>
  134.  
  135.         <form id="cartDiv">
  136.             <input type="text" id="searchBar">
  137.             <button type="submit" class="fa fa-search" aria-hidden="true" value="submit" id="searchSubmit">Browse All</button>
  138.         </form>
  139.  
  140.         <div id="preview">
  141.             <div id="shoePreview">
  142.                 <img src="shoe/previewShoe/nike/1.png" id="shoeImg">
  143.             </div>
  144.  
  145.             <div id="shoeType">
  146.                 <button id="adidas" class="hotShoeTypeDiv">Adidas</button>
  147.                 <button id="nike" class="hotShoeTypeDiv">Nike</button>
  148.                 <button id="lining" class="hotShoeTypeDiv">Li-ning</button>
  149.                 <button id="timberland" class="hotShoeTypeDiv">Timberland</button>
  150.             </div>
  151.         </div>
  152.  
  153.         <div id="mainDiv">
  154.             <div id="leftDiv"></div>
  155.             <div id="rightDiv">
  156.                 <div id="shoeCatagory">
  157.                     <p id="catagory" class="text">Catagory</p>
  158.                 </div>
  159.                 <div id="allShoeType">
  160.                     <div id="adidasDiv" class="shoeTypeDiv">
  161.                         <img src="logo/adidas.jpg" id="adidasImg" class="shoeTypeImg">
  162.                         <p class="shoeTypeName">Adidas</p>
  163.                     </div>
  164.  
  165.                     <div id="nikeDiv" class="shoeTypeDiv">
  166.                         <img src="logo/nike.jpg" id="nikeImg" class="shoeTypeImg">
  167.                         <p class="shoeTypeName">Nike</p>
  168.                     </div>
  169.  
  170.                     <div id="reebokDiv" class="shoeTypeDiv">
  171.                         <img src="logo/reebok.jpg" id="reebokImg" class="shoeTypeImg">
  172.                         <p class="shoeTypeName">Reebok</p>
  173.                     </div>
  174.  
  175.                     <div id="timberlandDiv" class="shoeTypeDiv">
  176.                         <img src="logo/timberland.jpg" id="timberImg" class="shoeTypeImg">
  177.                         <p class="shoeTypeName">Timberland</p>
  178.                     </div>
  179.  
  180.                     <div id="vansDiv" class="shoeTypeDiv">
  181.                         <img src="logo/vans.jpg" id="vansImg" class="shoeTypeImg">
  182.                         <p class="shoeTypeName">Vans</p>
  183.                     </div>
  184.  
  185.                     <div id="converseDiv" class="shoeTypeDiv">
  186.                         <img src="logo/converse.jpg" id="converseImg" class="shoeTypeImg">
  187.                         <p class="shoeTypeName">Converse</p>
  188.                     </div>
  189.  
  190.                     <div id="pumaDiv" class="shoeTypeDiv">
  191.                         <img src="logo/puma.jpg" id="pumaImg" class="shoeTypeImg">
  192.                         <p class="shoeTypeName">Puma</p>
  193.                     </div>
  194.  
  195.                     <div id="lacosteDiv" class="shoeTypeDiv">
  196.                         <img src="logo/lacoste.jpg" id="lacosteImg" class="shoeTypeImg">
  197.                         <p class="shoeTypeName">Lacoste</p>
  198.                     </div>
  199.  
  200.                 </div>
  201.  
  202.                 <div id="hotShoe">
  203.                     <div id="hotShoeText">
  204.                         <p id="hotShoeParagraph" class="text">Hot Shoe</p>
  205.                     </div>
  206.  
  207.                 </div>
  208.  
  209.  
  210.             </div>
  211.         </div>
  212.     </body>
  213. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top