https://pastein.ru/t/7-y
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROBO.SCHOOL</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER (Шапка сайта) -->
<header class="header">
<div class="header__container">
<div class="header__logo">ROBO.SCHOOL</div>
<nav class="header__nav">
<a class="header__link" href="#">О школе</a>
<a class="header__link" href="#">Тренеры</a>
<a class="header__link" href="#">Стоимость</a>
</nav>
<a class="header__phone" href="tel:+78000001122">+7 800 000 11 22</a>
</div>
</header>
<!-- BANNER (Главный экран) -->
<section class="banner">
<div class="banner__container">
<div class="banner__content">
<h1 class="banner__title">ROBO SCHOOL</h1>
<p class="banner__text">
Курсы повышения квалификации по робототехнике
для педагогов начальной школы
</p>
<a class="banner__button" href="#">Записаться на курс</a>
</div>
<div class="banner__image">
<img src="images/banner-photo.png" alt="Студентка с книгами">
</div>
</div>
</section>
<!-- ABOUT-SCHOOL (О школе) -->
<section class="about-school">
<div class="about-school__container">
<p class="about-school__description">
<strong>Robo School</strong> — учреждение для формирования кадрового
педагогического резерва в сфере робототехники
и программирования
</p>
<div class="about-school__stats">
<div class="about-school__stat">
<span class="about-school__number">10</span>
<span class="about-school__label">УМК по различным направлениям по робототехнике</span>
</div>
<div class="about-school__stat">
<span class="about-school__number">20</span>
<span class="about-school__label">Школ, в которых запущена робототехника</span>
</div>
<div class="about-school__stat">
<span class="about-school__number">100</span>
<span class="about-school__label">Педагогов, прошедших курсы повышения квалификации</span>
</div>
<div class="about-school__stat">
<span class="about-school__number">10 000</span>
<span class="about-school__label">Обученных детей на базе собственных центров</span>
</div>
</div>
</div>
</section>
<!-- COURSE-BENEFITS (Преимущества курса) -->
<section class="course-benefits">
<div class="course-benefits__container">
<h2 class="course-benefits__title">Что вы получите после курса</h2>
<div class="course-benefits__cards">
<div class="course-benefits__card">
<h3 class="course-benefits__card-title">Удостоверение</h3>
<p class="course-benefits__card-text">
Дающее право преподавать робототехнику
для детей 6-12 лет в образовательных учреждениях
</p>
</div>
<div class="course-benefits__card">
<h3 class="course-benefits__card-title">Знания</h3>
<p class="course-benefits__card-text">
По основам разработки учебно-методических комплексов
по робототехнике и программированию
</p>
</div>
<div class="course-benefits__card">
<h3 class="course-benefits__card-title">Практику</h3>
<p class="course-benefits__card-text">
Возможность пройти практику
по преподаванию робототехники на базе
R:ED LAB в офлайн или онлайн формате
</p>
</div>
</div>
</div>
</section>
<!-- TRAINERS (Профессиональные тренеры) -->
<section class="trainers">
<div class="trainers__container">
<h2 class="trainers__title">Профессиональные тренеры</h2>
<div class="trainers__cards">
<div class="trainers__card">
<img class="trainers__photo" src="images/trainer-1.jpg" alt="Ирина Лайм">
<h3 class="trainers__name">Ирина Лайм</h3>
<p class="trainers__role">преподаватель по робототехнике</p>
<a class="trainers__link" href="#">Подробнее</a>
</div>
<div class="trainers__card">
<img class="trainers__photo" src="images/trainer-2.jpg" alt="Марина Орлова">
<h3 class="trainers__name">Марина Орлова</h3>
<p class="trainers__role">преподаватель по робототехнике</p>
<a class="trainers__link" href="#">Подробнее</a>
</div>
<div class="trainers__card">
<img class="trainers__photo" src="images/trainer-3.jpg" alt="Максим Петров">
<h3 class="trainers__name">Максим Петров</h3>
<p class="trainers__role">преподаватель по программированию</p>
<a class="trainers__link" href="#">Подробнее</a>
</div>
<div class="trainers__card">
<img class="trainers__photo" src="images/trainer-4.jpg" alt="Константин Назаров">
<h3 class="trainers__name">Константин Назаров</h3>
<p class="trainers__role">преподаватель по робототехнике</p>
<a class="trainers__link" href="#">Подробнее</a>
</div>
</div>
</div>
</section>
<!-- PRICING (Выберите нужный пакет) -->
<section class="pricing">
<div class="pricing__container">
<h2 class="pricing__title">Выберите нужный пакет</h2>
<div class="pricing__cards">
<div class="pricing__card pricing__card--active">
<h3 class="pricing__name">PRO</h3>
<p class="pricing__price">20.000 ₽</p>
<p class="pricing__description">УМК по робототехнике и программированию</p>
<a class="pricing__button" href="#">Оставить заявку</a>
</div>
<div class="pricing__card">
<h3 class="pricing__name">ROBO</h3>
<p class="pricing__price">15.000 ₽</p>
<p class="pricing__description">УМК по робототехнике</p>
<a class="pricing__button" href="#">Оставить заявку</a>
</div>
<div class="pricing__card">
<h3 class="pricing__name">PROG</h3>
<p class="pricing__price">10.000 ₽</p>
<p class="pricing__description">УМК по программированию</p>
<a class="pricing__button" href="#">Оставить заявку</a>
</div>
</div>
</div>
</section>
<!-- SIGNUP (Запишитесь на курс) -->
<section class="signup">
<div class="signup__container">
<div class="signup__info">
<h2 class="signup__title">Запишитесь на курс со скидкой 10%</h2>
<p class="signup__text">Акция действительна до 10 марта 2022 года</p>
</div>
<form class="signup__form">
<input class="signup__input" type="text" placeholder="Имя">
<input class="signup__input" type="tel" placeholder="Телефон">
<input class="signup__input" type="email" placeholder="E-mail">
<button class="signup__button" type="submit">Оформить заявку</button>
</form>
</div>
</section>
<!-- FOOTER (Подвал сайта) -->
<footer class="footer">
<div class="footer__container">
<div class="footer__left">
<div class="footer__logo">ROBO.SCHOOL</div>
<p class="footer__copyright">ROBO.SCHOOL</p>
</div>
<a class="footer__phone" href="tel:+78000001122">+7 800 000 11 22</a>
</div>
</footer>
</body>
</html>