Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lab1 #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+4,933 −52
Open

lab1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
757 changes: 757 additions & 0 deletions index.css
View file
Open in desktop

Large diffs are not rendered by default.

202 changes: 166 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,50 @@
<main>
<div class="container">
<section>
<h1>Frontend-разработчик</h1>
<p>
Трехмесячный бесплатный учебный курс от Финтеха, который можно
проходить из любой точки России
</p>
<button class="button" type="button">Подробнее</button>
<img src="/assets/images/frontend.png" alt="Фронтенд технологии" />

<h2 class="title">Frontend-разработчик</h2>

<div class="intro">
<p class="intro__text">
Трехмесячный бесплатный учебный курс от Финтеха, который можно
проходить из любой точки России
</p>
</div>


<div class="intro">
<button class="intro__button" type="button">Подробнее</button>
</div>
<div class="intro">
<img class="intro__img" src="/assets/images/frontend.png" alt="Фронтенд технологии" />
</div>



</section>

<section>

<h2 class="title">Кому подойдет курс</h2>
<div class="wrapper row">
<section class="col col_md-8 col_sm-12 col_xs-12">
<div>
<img src="./komu_kurs.png">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Файлы лучше называть на англ. языке без русских транслитов, это очень плохая практика. Переименуй файл например в frontend_course_image

</div>
</section>
<section class="col col_md-4 col_sm-12 col_xs-12">
<div>
<ul class="list">
<li>Вы студент или выпускник технических вузов</li>
<li>Хотите научиться создавать интерфейсы</li>
<li>Хотите познакомиться с современным JavaScript и его фреймворками</li>
</ul>
</div>
</section>
</div>

</section>

<section>
<!-- TODO: пример приминения сеток через flex: на свех устроуйствах -->
<div class="row">
Expand All @@ -94,7 +130,7 @@ <h4 class="block__title">
Доступ к учебным материалам онлайн
</h4>
<p class="block__info">
Онлайн-курс с лекциями 
и домашними заданиями. Вы можете его
Онлайн-курс с лекциями и домашними заданиями. Вы можете его
пройти из любой точки России
</p>
</div>
Expand All @@ -112,57 +148,151 @@ <h4 class="block__title">Возможность попасть в команду
</section>

<section>
<!-- TODO: доделать просто пример приминения сеток через flex: на свех устроуйствах -->
<!-- TODO: пример приминения сеток через flex: на свех устроуйствах -->
<div class="row">
<div class="col col_md-12 col_sm-12 col_xs-12">
<h2 class="title">Как попасть на курс</h2>
<h2 class="title">Как строится обучение</h2>
</div>
</div>
<!-- TODO: пример приминения сеток через flex для всех размеров -->
<div class="wrapper row">
<section class="col col_md-3 col_sm-6 col_xs-12">
<section class="col col_md-6 col_sm-12 col_xs-12">
<div class="block">
<p class="block__info">
Оставьте заявку онлайн 
и зарегистрируйтесь 
на сайте
</p>
<h4 class="block__title">Онлайн-занятия 1 раз в неделю</h4>
<div>
<ul class="block__list">
<li>Курс стартует в середине февраля и длится три месяца</li>
<li>В неделю будете тратить 2-3 часов на лекции и столько, сколько сочтёте нужным, на домашнюю работу</li>
</ul>
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<section class="col col_md-6 col_sm-12 col_xs-12">
<div class="block">
<p class="block__info">
Расскажите в анкете, почему хотите изучить веб-разработку
</p>
<h4 class="block__title">
Интерактив и нетворкинг
</h4>
<div>
<ul class="block__list">
<li>Вы сможете задавать вопросы преподавателям во время лекции в Зуме или в общем чате</li>
<li>Обсуждать домашку и материалы вместе с сокурсниками. Это поможет найти профессиональный круг общения</li>
</ul>
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">

</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-6 col_sm-12 col_xs-12">
<div class="block">
<p class="block__info">
Пройдите экзамен: решите несколько задач по программированию
</p>
<div>
<img src="/assets/icons/academic.svg" class="block__icon">
</div>
<h4 class="block__title">Каждый студент проходит тщательный отбор</h4>
<div>
<ul class="block__list">
<li>Пройдите экзамен и заполните анкету, которая выполняет функцию портфолио</li>
<li>Расскажите подробно о своём опыте: сильное портфолио влияет на решение</li>
</ul>
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<section class="col col_md-6 col_sm-12 col_xs-12">
<div class="block">
<p class="block__info">
Дождитесь письма 
об итогах отбора. Начните учиться
</p>
<div>
<img src="/assets/icons/doc.svg" class="block__icon">
</div>
<h4 class="block__title">
Одинаковые условия для всех
</h4>
<div>
<ul class="block__list">
<li>Чтобы успешно закончить курс, нужно выполнить обязательные домашние задания и защитить проект</li>
<li>После обучения выдаём сертификат, потверждающий, что вы освоили теорию и навыки веб-разработки</li>
</ul>
</div>
</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>
<!-- 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 для всех размеров -->
<container>

<div class="wrapper row">
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="stage">
<div class="block">
<p class="block__info__points">
Оставьте заявку онлайн и зарегистрируйтесь на сайте
</p>
</div>
<div class="stage__point">
1
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="stage">
<div class="block">
<p class="block__info__points">
Расскажите в анкете почему вы хотите изучать веб разработку
</p>
</div>
<div class="stage__point">
2
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="stage">
<div class="block">
<p class="block__info__points">
Пройдите экзамен: решите несколько задач по программированию
</p>
</div>
<div class="stage__point">
3
</div>
</div>
</section>
<section class="col col_md-3 col_sm-6 col_xs-12">
<div class="stage">
<div class="block">
<p class="block__info__points">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Нужно поправить высоту элемента, она должна быть одинаковая у всех

Дождитесь письма об итогах отбора. Начните учиться
</p>
</div>
<div class="stage__point">
4
</div>
</div>
</section>
</div>
</container>


</section>


</div>
</main>

Expand Down
2 changes: 1 addition & 1 deletion index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
@import './src/utils/box-shadow.less';
@import './src/utils/button.less';
@import './src/header.less';
@import './src/main.css';
@import './src/main.less';
@import './src/footer.css';
Binary file added komu_kurs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading