forked from coderiver/frontcom
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathstylecard.html
281 lines (257 loc) · 11.3 KB
/
stylecard.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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!doctype html>
<!--[if lte IE 8]><html lang="ru-RU" class="lteie8"><![endif]-->
<!--[if gt IE 8]><!--><html lang="ru-RU"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" media="screen" href="css/screen.css" >
<script src="js/html5.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.carouFredSel-6.1.0.js"></script>
<script src="js/common.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<!-- BEGIN .header -->
<header class="header">
<strong class="logo">
<a href="#">FRONTCOM Frontline communication</a>
</strong>
<div class="contact-phone">+ 7 495 <span>545 47 68</span></div>
<nav>
<ul class="nav">
<li><a href="#">Компания</a></li>
<li class="active"><a href="#">Деятельность</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Проекты</a></li>
<li><a href="#">Отрасли</a></li>
<li><a href="#">Контактная информация</a></li>
</ul>
</nav>
</header>
<!-- END .header -->
<!-- BEGIN .banner -->
<div class="banner_sub">
<img src="img/banner-002.jpg" alt="" class="banner__img">
<div class="in">
<strong class="banner__sub-title"><a href="#"><i class="title-arr"></i>Новости</a></strong>
<p><a href="#">ВСе СОБЫТИЯ ВОКРУГ FRONTCOM</a></p>
</div>
</div>
<!-- END .banner -->
<!-- BEGIN .main -->
<div class="main">
<div class="l">
<div class="l-col1_b">
<!-- BEGIN .accos -->
<ul class="accos">
<li class="active"><a href="#">Cтруктурированные<br>кабельные сети</a></li>
<li><a href="#">Локально-вычислительные сети</a></li>
<li><a href="#">Беспроводные сети</a></li>
<li><a href="#">Бизнес приложения</a></li>
<li>
<a href="#">Территориально-<br>распределенные сети</a>
<ul class="accos__lvl-2">
<li class="active"><a href="#">Второй уровень меню</a></li>
<li>
<a href="#">Еще одна строка меню</a>
<ul class="accos__lvl-3">
<li><a href="#">Третий уровень меню</a></li>
<li class="active"><a href="#">Одна строка меню</a></li>
</ul>
</li>
<li><a href="#">Одна строка меню</a></li>
</ul>
</li>
<li><a href="#">Видеоконференцсвязь</a></li>
<li><a href="#">Сервера и системы<br>хранения данных, ЦОД</a></li>
<li><a href="#">Создание комплексной<br>инженерной инфраструктуры<br>здания</a></li>
<li><a href="#">Комплексная поддержка<br>ИТ инфраструктуры</a></li>
<li><a href="#">Web интерграция<br>Облачные сервисы</a></li>
<li><a href="#">IP телефония</a></li>
</ul>
<!-- END .accos -->
<!-- BEGIN .adv -->
<div class="adv">
<div class="adv__img">
<img src="http://placehold.it/232x212" alt="">
</div>
<div class="adv__inf">
<a href="#">Рекламный <br>баннер Segoe UI <br>20 pt (# ffffff)</a>
</div>
</div>
<!-- END .adv -->
</div>
<div class="l-col2_b">
<ul class="bc">
<li><a href="#">Главная</a></li>
<li><a href="#">Segoe UI Light 12 pt (# 959ca1)</a></li>
<li class="active"><a href="#">Segoe UI Light 12 pt (# 00a4e4)</a></li>
</ul>
<!-- BEGIN .text-block -->
<div class="text-block">
<h1>Заголовок 1 уровня Segoe UI Light 35 (#29292a)</h1>
<h2>Заголовок 2 уровня Segoe UI Regular 26 pt (# 29292a)</h2>
<h3>ЗАГОЛОВОК 3 УРОВНЯ SEGOE UI REGULAR CAPS 16 PT (# 00a4e4)</h3>
<h4>Заголовок 4 уровня Segoe UI Semibold 17 pt (# 363636) </h4>
<p>Текстовый блок Segoe UI Regular 14 pt (# 29292a) <br>Задумывались ли вы, как часто ваши сотрудники спотыкаются о лежащие на полу провода компьютерных сетей? Как часто монтажники рвут линии сетей при подключении лампочки, а специалисты по ИТ занимаются починкой оторвавшихся розеток – вместо того чтобы решать более важные задачи?</p>
<figure>
<img src="http://placehold.it/736x369" alt="">
<figcaption>Текст под иллюстрацией Segoe UI Italic 13 pt (# 959ca1)</figcaption>
</figure>
<ul>
<li>Текстовое перечисление Segoe UI 14 pt (# 959ca1) В информационной системе компании не происходит технических сбоев и аварий, вызванных тем, что провода и розетки расположены неэргономично и неправильно.</li>
<li>Ваши сотрудники заняты решением своих рабочих вопросов, а не мыслями о том, «как бы это сделать, ничего не повредив» - что, вне всяких сомнений, сказывается на эффективности их труда.</li>
</ul>
<blockquote>Выделенный текстовый блок Segoe UI Regular 14 pt (# 29292a) <br> Задумывались ли вы, как часто ваши сотрудники спотыкаются о лежащие на полу провода компьютерных сетей? Как часто монтажники рвут линии сетей при подключении лампочки, а специалисты по ИТ занимаются починкой оторвавшихся розеток – вместо того чтобы решать более </blockquote>
<h4>Кнопки</h4>
<button class="btn_b">Кнопка</button>
<button class="btn_b_sm">Кнопка</button>
<button class="btn_bw">Кнопка</button>
<button class="btn_bw_sm">Кнопка</button>
<button class="btn_g">Кнопка</button>
<button class="btn_g_sm">Кнопка</button>
<button class="btn_gw">Кнопка</button>
<button class="btn_gw_sm">Кнопка</button>
<h4>Пример таблицы</h4>
<div class="note">
Выделенный текстовый блок Segoe UI Bold 14 pt (# 29292a) Тогда приведите в порядок вашу кабельную сеть (СКС)!
</div>
<table class="t">
<tr>
<th>Тип</th>
<th>Колличество</th>
<th>Название проекта</th>
<th>Описание</th>
<th>№</th>
</tr>
<tr>
<td>Проект</td>
<td>Одна штука</td>
<td>Гиппербаллоид</td>
<td>Грандиозный проект</td>
<td>1</td>
</tr>
<tr>
<td>Проект</td>
<td>Одна штука</td>
<td><a href="#">Арканоид</a></td>
<td>Супер игра</td>
<td>2</td>
</tr>
<tr>
<td>Соглашение</td>
<td>Нет</td>
<td>Призма</td>
<td>Проект<br> вторая строка</td>
<td>3</td>
</tr>
<tr>
<td>Акт</td>
<td>Одна штука</td>
<td>Работа</td>
<td>Прием-передача</td>
<td>4</td>
</tr>
<tr class="t_mark">
<td>Акт</td>
<td>Одна штука</td>
<td>Работа</td>
<td>Прием-передача</td>
<td>5</td>
</tr>
</table>
<h4>Иконки</h4>
<div>
<span class="icon-doc"></span>
<span class="icon-pdf"></span>
<span class="icon-ppt"></span>
<span class="icon-xls"></span>
<span class="icon-left"></span>
<span class="icon-bottom"></span>
</div>
<div class="doc-linc">
<span class="icon-d"></span>
<a href="#">Название файла</a>
<span>(300 kb)</span>
</div>
<div>
<span class="icon-doc_a"></span>
<span class="icon-pdf_a"></span>
<span class="icon-ppt_a"></span>
<span class="icon-xls_a"></span>
<span class="icon-left_a"></span>
<span class="icon-bottom_a"></span>
</div>
<div class="doc-linc_a">
<span class="icon-d_a"></span>
<a href="#">Название файла</a>
<span>(300 kb)</span>
</div>
<h4>Форма заполнения</h4>
<form action="" class="form">
<div class="row">
<label for="">Ф.И.О.:</label>
<input type="text" class="input" value="Нейтралльный текст Segoe UI 13 pt (#959ca1)">
</div>
<div class="row">
<label for="">e-mail:</label>
<input type="text" class="input" value="Выделенный текст Segoe UI 13 pt (#00a4e4)">
</div>
<div class="row">
<label for="">Тема:</label>
<input type="text" class="input_b" value="Название Segoe UI Bold 13 pt (#959ca1)">
</div>
<div class="row">
<label for="">Сообщение:</label>
<textarea name="" id="" cols="30" rows="10" class="input_textarea">Нейтралльный текст Segoe UI 13 pt (#959ca1)</textarea>
</div>
</form>
<h4></h4>
<div class="progect">
<div class="progect__img">
<img src="http://placehold.it/316x107" alt="">
</div>
<div class="progect__inf">
<h2><a href="#">Название Segoe UI 20 pt (# ffffff)</a></h2>
<p>Описание текст Segoe UI 13 pt (# ffffff) Успешный проект онлайн стратегии Angry Frontcom. Проект реализован совместно
с компанией Rovio. </p>
</div>
</div>
</div>
<!-- END .text-block -->
</div>
</div>
</div>
<!-- END .main -->
<!-- BEGIN .footer -->
<footer class="footer">
<div class="footer__top">
<nav class="footer__nav">
<ul>
<li><a href="#">Компания</a></li>
<li><a href="#">Деятельность</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Проекты</a></li>
<li><a href="#">Отрасли</a></li>
<li><a href="#">Контактная информация</a></li>
</ul>
</nav>
<a href="#" class="footer__top-link"><i class="arr-top"></i>Наверх</a>
</div>
<div class="footer__bottom">
<div class="footer__left">
<div class="contact-phone_sm">+7 495 <span>545 47 68</span></div>
<span class="dotted">1-й Вязовский проезд, д. 5, стр. 1</span>
<span>Москва, 109428 Россия</span>
<a href="#">[email protected]</a>
</div>
<div class="footer__right">
<span>Разработка сайта:</span>
<strong class="logo-gray"><a href="#">frontcom</a></strong>
<p>© 2012 Frontline Communications | <a href="#">Использование информации</a></p>
</div>
</div>
</footer>
</body>
</html>