SHARE
TWEET

Untitled

a guest Nov 19th, 2019 114 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Tech Store</title>
  6.     <link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
  7.  
  8.  
  9.     <link rel="stylesheet" href="styles.css">
  10.  
  11. </head>
  12. <body>
  13.  
  14.     <!--
  15. tO do
  16. 1/create shop.com
  17. 2/add to css styling
  18.  
  19.     -->
  20.     <header>
  21.         <h1>Tech Store</h1>
  22.             <nav>
  23.                 <ul>
  24.                     <li><a href="index.html">home</a></li>
  25.                     <li><a href="">shop</a></li>
  26.                     <li><a href="contact.html">contact us</a></li>
  27.                 </ul>
  28.             </nav>
  29.             <input type="search" placeholder="search...">
  30.     </header>
  31.  
  32.     <aside>
  33.         <h2>Shop By</h2>
  34.             <section>
  35.                 <h3>Category</h3>
  36.             <hr>
  37.                 <ul>
  38.                     <li>All Items</li>
  39.                     <li>Cameras</li>
  40.                     <li>Laptops</li>
  41.                     <li>Phones</li>
  42.                     <li>Accessories</li>
  43.                     <li>Other</li>
  44.                 </ul>
  45.             </section>
  46.  
  47.         <section>
  48.             <h3>Price <span>($)</span></h3>
  49.         <hr>
  50.             <ul>
  51.                 <li>1-9</li>
  52.                 <li>10-29</li>
  53.                 <li>30-59</li>
  54.                 <li>60-99</li>
  55.                 <li>100+</li>
  56.             </ul>
  57.         </section>
  58.     </aside>
  59.  
  60.     <!-- Main seciton to display products-->
  61.  
  62.     <main>
  63.         <h2>All Items:</h2>
  64.             <div class="product">
  65.                 <a href="product-detail.html">
  66.                 <img src="images/controller.jpg" alt="game controller picture">
  67.                 </a>
  68.                 <h4><a href="product-detail.html">Game Cotroller </a>&#127918;</h4>
  69.                 <p>$ 79.95</p>
  70.                 <p>Awesome game controller<br>for xbox</p>
  71.                 <a href="product-detail.html" class="button">More Info</a>
  72.                 <a href="" class="button" id="position">Add To Cart</a>
  73.             </div>
  74.             <div class="product">
  75.                 <a href="product-detail.html">
  76.                 <img src="images/headphones.jpg" alt="white headphones picture">
  77.                 </a>
  78.                 <h4><a href="product-detail.html">White Headphones</a>
  79.                 </h4>
  80.                 <p>$ 54.95</p>
  81.                 <p>Awesome white<br>headphones!</p>
  82.                 <a href="product-detail.html" class="button">More Info</a>
  83.                 <a href="" class="button">Add To Cart</a>
  84.             </div>
  85.             <div class="product">
  86.                 <a href="product-detail.html">
  87.                 <img src="images/camera.jpg" alt="camera photo">
  88.                 </a>
  89.                 <h4><a href="">Canon Camera</a></h4>
  90.                 <p>$ 649.95</p>
  91.                 <p>Awesome Camera by<br>Canon</p>
  92.                 <a href="product-detail.html" class="button">More Info</a>
  93.                 <a href="" class="button">Add To Cart</a>
  94.                
  95.             </div>
  96.             <div class="product">
  97.                 <a href="product-detail.html">
  98.                 <img src="images/microphone.jpg" alt="microphone photo">
  99.                 </a>
  100.                 <h4><a href="">Yeti Microphone</a></h4>
  101.                 <p>$ 119.95</p>
  102.                 <p>Awesome Blue<br>Yeti Microphone</p>
  103.                 <a href="product-detail.html" class="button">More Info</a>
  104.                 <a href="" class="button">Add To Cart</a>
  105.                
  106.             </div>
  107.             <div class="product">
  108.                 <a href="product-detail.html">
  109.                 <img src="images/cables.jpg" alt="cables picture">
  110.                 </a>
  111.                 <h4><a href="">Cables</a></h4>
  112.                 <p>$ 10.95</p>
  113.                 <p>Awesome cables available<br>in different lengths!</p>
  114.                 <a href="product-detail.html" class="button">More Info</a>
  115.                 <a href="" class="button">Add To Cart</a>
  116.                
  117.             </div>
  118.             <div class="product">
  119.                 <a href="product-detail.html">
  120.                 <img src="images/lenses.jpg" alt="lenses picture">
  121.                 </a>
  122.                 <h4><a href="">camera lenses</a></h4>
  123.                 <p>$ 99.95</p>
  124.                 <p>Awesome camera<br>lenses!</p>
  125.                 <a href="product-detail.html" class="button">More Info</a>
  126.                 <a href="" class="button">Add To Cart</a>
  127.             </div>
  128.  
  129.     </main>
  130.    
  131.     <footer>
  132.         <nav>
  133.         <ul>
  134.             <li><a href="index.html">home</a></li>
  135.             <li><a href="">shop</a></li>
  136.             <li><a href="contact.html">contact us</a></li>
  137.         </ul>
  138.         </nav>
  139.     </footer>
  140.  
  141.    
  142.  
  143. </body>
  144. </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