-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (222 loc) · 11.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>German Novikov</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./img/gallery/fav.svg">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(93977879, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/93977879" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
<div class="container">
<input type="checkbox" id="hamburger-input" class="burger-shower" />
<label id="hamburger-menu" for="hamburger-input">
<nav id="sidebar-menu">
<h3>Меню</h3>
<ul>
<li><a href="#aboutme">Обо мне</a></li>
<li><a href="./expand/index.html">Работы</a></li>
<li><a href="#contact">Связь со мной</a></li>
</ul>
<p class="rights">All rights reserved by German Novikov</p>
</nav>
</label>
<div class="overlay"></div>
<header>
<h1 class="logo typewriter" id="main">Герман.</h1>
<ul class="nav-list">
<li class="header-text"><a href="#" class="active">Главная </a></li>
<li class="header-text"><a href="./expand/index.html">Работы</a></li>
<li class="header-text"><a href="#contact"> Связь со мной </a></li>
</ul>
</header>
<div class="main-center"></div>
<main class="main">
<h1 class="main-text">Привет, я <br>
Герман Новиков</h1>
<p class="primary-text">дизайн веб-разработка креатив</p>
<div class="main-btns">
<button class="btn"><a href="./expand/index.html">Работы</a></button>
<button class="primary-btn mrg-left20px">Подробнее</button>
</div>
<div class="underbtns">
<a href="https://behance.net/herasimuss/" target="_blank" class="iconbtns"><img src="./img/ri_behance-fill.svg" alt=""></a>
<a href="https://github.com/difenz" target="_blank" class="iconbtns mrg-left40px"><img src="./img/mdi_github.svg" alt=""></a>
</div>
<div class="image"><img src="./img/mainimage.svg" alt=""></div>
</main>
<div class="aboutme" id="aboutme">
<h2 class="about">Обо мне</h2>
<p class="aboutmeprimary"> Я эксперт в дизайне, фронтенд-разработке и автоматизации бизнес-процессов. Мои навыки включают создание привлекательного дизайна, разработку интерактивных веб-страниц, рассылку в Telegram и создание Telegram-ботов. Я готов применить свой опыт, чтобы помочь вам достичь ваших целей.
</p>
</div>
<div class="social-networks">
<div class="social-network">
<div class="round"><img src="./img/round.svg" alt=""></div>
<div class="social-networks-text">
<div class="bold-social-networks">ФИО</div>
<div class="primary-social-networks">Новиков Герман Олегович</div>
</div>
</div>
<div class="social-network">
<div class="round"><img src="./img/round.svg" alt=""></div>
<div class="social-networks-text">
<div class="bold-social-networks">Email</div>
<div class="primary-social-networks">difenz1k@gmail.com</div>
</div>
</div>
<div class="social-network">
<div class="round"><img src="./img/round.svg" alt=""></div>
<div class="social-networks-text">
<div class="bold-social-networks">Telegram</div>
<div class="primary-social-networks">@germannovikov</div>
</div>
</div>
<div class="social-network">
<div class="round"><img src="./img/round.svg" alt=""></div>
<div class="social-networks-text">
<div class="bold-social-networks">Номер</div>
<div class="primary-social-networks">+7 (995) 005-36-10</div>
</div>
</div>
</div>
<div class="whaticando">
<h2 class="about">Что я умею?</h2>
<div class="blocks">
<div class="block">
<div class="block-icon"><img src="./img/creative.svg" alt=""></div>
<div class="block-text">Креативная <br> разработка</div>
</div>
<div class="block mrg-left100px">
<div class="block-icon"><img src="./img/devicon.svg" alt=""></div>
<div class="block-text">Веб <br> разработка</div>
</div>
<div class="block mrg-left100px">
<div class="block-icon"><img src="./img/webdesign.svg" alt=""></div>
<div class="block-text">Веб <br> дизайн</div>
</div>
</div>
</div>
<div class="whaticando">
<h2 class="about">Мои навыки</h2>
<div class="blocks">
<div class="block-skills">
<div class="text-inside">
<div class="percent">50%</div>
<div class="blue-text">HTML</div>
</div>
<div class="text-inside mrg-left100px">
<div class="percent">40%</div>
<div class="blue-text">CSS</div>
</div>
<div class="text-inside mrg-left100px">
<div class="percent">10%</div>
<div class="blue-text">JavaScript</div>
</div>
<div class="text-inside mrg-left100px">
<div class="percent">80%</div>
<div class="blue-text">Дизайн</div>
</div>
</div>
</div>
<div class="works"><button class="btn long"><a href="gallery.html">Работы</a></button></div>
</div>
</div>
<form id="telegram">
<ul class="form-style-1" id="contact">
<div class="text-center">
<h2 class="about">Свяжитесь со мной</h2>
</div>
<li><label><span class="required"></span></label><input type="text" name="name" class="field-divided" placeholder="Имя" /> <input type="text" name="secondName" class="field-divided" placeholder="Фамилия" /></li>
<li>
<li><label><span class="required"></span></label><input type="email" name="email" class="field-divided" placeholder="Email" /> <input type="tel" name="phone" class="field-divided" placeholder="Номер" /></li>
<li>
</li>
<li>
<label></label>
<select name="list" class="field-select">
<option value="Консультация">Консультация</option>
<option value="Сотрудничество">Сотрудничество</option>
<option value="Общее">Общее</option>
</select>
</li>
<li>
<label> <span class="required"></span></label>
<textarea name="message" placeholder="Сообщение" id="field5" class="field-long field-textarea"></textarea>
</li>
<li class="align-center">
<input class="btn" type="submit" value="Отправить" id="submitButton" onclick="changetoSucces()"/>
</li>
</ul>
</form>
<div class="contaner">
<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<ul class="social-icon">
<li class="social-icon__item"><a class="social-icon__link" href="https://behance.net/herasimuss/">
<ion-icon name="logo-behance"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://t.me/germannovikov">
<ion-icon name="logo-whatsapp"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://github.com/difenz">
<ion-icon name="logo-github"></ion-icon>
</a></li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#main">Главная</a></li>
<li class="menu__item"><a class="menu__link" href="#aboutme">Обо мне</a></li>
<li class="menu__item"><a class="menu__link" href="#">Работы</a></li>
</ul>
<p class="flex">©2023 German Novikov | All Rights Reserved</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
<script>
const TOKEN = '6299281281:AAF4VqwhbQr2weOMck2Y6Ds8kZZxjgBNJrI';
const CHAT_ID = '-1001940028905'
const URL_API = `https://api.telegram.org/bot${ TOKEN }/sendMessage`
document.getElementById('telegram').addEventListener('submit', function(e) {
e.preventDefault();
let message = `<b>Заявка с сайта germannovikov.ru</b>\n`;
message += `<b>Отправитель:</b> ${this.name.value}\n`;
message += `<b>Почта отправителя:</b> ${this.email.value}\n`;
message += `<b>Номер отправителя:</b> ${this.phone.value}\n`;
message += `<b>Тип обращения:</b> ${this.list.value}\n`;
message += `<b>Сообщение:</b> ${this.message.value}\n`;
telegram.reset(); // Reset all form data
axios.post(URL_API, {
chat_id: CHAT_ID,
parse_mode: 'html',
text: message
})
})
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</div>
<script src="main.js"></script>
</body>
</html>