Browse Source

First nice version of the landing

master
Lev 2 years ago
parent
commit
86e8ae6732
  1. 11
      assets/css/style.css
  2. 2
      assets/images/cert.svg
  3. 194
      index.html

11
assets/css/style.css

@ -225,30 +225,27 @@ p {
color: #fff;
}
.single-services .services-content .services-title a {
.single-services .services-content .services-title p {
font-size: 26px;
font-weight: 700;
font-family: 'Circe', sans-serif;
color: #2E2E2E;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.single-services .services-content .services-title a {
.single-services .services-content .services-title p {
font-size: 24px;
}
}
@media (max-width: 767px) {
.single-services .services-content .services-title a {
.single-services .services-content .services-title p {
font-size: 20px;
}
}
.single-services .services-content .services-title a:hover {
color: #361CC1;
}
.single-services .services-content .text {
margin-top: 30px;
}

2
assets/images/cert.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 10 KiB

194
index.html

@ -71,7 +71,7 @@
</nav>
<!-- === Hero start === -->
<div class="pt-24">
<div class="pt-24 pb-5">
<div class="container px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<!--Left Col-->
<div class="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
@ -115,59 +115,64 @@
<!-- === Hero End === -->
<!-- === Olympiad Perks Start === -->
<section class="bg-white py-8">
<div class="container max-w-5xl mx-auto m-8">
<!--h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Title
<h1 class="w-full my-2 text-3xl md:text-5xl font-bold leading-tight text-center text-gray-800">
Зачем участвовать в олимпиадах?
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div-->
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Решай где хочешь и когда хочешь
</h3>
<p class="text-gray-600 mb-8">
Готовься в комфортном тебе темпе. Главное - это регулярность!
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<image class="w-full sm:h-64 mx-auto" src="assets/images/exams.svg"/>
<div class="flex place-items-center justify-center">
<div class="w-3/5">
<div class="flex flex-wrap columns-2">
<div class="md:p-6 w-1/3 md:w-auto">
<image class="md:h-36 mx-auto" src="assets/images/olymp/uni.png"/>
</div>
<div class="w-3/5 pl-5 pt-3 md:p-6">
<h3 class="md:text-3xl text-xl text-gray-800 font-bold leading-none mb-3">
Поступление в ВУЗ
</h3>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/2 p-6 mt-6">
<image class="w-5/6 sm:h-64 mx-auto" src="assets/images/peer-help.svg"/>
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Получи доступ к сообществу умных и мотивированных людей
<div class="flex flex-wrap columns-2">
<div class="w-3/5 pr-5 pt-3 md:p-6">
<h3 class="md:text-3xl text-xl text-gray-800 font-bold leading-none mb-3">
Намного интереснее ЕГЭ
</h3>
<p class="text-gray-600 mb-8">
</p>
</div>
<div class="md:p-6 w-1/3 md:w-auto">
<image class="md:h-36 mx-auto" src="assets/images/olymp/interesting.svg"/>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Получай советы от опытных преподавателей
<div class="flex flex-wrap columns-2">
<div class="md:p-6 w-1/3 md:w-auto">
<image class="md:h-36 mx-auto" src="assets/images/olymp/prize.png"/>
</div>
<div class="w-3/5 pl-5 pt-3 md:p-6">
<h3 class="md:text-3xl text-xl text-gray-800 font-bold leading-none mb-3">
Призы и премии
</h3>
<p class="text-gray-600 mb-8">
Отправляй задачи на проверку и получай результаты, а также темы, которые нужно изучать именно тебе
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<image class="w-full sm:h-64 mx-auto" src="assets/images/collab.svg"/>
</div>
<div class="flex flex-wrap columns-2">
<div class="w-3/5 pr-5 pt-3 md:p-6">
<h3 class="md:text-3xl text-xl text-gray-800 font-bold leading-none mb-3">
Саморазвитие
</h3>
</div>
<div class="md:p-6 w-1/3 md:w-auto">
<image class="md:h-36 mx-auto" src="assets/images/olymp/self-development.svg"/>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- === Olympiad Perks End === -->
<!-- === Features start === -->
<!-- === Features Start === -->
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
@ -204,8 +209,8 @@
</div>
</div>
<!-- row -->
<div class="flex columns-3 gap-8 place-items-center">
<div class="w-full">
<div class="md:flex md:columns-3 gap-8 place-items-center">
<div class="w-full p-4">
<div
class="single-services text-center mt-30 wow fadeIn"
data-wow-duration="1s"
@ -226,7 +231,7 @@
</div>
<div class="services-content mt-30">
<h4 class="services-title">
<a href="javascript:void(0)">Получи удобную базу задач и теории</a>
<p>Получи удобную базу задач и теории</p>
</h4>
<p class="text">
Более тысячи задач, отсортированных по уровню, темам и олимпиадам, будут доступны тебе
@ -237,7 +242,7 @@
</div>
<!-- single services -->
</div>
<div class="w-full">
<div class="w-full p-4">
<div
class="single-services text-center mt-30 wow fadeIn"
data-wow-duration="1s"
@ -258,10 +263,10 @@
</div>
<div class="services-content mt-30">
<h4 class="services-title">
<a href="javascript:void(0)">Узнай, что полезнее всего изучать именно тебе именно сейчас</a>
<p>Узнай, что полезнее всего изучать именно тебе именно сейчас</p>
</h4>
<p class="text">
Наш сервис рекомендует задачи и теорию, основываясь на твоих результатах так, чтобы они помогли тебе достичь наибольшего успеха
Наш сервис рекомендует задачи и теорию на основе твоих результатов так, чтобы они помогли тебе достичь наибольшего успеха
</p>
<!--a class="more" href="javascript:void(0)">Learn More <i class="lni lni-chevron-right"> </i-->
</a>
@ -269,7 +274,7 @@
</div>
<!-- single services -->
</div>
<div class="w-full">
<div class="w-full p-4">
<div
class="single-services text-center mt-30 wow fadeIn"
data-wow-duration="1s"
@ -290,7 +295,7 @@
</div>
<div class="services-content mt-30">
<h4 class="services-title">
<a href="javascript:void(0)">Соревнуйся с другими</a>
<p>Соревнуйся с другими и отслеживай свой прогресс</p>
</h4>
<p class="text">
Смотри на свое положение в общем рейтинге и отслеживай свой прогресс
@ -305,8 +310,6 @@
<!-- row -->
</div>
<!-- container -->
</section>
<div class="relative -mt-12 lg:-mt-24">
<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@ -329,6 +332,109 @@
</div>
<!-- === Features end === -->
<!-- === Process start === -->
<section class="bg-white py-8">
<div class="container max-w-5xl mx-auto m-8">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Как проходит обучение?
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Задай свои цели
</h3>
<p class="text-gray-600 mb-8">
Своим обучением руководишь ты. Мы здесь лишь чтобы помочь
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<image class="w-full sm:h-64 mx-auto" src="assets/images/goal.svg"/>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/2 p-6 mt-6">
<image class="w-5/6 sm:h-64 mx-auto" src="assets/images/exams.svg"/>
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Решай где хочешь и когда хочешь
</h3>
<p class="text-gray-600 mb-8">
Готовься в комфортном тебе темпе. Главное - это регулярность!
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Отправляй на проверку или проверяй сам
</h3>
<p class="text-gray-600 mb-8">
Отправляй задачи на проверку и получай результаты, а также темы, которые нужно изучать именно тебе
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<image class="w-full sm:h-64 mx-auto" src="assets/images/collab.svg"/>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/2 p-6 mt-6">
<image class="w-5/6 sm:h-64 mx-auto" src="assets/images/trajectory.svg"/>
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Получай советы от опытных преподавателей и нашей умной системы
</h3>
<p class="text-gray-600 mb-8">
Сайт подскажет, что тебе стоит порешать и почитать
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Получи доступ к сообществу таких же умных и мотивированных людей
</h3>
<p class="text-gray-600 mb-8">
Связи из олимпиадного сообщества, как показывает практика, оказываются очень полезными в жизни
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<image class="w-full sm:h-64 mx-auto" src="assets/images/peer-help.svg"/>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/2 p-6 mt-6">
<image class="w-5/6 sm:h-64 mx-auto" src="assets/images/progress.svg"/>
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Отслеживай свой прогресс и соревнуйся с другими
</h3>
<p class="text-gray-600 mb-8">
Смотря на рейтинг участников, ты сможешь оценивать свои шансы и свой прогресс. Кроме того, это сделает процесс интереснее и мотивирует тебя
</p>
</div>
</div>
</div>
</div>
</section>
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">

Loading…
Cancel
Save