index.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Homework 6</title>
  8. <link rel="shortcut icon" href="/img/А_levelfav.ico" type="image/x-icon">
  9. <link rel="stylesheet" href="/Styles/style.css">
  10. </head>
  11. <body>
  12. <div class="wrapper">
  13. <header class="header">
  14. <div class="container">
  15. <div class="header-wrap">
  16. <a href="#" class="logo">
  17. <img src="/img/Logo.png" alt="Logo">
  18. </a>
  19. <nav class="nav">
  20. <input type="checkbox" name="" id="burger">
  21. <label for="burger" class="burger">
  22. <span></span>
  23. </label>
  24. <ul class="nav-list">
  25. <li class="nav-item">
  26. <a href="#" class="nav-link">Item 1</a>
  27. </li>
  28. <li class="nav-item">
  29. <a href="#" class="nav-link">Item 2</a>
  30. </li>
  31. <li class="nav-item">
  32. <a href="#" class="nav-link">Item 3</a>
  33. </li>
  34. <li class="nav-item">
  35. <a href="#" class="nav-link">Item 4</a>
  36. </li>
  37. <li class="nav-item">
  38. <a href="#" class="nav-link">Item 5</a>
  39. </li>
  40. </ul>
  41. </nav>
  42. </div>
  43. </div>
  44. </header>
  45. <div class="content">
  46. <main class="main">
  47. <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non dolorum,
  48. magni asperiores ex illo,
  49. expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore veritatis.
  50. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla, tempora cupiditate excepturi
  51. culpa vel officia placeat. Mollitia ullam hic labore quam recusandae esse quas vitae laborum
  52. blanditiis,
  53. perferendis quibusdam.
  54. </p>
  55. <h1>OUR WORK</h1>
  56. <div class="boxes">
  57. <div class="box box1">
  58. <div class="imgcontainer">
  59. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  60. </div>
  61. <div class="about">
  62. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  63. <p class="about">Lorem ipsum dolor sit amet.</p>
  64. </div>
  65. <div class="btncontainer">
  66. <button class="btn">Go</button>
  67. </div>
  68. </div>
  69. <div class="box box2">
  70. <div class="imgcontainer">
  71. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  72. </div>
  73. <div class="about">
  74. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  75. <p>Lorem ipsum dolor sit Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  76. </div>
  77. <div class="btncontainer">
  78. <button class="btn">Go</button>
  79. </div>
  80. </div>
  81. <div class="box box3">
  82. <div class="imgcontainer">
  83. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  84. </div>
  85. <div class="about">
  86. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  87. <p>Lorem ipsum dolor sit amet.</p>
  88. </div>
  89. <div class="btncontainer">
  90. <button class="btn">Go</button>
  91. </div>
  92. </div>
  93. <div class="box box4">
  94. <div class="imgcontainer">
  95. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  96. </div>
  97. <div class="about">
  98. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  99. <p class="about">
  100. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  101. </p>
  102. </div>
  103. <div class="btncontainer">
  104. <button class="btn">Go</button>
  105. </div>
  106. </div>
  107. <div class="box box5">
  108. <div class="imgcontainer">
  109. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  110. </div>
  111. <div class="about">
  112. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  113. <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non
  114. dolorum, magni asperiores ex illo.
  115. </p>
  116. </div>
  117. <div class="btncontainer">
  118. <button class="btn">Go</button>
  119. </div>
  120. </div>
  121. <div class="box box6">
  122. <div class="imgcontainer">
  123. <img src="/img/Sunset.jpg" alt="sunset" class="pict">
  124. </div>
  125. <div class="about">
  126. <h2 class="title">Lorem ipsum dolor sit amet</h2>
  127. <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde
  128. molestiae non.
  129. </p>
  130. </div>
  131. <div class="btncontainer">
  132. <button class="btn">Go</button>
  133. </div>
  134. </div>
  135. </div>
  136. <section class="task3">
  137. <div class="holder">
  138. <div class="item">1</div>
  139. <div class="item">2</div>
  140. <div class="item">3</div>
  141. <div class="item">4</div>
  142. <div class="item">5</div>
  143. </div>
  144. </section>
  145. </main>
  146. <aside class="aside aside-left">
  147. <span>Aside Left</span>
  148. </aside>
  149. <aside class="aside aside-right">
  150. <span>Aside right</span>
  151. </aside>
  152. </div>
  153. <footer class="footer">
  154. <span>Footer</span>
  155. </footer>
  156. </div>
  157. </body>
  158. </html>