index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HW3</title>
  6. <link rel="stylesheet" href="css/styles.css">
  7. </head>
  8. <body>
  9. <header>
  10. <div class="container clearfix">
  11. <div class="logo">
  12. <img src="images/logo.png" alt="Black and White">
  13. <p>Lorem ipsum dolor sit amet</p>
  14. </div>
  15. <form action="url">
  16. <input type="text" name="text-search">
  17. <input type="submit" name="button-search" value="Search">
  18. </form>
  19. </div>
  20. </header>
  21. <section class="banner">
  22. <div class="container">
  23. <img src="images/banner.jpg" alt="img">
  24. <div class="banner-text">
  25. Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br>
  26. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  27. </div>
  28. </div>
  29. </section>
  30. <section class="nav-bar">
  31. <div class="container clearfix">
  32. <nav>
  33. <ul>
  34. <li><a href="#">Home</a></li>
  35. <li><a href="#">About</a></li>
  36. <li><a href="#">Work</a></li>
  37. <li><a href="#">Blog</a></li>
  38. <li><a href="#">Contact</a></li>
  39. </ul>
  40. </nav>
  41. </div>
  42. </section>
  43. <main>
  44. <div class="container-main">
  45. <div class="container-main-inner">
  46. <div class="we-do">
  47. <h1>What we do</h1>
  48. <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span>commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
  49. ollit anim id est laborum.</p>
  50. <h2>Images</h2>
  51. <img src="images/image1.jpg" alt="img">
  52. <img src="images/image2.jpg" alt="img">
  53. <img src="images/image3.jpg" alt="img">
  54. <img src="images/image4.jpg" alt="img">
  55. </div>
  56. <div class="lists">
  57. <h2>Lists and Descriptions</h2>
  58. <ul>
  59. <li>Sed ut perspiciatis unde omnis iste natus</li>
  60. <li>Lorem ipsum dolor sit amet, consectetur</li>
  61. <li>At vero eos et accusamus et iusto odio</li>
  62. <li>Et harum quidem rerum facilis est</li>
  63. </ul>
  64. <ol>
  65. <li>Sed ut perspiciatis unde omnis iste natus</li>
  66. <li>Lorem ipsum dolor sit amet, consectetur</li>
  67. <li>At vero eos et accusamus et iusto odio</li>
  68. <li>Et harum quidem rerum facilis est</li>
  69. </ol>
  70. <dl>
  71. <dt>Sed ut perspiciatis unde omnis iste natus</dt>
  72. <dd>Lorem ipsum dolor sit amet, consectetur</dd>
  73. <dt>At vero eos et accusamus et iusto odio</dt>
  74. <dd>Et harum quidem rerum facilis est</dd>
  75. </dl>
  76. </div>
  77. <div class="table">
  78. <h2>Table</h2>
  79. <table>
  80. <thead>
  81. <tr>
  82. <th>Lorem</th>
  83. <th>Sed ut perspiciatis unde</th>
  84. <th>Sed ut perspiciatis unde</th>
  85. <th>Sed ut perspiciatis unde</th>
  86. </tr>
  87. </thead>
  88. <tr>
  89. <td>At vero eos et</td>
  90. <td>At vero eos et</td>
  91. <td>At vero eos et</td>
  92. <td>At vero eos et</td>
  93. </tr>
  94. <tr>
  95. <td>At vero eos et</td>
  96. <td>At vero eos et</td>
  97. <td>At vero eos et</td>
  98. <td>At vero eos et</td>
  99. </tr>
  100. <tr>
  101. <td>At vero eos et</td>
  102. <td>At vero eos et</td>
  103. <td>At vero eos et</td>
  104. <td>At vero eos et</td>
  105. </tr>
  106. <tr>
  107. <td>At vero eos et</td>
  108. <td>At vero eos et</td>
  109. <td>At vero eos et</td>
  110. <td>At vero eos et</td>
  111. </tr>
  112. </table>
  113. </div>
  114. <div class="forms">
  115. <form action="url">
  116. <h2>Forms</h2>
  117. <label for="text-input">Text:</label><br>
  118. <input type="text" id="text-input" placeholder="Input type text"><br>
  119. <label for="select">Select:</label><br>
  120. <select id="select">
  121. <option value="Option">Option</option>
  122. <option value="Option">Option</option>
  123. <option value="Option">Option</option>
  124. <option value="Option">Option</option>
  125. </select><br>
  126. <input type="checkbox" class="checkbox">
  127. <span>Sed ut perspiciatis unde omnis iste natus</span><br>
  128. <input type="radio" class="radio">
  129. <span>Lorem ipsum dolor sit amet, consectetur</span><br>
  130. <label for="textarea">Textarea:</label><br>
  131. <textarea id="textarea" cols="40" rows="8"></textarea><br>
  132. <input type="submit" class="submit" value="Button">
  133. </form>
  134. </div>
  135. </div>
  136. </div>
  137. </main>
  138. <footer>
  139. <div class="container">
  140. © Footer content <a href="#">Link footer</a>
  141. </div>
  142. </footer>
  143. </body>
  144. </html>