OMAGAH O HELL NAH WTF MAAAN
This commit is contained in:
208
labs/fake-lab4/index.html
Normal file
208
labs/fake-lab4/index.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Лабораторная работа Bootstrap</title>
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<style>
|
||||
.lead{
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.lead{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md bg-light navbar-light">
|
||||
|
||||
<!-- Заголовок -->
|
||||
<a class="navbar-brand" href="#">Топ высотных зданий</a>
|
||||
<!-- Кнопка для свернутого меню -->
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<!-- меню -->
|
||||
<div class="collapse navbar-collapse" id="menu">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Список зданий</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- форма для поиска -->
|
||||
<form class="d-flex">
|
||||
<input class="form-control" type="text" placeholder="Найти">
|
||||
<button class="btn btn-outline-success" type="submit">Найти</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<div class="row gy-3 text-center d-none d-md-flex">
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image1.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image2.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image12.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image4.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image5.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
|
||||
<img src="images/image6.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="gallery" class="carousel slide carousel-dark d-block d-md-none " data-bs-ride="carousel">
|
||||
|
||||
<!-- Содержимое галереи -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
|
||||
</div>
|
||||
<div class="carousel-item ">
|
||||
<img src="images/image1.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/image2.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/image12.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/image4.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/image5.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/image6.jpg" class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Кнопки управления -->
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Предыдущий</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Следующий</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<main class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<h2>
|
||||
CN Tower, <span class="text-muted">Торонто, Канада</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по
|
||||
2007 год,
|
||||
а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
|
||||
|
||||
</p>
|
||||
<p class="lead">
|
||||
Земляные работы для сооружения железобетонной конструкции с последующим
|
||||
натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение
|
||||
башни было завершено.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная
|
||||
площадка.
|
||||
Также на башне имеется вращающийся ресторан.
|
||||
</p>
|
||||
<p class="lead">
|
||||
На высоте 447 м находится астрономическая обсерватория.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<img src="images/image9.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row order flex-row-reverse">
|
||||
<div class="col-md-9">
|
||||
<h2>
|
||||
Бурдж-Халифа, <span class="text-muted">Дубай, ОАЭ</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве
|
||||
работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
|
||||
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических
|
||||
конструкций.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
|
||||
Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<img src="images/image13.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<h2>
|
||||
Небесное дерево, <span class="text-muted">Токио, Япония</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
|
||||
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
|
||||
названию исторической области, где находится современный Токио.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
|
||||
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
|
||||
панорамными видами реки и города.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
|
||||
(вместимостью 900 человек).
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<img src="images/image11.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user