index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Pavlov_Maik_FSA3</title>
  6. <link rel="stylesheet" href="css/clean.css">
  7. <link rel="stylesheet" href="css/style.css">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <script></script>
  10. </head>
  11. <body>
  12. <div class="wrapper">
  13. <header class="m-header">
  14. <div class="cont">
  15. <a href="#" class="logo-pic"><img src="img/A-logo.png"></a>
  16. <nav class="B-naw">
  17. <input id="menu__toggle" type="checkbox" />
  18. <label class="menu__btn" for="menu__toggle"><span></span></label>
  19. <ul class="B-list">
  20. <li><a href="#">Item1</a></li>
  21. <li><a href="#">Item2</a></li>
  22. <li><a href="#">Item3</a></li>
  23. <li><a href="#">Item4</a></li>
  24. <li><a href="#">Item5</a></li>
  25. </ul>
  26. </nav>
  27. </div>
  28. </header>
  29. <main class="main">
  30. <section class="content">
  31. <div class="head-content">
  32. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil iure illum nisi debitis, voluptatum rem temporibus autem. Temporibus quod placeat inventore, excepturi iure molestiae ex, ducimus deleniti harum fuga, unde iste ad vel necessitatibus incidunt id sapiente aliquam!</p>
  33. <h1>OUR WORK</h1>
  34. </div>
  35. <div class="box">
  36. <div class="card">
  37. <div class="c-content">
  38. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  39. <h4>Lorem ipsum dolor sit.</h4>
  40. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
  41. </div>
  42. <a href="#" class="btn">Go</a>
  43. </div>
  44. <div class="card">
  45. <div class="c-content">
  46. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  47. <h4>Lorem ipsum dolor sit.</h4>
  48. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
  49. </div>
  50. <a href="#" class="btn">Go</a>
  51. </div>
  52. <div class="card">
  53. <div class="c-content">
  54. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  55. <h4>Lorem ipsum dolor sit.</h4>
  56. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
  57. </div>
  58. <a href="#" class="btn">Go</a>
  59. </div>
  60. <div class="card">
  61. <div class="c-content">
  62. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  63. <h4>Lorem ipsum dolor sit.</h4>
  64. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis sunt accusantium sit minima exercitationem quia qui sequi iusto, laboriosam amet pariatur voluptates, obcaecati adipisci suscipit, nobis, ut debitis dicta. </p>
  65. </div>
  66. <a href="#" class="btn">Go</a>
  67. </div>
  68. <div class="card">
  69. <div class="c-content">
  70. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  71. <h4>Lorem ipsum dolor sit.</h4>
  72. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
  73. </div>
  74. <a href="#" class="btn">Go</a>
  75. </div>
  76. <div class="card">
  77. <div class="c-content">
  78. <div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
  79. <h4>Lorem ipsum dolor sit.</h4>
  80. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
  81. </div>
  82. <a href="#" class="btn">Go</a>
  83. </div>
  84. <div class="holder">
  85. <div class="item">1</div>
  86. <div class="item">2</div>
  87. <div class="item">3</div>
  88. <div class="item">4</div>
  89. <div class="item">5</div>
  90. </div>
  91. </div>
  92. </section>
  93. <aside class="sidebar left">
  94. <p>Aside1</p>
  95. </aside>
  96. <aside class="sidebar right">
  97. <p>Aside2</p>
  98. </aside>
  99. </main>
  100. <footer class="footer">
  101. <div class="daun">
  102. <a>footer</a>
  103. </div>
  104. </footer>
  105. </div>
  106. </body>
  107. </html>