-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (184 loc) · 9.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="https://acdn.tinkoff.ru/params/common_front/resourses/icons/favicon-32x32.png" />
<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=Roboto:wght@400;700;800;900&display=swap"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Тинькофф Образование</title>
</head>
<body>
<div class="app">
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo"></div>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link navigation__link_active">
<a href="https://fintech.tinkoff.ru/study/fintech/frontend/"
>Финтех курсы</a
>
</li>
<li class="navigation__link">
<a href="https://fintech.tinkoff.ru/start/">Стажировки</a>
</li>
<li class="navigation__link">
<a href="https://fintech.tinkoff.ru/activities/"
>Мероприятия и партнерства</a
>
</li>
</ul>
</nav>
<div class="login">
<button class="login-btn">
<span class="login-btn__name">Войти</span>
<div class="login-btn__icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.4674 4.49769C10.5238 4.27849 10.5779 4.21386 10.6862 4.08461C10.9595 3.75817 11.3053 3.48953 11.6801 3.30592C12.3045 3 13.1163 3 14.7399 3H16.2599C17.8835 3 18.6952 3 19.3197 3.30592C19.9176 3.59882 20.4011 4.08229 20.694 4.68018C20.9999 5.30464 20.9999 6.11642 20.9999 7.74V16.26C20.9999 17.8836 20.9999 18.6954 20.694 19.3198C20.4011 19.9177 19.9176 20.4012 19.3197 20.6941C18.6952 21 17.8835 21 16.2599 21H14.7399C13.1163 21 12.3045 21 11.6801 20.6941C11.3053 20.5105 10.9595 20.2418 10.6862 19.9154C10.5779 19.7861 10.5238 19.7215 10.4674 19.5023C10.4271 19.3459 10.4501 19.0195 10.512 18.8702C10.5986 18.6611 10.7155 18.556 10.9491 18.3457L17.174 12.7433C17.6154 12.346 17.6154 11.6539 17.174 11.2567L10.9491 5.65434C10.7155 5.44402 10.5986 5.33886 10.512 5.12976C10.4501 4.98051 10.4271 4.65414 10.4674 4.49769ZM14.5 12C14.5 11.5899 14.253 11.2374 13.8997 11.0831L10.6402 8.36687C9.98886 7.8241 9 8.28725 9 9.13509V11L3 11.0001C2.44771 11.0001 2 11.4478 2 12.0001C2 12.5523 2.44772 13.0001 3 13.0001L9 13V14.865C9 15.7128 9.98886 16.176 10.6402 15.6332L13.8997 12.917C14.253 12.7627 14.5 12.4102 14.5 12Z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<section>
<h1>Frontend-разработчик</h1>
<p>
Трехмесячный бесплатный учебный курс от Финтеха, который можно
проходить из любой точки России
</p>
<button class="button" type="button">Подробнее</button>
<img src="/assets/images/frontend.png" alt="Фронтенд технологии" />
</section>
<section>
<!-- TODO: пример приминения сеток через flex: на свех устроуйствах -->
<div class="row">
<div class="col col_md-12 col_sm-12 col_xs-12">
<h2 class="title">Что вас ждет на курсе</h2>
</div>
</div>
<!-- TODO: пример приминения сеток через flex для всех размеров -->
<div class="wrapper row">
<section class="col col_md-4 col_sm-12 col_xs-12">
<div class="block">
<h4 class="block__title">Основы разработки</h4>
<p class="block__info">
Делимся инструментами, которые позволяют нам создавать
веб-продукты для миллионов клиентов
</p>
</div>
</section>
<section class="col col_md-4 col_sm-12 col_xs-12">
<div class="block">
<h4 class="block__title">
Доступ к учебным материалам онлайн
</h4>
<p class="block__info">
Онлайн-курс с лекциями
и домашними заданиями. Вы можете его
пройти из любой точки России
</p>
</div>
</section>
<section class="col col_md-4 col_sm-12 col_xs-12">
<div class="block">
<h4 class="block__title">Возможность попасть в команду</h4>
<p class="block__info">
Во время курса участники выполняют много практических
заданий. Мы замечаем лучших и приглашаем их на собеседование
</p>
</div>
</section>
</div>
</section>
<section>
<!-- TODO: доделать просто пример приминения сеток через flex: на свех устроуйствах -->
<div class="row">
<div class="col col_md-12 col_sm-12 col_xs-12">
<h2 class="title">Как попасть на курс</h2>
</div>
</div>
<!-- TODO: пример приминения сеток через flex для всех размеров -->
<div class="wrapper row">
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="block">
<p class="block__info">
Оставьте заявку онлайн
и зарегистрируйтесь
на сайте
</p>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="block">
<p class="block__info">
Расскажите в анкете, почему хотите изучить веб-разработку
</p>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="block">
<p class="block__info">
Пройдите экзамен: решите несколько задач по программированию
</p>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="block">
<p class="block__info">
Дождитесь письма
об итогах отбора. Начните учиться
</p>
</div>
</section>
</div>
</section>
<section>
<!-- accordion(скрывающийся раскрывающийся список) -->
<details>
<summary>Основы JavaScript</summary>
<p>Изучим основы и тонкости языка</p>
<p>Типы данных</p>
<p>Области видимости и замыкания</p>
<p>Прототипы и наследование</p>
<p>Однопоточность и стек вызовов</p>
<p>Асинхронные API: Promise, AJAX, async-await</p>
</details>
</section>
</div>
</main>
<footer>
<div class="container">
<!-- TODO: пример приминения сеток через grid.css(но только для десктопа, для мобилок адаптив реализован в footer) -->
<div class="grid grid-col-2 footer">
<div class="copyright">
<span>© 2022 «Тинькофф Образование»</span>
</div>
<div class="contact">
<address class="contact__address">
<span>По вопросам пишите на </span>
<a href="mailto:edu@tinkoff.ru">edu@tinkoff.ru</a>
</address>
</div>
</div>
</div>
</footer>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>