Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 369c5c0428 | |||
| 124bc09d44 | |||
| 91a952aaf0 | |||
| d691d57037 |
13
index.css
@@ -39,6 +39,9 @@
|
||||
|
||||
|
||||
/* 4 images part */
|
||||
.images-container *{
|
||||
border:solid thin black;
|
||||
}
|
||||
.images-container {
|
||||
width: 90%;
|
||||
height: 200pt;
|
||||
@@ -75,6 +78,7 @@
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
|
||||
.images-container img{
|
||||
width:100%
|
||||
}
|
||||
@@ -97,6 +101,10 @@
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.img-margin-fix {
|
||||
margin-right:10px;
|
||||
}
|
||||
.info-block{
|
||||
height:10%;
|
||||
padding: 5%;
|
||||
@@ -160,7 +168,7 @@
|
||||
.info-block-image-small{
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 100px;
|
||||
height: 100%;
|
||||
background-color:black ;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
@@ -179,7 +187,8 @@
|
||||
|
||||
}
|
||||
.info-block-wide-text-container{
|
||||
width: 77%;
|
||||
width: 75%;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
.link{
|
||||
|
||||
@@ -80,10 +80,10 @@
|
||||
|
||||
<div class="main-center">
|
||||
<div class="center-upper">
|
||||
<div class="info-block-image-small">
|
||||
<div class="info-block-image-small ">
|
||||
<img src="./images/sqstm32.png" alt="stm32">
|
||||
</div>
|
||||
<div class="inline info-block-wide-text-container">
|
||||
<div class="inline info-block-wide-text-container ">
|
||||
<span class="info-block-header align-left">STM 32</span>
|
||||
<span class="info-block-text ">Chinese STM32 microcontrollers are affordable and compatible with
|
||||
STM32 tools but may face flashing issues due to bootloader differences. Proper connections and
|
||||
|
||||
BIN
labs/images/c.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
labs/images/java.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
labs/images/javascript.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
labs/images/prolog.jpg
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
labs/images/python.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
labs/images/ruby.jpg
Normal file
|
After Width: | Height: | Size: 37 KiB |
@@ -3,17 +3,9 @@ h3{
|
||||
margin: 1vh;
|
||||
}
|
||||
|
||||
a{
|
||||
/* display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
background-color: gray;
|
||||
width: 10%; это grid!!!*/
|
||||
}
|
||||
|
||||
.content{
|
||||
background-color: lightgreen;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding:10px;
|
||||
@@ -38,13 +30,8 @@ a{
|
||||
}
|
||||
@media (max-width:800px) {
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topic{
|
||||
width: calc(100%-20px);
|
||||
/* width:50%; */
|
||||
}
|
||||
}
|
||||
|
||||
/* grid part */
|
||||
|
||||
40
labs/lab4/content.txt
Normal file
@@ -0,0 +1,40 @@
|
||||
CN Tower, Торонто, Канада
|
||||
|
||||
553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по 2007 год,
|
||||
а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
|
||||
|
||||
Земляные работы для сооружения железобетонной конструкции с последующим
|
||||
натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение башни было завершено.
|
||||
|
||||
Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная площадка.
|
||||
Также на башне имеется вращающийся ресторан.
|
||||
|
||||
На высоте 447 м находится астрономическая обсерватория.
|
||||
|
||||
|
||||
|
||||
Бурдж-Халифа, Дубай, ОАЭ
|
||||
|
||||
Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
|
||||
|
||||
Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве
|
||||
работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
|
||||
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических
|
||||
конструкций.
|
||||
|
||||
Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
|
||||
Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
|
||||
|
||||
|
||||
Небесное дерево, Токио, Япония
|
||||
|
||||
Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
|
||||
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
|
||||
названию исторической области, где находится современный Токио.
|
||||
|
||||
Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
|
||||
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
|
||||
панорамными видами реки и города.
|
||||
|
||||
Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
|
||||
(вместимостью 900 человек).
|
||||
6
labs/lab4/css/bootstrap.min.css
vendored
Normal file
BIN
labs/lab4/images/image1.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
labs/lab4/images/image10.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
labs/lab4/images/image11.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
labs/lab4/images/image12.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
labs/lab4/images/image13.jpg
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
labs/lab4/images/image2.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
labs/lab4/images/image3.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
labs/lab4/images/image4.jpg
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
labs/lab4/images/image5.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
labs/lab4/images/image6.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
labs/lab4/images/image7.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
labs/lab4/images/image8.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
labs/lab4/images/image9.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
208
labs/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>
|
||||