index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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>Classwork_5</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. <ul class="nav-list">
  21. <li class="nav-item">
  22. <a href="#" class="nav-link">Item 1</a>
  23. </li>
  24. <li class="nav-item">
  25. <a href="#" class="nav-link">Item 2</a>
  26. </li>
  27. <li class="nav-item">
  28. <a href="#" class="nav-link">Item 3</a>
  29. </li>
  30. <li class="nav-item">
  31. <a href="#" class="nav-link">Item 4</a>
  32. </li>
  33. <li class="nav-item">
  34. <a href="#" class="nav-link">Item 5</a>
  35. </li>
  36. </ul>
  37. </nav>
  38. </div>
  39. </div>
  40. </header>
  41. <div class="content">
  42. <main class="main">
  43. <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non dolorum,
  44. magni asperiores ex illo,
  45. expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore veritatis.
  46. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla, tempora cupiditate excepturi
  47. culpa vel officia placeat. Mollitia ullam hic labore quam recusandae esse quas vitae laborum
  48. blanditiis,
  49. perferendis quibusdam.
  50. </p>
  51. <h1>OUR WORK</h1>
  52. <div class="boxes">
  53. <div class="box box1">
  54. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  55. <div class="about">
  56. <h2>Lorem ipsum dolor sit amet</h2>
  57. <p class="about">Lorem ipsum dolor sit amet.</p>
  58. </div>
  59. <button class="btn">Go</button>
  60. </div>
  61. <div class="box box2">
  62. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  63. <div class="about">
  64. <h2>Lorem ipsum dolor sit amet</h2>
  65. <p>Lorem ipsum dolor sit Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  66. </div>
  67. <button class="btn">Go</button>
  68. </div>
  69. <div class="box box3">
  70. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  71. <div class="about">
  72. <h2>Lorem ipsum dolor sit amet</h2>
  73. <p>Lorem ipsum dolor sit amet.</p>
  74. </div>
  75. <button class="btn">Go</button>
  76. </div>
  77. <div class="box box4">
  78. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  79. <div class="about">
  80. <h2>Lorem ipsum dolor sit amet</h2>
  81. <p class="about">
  82. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  83. </p>
  84. </div>
  85. <button class="btn">Go</button>
  86. </div>
  87. <div class="box box5">
  88. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  89. <div class="about">
  90. <h2>Lorem ipsum dolor sit amet</h2>
  91. <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non
  92. dolorum, magni asperiores ex illo,
  93. expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore
  94. veritatis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  95. </p>
  96. </div>
  97. </div>
  98. <div class="box box6">
  99. <img src="/img/Закат.jpg" alt="sunset" class="pict">
  100. <div class="about">
  101. <h2>Lorem ipsum dolor sit amet</h2>
  102. <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde
  103. molestiae non
  104. dolorum, magni asperiores ex illo,
  105. expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus
  106. tempore
  107. veritatis.
  108. </p>
  109. </div>
  110. <button class="btn">Go</button>
  111. </div>
  112. </div>
  113. <section class="task3">
  114. <div class="holder">
  115. <div class="item">1</div>
  116. <div class="item">2</div>
  117. <div class="item">3</div>
  118. <div class="item">4</div>
  119. <div class="item">5</div>
  120. </div>
  121. </section>
  122. </main>
  123. <aside class="aside aside-left">
  124. <span>Aside Left</span>
  125. </aside>
  126. <aside class="aside aside-right">
  127. <span>Aside right</span>
  128. </aside>
  129. </div>
  130. <footer class="footer">
  131. <span>Footer</span>
  132. </footer>
  133. </div>
  134. </body>
  135. </html>