208 lines
9.8 KiB
HTML
208 lines
9.8 KiB
HTML
<!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> |