index.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Homework 5</title>
  7. <link rel="stylesheet" href="style/reset.css" />
  8. <link rel="stylesheet" href="style/style.css" />
  9. </head>
  10. <body>
  11. <div class="wrapper">
  12. <header class="header">
  13. <div class="container-logo-nav">
  14. <img class="logo" src="img/logo.png" alt="logo" />
  15. <nav class="nav">
  16. <ul>
  17. <li><a href="#">Item1</a></li>
  18. <li><a href="#">Item2</a></li>
  19. <li><a href="#">Item3</a></li>
  20. <li><a href="#">Item4</a></li>
  21. <li><a href="#">Item5</a></li>
  22. </ul>
  23. </nav>
  24. </div>
  25. </header>
  26. <main class="main">
  27. <div class="block-center">
  28. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem,
  29. tempore eius! Rem possimus mollitia officia commodi cupiditate ipsam
  30. quo dolorum obcaecati dignissimos, molestiae voluptates reiciendis
  31. nemo officiis fugit quia quos.
  32. <p>OUR WORK</p>
  33. <div class="flex-boxs">
  34. <div class="box">
  35. <img class="img-box" src="img/box.jpg" alt="image" />
  36. <h1>Lorem ipsum dolor sit amet.</h1>
  37. <p>
  38. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  39. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  40. facere illum deserunt excepturi aperiam voluptates! Unde
  41. repudiandae omnis autem optio? Voluptates, eaque!
  42. </p>
  43. <a href="#">Go</a>
  44. </div>
  45. <div class="box">
  46. <img class="img-box" src="img/box.jpg" alt="image" />
  47. <h1>Lorem ipsum dolor sit amet.</h1>
  48. <p>
  49. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  50. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  51. facere illum deserunt excepturi aperiam voluptates! Unde
  52. repudiandae omnis autem optio? Voluptates, eaque!
  53. </p>
  54. <a href="#">Go</a>
  55. </div>
  56. <div class="box">
  57. <img class="img-box" src="img/box.jpg" alt="image" />
  58. <h1>Lorem ipsum dolor sit amet.</h1>
  59. <p>
  60. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  61. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  62. facere illum deserunt excepturi aperiam voluptates! Unde
  63. repudiandae omnis autem optio? Voluptates, eaque!
  64. </p>
  65. <a href="#">Go</a>
  66. </div>
  67. <div class="box">
  68. <img class="img-box" src="img/box.jpg" alt="image" />
  69. <h1>Lorem ipsum dolor sit amet.</h1>
  70. <p>
  71. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  72. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  73. facere illum deserunt excepturi aperiam voluptates! Unde
  74. repudiandae omnis autem optio? Voluptates, eaque!
  75. </p>
  76. <a href="#">Go</a>
  77. </div>
  78. <div class="box">
  79. <img class="img-box" src="img/box.jpg" alt="image" />
  80. <h1>Lorem ipsum dolor sit amet.</h1>
  81. <p>
  82. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  83. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  84. facere illum deserunt excepturi aperiam voluptates! Unde
  85. repudiandae omnis autem optio? Voluptates, eaque!
  86. </p>
  87. <a href="#">Go</a>
  88. </div>
  89. <div class="box">
  90. <img class="img-box" src="img/box.jpg" alt="image" />
  91. <h1>Lorem ipsum dolor sit amet.</h1>
  92. <p>
  93. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  94. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  95. facere illum deserunt excepturi aperiam voluptates! Unde
  96. repudiandae omnis autem optio? Voluptates, eaque!
  97. </p>
  98. <a href="#">Go</a>
  99. </div>
  100. </div>
  101. <div class="holder">
  102. <div class="item">1</div>
  103. <div class="item">2</div>
  104. <div class="item">3</div>
  105. <div class="item">4</div>
  106. <div class="item">5</div>
  107. </div>
  108. </div>
  109. <aside class="aside-left">Aside1</aside>
  110. <aside class="aside-right">Aside2</aside>
  111. </main>
  112. <footer class="footer">
  113. <p>Footer</p>
  114. </footer>
  115. </div>
  116. </body>
  117. </html>