-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (162 loc) · 8.77 KB
/
index.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Cat House</title>
</head>
<body>
<header class="header">
<div class="container header-container">
<img src="./img/cat.svg" alt="cat" class="logo">
<h1 class="label">Котодім</h1>
</div>
</header>
<main class="main">
<div class="container">
<ul class="posts">
<li class="post">
<a href="#">
<picture>
<!-- For viewports wider than 768px -->
<source media="(min-width: 768px)" srcset="./img/picture-1.png">
<!-- For viewports between 320px and 768px -->
<source media="(min-width: 320px) and (max-width: 767px)" srcset="./img/picture-1-small.png">
<!-- Fallback content -->
<img src="./img/picture-1-small.png" alt="Description of Image">
</picture>
<div class="overlay">
<h2 class="post-title sub-title">Коти та їхні чудові навички: від полювання до загадкових
здібностей</h2>
</div>
</a>
</li>
<li class="post">
<a href="#">
<img src="./img/picture-2.png" alt="scary kitten" class="post-img">
<div class="overlay">
<h2 class="post-title sub-title">Коти в літературі та мистецтві: від Егіпетських богів до
сучасних
майстрів</h2>
</div>
</a>
</li>
<li class="post">
<a href="#">
<img src="./img/picture-3.png" alt="cat" class="post-img">
<div class="overlay">
<h2 class="post-title sub-title">Котячі породи для активних власників: як вибрати
компаньйона
</h2>
</div>
</a>
</li>
</ul>
<section class="longread">
<ul class="blog">
<li class="blog-item">
<a href="#" class="blog-link">
<img src="./img/1.png" alt="cat" class="blog-photo">
<div class="wrapper">
<h2 class="blog-title sub-title">Забавні факти про котів, які вас здивують</h2>
<p class="blog-text">Веселі та цікаві факти про котів, які піднімуть вам настрій та
розкажуть про їхні унікальність.</p>
</div>
</a>
</li>
<li class="blog-item">
<a href="#" class="blog-link">
<img src="./img/2.png" alt="cats" class="blog-photo">
<div class="wrapper">
<h2 class="blog-title sub-title">Найпопулярніші породи котів: який кіт підходить вам?
</h2>
<p class="blog-text">Вивчіть найпопулярніші породи котів і їхні особливості, щоб зробити
інформований вибір, який підходить саме вам.</p>
</div>
</a>
</li>
<li class="blog-item">
<a href="#" class="blog-link">
<img src="./img/4.png" alt="red-cat" class="blog-photo">
<div class="wrapper">
<h2 class="blog-title sub-title">Як піклуватися про вашого пухнастого друга: догляд за
котом
</h2>
<p class="blog-text">Дізнайтеся про основні аспекти догляду за котом, включаючи
годування,
гігієну та взаємодію з вашим улюбленцем.</p>
</div>
</a>
</li>
<li class="blog-item">
<a href="#" class="blog-link">
<img src="./img/3.png" alt="red-cat" class="blog-photo">
<div class="wrapper">
<h2 class="blog-title sub-title">Історія та культурна значущість котів в усьому світ
</h2>
<p class="blog-text">Вивчіть, як коти впливали на культури різних народів та дізнайтеся
історію спільного життя людей і котів.</p>
</div>
</a>
</li>
</ul>
<div class="socials">
<h2 class="socials-title title">Соцмережі</h2>
<ul class="socials-list">
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/instagram.png" alt="instagram" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/facebook.png" alt="facebook" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/youtube.png" alt="youtube" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/tiktok.png" alt="tiktok" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/github.png" alt="github" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/twitter.png" alt="twitter" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
</ul>
</div>
<div class="video">
<h2 class="video-title title">Відео з пухнастиком</h2>
<img src="./img/picture.png" alt="video">
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="container">
<img src="./img/cat.svg" alt="cat" class="logo">
<h2 class="label">Котодім</h2>
</div>
</footer>
</body>
</html>