-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (253 loc) · 13.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
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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!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>Merion Academy</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="animations.css">
<link rel="shortcut icon" href="./img/favicon.svg" type="image/x-icon">
</head>
<body>
<div class="menu-opened">
<div class="menu-nav">
<a href="./index.html#main" class="menu-link">Главная</a>
<a href="./index.html#directions" class="menu-link">Направления</a>
<a href="./courses.html" class="menu-link">Курсы</a>
<a href="./index.html#about" class="menu-link">О нас</a>
<a href="./index.html#reviews" class="menu-link">Отзывы</a>
</div>
<footer>
<img src="./img/logo.svg" alt="">
<p class="footer-text">© Copyright 2021 Merion</p>
</footer>
</div>
<header>
<a href="./index.html">
<img src="./img/logo.svg" alt="Merion Academy" class="header-logo">
</a>
<div class="header-nav">
<a href="./index.html#main" class="header-link">Главная</a>
<a href="./index.html#directions" class="header-link">Направления</a>
<a href="./courses.html" class="header-link">Курсы</a>
<a href="./index.html#about" class="header-link">О Нас</a>
<a href="./index.html#reviews" class="header-link">Отзывы</a>
<div class="header-burger"></div>
</div>
</header>
<div class="container main-container" id="main">
<div class="main-text-container">
<h2 class="main-title title">Выбери свою траекторию</h2>
<p class="main-text text">Онлайн курсы от Merion Academy — это концентрат самых актуальных и востребованных
знаний от ведущих экспертов и практикующих специалистов</p>
<div class="courses-container">
<button class="course-button" id="telephone">Телефония</button>
<button class="course-button" id="network">Сети</button>
<button class="course-button" id="linux">Linux администрирование</button>
<button class="course-button" id="devops">Dev-Ops</button>
<button class="course-button" id="security">Кибербезопасность</button>
<button class="course-button" id="virtual">Виртуализация</button>
</div>
<div class="courses-container-mobile">
<button class="course-button" id="linux">Linux администрирование</button>
<button class="course-button" id="security">Кибербезопасность</button>
<button class="course-button" id="virtual">Виртуализация</button> <br/>
<button class="course-button" id="telephone">Телефония</button> <br/>
<button class="course-button" id="devops">Dev-Ops</button> <br/>
<button class="course-button" id="network">Сети</button>
</div>
</div>
</div>
<section class="container directions-container" id="directions">
<!-- <div class="blob popular"></div> -->
<h2 class="title">Направления</h2>
<p class="text">Онлайн курсы от Merion Academy - это концентрат самых актуальных и востребованных знаний от
ведущих экспертов и практикующих специалистов</p>
<div class="directions-cards">
<div class="card" id="telephone">
<img class="card-logo" src="./img/card-logos/telephone.svg" alt="">
<div class="card-text">
<h3>Телефония</h3>
<p>2 курса</p>
</div>
</div>
<div class="card" id="network">
<img class="card-logo" src="./img/card-logos/network.svg" alt="">
<div class="card-text">
<h3>Сети</h3>
<p>2 курса</p>
</div>
</div>
<div class="card" id="linux">
<img class="card-logo" src="./img/card-logos/linux.svg" alt="">
<div class="card-text">
<h3>Linux <br /> администрирование</h3>
<p>2 курса</p>
</div>
</div>
<div class="card" id="devops">
<img class="card-logo" src="./img/card-logos/devops.svg" alt="">
<div class="card-text">
<h3>DevOps</h3>
<p>2 курса</p>
</div>
</div>
<div class="card" id="security">
<img class="card-logo" src="./img/card-logos/security.svg" alt="">
<div class="card-text">
<h3>Кибер безопасность</h3>
<p>2 курса</p>
</div>
</div>
<div class="card" id="virtual">
<img class="card-logo" src="./img/card-logos/virtual.svg" alt="">
<div class="card-text">
<h3>Виртуализация</h3>
<p>2 курса</p>
</div>
</div>
</div>
</section>
<section class="container popular-container">
<h2 class="title">Популярыне программы</h2>
<p class="text">Онлайн курсы от Merion Academy - это концентрат самых актуальных и востребованных знаний от
ведущих экспертов и практикующих специалистов</p>
<div class="popular-cards">
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/telephone.svg" alt="">
<img src="./img/card-logos/Sale.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/network.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/linux.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/devops.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/security.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
<div class="popular-card">
<div class="card-logos">
<img src="./img/card-logos/virtual.svg" alt="">
<img src="./img/card-logos/Sale.svg" alt="">
</div>
<div class="card-text">
<h3>ASTERISK PRO</h3>
<p>курс по установке, настройке и доработке IP - АТС на базе Asterisk</p>
</div>
</div>
</div>
<div class="popular-text">
<a class="all-courses" href="./courses.html">Все курсы</a>
<h1 class="about-title" id="about">О НАС</h1>
</div>
</section>
<section class="container statistics-container">
<div class="block-container">
<div class="block">
<h3>6</h3>
<p>Учебных программ</p>
</div>
<div class="block">
<h3>1221</h3>
<p>Статья в базе знаний</p>
</div>
<div class="block">
<h3>60+</h3>
<p>Обучающих видео</p>
</div>
<div class="block">
<h3>4 000 000+</h3>
<p>Просмотров</p>
</div>
</div>
</section>
<section class="container quote-container">
<h3 class="quote-text">Мы создали пространство для быстрого и эффективного обмена знаниями. У нас вы сможете
получить новые навыки и сделать level up по тем областям, где вам нужна поддержка. Наша миссия - сделать
образование доступным для каждого.</h3>
</section>
<section class="container reviews-container" id="reviews">
<h2 class="title">Отзывы</h2>
<p class="text">Each and every one of us has that moment when we are suddenly stunned when we come face to face
with the enormity of the universe.</p>
<div class="slider-container">
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img class="avatar" src="./img/test-img2.jpg" alt="">
<div class="review-text">
<img src="./img/quote.svg" alt="">
<p class="text">Отлично проработанные курсы. Качественно подобрана и классифицирована информация. Не раз обращался к этим ребятам за помощью. Спасибо за помощь.</p>
<h3 class="name">Иван Цоцорин</h3>
</div>
</div>
<div class="swiper-slide">
<img class="avatar" src="./img/test-img.jpg" alt="">
<div class="review-text">
<img src="./img/quote.svg" alt="">
<p class="text">Отличный курс для начинающих по сетям, все доступно и понятно. Отдельное спасибо за крутые видеоролики)</p>
<h3 class="name">Александр Добрянский</h3>
</div>
</div>
<div class="swiper-slide">
<img class="avatar" src="./img/test-img.jpg" alt="">
<div class="review-text">
<img src="./img/quote.svg" alt="">
<p class="text">Отличный курс для начинающих по сетям, все доступно и понятно. Отдельное спасибо за крутые видеоролики)</p>
<h3 class="name">Александр Добрянский</h3>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<footer>
<img src="./img/logo.svg" alt="">
<p class="footer-text">© Copyright 2021 Merion</p>
</footer>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="./swiper.js"></script>
<script src="./script.js"></script>
</body>
</html>