mirror of
https://github.com/EDeev/web-tech.git
synced 2026-06-15 19:11:07 +03:00
236 lines
No EOL
11 KiB
HTML
236 lines
No EOL
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<!-- Required meta tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="robots" content="noindex">
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
||
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||
|
||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
|
||
<link rel="stylesheet" href="static/css/styles.css">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
|
||
|
||
<title>Основы веб-технологий</title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<nav class="navbar navbar-expand-lg fixed-top">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">
|
||
<img class="img-fluid" src="static/img/logo_187_50.png">
|
||
</a>
|
||
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon">
|
||
<i class="fa fa-bars"></i>
|
||
</span>
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
|
||
<ul class="navbar-nav mt-2 mt-lg-0">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">О курсе <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Программа</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Технологии</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Контакты</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid banner">
|
||
<div class="container mt-5">
|
||
<div class="row">
|
||
<div class="col-lg-6 py-5 my-auto">
|
||
<div class="row">
|
||
<div class="col-lg-10 offset-lg-1">
|
||
<h1 class="pb-3">Основы веб-технологий</h1>
|
||
<p class="pb-3">
|
||
Курс знакомит слушателей с основами технологий HTML, CSS и JavaScript.
|
||
</p>
|
||
<div class="btn btn-lg btn-outline-secondary mb-3">Подробнее</div>
|
||
<div class="btn btn-lg btn-secondary mb-3">Написать нам</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 p-5 d-flex justify-content-center align-items-center">
|
||
<img class="img-fluid" src="static/img/web-dev.svg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="call-to-action py-5">
|
||
<div class="container text-center w-50">
|
||
<h2 class="pb-3">Заложите прочный фундамент будущей карьеры!</h2>
|
||
<div class="heading-line mx-auto"></div>
|
||
<p class="py-3">
|
||
Только знакомитесь с веб-технологиями? Интернет на сегодняшний день развивается феноменально быстро. Поэтому выбрав
|
||
веб-технологии в качестве своей специализации, можете быть уверены — достойное будущее Вам гарантировано.
|
||
</p>
|
||
<button class="btn btn-lg btn-primary">Записаться на курс</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="program">
|
||
<div class="text-center py-5">
|
||
<h2 class="pb-3">Программа курса</h2>
|
||
<div class="heading-line mx-auto"></div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-code"></i>
|
||
<h4 class="py-3">Development tools</h4>
|
||
<p class="pb-3">Visual Studio Code, Emmet, Postman.</p>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-html5"></i>
|
||
<h4 class="py-3">HTML</h4>
|
||
<p class="pb-3">Основы языка разметки HTML5.</p>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-css3"></i>
|
||
<h4 class="py-3">CSS</h4>
|
||
<p class="pb-3">Основы каскадных таблиц стилей.</p>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-code"></i>
|
||
<h4 class="py-3">HTTP</h4>
|
||
<p class="pb-3">Структура протокола HTTP.</p>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-code"></i>
|
||
<h4 class="py-3">JavaScript</h4>
|
||
<p class="pb-3">Язык программирования JavaScript, формат JSON.</p>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<i class="fa fa-code"></i>
|
||
<h4 class="py-3">Twitter Bootstrap</h4>
|
||
<p class="pb-3">Фреймворк для вёрстки Twitter Bootstrap.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="techologies container-fluid bg-light">
|
||
<div class="text-center py-5">
|
||
<h2 class="pb-3">Технологии</h2>
|
||
<div class="heading-line mx-auto"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-3 p-0">
|
||
<img class="img-fluid" src="static/img/html.jpg">
|
||
</div>
|
||
<div class="col-md-3 p-0 d-flex align-items-center justify-content-center dark">
|
||
<div class="text-center">
|
||
<h4 class="py-3">HTML & CSS</h4>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 p-0">
|
||
<img class="img-fluid" src="static/img/js.jpg">
|
||
</div>
|
||
<div class="col-md-3 p-0 d-flex align-items-center justify-content-center dark">
|
||
<h4 class="py-3">JavaScript</h4>
|
||
</div>
|
||
<div class="col-md-3 p-0 d-flex align-items-center justify-content-center dark">
|
||
<h4 class="py-3">Twitter Bootstrap</h4>
|
||
</div>
|
||
<div class="col-md-3 p-0">
|
||
<img class="img-fluid" src="static/img/bootstrap.jpg">
|
||
</div>
|
||
<div class="col-md-3 p-0 d-flex align-items-center justify-content-center dark">
|
||
<h4 class="py-3">HTTP</h4>
|
||
</div>
|
||
<div class="col-md-3 p-0">
|
||
<img class="img-fluid" src="static/img/http.jpg">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="contacts">
|
||
<div class="container">
|
||
<div class="text-center py-5">
|
||
<h2 class="pb-3">Контакты</h2>
|
||
<div class="heading-line mx-auto"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-5">
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2243.6754304915576!2d37.70853691593169!3d55.781508730561015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54ad610abc8a5%3A0xc42703145fe53a8d!2sMoskovskiy%20Politekhnicheskiy%20Universitet!5e0!3m2!1sen!2sru!4v1589880984408!5m2!1sen!2sru"
|
||
width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
|
||
tabindex="0"></iframe>
|
||
</div>
|
||
<div class="col-lg-6 mb-5">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="email">Электронная почта</label>
|
||
<input class="form-control" type="email" id="email" placeholder="Введите адрес электронной почты">
|
||
<small id="emailHelp" class="form-text text-muted">Мы не передём введённые данные третьим лицам.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="name">Имя</label>
|
||
<input class="form-control" type="text" id="name" placeholder="Введите имя">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Сообщение</label>
|
||
<textarea class="form-control" name="message" id="message" cols="30" rows="10" placeholder="Введите сообщение"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-lg btn-outline-secondary">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="text-center py-5">
|
||
<a href="#">
|
||
<img src="static/img/logo_187_50_white.png">
|
||
</a>
|
||
</div>
|
||
<div class="container mb-3">
|
||
<div class="row">
|
||
<div class="col-lg-8 offset-lg-2 text-center">
|
||
<p>
|
||
Московский политехнический университет является крупнейшей образовательной организацией, готовящей квалифицированных
|
||
специалистов для производства.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright text-center py-3 border-top text-muted">
|
||
<p>Московский политех © 2020</p>
|
||
<p>Vector disign by <a href="https://www.vecteezy.com/">Vecteezy</a></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Optional JavaScript -->
|
||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
|
||
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
|
||
crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||
crossorigin="anonymous"></script>
|
||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
|
||
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
|
||
crossorigin="anonymous"></script>
|
||
</body>
|
||
|
||
</html> |