index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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.
  50. </p>
  51. <a href="#">Go</a>
  52. </div>
  53. <div class="box">
  54. <img class="img-box" src="img/box.jpg" alt="image" />
  55. <h1>Lorem ipsum dolor sit amet.</h1>
  56. <p>
  57. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  58. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  59. </p>
  60. <a href="#">Go</a>
  61. </div>
  62. <div class="box">
  63. <img class="img-box" src="img/box.jpg" alt="image" />
  64. <h1>Lorem ipsum dolor sit amet.</h1>
  65. <p>
  66. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  67. </p>
  68. <a href="#">Go</a>
  69. </div>
  70. <div class="box">
  71. <img class="img-box" src="img/box.jpg" alt="image" />
  72. <h1>Lorem ipsum dolor sit amet.</h1>
  73. <p>
  74. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  75. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  76. facere illum deserunt excepturi aperiam voluptates!
  77. </p>
  78. <a href="#">Go</a>
  79. </div>
  80. <div class="box">
  81. <img class="img-box" src="img/box.jpg" alt="image" />
  82. <h1>Lorem ipsum dolor sit amet.</h1>
  83. <p>
  84. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
  85. ex sint molestiae numquam dolore adipisci quaerat tenetur,
  86. facere illum deserunt excepturi aperiam voluptates! Unde
  87. repudiandae omnis autem optio? Voluptates, eaque!
  88. </p>
  89. <a href="#">Go</a>
  90. </div>
  91. </div>
  92. <div class="holder">
  93. <div class="item">1</div>
  94. <div class="item">2</div>
  95. <div class="item">3</div>
  96. <div class="item">4</div>
  97. <div class="item">5</div>
  98. </div>
  99. </div>
  100. <aside class="aside-left">Aside1</aside>
  101. <aside class="aside-right">Aside2</aside>
  102. </main>
  103. <footer class="footer">
  104. <p>Footer</p>
  105. </footer>
  106. </div>
  107. </body>
  108. </html>