4 Commits
hw3 ... lab4

Author SHA1 Message Date
369c5c0428 bruh linux fix 2025-11-13 16:55:05 +10:00
124bc09d44 adding bootstrap 2025-11-01 01:21:25 +10:00
91a952aaf0 adding resources 2025-10-31 12:05:20 +10:00
d691d57037 fixed attributes 2025-10-31 10:27:11 +10:00
27 changed files with 276 additions and 18 deletions

View File

@@ -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{

View File

@@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
labs/images/java.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
labs/images/javascript.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
labs/images/prolog.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
labs/images/python.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
labs/images/ruby.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -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
View 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

File diff suppressed because one or more lines are too long

BIN
labs/lab4/images/image1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
labs/lab4/images/image2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
labs/lab4/images/image3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
labs/lab4/images/image4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
labs/lab4/images/image5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
labs/lab4/images/image6.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
labs/lab4/images/image7.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
labs/lab4/images/image8.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
labs/lab4/images/image9.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

208
labs/lab4/index.html Normal file
View 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>

7
labs/lab4/js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long