-
Notifications
You must be signed in to change notification settings - Fork 0
/
info.html
175 lines (165 loc) · 12.2 KB
/
info.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Fonts -->
<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;500;600;700&display=swap" rel="stylesheet" />
<!-- CSS styles -->
<link rel="stylesheet" href="css/style.css" />
<title>Info page</title>
</head>
<body>
<div class="wrapper">
<header class="product-header">
<div class="container">
<div class="product-header__inner">
<a class="logo" href="#">
<picture>
<source srcset="img/logo.svg" media="(min-width: 1280px)" />
<img src="img/logo-mobile.svg" alt="logo" />
</picture>
</a>
<a class="product-header__btn btn--dark" href="#"> Book call </a>
</div>
</div>
</header>
<main class="main">
<section class="info">
<div class="container">
<div class="info__inner">
<div class="info__buttons">
<button class="info__btn" data-tab="#tab-1" type="button">
Private policy
</button>
<button class="info__btn" data-tab="#tab-2" type="button">
Terms and conditions
</button>
<button class="info__btn" data-tab="#tab-3" type="button">
Payment
</button>
</div>
<div class="info__content">
<div class="info__item" id="tab-1">
<h3 class="info__item-title">
Private policy
</h3>
<div class="info__item-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna velit viverra vestibulum lorem in amet aliquam. Velit arcu orci amet, nascetur. Nisi, enim turpis dolor nunc in tortor ut. Urna ultrices blandit vulputate urna sed vel. Faucibus in ultrices interdum turpis platea. Morbi turpis velit sapien malesuada orci malesuada consequat urna fringilla. Pellentesque tincidunt sem sagittis amet proin quis cursus facilisis sit. Semper sit posuere dui quis egestas interdum aliquam. Facilisi eleifend turpis gravida phasellus scelerisque sed facilisi orci. Augue vitae mauris, in urna eu. Tincidunt aliquet cras magna sodales diam dictumst diam. Malesuada malesuada ac iaculis lorem in quam accumsan vitae. Iaculis varius blandit nibh ac augue senectus tincidunt sit nisl. Laoreet ipsum amet, donec euismod arcu viverra nec enim ac.
</p>
<p>
Id tempor turpis aliquet pulvinar vitae eu. Donec in ut nam imperdiet mauris non. Sed vitae mattis porta nibh neque tristique. Arcu duis pellentesque pulvinar eu turpis elit, nullam. Condimentum odio dui at cras commodo viverra nunc. Pharetra sed ultrices sit fermentum, amet, dui. Cursus sit sagittis sed vivamus tortor et ullamcorper nulla. Pellentesque bibendum adipiscing interdum leo diam dignissim auctor ullamcorper.
</p>
<p>
Ultrices sed in dis volutpat libero. Sit et lectus ipsum nunc, dignissim. In ut quis odio pellentesque urna. Blandit a netus tristique tortor fermentum, ante nascetur donec. Orci, purus vitae laoreet suspendisse faucibus quam. Mi faucibus dui donec id tellus. Massa sagittis lectus libero turpis neque. Erat at urna lorem sed sed. Nulla sed facilisi scelerisque duis. Nunc eu suspendisse fusce venenatis nisi.
</p>
<p>
\Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna velit viverra vestibulum lorem in amet aliquam. Velit arcu orci amet, nascetur. Nisi, enim turpis dolor nunc in tortor ut. Urna ultrices blandit vulputate urna sed vel. Faucibus in ultrices interdum turpis platea. Morbi turpis velit sapien malesuada orci malesuada consequat urna fringilla. Pellentesque tincidunt sem sagittis amet proin quis cursus facilisis sit. Semper sit posuere dui quis egestas interdum aliquam. Facilisi eleifend turpis gravida phasellus scelerisque sed facilisi orci. Augue vitae mauris, in urna eu.
</p>
</div>
</div>
<div class="info__item" id="tab-2">
<h3 class="info__item-title">
Terms and conditions
</h3>
<div class="info__item-content">
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Пояс предупреждал точках текстов осталось взгляд языкового, рукописи грустный дал? Собрал пор правилами осталось заголовок, за, жизни, даль взобравшись все путь имени букв гор языкового грустный знаках коварный семь что приставка. Журчит вдали ее семь алфавит моей безорфографичный, грамматики рыбными раз агентство? Они, вопрос последний свою всемогущая лучше журчит эта.
</p>
<p>
Id tempor turpis aliquet pulvinar vitae eu. Donec in ut nam imperdiet mauris non. Sed vitae mattis porta nibh neque tristique. Arcu duis pellentesque pulvinar eu turpis elit, nullam. Condimentum odio dui at cras commodo viverra nunc. Pharetra sed ultrices sit fermentum, amet, dui. Cursus sit sagittis sed vivamus tortor et ullamcorper nulla. Pellentesque bibendum adipiscing interdum leo diam dignissim auctor ullamcorper.
</p>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Всемогущая семантика оксмокс единственное рекламных по всей рыбными, жизни ему напоивший свой, выйти lorem снова. Алфавит единственное его подзаголовок журчит, имеет вопрос, своего страну рукописи, курсивных пор безорфографичный заманивший взгляд вершину?
</p>
<p>
\Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna velit viverra vestibulum lorem in amet aliquam. Velit arcu orci amet, nascetur. Nisi, enim turpis dolor nunc in tortor ut. Urna ultrices blandit vulputate urna sed vel. Faucibus in ultrices interdum turpis platea. Morbi turpis velit sapien malesuada orci malesuada consequat urna fringilla. Pellentesque tincidunt sem sagittis amet proin quis cursus facilisis sit. Semper sit posuere dui quis egestas interdum aliquam. Facilisi eleifend turpis gravida phasellus scelerisque sed facilisi orci. Augue vitae mauris, in urna eu.
</p>
</div>
</div>
<div class="info__item" id="tab-3">
<h3 class="info__item-title">
How payment is made
</h3>
<div class="info__item-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna velit viverra vestibulum lorem in amet aliquam. Velit arcu orci amet, nascetur. Nisi, enim turpis dolor nunc in tortor ut. Urna ultrices blandit vulputate urna sed vel. Faucibus in ultrices interdum turpis platea. Morbi turpis velit sapien malesuada orci malesuada consequat urna fringilla. Pellentesque tincidunt sem sagittis amet proin quis cursus facilisis sit. Semper sit posuere dui quis egestas interdum aliquam. Facilisi eleifend turpis gravida phasellus scelerisque sed facilisi orci. Augue vitae mauris, in urna eu. Tincidunt aliquet cras magna sodales diam dictumst diam. Malesuada malesuada ac iaculis lorem in quam accumsan vitae. Iaculis varius blandit nibh ac augue senectus tincidunt sit nisl. Laoreet ipsum amet, donec euismod arcu viverra nec enim ac.
</p>
<p>
Id tempor turpis aliquet pulvinar vitae eu. Donec in ut nam imperdiet mauris non. Sed vitae mattis porta nibh neque tristique. Arcu duis pellentesque pulvinar eu turpis elit, nullam. Condimentum odio dui at cras commodo viverra nunc. Pharetra sed ultrices sit fermentum, amet, dui. Cursus sit sagittis sed vivamus tortor et ullamcorper nulla. Pellentesque bibendum adipiscing interdum leo diam dignissim auctor ullamcorper.
</p>
<p>
Ultrices sed in dis volutpat libero. Sit et lectus ipsum nunc, dignissim. In ut quis odio pellentesque urna. Blandit a netus tristique tortor fermentum, ante nascetur donec. Orci, purus vitae laoreet suspendisse faucibus quam. Mi faucibus dui donec id tellus. Massa sagittis lectus libero turpis neque. Erat at urna lorem sed sed. Nulla sed facilisi scelerisque duis. Nunc eu suspendisse fusce venenatis nisi.
</p>
<p>
\Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna velit viverra vestibulum lorem in amet aliquam. Velit arcu orci amet, nascetur. Nisi, enim turpis dolor nunc in tortor ut. Urna ultrices blandit vulputate urna sed vel. Faucibus in ultrices interdum turpis platea. Morbi turpis velit sapien malesuada orci malesuada consequat urna fringilla. Pellentesque tincidunt sem sagittis amet proin quis cursus facilisis sit. Semper sit posuere dui quis egestas interdum aliquam. Facilisi eleifend turpis gravida phasellus scelerisque sed facilisi orci. Augue vitae mauris, in urna eu.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer footer-info">
<div class="container">
<div class="footer__bottom">
<a class="logo footer__logo" href="#">
<picture>
<source srcset="img/logo.svg" media="(min-width: 1280px)" />
<img src="img/logo-mobile.svg" alt="logo" />
</picture>
</a>
<div class="footer__info-wrapper">
<div class="footer__info">
<p class="footer__info-title">Info</p>
<ul class="footer__info-list">
<li class="footer__info-item">
<a class="footer__info-link" href="#"> Private policy </a>
</li>
<li class="footer__info-item">
<a class="footer__info-link" href="#"> Terms and conditions </a>
</li>
<li class="footer__info-item">
<a class="footer__info-link" href="#"> Payment </a>
</li>
</ul>
</div>
<div class="footer__info">
<p class="footer__info-title">Contacts</p>
<ul class="footer__info-list">
<li class="footer__info-item">
<a class="footer__info-link" href="mailto:[email protected]">
</a>
</li>
<li class="footer__info-social-item">
<a class="footer__info-social-link" href="#">
<img src="img/facebook-icon.svg" alt="facebook" />
Facebook
</a>
</li>
<li class="footer__info-social-item">
<a class="footer__info-social-link" href="#">
<img src="img/twitter-icon.svg" alt="twitter" />
Twitter
</a>
</li>
</ul>
</div>
</div>
<a class="footer__btn btn--dark" href="#"> Book call </a>
</div>
<div class="footer__copy">
® 2021 Copyright. All rights reserved
</div>
</div>
</footer>
</div>
<script src="js/main.js"></script>
</body>
</html>