-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (195 loc) · 11.5 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Daniel Wellington</title>
<link href="img/favicon.ico" type="image/ico" rel="shortcut icon">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/min.style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<!-- Открыли хедер -->
<div class="header-top">
<div class="layout-center-wrapper clearfix">
<!-- Открыли галвное меню -->
<ul class="top-menu clearfix">
<li class="to-left"><a href="#">О часах</a></li>
<li class="to-left"><a class="main-page" href="#">Модели</a></li>
<li class="to-left" >
<a class="logo-white" href="#"><img src="img/logo-white.png" width="200" height="80" alt="clock-logo"></a>
</li>
<li class="to-left" ><a href="#">Как получить</a></li>
<li class="to-left" ><a href="#">Отзывы</a></li>
</ul>
<!-- Закрыли главное меню -->
<div class="phone-number to-right">+7 (4842) 70-70-70
</div>
</div>
<!--Открыли главное предложение сайта-->
<div class="big-supply">
<div class="layout-center-wrapper clearfix">
<div class="supply-text">
<h1>Часы Daniel wellington
по низкой цене</h1></div>
<a class="btn" href="#">Узнать</a>
</div>
</div>
<!-- Закрыли главное предложение сайта -->
</div>
</header>
<!-- Закрыли хедер -->
<!-- Открыли центровщик -->
<div class="layout-center-wrapper clearfix">
<div class="logo-black"><img src="img/logo-black.png" width="200" height="80" alt="logo-black"></div>
<!-- Открыли главную картинку сайта -->
<div class="main-clock-supply">
<div class="clock-centr">
<img src="img/clock-centr.jpg" width="339" height="608" alt="big clock">
</div>
<div class="features wristlet">
<div class="pic"> <img src="img/features/wristlet.png" width="102" height="102" alt="wristlet"></div>
<h1>Удобный ремешок</h1>
<p>Отличное качество, прочный материал. Ремешек не давит на запястье, не вызывает дискомформа.
</p>
</div>
<div class="wristlet-pointer">
<img src="img/features/wristlet-simbol.png" height="115" width="368" alt="wristlet-simbol">
</div>
<div class="features face-of-watches">
<div class="pic"> <img src="img/features/face-of-watches.png" width="103" height="103" alt="face-of-watches"></div>
<h1>Циферблат</h1>
<p>Яркий, четный циферблат. Хорошо различаются обозначения часа.</p>
</div>
<div class="face-of-watches-pointer">
<img src="img/features/face-of-watches-simbol.png" height="286" width="350" alt="face-of-watches-simbol">
</div>
<div class="features ears">
<div class="pic"><img src="img/features/ears.png" width="104" height="103" alt="ears"></div>
<h1>Ушки</h1>
<p>Крепкие ушки. Выдерживают большую нагрузку. При бережном отношении прослужат вам
<br> долго.
</p>
</div>
<div class="ears-pointer">
<img src="img/features/ears-simbol.png" height="209" width="338" alt="ears-simbol">
</div>
<div class="price-list">
<p class="big-price">1500р</p>
</div>
<a class="btn buy" href="#">Купить</a>
</div>
<!-- Закрыли главную картинку сайта -->
<div class="logo-black second"><img src="img/logo-black.png" width="200" height="80" alt="logo-black"></div>
<!-- Открыли блок выбора часов -->
<div class="choice-clock to-left">
<h2 class="title-choice">Выбери свой стиль</h2>
<div class="watch-of-kind clearfix">
<div class="watch-column to-left">
<img src="img/watch-red.jpg" width="177" height="214" alt="watch-red">
<p>1500 p</p>
<a class="buy-bottom" href="#">Купить</a>
</div>
<div class="watch-column to-left">
<img src="img/watch-white.jpg" width="177" height="214" alt="watch-white">
<p>1500 р</p>
<a class="buy-bottom" href="#">Купить</a>
</div>
<div class="watch-column to-left">
<img src="img/watch-pink.jpg" width="177" height="214" alt="watch-pink">
<p>1500 р</p>
<a class="buy-bottom" href="#">Купить</a>
</div>
</div>
</div>
<!-- Закрыли блок выбора часов -->
</div>
<!-- Закрыли центровщик -->
<div class="layout-center-wrapper clearfix">
<div class="logo-black third"><img src="img/logo-black.png" width="200" height="80" alt="logo-black"></div>
<h3 class="title-instruction">Как получить товар</h3>
<!-- Открыли блок с инструкциями -->
<div class="instruction-block clerfix">
<div class="instruction-block-top clearfix">
<div class="instruction-top to-left">
<p>1.Оставляете заявку</p>
</div>
<div class="instruction-top to-left">
<p>2.Мы звоним вам</p>
</div>
<div class="instruction-top to-left">
<p>3.Отправляем заказ</p>
</div>
</div>
<div class="instruction-block-bottom clearfix">
<div class="instruction-bottom to-left">
<p>4.Вы приходите в почтовое отделение</p>
</div>
<div class="instruction-bottom to-left">
<p>5.Оплачиваете и получаете часы</p>
</div>
</div>
</div>
<!-- Закрыли блок с инструкциями -->
</div>
<div class="layout-center-wrapper clearfix">
<div class="logo-black fourth"><img src="img/logo-black.png" width="200" height="80" alt="logo-black"></div>
<h4 class="title-opinions">Отзывы</h4>
<!-- Открыли блок с отзывами -->
<div class="opinions-block">
<div class="opinions-people">
<div class="opinion-text to-right">
<h5>Андрей Игнашевич</h5>
<p>Очень хорошие часы. Шведское качество. Японский механизм. Цена в пределах нормы.
<br>Очень красивые. Как женские, так и мужские. На любой вкус.Очень доволен часами. Рекомендую!</p>
</div>
<div class="opinion-image"><img src="img/opininons/Andrey.jpg" width="164" height="164" alt="Andrey"></div>
</div>
<div class="opinions-people">
<div class="opinion-text to-right">
<h5>Сергей Федаш</h5>
<p>Эти часы сочетаются со многими стилями, достаточно погуглить и посмотреть в картинках,
<br> что их носят начиная от стиля casual и классики до boho и этно.Словом, они всегда смотрятся
<br> уместно и подчеркнут стиль и вкус хозяина.</p>
</div>
<div class="opinion-image"><img src="img/opininons/Sergey.jpg" width="164" height="164" alt="Sergey"></div>
</div>
<div class="opinions-people">
<div class="opinion-text to-right">
<h5>Ирина Тимохина</h5>
<p>На днях получила часы. Хоть и отправка почтой представлялась долгим процессом, но пришли довольно быстро) Я безумно рада. Качество замечательное. Уверена, что моему молодому человеку понравится) Теперь,наверное, стану вашим постоянным клиентом. Спасибо)</p>
</div>
<div class="opinion-image"><img src="img/opininons/Iren.jpg" width="164" height="164" alt="Iren"></div>
</div>
<div class="extra"><a href="#">показать еще</a></div>
</div>
<!-- Закрыли блок с отзывами -->
</div>
<div class="layout-center-wrapper clearfix">
<div class="logo-black fifth"><img src="img/logo-black.png" width="200" height="80" alt="logo-black"></div>
<h5 class="title-questions">Остались вопросы?</h5>
<div class="questions">
<p class="description">Закажите бесплатный обратный звонок,и мы ответим на все интересующие вас вопросы</p>
<a class="btn-order" href="#">Обратный звонок</a>
</div>
</div>
<!-- Открыли футер -->
<footer>
<div class="layout-center-wrapper clearfix">
<div class="footer-column to-left">
<a href="#"><img src="img/logo-white.png" width="200" height="80" alt="clock-logo"></a>
</div>
<div class="footer-column to-left">
<p class="copy">Copyright 2015</p>
</div>
<div class="footer-column to-right">
<p class="phone-footer">+7 (4842) 70-70-70</p>
</div>
</div>
</footer>
<!-- Закрыли футер -->
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>