-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
269 lines (267 loc) · 10.3 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
258
259
260
261
262
263
264
265
266
267
268
269
<!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>Britlex: Learn Any Foreign Language</title>
<meta
name="description"
content="Britlex: web site for learning any foreign language online"
/>
<meta name="keywords" content="learn forein language, online, Britlex" />
<meta author="Nataliia Vyrsta" />
<!----------- google fonts ----------->
<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=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- -->
<link rel="shortcut icon" type="image/ico" href="./img/favicon.ico" />
<link rel="stylesheet" href="./scss/main.css" />
</head>
<body>
<header>
<section class="header container">
<!-- Navigation -->
<nav class="nav">
<img class="mobile-logo" src="img/logo.png" alt="logo" />
<div class="nav__menu">
<div class="nav__burger"></div>
</div>
<ul class="nav__links">
<li class="nav__link">
<a class="nav__logo" href="#!"
><img src="img/logo.png" alt="logo"
/></a>
</li>
<li class="nav__link"><a href="#hero">Home</a></li>
<li class="nav__link"><a href="#skills">Skills</a></li>
<li class="nav__link"><a href="#about">About Us</a></li>
<li class="nav__link"><a href="#pricing">Pricing</a></li>
<li class="nav__link"><a href="#contact">Contacts</a></li>
<li class="nav__link">
<a role="button" class="nav__btn" href="#!">Let’s Talk</a>
</li>
</ul>
</nav>
</section>
<!-- Intro -->
<section id="hero" class="hero container">
<div class="hero__info">
<h1 class="hero__title">Learn Any Foreign Language</h1>
<p class="hero_description">
With our teachers who write a program for each student, you will be
able to make your first sketch after the first lesson.
</p>
<button class="hero__btn">Get started</button>
</div>
<div class="hero__img">
<img src="img/hero-img.png" alt="girl is learning lenguages" />
</div>
</section>
</header>
<main>
<section id="skills" class="skills container">
<h2 class="skills__title section__title">Skills</h2>
<div class="skills__wrapper">
<div class="skills__card skills__card--big">
<div class="skills__img">
<img src="img/speaking.png" alt="speaking" />
</div>
<h3 class="skills__name">Speaking</h3>
<p class="skills__desc">
Improve your English skills and confidence. Live classes and
interactive lessons online. 20% extra free for a limited time only
</p>
<p class="skills__desc">
Learn English online and improve your skills through our
high-quality courses and resources – all designed for adult
language learners.
</p>
<a role="button" href="#!" class="skills__btn">Learn more</a>
</div>
<div class="skills__card">
<div class="skills__img">
<img src="img/writing.png" alt="writing" />
</div>
<h3 class="skills__name">Writing</h3>
<p class="skills__desc">
One of the most important and extensive areas of natural science,
the science that studies substances, also their composition
</p>
<a role="button" href="#!" class="skills__btn">Learn more</a>
</div>
<div class="skills__card">
<div class="skills__img">
<img src="img/reading.png" alt="reading" />
</div>
<h3 class="skills__name">Reading</h3>
<p class="skills__desc">
perception and response actions of the user resulting from the use
and/or up coming use of the product, system or service
</p>
<a role="button" href="#!" class="skills__btn">Learn more</a>
</div>
<div class="skills__card">
<div class="skills__img">
<img src="img/listening.png" alt="listening" />
</div>
<div class="skills__content">
<h3 class="skills__name">Listening</h3>
<p class="skills__desc">
Here you can find activities to practise your listening skills.
Listening will help you to improve your understanding
</p>
<a role="button" href="#!" class="skills__btn">Learn more</a>
</div>
</div>
</div>
</section>
<!-- About us -->
<section id="about" class="container about">
<h2 class="about__title section__title">About Us</h2>
<div class="about__wrapper">
<div class="about__img">
<img src="img/about-us.png" alt="Business competition" />
</div>
<div class="about__info">
<div class="about__text">
<p>About Us</p>
<p>
The model offers a framework for discussing problems related to
the user's experience, as well as possible ways and means of
solving them. Application development begins at the top level
(strategy), where the future software product is described quite
abstractly from the point of view of the expectations of both
users and the customer.
</p>
</div>
<div class="about_results">
<div class="about__result">
<p class="about__number">800</p>
<p class="about__desc">Pupils</p>
</div>
<div class="about__result">
<p class="about__number">18</p>
<p class="about__desc">Teachers</p>
</div>
<div class="about__result">
<p class="about__number">6</p>
<p class="about__desc">Foreign languages</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="pricing container">
<h2 class="pricing__title section__title">Pricing</h2>
<div class="pricing__wrapper">
<div class="pricing__card">
<div class="pricing__img">
<img src="img/self-study.png" alt="self-study" />
</div>
<div class="pricing__content">
<h3 class="pricing__service">Self-study online course</h3>
<p class="pricing__desc">
Start learning English online in live classes with qualified EC
teachers and students from all over the world.
</p>
<p class="pricing__price">
<span> £5.99</span>
<span>per month</span>
</p>
</div>
</div>
<div class="pricing__card">
<div class="pricing__img">
<img src="img/online-classes.png" alt="online-classes" />
</div>
<div class="pricing__content">
<h3 class="pricing__service">Live online classes</h3>
<p class="pricing__desc">
Interactive group classes with expert teachers. Free 7-day trial
</p>
<p class="pricing__price">
<span> £12.99</span>
<span>per month</span>
</p>
</div>
</div>
<div class="pricing__card">
<div class="pricing__img">
<img src="img/personal-tuition.png" alt="personal-tuition" />
</div>
<div class="pricing__content">
<h3 class="pricing__service">Personal Tuition</h3>
<p class="pricing__desc">
Online one-to-one English tutoring – enjoy our first session for
only $1
</p>
<p class="pricing__price">
<span> £20.99</span>
<span>per month</span>
</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact container">
<h2 class="contact__title section__title">Contact Us</h2>
<div class="contact__wrapper">
<div class="contact__img">
<img src="img/contact-us.png" alt="contact" />
</div>
<div class="contact__content">
<h3>Contact Us</h3>
<p class="contact__desc">
Discover your current English level by taking our free online
English test.Sign up to our newsletter for learning tips and free
resources
</p>
<form
action="https://formsubmit.co/natali.vyrsta@gmail.com"
method="POST"
class="contact__form"
>
<!-- <input type="text" name="name" required> -->
<input
class="contact__email"
type="email"
name="email"
placeholder="Enter Your E-mail"
required
/>
<input
type="hidden"
name="_next"
value="https://nvyrsta.github.io/britlex/thanks.html"
/>
<button class="contact__btn" type="submit">Subscribe</button>
</form>
</div>
</div>
</section>
</main>
<footer>
<!-- footer -->
<hr />
<section class="footer container">
<a class="nav__logo" href="#!"><img src="img/logo.png" alt="logo" /></a>
<ul class="footer__list">
<li>Terms and Conditions</li>
<li>• Privacy Policy</li>
<li>• Cookie Policy</li>
</ul>
</section>
</footer>
<div class="scroll-top-btn">
<img src="img/up-arrow.png" alt="move to the top of web page" />
</div>
<script src="script.js"></script>
</body>
</html>