-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathpost.html
84 lines (80 loc) · 4.84 KB
/
post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SKYPROGRAM post</title>
<link href="css/styles.min.css" rel="stylesheet">
</head>
<body>
<header class="container header">
<div class="header__wrapper">
<a href="/" class="header__btn-back">
<svg class="header__btn-icon" width="19" height="16">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back"></use>
</svg>
</a>
<a href="/" class="header__logo-link">
<svg class="header__logo" width="64" height="26">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#post"></use>
</svg>
</a>
</div>
</header>
<main class="container">
<section class="items">
<div class="items__item item item--post">
<div class="item__top">
<a href="/user-feed.html" class="item__head">
<div class="item__ava-wrap">
<img src="img/ava1.png" alt="" class="item__ava" width="47">
</div>
<span class="item__username">Username</span>
</a>
<button type="button" class="item__bookmark-btn">
<img src="img/bookmark.png" alt="" class="item__bookmark-icon" width="24">
</button>
</div>
<a href="" class="item__post-link">
<img src="img/post1.jpg" alt="" width="348" class="item__post-img">
</a>
<div class="item__descr">
<p class="item__text">
Закрытые бутерброды пришли к нам из Англии. Вкусные и простые рецепты сэндвичей с фото позволят вам разнообразить завтраки и сделать перекусы более сытными! Они могут быть, как горячими, так и холодными.
</p>
<p class="item__text">
Итальянские закрытые сэндвичи называются панини. Для их приготовления берут чиабатту. В классическом рецепте используют традиционные итальянские продукты: помидоры, базилик, мацареллу.</p>
</div>
<div class="item__bottom">
<div class="item__post-info">
<p class="item__comments-counter">3 комментария</p>
<div class="item__counter">
<img src="img/eye.png" alt="" class="item__counter-icon" width="26">
<span class="item__counter-text">1023</span>
</div>
</div>
<div class="item__comments">
<p class="item__comment">
<b>user 1:</b> комментарий пользователя который его оставил
</p>
<p class="item__comment">
<b>user 2:</b> еще один комментарий
</p>
<p class="item__comment">
<b>user 3:</b> и какой-то коммент еще
</p>
</div>
</div>
</div>
</section>
</main>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="back" viewbox="0 0 19 16" fill="none" width="19" height="16">
<path d="m17.34 6.19.028.006H5.074L8.94 2.322c.19-.189.293-.445.293-.714 0-.269-.104-.523-.293-.713L8.338.294A.997.997 0 0 0 7.628 0a.997.997 0 0 0-.71.293L.293 6.917A.995.995 0 0 0 0 7.63c0 .27.103.524.293.713l6.625 6.625c.189.189.441.293.71.293.269 0 .52-.104.71-.293l.601-.602a.995.995 0 0 0 .293-.71.965.965 0 0 0-.293-.696L5.031 9.064h12.322c.554 0 1.02-.477 1.02-1.03v-.851c0-.554-.48-.994-1.033-.994Z" fill="#000" />
</symbol>
<symbol id="post" viewbox="0 0 64 26" fill="none" width="64" height="26">
<path d="M5.88 25v-8.48h2.208c4.416 0 7.232-2.528 7.232-7.2V8.04C15.32 3.432 12.504 1 8.088 1H.6v24h5.28ZM7.832 5.48c1.536 0 2.432.768 2.432 2.88V9c0 2.176-.896 3.04-2.432 3.04H5.88V5.48h1.952Zm17.257 20c4.864 0 7.84-2.752 7.84-8.32V8.84c0-5.568-2.976-8.32-7.84-8.32s-7.84 2.752-7.84 8.32v8.32c0 5.568 2.976 8.32 7.84 8.32Zm0-4.64c-1.504 0-2.4-.864-2.4-3.52V8.68c0-2.656.928-3.52 2.4-3.52 1.504 0 2.4.864 2.4 3.52v8.64c0 2.656-.896 3.52-2.4 3.52ZM35.243 6.952c0 3.264 1.44 5.184 3.52 6.752l2.56 1.952c1.664 1.28 2.624 2.016 2.624 3.648 0 1.152-.704 1.856-1.888 1.856-1.152 0-1.92-.896-1.92-2.304V17h-5.12v2.08c0 4.128 3.168 6.4 7.04 6.4s7.04-2.24 7.04-6.816c0-3.104-1.536-5.056-3.584-6.592l-2.656-2.048c-1.568-1.184-2.496-1.888-2.496-3.456 0-1.12.704-1.728 1.664-1.728 1.056 0 1.728.704 1.728 2.176V8.68h5.024V6.92c0-4.32-2.976-6.4-6.752-6.4-3.712 0-6.784 1.824-6.784 6.432ZM59.414 25V5.64h3.904V1H50.07v4.64h3.904V25h5.44Z" fill="#000" fill-opacity=".8" />
</symbol>
</svg>
</body>
</html>