-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (178 loc) · 9.9 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Panakeia</title>
<link rel="stylesheet" href="css/style.min.css">
</head>
<body class="page">
<header class="page-header">
<div class="page-header__container">
<div class="logo">
<a>
<div class="logo__title">Panakeia</div>
<div class="logo__subtitle">Free PSD template</div>
</a>
</div>
<nav class="main-nav page-header__nav">
<ul class="main-nav__list">
<li class="main-nav__item"><a class="main-nav__link" href="#">Fusce at</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#">Facilisis</a></li>
<li class="main-nav__item main-nav__item--current"><a class="main-nav__link main-nav__link--current">Ante donec</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#">Blandit rhoncus</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#">Placerat</a></li>
</ul>
</nav>
</div>
</header>
<main class="main-content">
<section class="intro">
<div class="intro__container">
<h1 class="intro__title">Integer at tortor ut magna <span class="intro__title-addition">finibus lobortis sed quis tellus.</span></h1>
<div class="features">
<h2 class="visually-hidden">Features</h2>
<div class="features__container">
<div class="feature">
<div class="feature__img-container">
<img src="img/feature-1.png" alt="" width="148" height="148">
</div>
<h3 class="feature__title">Tincidunt</h3>
<p class="feature__desc">Phasellus arcu justo, ullamcorper non diam sit amet, luctus condimentum metus. Nullam tempus egestas efficitur. Sed quam dolor.</p>
</div>
<div class="feature">
<div class="feature__img-container">
<img src="img/feature-2.png" alt="" width="148" height="148">
</div>
<h3 class="feature__title">Duis bibendum</h3>
<p class="feature__desc">Ut arcu arcu, faucibus eu risus blandit, pulvinar viverra justo. Phasellus arcu justo, ullamcorper non diam sit amet, luctus condimentum metus. In hac habitasse platea dictumst.</p>
</div>
<div class="feature">
<div class="feature__img-container feature__img-container--narrow">
<img src="img/feature-3.png" alt="" width="147" height="147">
</div>
<h3 class="feature__title">Donec ligula</h3>
<p class="feature__desc">Nullam tempus egestas efficitur. Sed quam dolor, vulputate sed mattis et, sodales quis orci. Ut arcu arcu, faucibus eu risus blandit.</p>
</div>
</div>
<a class="btn features__btn" href="#">Read more</a>
</div>
</div>
</section>
<section class="news">
<div class="news__container">
<h2 class="news__title">Our news</h2>
<div class="news__list">
<div class="news-item">
<div class="news-item__img-container">
<img src="img/news-1.jpg" alt="" width="371" height="254">
</div>
<div class="news-item__desc">
<h3 class="news-item__title">Lorem ipsum</h3>
<p class="news-item__text">Est a elit scelerisque vestibulum. Donec est sem, lobortis sit amet imperdiet vel, pretium lobortis erat. Nulla vitae hendrerit odio.</p>
<a class="btn btn--short news-item__btn" href="#">Read more</a>
</div>
</div>
<div class="news-item">
<div class="news-item__img-container">
<img src="img/news-2.jpg" alt="" width="371" height="254">
</div>
<div class="news-item__desc">
<h3 class="news-item__title">Lorem ipsum</h3>
<p class="news-item__text">Est a elit scelerisque vestibulum. Donec est sem, lobortis sit amet imperdiet vel, pretium lobortis erat. Nulla vitae hendrerit odio.</p>
<a class="btn btn--short news-item__btn" href="#">Read more</a>
</div>
</div>
<div class="news-item">
<div class="news-item__img-container">
<img src="img/news-3.jpg" alt="" width="371" height="254">
</div>
<div class="news-item__desc">
<h3 class="news-item__title">Lorem ipsum</h3>
<p class="news-item__text">Est a elit scelerisque vestibulum. Donec est sem, lobortis sit amet imperdiet vel, pretium lobortis erat. Nulla vitae hendrerit odio.</p>
<a class="btn btn--short news-item__btn" href="#">Read more</a>
</div>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="newsletter__container">
<h2 class="newsletter__title">Newsletter</h2>
<p class="newsletter__desc">Ut arcu arcu, faucibus eu risus blandit, pulvinar viverra justo. Phasellus arcu justo, ullamcorper non diam sit amet, luctus condimentum metus</p>
<form class="newsletter__form" action="#" method="post">
<input class="newsletter__email-field" type="email" name="email" placeholder="email address">
<input class="btn newsletter__btn" type="submit" value="Sign up">
</form>
</div>
</section>
<section class="feedback">
<div class="feedback__container">
<h2 class="visually-hidden">Feedback</h2>
<form class="feedback__form" method="post">
<div class="feedback__form-container">
<div class="feedback__desc">
<h3 class="feedback__subtitle">Ipsum dolor sit amet</h3>
<p class="feedback__text">Nam accumsan nunc sit amet elementum sollicitudin. Integer vel lacus eget tortor lobortis tincidunt sed eu dolor. Phasellus cursus augue ac pulvinar cursus.</p>
<p class="feedback__text">Quisque ut erat ornare, feugiat turpis a, fringilla felis. Nulla molestie lorem et orci sagittis, et accumsan ex porta.</p>
<input class="btn btn--red feedback__btn" type="submit" value="Sign up">
</div>
<div class="feedback__text-field">
<textarea class="feedback__text-field-input" name="feedback-first" cols="30" rows="10"></textarea>
</div>
</div>
<div class="feedback__form-container">
<div class="feedback__text-field">
<textarea class="feedback__text-field-input" name="feedback-second" cols="30" rows="10"></textarea>
</div>
<div class="feedback__desc">
<h3 class="feedback__subtitle">Ipsum dolor sit amet</h3>
<p class="feedback__text">Nam accumsan nunc sit amet elementum sollicitudin. Integer vel lacus eget tortor lobortis tincidunt sed eu dolor. Phasellus cursus augue ac pulvinar cursus.</p>
<p class="feedback__text">Quisque ut erat ornare, feugiat turpis a, fringilla felis. Nulla molestie lorem et orci sagittis, et accumsan ex porta.</p>
<input class="btn btn--blue feedback__btn" type="submit" value="Sign up">
</div>
</div>
</form>
</div>
</section>
</main>
<footer class="page-footer">
<div class="ad-links">
<div class="ad-links__container">
<ul class="ad-links__list">
<li class="ad-links__item"><a class="ad-links__link" href="#">Ad litora torquent</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Per conubia</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Nostra</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Per inceptos</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Himenaeos</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">In consectetur</a></li>
</ul>
<ul class="ad-links__list">
<li class="ad-links__item"><a class="ad-links__link" href="#">Taciti sociosqu</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Ad litora torquent</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Per conubia</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Himenaeos</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">In consectetur</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Nisi sed blandit</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Tincidunt</a></li>
</ul>
<ul class="ad-links__list">
<li class="ad-links__item"><a class="ad-links__link" href="#">Nostra</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Per inceptos</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Himenaeos</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">In consectetur</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Nisi sed blandit</a></li>
<li class="ad-links__item"><a class="ad-links__link" href="#">Tincidunt</a></li>
</ul>
</div>
</div>
<div class="copyright">
<div class="copyright__container">
<p class="copyright__text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="dev-logo copyright__logo">
<a href="https://ddyst.github.io/" target="_blank">DDyst</a>
</div>
</div>
</div>
</footer>
</body>
</html>