index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Module</title><link type="text/css" rel="stylesheet" href="style.css" media="all">
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  7. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
  8. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  9. </head>
  10. <body>
  11. <header>
  12. <div class="modul">
  13. Module #1
  14. </div>
  15. <ul class="menu">
  16. <li >
  17. <a href="#" class="in" >Home</a>
  18. </li>
  19. <li>
  20. <a href="#">Downloads</a>
  21. </li>
  22. <li>
  23. <a href="#">Gallery</a>
  24. </li>
  25. <li>
  26. <a href="#">contact us</a>
  27. </li>
  28. <li>
  29. <a href="#">about</a>
  30. </li>
  31. </ul>
  32. </header>
  33. <section class="part2">
  34. <div class="pos_blk">
  35. <h1>A-Level Front-End course</h1>
  36. <p>
  37. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ab dignissimos sit neque, quod itaque, architecto dicta deserunt consequatur veniam assumenda maiores sed expedita labore! Asperiores reiciendis consectetur dolore maiores?
  38. </p>
  39. </div>
  40. </section>
  41. <article class="part3">
  42. <div class="a_block"> <div class="article">
  43. <img src="img/article_image_1.png" alt="#" class="img1">
  44. <h2 class="Layout">HTML Layout Using div Elements</h2>
  45. <ul class="inform">
  46. <li>
  47. April 6, 2015
  48. </li>
  49. <li>
  50. Aigars
  51. </li>
  52. <li>
  53. 15 comments
  54. </li>
  55. </ul>
  56. <p class="main_txt">
  57. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic repudiandae consectetur unde harum quia animi eum, quasi ab officia deleniti voluptatem recusandae tempore numquam, delectus nulla ipsum veritatis labore!
  58. </p>
  59. <a href="#" class="display_a">read more</a>
  60. <img src="img/article_image_2.jpg" alt="figna" class="img1">
  61. <h2 class="Layout">HTML Layout Using div Elements</h2>
  62. <ul class="inform">
  63. <li>
  64. April 6, 2015
  65. </li>
  66. <li>
  67. Aigars
  68. </li>
  69. <li>
  70. 15 comments
  71. </li>
  72. </ul>
  73. <p class="main_txt">
  74. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam explicabo reprehenderit id excepturi, alias molestias aspernatur obcaecati placeat molestiae quae officia ab quod dolorum iure, impedit voluptatum ipsa dignissimos at.
  75. </p>
  76. <a href="#" class="display_a">read more</a>
  77. </div>
  78. <div class="general">
  79. <h2>follow us</h2>
  80. <div class="litter">
  81. <div class="ppl_lt">
  82. <a href="#">
  83. <i class="fa fa-facebook" aria-hidden="true"></i>
  84. </a>
  85. </div>
  86. <div class="ppl_lt">
  87. <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>
  88. </a>
  89. </div>
  90. <div class="ppl_lt">
  91. <a href="#">
  92. <i class="fa fa-youtube" aria-hidden="true"></i>
  93. </a>
  94. </div>
  95. <div class="ppl_lt">
  96. <a href="#">
  97. <i class="fa fa-google" aria-hidden="true"> </i>
  98. </a>
  99. </div>
  100. <div class="ppl_lt"><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a>
  101. </div>
  102. </div>
  103. <h2>resent comments</h2>
  104. <div class="beta">
  105. <div class="alpha">
  106. <div class="ppl_name"> <img src="img/Content.png" alt="" class="comment">
  107. <p class="username">John</p> </div>
  108. <div class="mb_text">Lorem ipsum dolor </div>
  109. </div>
  110. <div class="alpha">
  111. <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
  112. <p class="username">John</p></div>
  113. <div class="mb_text">Lorem ipsum dolor</div>
  114. </div>
  115. <div class="alpha">
  116. <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
  117. <p class="username">John</p>s</div>
  118. <div class="mb_text">Lorem ipsum dolor</div>
  119. </div>
  120. <div class="alpha">
  121. <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
  122. <p class="username">John</p></div>
  123. <div class="mb_text">Lorem ipsum dolor</div>
  124. </div>
  125. <div class="alpha">
  126. <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
  127. <p class="username">John</p></div>
  128. <div class="mb_text">Lorem ipsum dolor</div>
  129. </div>
  130. </div>
  131. <h2>tags</h2>
  132. <div class="smth_wt"><div class="tags1">
  133. <a href="#">tags</a>
  134. <a href="#">tags-tags</a>
  135. <a href="#">tagssd</a>
  136. <a href="#">tags</a>
  137. <a href="#">tags</a>
  138. <a href="#">tagsasdaasdas</a>
  139. <a href="#">tags</a>
  140. <a href="#">tags</a>
  141. <a href="#">tagsasdf</a>
  142. <a href="#">tags</a>
  143. <a href="#">tagsasdf</a>
  144. <a href="#">tagsstags</a>
  145. <a href="#">tags</a>
  146. <a href="#">tags</a>
  147. <a href="#">tags</a>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </article>
  153. <footer>
  154. <ul class="menu">
  155. <li>
  156. <a href="#">Home</a>
  157. </li>
  158. <li>
  159. <a href="#">Downloads</a>
  160. </li>
  161. <li>
  162. <a href="#">Gallery</a>
  163. </li>
  164. <li>
  165. <a href="#">contact us</a>
  166. </li>
  167. <li>
  168. <a href="#">about</a>
  169. </li>
  170. </ul>
  171. <h2>lorem <span>ipsum dolor</span> sit amet</h2>
  172. </footer>
  173. </body>
  174. </html>