-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (155 loc) · 7.1 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
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="ru">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/solid.css"
integrity="sha384-uKQOWcYZKOuKmpYpvT0xCFAs/wE157X5Ua3H5onoRAOCNkJAMX/6QF0iXGGQV9cP" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/fontawesome.css"
integrity="sha384-HU5rcgG/yUrsDGWsVACclYdzdCcn5yU8V/3V84zSrPDHwZEdjykadlgI6RHrxGrJ" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="main-block gradient">
<img src="svg/first.svg" id="svg-top-corner" alt="Белый фон">
<div id="header">
<ul class="top-menu">
<li><a href="">Отзывы</a></li>
<li><a href="">Версии</a></li>
<li><a href="">Купить</a></li>
<li><a href="">Что-то</a></li>
</ul>
</div>
<div id="first-text">
<h1 class="white left-align">Pineapple</h1>
<h4 class="white left-align normal-text">Первая в мире по-настоящему<br> умная ручка</h4>
</div>
<div id="first-button">
<button><p class="button-text black">Купить</p></button>
</div>
<img src="img/icon.png" class="icon-top" alt="Иконка">
<div id="pen">
<img src="pineapple.png" class="pen-image" alt="Ручка">
</div>
</div>
<div class="main-block big-block">
<img src="svg/top.svg" class="top-svg">
<img src="svg/bottom.svg" class="bottom-svg">
<div id="second-text">
<h2>Почему Pineapple?</h2>
</div>
<div class="why-cards">
<div class="why-card">
<img src="https://png.icons8.com/windows/96/000000/sign-up.png" class="why-icon">
<h4 class="center-align">Отличный почерк</h4>
<h5 class="normal-text">Pineapple<br> исправляет почерк<br> даже людям с<br> кривыми руками</h5>
</div>
<div class="why-card">
<img src="https://png.icons8.com/windows/96/000000/cloud.png" class="why-icon">
<h4 class="center-align">Заметки в облаке</h4>
<h5 class="normal-text">Теперь все ваши<br> заметки хранятся в<br> облаке и доступны<br> в любое время</h5>
</div>
<div class="why-card">
<img src="https://png.icons8.com/windows/96/000000/erase.png" class="why-icon">
<h4 class="center-align">Исправление ошибок</h4>
<h5 class="normal-text">Pineapple<br> завибрирует, если<br> вы пропустите<br> запятую</h5>
</div>
</div>
</div>
<div class="main-block big-block gradient" id="reviews">
<h2 id="rewiews-label">Отзывы покупателей</h2>
<div id="com-1" class="comment">
<h5 class="left-align white"><i class="fas fa-user"></i> Джонни Кэтсвил</h5>
<h4 class="white normal-text left-align">Покупка Pineapple изменила мою жизнь.<br>
Теперь я могу писать,
не смотря на то, что к меня лапки.</h4>
</div>
<div id="com-2" class="comment">
<h5 class="left-align white"><i class="fas fa-user"></i> Иван Иванов</h5>
<h4 class="white normal-text left-align"> Pineapple - мое лучшее приобретение.<br>
Я наконец смог получить
зачет по русскому.</h4>
</div>
<div id="com-3" class="comment">
<h5 class="left-align white"><i class="fas fa-user"></i> fffd dkkdf </h5>
<h4 class="white normal-text left-align">
Здесь абсолютно комфортно вы можете генерировать<br> тексты-
«рыбы» для решения задач в области макетирования.
</h4>
</div>
</div>
<div class="main-block big-block">
<img src="svg/top.svg" class="top-svg">
<img src="svg/bottom.svg" class="bottom-svg">
<h2 id="types-text">Выбери свою Pineapple</h2>
<div class="cards">
<div class="pen-type">
<h3>Classic</h3>
<h5 class="normal-text">Классическая Pineapple. Ничего лишнего.</h5>
<h3>$99</h3>
<button>
<p class="button-text black">Купить</p>
</button>
</div>
<div class="pen-type">
<h3>Pro</h3>
<h5 class="normal-text">Золотая версия. Для понтов.</h5>
<h3>$299</h3>
<button>
<p class="button-text black">Купить</p>
</button>
</div>
<div class="pen-type" id="pen-type-3">
<h3>Kids</h3>
<h5 class="normal-text">Настроена для школы. Только пятерки!</h5>
<h3>$199</h3>
<button>
<p class="button-text black">Купить</p>
</button>
</div>
</div>
</div>
<div class="main-form gradient" style="margin: -2px; padding: -1px;">
<h2 class="white" style="margin-top: 0px">Купить</h2>
<form>
<label>ИМЯ ФАМИЛИЯ</label><br>
<input type="text" name="name" value="Киря Батькович"><br>
<label>АДРЕС</label><br>
<input type="text" name="adress" value="Москва, улица Уличная, 1"><br>
<label>ТЕЛЕФОН</label><br>
<input type="tel" name="telefon" value="+7-999-787-56-56"><br>
<label>ВЕРСИЯ</label><br>
<select>
<option value="Pineapple Pro">Pineapple Pro</option>
<option value="Pineapple Classic">Pineapple Classic</option>
<option value="Pineapple Kids">Pineapple Kids</option>
</select>
<br>
<input type="button" name="Кнопка" value="Купить" class="button">
</form>
</div>
<footer>
<div id="socseti">
<h4 id="podval-seti">Мы в соцсетях</h4>
<a href="https://ru.linkedin.com/"><img src="footer/in.png" alt="in" class="img-podval"></a>
<a href="https://www.instagram.com/"><img src="footer/inst.png" alt="inst" class="img-podval"></a>
<a href="https://vk.com"><img src="footer/vk.png" alt="vk" class="img-podval"></a>
<a href="https://www.facebook.com/"><img src="footer/facebook.png" alt="facebook" class="img-podval"></a>
</div>
<div id="icon-footer">
<img src="img/for-footer.png" alt="Логотип" id="img-footer">
</div>
<div class="footer-spisok">
<ul id="menu-footer">
<li id="karta">Карта сайта</li>
<li>Почему Pineapple</li>
<li>Отзывы</li>
<li>Версии</li>
<li>Купить</li>
</ul>
</div>
</footer>
</body>
</html>