-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (97 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Бандерогусь</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preload" href="./img/gus-anim.gif" as="image">
</head>
<body>
<section class="main-page">
<div class="wrapper">
<header>
<img src="./img/logo.svg" alt="Тут логотип">
<p class=logo-text>
Школа підготовки <br> IT-спеціалістів
</p>
</header>
<div class="main-page-row">
<div class="banderogoose-container">
<h3 class="banderogoose-greeting">Доброго вечора, ми з України</h3>
<h2 class="banderogoose-start-text">На старт. Увага. Полетіли!</h2>
<h1 class="banderogoose-title">Бандерогусь</h1>
<p class="banderogooge-description">
Спеціальний бойовий гусак із біолабораторій України. Пишаюся своїми подвигами, бороню Батьківщину та підтримую позитивний дух народу. Слава Україні!
</p>
<button class="banderogoose-launch" id="open-form-modal-btn">Запустити гуся</button>
</div>
<img src="./img/gus.svg" alt="banderogoose" class="banderogoose-image">
</div>
</div>
</section>
<section class="goose-facts">
<img src="./img/trezub.svg" alt="ukr-logo" class="ukr-logo">
<h3 class="goose-title">Цікаві факти про бандерогусей</h3>
<p class="goose-description">Зазвичай бандерогуси — виключно мирні птахи. Але у разі небезпеки можуть атакувати ворога системою надпотужного озброєння. Також нищать психологічно, активуючи високочастотне шипіння та розмахування крилами
</p>
<div class="goose-facts-container">
<div class="goose-fact-item">
<img src="./img/gus1.svg" alt="goose 1" class="goose-fact-image">
<h4 class="goose-fact-title">Система навігації</h4>
<p class="goose-fact-description">Супутниковий GPS та ехолокатори розпізнають ворожу техніку навіть на етапі збірки</p>
</div>
<div class="goose-fact-item">
<img src="./img/gus2.svg" alt="goose 2" class="goose-fact-image">
<h4 class="goose-fact-title">Очі-тепловізори</h4>
<p class="goose-fact-description">Допомагають виявити характер сигнатури об’єктів та значно підвищують точність удару</p>
</div>
<div class="goose-fact-item">
<img src="./img/gus3.svg" alt="goose 3" class="goose-fact-image">
<h4 class="goose-fact-title">Байракрила</h4>
<p class="goose-fact-description">Можуть нести 2-4 керовані ракети, що вражають ціль на відстані «ніхріна собі» кілометрів</p>
</div>
</div>
</section>
<footer class="victory-footer">
<div class="victory-bgrd">
<img src="./img/trezub.svg" alt="ukr logo" class="ukr-log">
<h4 class="victory-title">Перемога завжди за нами!</h4>
<p class="victory-description">Головна мета бандерогусей — служити гумору та доброті нашого народу. Ми забезпечимо вашу посмішку у часи, коли вона так необхідна</p>
</div>
</footer>
<div class="modal-bgd" id="form-modal">
<div class="modal-form-container">
<button class="close-btn">x</button>
<form action="#" class="modal-form" data-netlify="true" id="form">
<img src="./img/trezub.svg" alt="ukr logo">
<h4 class="modal-form-title">Поділися, будь ласка, поштою</h4>
<p class="modal-form-description">та запиши гуся до бандерозагону</p>
<div class="modal-form-field">
<label for="user-name" class="modal-field-name">Ім'я</label>
<input required type="text" class="modal-form-input" id="user-name" name="Ім'я">
</div>
<div class="modal-form-field">
<label for="user-email" class="modal-field-name">Email</label>
<input required type="email" class="modal-form-input" id="user-email" name="Email">
</div>
<button class="modal-form-btn" id="launch-btn">Запустити гуся</button>
</form>
</div>
</div>
<div class="modal-bgd" id="success-modal">
<div class="modal-form modal-form-container">
<button class="close-btn">x</button>
<img src="./img/trezub.svg" alt="ukr logo">
<h4 class="modal-form-title">Дякуємо, гусь успішно запущений</h4>
<p class="modal-form-description modal-description">Слава Україні! Героям Слава!</p>
</div>
</div>
<script src="./scripts/form.js"></script>
</body>
</html>