-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (120 loc) · 7.12 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Demo psd-to-html project for Oleg Chulakov Studio">
<meta name="author" content="MetromDouble">
<title>x-mmd-acquiring</title>
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="dist/css/common.min.css">
<script src="bower_components/jquery/dist/jquery.min.js" type=text/javascript></script>
<script src="dist/js/common.min.js" type=text/javascript></script>
</head>
<body>
<div class="wrapper">
<!-- sidebar -->
<aside class="sidebar" id="sidebar">
<div class="logo">
<div class="logo__image">
<img src="dist/img/logo.png" alt="">
</div>
</div>
<nav>
<ul class="nav">
<li><a href="#" class="nav__item">Первая ссылка</a></li>
<li><a href="#" class="nav__item nav__item_current-item">Вторая ссылка (активная)</a></li>
<li><a href="#" class="nav__item">Третья ссылка</a></li>
<li><a href="#" class="nav__item nav__item_auth-item">Личный кабинет</a></li>
<li><a href="#" class="nav__item nav__item_auth-item">Выйти</a></li>
</ul>
</nav>
</aside>
<!-- /sidebar -->
<!-- Toggle main menu in mobile view -->
<div class="menu-toggler" id="menu-toggler"></div>
<!-- content -->
<div class="main-content">
<header class="header">
<h1 class="header__title">Заголовок страницы</h1>
<div class="header__text">
В отличие от пылевого и ионного хвостов, направление поступает в лимногляциальный часовой угол
</div>
</header>
<div class="pay">
<div class="pay-screen__info">
<span class="pay-screen__info-text">Информация по оплате:</span><br>
<span class="pay-screen__number">Номер счета:</span>
<span>87123658716587</span><br>
<span class="pay-screen__summ">Сумма платежа:</span>
<span>100 руб.</span><br>
</div>
<!-- cardform -->
<form action="#" class="cardform" id="cardform" method="post">
<div class="cardform__title">Данные банковской карты</div>
<!-- card -->
<div class="card">
<div class="card__front">
<span class="card__text">Номер карты</span>
<div class="card__fields card__fields_cardnumber" id="card-number">
<input type="text" name="cnumber_a" id="cnumber_a">
<input type="text" name="cnumber_b" id="cnumber_b">
<input type="text" name="cnumber_c" id="cnumber_c">
<input type="text" name="cnumber_d" id="cnumber_d">
<div class="card__warning">Вводите только цифры</div>
</div>
<span class="card__text">Срок действия</span>
<div class="card__fields">
<select name="card-month" id="card-month">
<option value="0">01</option>
<option value="1">02</option>
<option value="2">03</option>
<option value="3">04</option>
<option value="4">05</option>
<option value="5">06</option>
<option value="6">07</option>
<option value="7">08</option>
<option value="8">09</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
</select>
<select name="card-year" id="card-year">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
<div class="card__fields card__fields_holder">
<input type="text" id="card-holder">
<div class="card__warning">Вводите только латинские символы</div>
</div>
</div>
</div>
<div class="card__back">
<span class="card__text">Код CVV2 / CVC2 </span>
<div class="card__fields card__fields_back">
<input type="text" id="card-cvv">
<div class="card__hint">3 цифры на обратной стороне карты</div>
<div class="card__warning card__warning_cvv">Вводите только цифры</div>
</div>
</div>
</div>
<!-- /card -->
<button type="button" name="cardform-paybutton" class="cardform__paybutton" id="cardform-paybutton">Оплатить</button>
</form>
<!-- /cardform -->
</div>
<footer class="footer">
<p class="footer__paragraph">Исходя из астатической системы координат Булгакова, соединение стабильно. Краевая часть артезианского бассейна, которая в настоящее время находится ниже уровня моря, ослабляет систематический уход. Лисичка традиционно трансформирует прецессионный годовой параллакс.</p>
<p class="footer__paragraph">Выклинивание абсолютно аккумулирует твердый pадиотелескоп Максвелла.</p>
<p class="footer__paragraph">Алмаз слагает горст. Делювий длительно колеблет лазерный подвижный объект.</p>
<p class="footer__paragraph">Устойчивость, например, параллельна. Аргумент перигелия определяет боксит. Проекция вертикально дает уходящий диабаз. Если пренебречь малыми величинами, то видно, что угол крена покрывает вибрирующий волчок, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники. Засветка неба заставляет иначе взглянуть на то, что такое волчок.</p>
</footer>
</div>
<!-- /content -->
</div>
</body>
</html>