-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (139 loc) · 7.03 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
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Храните деньги в банке</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"><!-- подкючаем шрифт "Roboto" с сайта "fonts.google.com"-->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header-wrap">
<div class="logo">ЗАО "ББ Банк"</div>
<nav class="nav">
<a href="#" class="nav__link">Банки</a><!-- тег "а" от англ "anchor" -->
<a href="#" class="nav__link">Чулки</a>
<a href="#" class="nav__link">Под подушкой</a>
<a href="#" class="nav__link">Страховка</a>
<a href="#" class="nav__link">Кэшбек</a>
</nav>
<a href="#" class="login">Войти</a>
</div><!-- header-wrap -->
</div>
</header>
<section>
<div class="container">
<div class="tabs">
<h1 class="tabs-logo">Banka Bank</h1>
<ul class="tabs-menu"><!-- тег "ul" создаем список -->
<li class="tabs-menu__item">Обзор</li><!-- тег "li" элементы списка -->
<li class="tabs-menu__item">Примеры</li>
<li class="tabs-menu__item">Документы</li>
<li class="tabs-menu__item">Как пользоваться</li>
</ul>
</div><!-- /tabs -->
<div class="tabs-content">
<h2 class="tabs-content__title">Храните деньги в банке. <br><!-- <br> - перенос строки -->Это надежно и безопасно.</h2>
<p class="tabs-content__text">Вы можете быть уверены, что ваши деньги в надежном месте, если они в трехлитровой банке.</p>
<button class="button">Заказать банку</button>
</div>
</div><!-- /container -->
</section>
<section class="features">
<div class="container">
<h2 class="section-title section__title">Трёхлитровая банка с двойным дном</h2>
<div class="card card-full card_bottom">
<h3 class="card__title">Часть денег проваливается на дно</h3>
<p class="card__text">К концу месяца у вас накапливается сумма равная 10% от всех пополнений. Можно смело тратить их на МЕЧТУ!</p>
</div>
<div class="card-wrap">
<div class="card section__card">
<h3 class="card__title">Деньги дома</h3>
<p class="card__text">Когда дентги лежат дома, у вас просто нет возможности потратить их на всякую ерунду</p>
</div>
<div class="card section__card">
<h3 class="card__title">Без комиссии</h3>
<p class="card__text">Пополняйте банку без комиссии. Доставать деньги можно так же без комиссии и штрафов</p>
</div>
<div class="card section__card">
<h3 class="card__title">Копейка рубль бережет</h3>
<p class="card__text">Вы можете бросать в банку даже мелочь, которая лежала в кармане после покупок.</p>
</div>
</div>
</div>
</section>
<section class="best">
<div class="container">
<h2 class="section-title best__title">Лучшая банка в мире</h2>
<span class="section-subtitle best__subtitle">По версии мамы, бабушки и тёти</span>
<div class="card-wrap best__card-wrap">
<div class="card-block best__card-block">
<div class="card best-card">
<img src=styles\image\bank_paper.png alt="" class="best-card__image">
</div>
<p class="best-card__text">Контролируйте доходы, на банке есть бумажка</p>
</div>
<div class="card-block best__card-block">
<div class="card best-card">
<img src=styles\image\hammer.png alt="" class="best-card__image">
</div>
<p class="best-card__text">Молоточек для самых важных случаев</p>
</div>
<div class="card-block best__card-block">
<div class="card best-card">
<img src=styles\image\bank_hand.png alt="" class="best-card__image__right">
</div>
<p class="best-card__text">Пополнение одним легким движением руки</p>
</div>
<div class="card-block best__card-block">
<div class="card best-card best-card__image__center">
<!-- <img src="https://i.imgur.com/fw19w7u.png" alt="" class="best-card__image__center"> -->
</div>
<p class="best-card__text">Одна банка - сколько угодно валют</p>
</div>
</div>
</div>
</section>
<section class="delivery">
<div class="container">
<h2 class="section-title">Получите банку, не выходя из дома</h2>
<form action="#" class="form delivery__form">
<div class="row">
<div class="col-100"><!-- создаем колонку которая должна будет занимать 100% ширины -->
<input type="text" class="input form__input" placeholder="Фамилия Имя Отчество">
</div>
</div>
<div class="row">
<div class="col-50">
<input type="tel" class="input form__input" placeholder="Номер телефона">
</div>
<div class="col-50">
<input type="email" class="input form__input" placeholder="Электронная почта">
</div>
</div>
<div class="row">
<div class="col-100">
<input type="text" class="input form__input" placeholder="Дата рождения" onfocus="(this.type='date')" onblur="(this.type='text')"><!-- через свойства onfocus и onblur переключаем тип поля -->
</div>
</div>
<div class="button-block">
<button type="submit" class="button">Заказать банку</button>
</div>
</form>
</div>
</section>
<footer class="footer">
<div class="container">
<p class="footer-text">
Все названия на этом сайте вымышлены и совпадения случайны. Информация представлена исключительно в образовательных целях. Сайт не является оффертой или рекламным предложением.
</p>
</div>
</footer>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>