Guest User

Untitled

a guest
Nov 19th, 2019
176
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