-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (156 loc) · 8.2 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
<!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>Project</title>
</head>
<body>
<header class="header">
<div class="container header-container">
<img src="./img/cat.svg" alt="cat" class="logo">
<h1 class="label">Cat house</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">Cats and their amazing skills: from hunting to mystrious abilities</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">Cats in a literature and art: from Egyptian gods to a modern masters</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">Cat breeds for an active owners: how to choose a companion
</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">The most popular cat breeds: which cat suites for you?</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">How to take care of your furry friend: cat care
</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">Fun facts about cats which will surprise you
</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">The history and cultural significance of cats around the world
</h2>
<p class="blog-text">Вивчіть, як коти впливали на культури різних народів та дізнайтеся
історію спільного життя людей і котів.</p>
</div>
</a>
</li>
</ul>
<div class="socials">
<h2 class="socials-title title">Social networks</h2>
<ul class="socials-list">
<li class="socials-item">
<a href="#" class="social-link">
<img src="./img/instagram.svg" 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.svg" 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.svg" 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.svg" 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.svg" 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.svg" alt="twitter" class="social-icon">
<p class="social-subscripers">230.000</p>
</a>
</li>
</ul>
</div>
<div class="video">
<h2 class="video-title title">Video with a furry</h2>
<img src="./img/picture.png" alt="video">
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="container footer-container">
<img src="./img/cat.svg" alt="cat" class="logo">
<h2 class="label">Cat house</h2>
</div>
</footer>
</body>
</html>