-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (112 loc) · 5.57 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
<!DOCTYPE html>
<html lang="uk">
<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>Бандерогусь</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="./style/reset.css" />
<link rel="stylesheet" href="./style/style.css" />
</head>
<body>
<!-- Logo -->
<section class="position-logo">
<header class="logo-goit">
<img class="logo" src="./img/logo.png" alt="logo-goit" />
<span class="text-logo">Школа підготовки IT-спеціалістів</span>
</header>
</section>
<main>
<!-- section gradient -->
<section class="wrapper">
<!-- text container -->
<div class="introduction">
<div class="text-container">
<h2 class="salute">Доброго вечора, ми з України</h2>
<h3 class="flight-start">На старт. Увага. Полетіли!</h3>
<h1>Бандерогусь</h1>
<p class="text-description">
Спеціальний бойовий гусак із біолабораторій України. Пишаюся своїми подвигами, бороню Батьківщину та
підтримую позитивний дух народу. Слава Україні!
</p>
<button type="submit" class="button">Запустити гуся</button>
</div>
</div>
<!-- main-gus -->
<img class="main-gus" src="./img/gus.png" alt="Бандерогусь" />
</section>
<!-- section fakts -->
<section class="fakts-container">
<div class="tech-container">
<div class="trident">
<img src="./img/trezub.png" alt="Тризуб" />
</div>
<p class="fakts-title">Цікаві факти про бандерогусей</p>
<p class="fakts">
Зазвичай бандерогуси — виключно мирні птахи. Але у разі небезпеки можуть атакувати ворога системою
надпотужного озброєння. Також нищать психологічно, активуючи високочастотне шипіння та розмахування крилами
</p>
<ul class="gus-options">
<li class="option1">
<img src="./img/gus1.png" alt="Гусь система навігації" />
<h4>Система навігації</h4>
<p class="option-description">
Супутниковий GPS та ехолокатори розпізнають ворожу техніку навіть на етапі збірки
</p>
</li>
<li class="option2">
<img src="./img/gus2.png" alt="Гусь очі-тепловізори" />
<h4>Очі-тепловізори</h4>
<p class="option-description">
Допомагають виявити характер сигнатури об’єктів та значно підвищують точність удару
</p>
</li>
<li class="option3">
<img src="./img/gus3.png" alt="Гусь Байракрила" />
<h4>Байракрила</h4>
<p class="option-description">
Можуть нести 2-4 керовані ракети, що вражають ціль на відстані «ніхріна собі» кілометрів
</p>
</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-content">
<img class="trident" src="./img/trezub.png" alt="Тризуб" />
<p class="adieus">Перемога завжди за нами!</p>
<p class="goose-target">
Головна мета бандерогусей — служити гумору та доброті нашого народу. Ми забезпечимо вашу посмішку у часи, коли
вона так необхідна
</p>
</div>
</footer>
<!-- modal 1 -->
<div class="modal1">
<div class="modal1-container">
<div class="header">
<img class="trident" src="./img/trezub.png" alt="Тризуб" />
<div class="close-button">
<img src="./img/heroicons-solid_x.png" alt="close"/>
</div>
</div>
<div class="modal-content">
<p class="give-email">Поділися, будь ласка, поштою</p>
<p>та запиши гуся до бандерозагону</p>
<form class="form" action="" method="get">
<label class="labal-input" for="gus-name">Ім'я</label>
<input class="form-input" type="text" name="Ім'я" id="gus-name" />
<label class="labal-input" for="user-email">E-mail</label>
<input class="form-input" type="email" name="email" id="user-email" />
<button type="submit" class="modal-button">Запустити гуся</button>
</form>
</div>
</div>
</div>
<script src="./gus.js"></script>
</body>
</html>