index.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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. <link rel="stylesheet" href="style.css">
  8. <title>AnimeFriend</title>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="header">
  13. <div class="header-logo">
  14. <img src="image/header-logo.png" alt="">
  15. </div>
  16. <div class="header-navigation">
  17. <ul class="header-nav-list">
  18. <li class="header-nav-item"><a href="#about-me">О нас</a></li>
  19. <li class="header-nav-item"><a href="#rating">Рейтинг</a></li>
  20. <li class="header-nav-item"><a href="#friend">Друзья</a></li>
  21. <li class="header-nav-item"><a href="#merch">Мерч</a></li>
  22. <li class="header-nav-item"><a href="#servis">Сервис</a></li>
  23. <li class="header-nav-item"><a href="#contacts">Контакты</a></li>
  24. </ul>
  25. </div>
  26. <div class="header-profile">
  27. <a href="">Войти</a>
  28. <img src="image/profile.png" alt="">
  29. </div>
  30. </div>
  31. <div class="main">
  32. <div class="main-text">Привет, давай посмотрим<br>вместе аниме?</div>
  33. </div>
  34. <div class="line"><img src="image/line.png" alt=""></div>
  35. <div class="about-me">
  36. <h1>Почему тебе нужен аниме друг:</h1>
  37. <div class="about-me-subtext">
  38. <img src="image/volunteer.png" alt="">
  39. <p>С нами вы сможете хорошо провести время</p>
  40. </div>
  41. <div class="about-me-subtext">
  42. <img src="image/people.png" alt="">
  43. <p>Найти новых друзей по интересам</p>
  44. </div>
  45. <div class="about-me-subtext">
  46. <img src="image/support.png" alt="">
  47. <p>Вы можете рассказать все что угодно бзе риска быть осужденным</p>
  48. </div>
  49. </div>
  50. <div class="line"><img src="image/line.png" alt=""></div>
  51. <div class="rating">
  52. <h1>Лучшие аниме для совместного просмотра:</h1>
  53. <div class="rating-card-block">
  54. <div class="rating-card">
  55. <img src="image/anime-one-piece.png" alt="" width="420px" height="650px">
  56. <p class="rating-card-title">Ван Пис</p>
  57. <p class="rating-card-subtext">ТВ Сериал<br>1997<br>Драма<br>Комедия</p>
  58. <img src="image/stars.png" alt="">
  59. </div>
  60. <div class="rating-card">
  61. <img src="image/anime-hanter.png" alt="" width="420px" height="650px">
  62. <p class="rating-card-title">Хантер х Хантер</p>
  63. <p class="rating-card-subtext">ТВ Сериал<br>1999<br>Приключения<br>Экшен</p>
  64. <img src="image/stars.png" a lt="">
  65. </div>
  66. <div class="rating-card">
  67. <img src="image/anime-you.png" alt="" width="420px" height="650px">
  68. <p class="rating-card-title">Достучаться до тебя</p>
  69. <p class="rating-card-subtext">ТВ Сериал<br>2009<br>Драма<br>Романтика</p>
  70. <img src="image/stars.png" alt="">
  71. </div>
  72. <div class="rating-card">
  73. <img src="image/anime-fairy.png" alt="" width="420px" height="650px">
  74. <p class="rating-card-title">Фейри Тейл</p>
  75. <p class="rating-card-subtext"> ТВ Сериал<br>2009<br>Комедия<br>Приключения</p>
  76. <img src="image/stars.png" alt="">
  77. </div>
  78. </div>
  79. </div>
  80. <div class="line"><img src="image/line.png" alt=""></div>
  81. <div class="friend">
  82. <h1>Друзья</h1>
  83. <div class="friend-card-block">
  84. <div class="friend-card-one-piece">
  85. <p class="friend-card-title">Юлия Куликова</p>
  86. <p class="friend-card-subtext">27 лет<br>.....</p>
  87. </div>
  88. <div class="friend-card-hanter">
  89. <p class="friend-card-title">Анатолий Варанюк</p>
  90. <p class="friend-card-subtext">25 лет<br>.....</p>
  91. </div>
  92. <div class="friend-card-fairy">
  93. <p class="friend-card-title">Николай Смирнов </p>
  94. <p class="friend-card-subtext">23 лет<br>.....</p>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="line"><img src="image/line.png" alt=""></div>
  99. <div class="merch">
  100. <h1>Мерч</h1>
  101. <div class="card-block">
  102. <div class="card">
  103. <img src="image/T-shirt_hunter.png" alt="">
  104. <div class="card-text">
  105. <p><span>Мужское худи Oversize хлопок</span></p>
  106. <p>Киллуа Золдик Хантер Hunter</p>
  107. <p><span>Артикул:</span> 2832741</p>
  108. <p>в наличии все размеры:</p>
  109. <p><span>X, XS, M, L, XL, XXL</span></p>
  110. <p>Цвет — черный</p>
  111. <img src="image/colors-circles.png" alt="">
  112. <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
  113. хлопок</p>
  114. </div>
  115. <button>Добавить в корзину</button>
  116. </div>
  117. <div class="card">
  118. <img src="image/demon 1.png" alt="">
  119. <div class="card-text">
  120. <p><span>Мужское худи Oversize хлопок</span></p>
  121. <p>Киллуа Золдик Хантер Hunter</p>
  122. <p><span>Артикул:</span> 2832741</p>
  123. <p>в наличии все размеры:</p>
  124. <p><span>X, XS, M, L, XL, XXL</span></p>
  125. <p>Цвет — черный</p>
  126. <img src="image/colors-circles.png" alt="">
  127. <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
  128. хлопок</p>
  129. </div>
  130. <button>Добавить в корзину</button>
  131. </div>
  132. <div class="card">
  133. <img src="image/T-shirt_one-pice.png" alt="">
  134. <div class="card-text">
  135. <p><span>Мужское худи Oversize хлопок</span></p>
  136. <p>Киллуа Золдик Хантер Hunter</p>
  137. <p><span>Артикул:</span> 2832741</p>
  138. <p>в наличии все размеры:</p>
  139. <p><span>X, XS, M, L, XL, XXL</span></p>
  140. <p>Цвет — черный</p>
  141. <img src="image/colors-circles.png" alt="">
  142. <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
  143. хлопок</p>
  144. </div>
  145. <button>Добавить в корзину</button>
  146. </div>
  147. </div>
  148. <div class="card-block">
  149. <div class="card">
  150. <img src="image/figure_nami.png" alt="">
  151. <div class="card-text">
  152. <p><span>Фигурка</span></p>
  153. <p>Кошка воровка нами из аниме One-Piece</p>
  154. <p><span>Артикул:</span> 28327543</p>
  155. <p>Состав: ...</p>
  156. </div>
  157. <button>Добавить в корзину</button>
  158. </div>
  159. <div class="card">
  160. <img src="image/figure_aice.png" alt="">
  161. <div class="card-text">
  162. <p><span>Фигурка</span></p>
  163. <p>Огненый кулак Айс из аниме One-piece</p>
  164. <p><span>Артикул:</span> 283345341</p>
  165. <p>Состав: ...</p>
  166. </div>
  167. <button>Добавить в корзину</button>
  168. </div>
  169. <div class="card">
  170. <img src="image/figure_michouk.png" alt="">
  171. <div class="card-text">
  172. <p><span>Фигурка</span></p>
  173. <p>Соколиный глаз Михоук из аниме One Piece</p>
  174. <p><span>Артикул:</span> 2823441</p>
  175. <p>Состав: ...</p>
  176. </div>
  177. <button>Добавить в корзину</button>
  178. </div>
  179. </div>
  180. <div class="card-block">
  181. <div class="card">
  182. <img src="image/cup-magik.png" alt="">
  183. <div class="card-text">
  184. <p><span>Бутылка спортивная</span></p>
  185. <p>С изображением Саторо Годжо<br>из аниме Magic Battle</p>
  186. <p><span>Артикул:</span> 28327543</p>
  187. <p>Состав: ...</p>
  188. </div>
  189. <button>Добавить в корзину</button>
  190. </div>
  191. <div class="card">
  192. <img src="image/cup-nezuko.png" alt="">
  193. <div class="card-text">
  194. <p><span>Бутылка спортивная</span></p>
  195. <p>С изображением Незуко Комадо<br>из аниме Demon Slayer</p>
  196. <p><span>Артикул:</span> 283345341</p>
  197. <p>Состав: ...</p>
  198. </div>
  199. <button>Добавить в корзину</button>
  200. </div>
  201. <div class="card">
  202. <img src="image/cup-inoske.png" alt="">
  203. <div class="card-text">
  204. <p><span>Бутылка спортивная</span></p>
  205. <p>С изображением Иноске Хашибира<br>из аниме Demon Slayer</p>
  206. <p><span>Артикул:</span> 282344133</p>
  207. <p>Состав: ...</p>
  208. </div>
  209. <button>Добавить в корзину</button>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="line"><img src="image/line.png" alt=""></div>
  214. <div class="contacts-and-servis">
  215. <div class="contacts">
  216. <h1>Контакты</h1>
  217. <p>Если у вас все еще есть<br>
  218. какие-либо вопросы, вы<br>
  219. можете связаться с нами...</p>
  220. <div class="contacts-info">
  221. <div class="info">
  222. <img src="image/phone.png" alt="">
  223. <p>+ 7 977 777 99-99</p>
  224. </div>
  225. <div class="info">
  226. <img src="image/mail.png" alt="">
  227. <p>DjaaanSaaan@gmail.com</p>
  228. </div>
  229. <div class="info">
  230. <img src="image/gps.png" alt="">
  231. <p>Москва, Театральная 1</p>
  232. </div>
  233. </div>
  234. </div>
  235. <div class="servis">
  236. <h1>Сервис</h1>
  237. <div class="servis-form">
  238. <input type="text" placeholder="Имя" class="servis-input"></input>
  239. <input type="text" placeholder="Фамилия" class="servis-input"></input>
  240. <input type="text" placeholder="Телефон" class="servis-input"></input>
  241. <input type="text" placeholder="Email" class="servis-input"></input>
  242. <input type="text" placeholder="Сообщения" class="servis-input-big"></input>
  243. </div>
  244. <button>Отправить</button>
  245. </div>
  246. </div>
  247. </div>
  248. <div class="footer-bg">
  249. <div class="container">
  250. <div class="footer">
  251. <div class="footer-navigation">
  252. <ul class="footer-nav-list">
  253. <li class="footer-nav-item"><a href="#about-me">О нас</a></li>
  254. <li class="footer-nav-item"><a href="#rating">Рейтинг</a></li>
  255. <li class="footer-nav-item"><a href="#friend">Друзья</a></li>
  256. </ul>
  257. <ul class="footer-nav-list">
  258. <li class="footer-nav-item"><a href="#merch">Мерч</a></li>
  259. <li class="footer-nav-item"><a href="#servis">Сервис</a></li>
  260. <li class="footer-nav-item"><a href="#contacts">Контакты</a></li>
  261. </ul>
  262. </div>
  263. <div class="footer-logo">
  264. <img src="image/big-logo.png" alt="">
  265. </div>
  266. <div class="social">
  267. <h1>Контакты</h1>
  268. <div class="social-image">
  269. <img src="image/telegram.png" alt="">
  270. <img src="image/vk.png" alt="">
  271. <img src="image/whatsapp.png" alt="">
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </body>
  278. </html>