gitignore added

.gitignore

@@ -1,2 +1,2 @@
-node_modules
+**node_modules
-to_reform
+**to_reform

convert_to_html.py

@@ -0,0 +1,37 @@
+import csv
+
+def create_html_table_from_csv(csv_path, html_path):
+    try:
+        with open(csv_path, 'r', newline='', encoding='utf-8') as csv_file:
+            reader = csv.reader(csv_file)
+            header = next(reader)
+            
+            with open(html_path, 'w', encoding='utf-8') as html_file:
+                html_file.write('<table class="data-table">\n')
+                
+                html_file.write('<thead>\n')
+                html_file.write('<tr>\n')
+                for column_header in header:
+                    html_file.write(f'<th>{column_header}</th>\n')
+                html_file.write('</tr>\n')
+                html_file.write('</thead>\n')
+                
+                html_file.write('<tbody>\n')
+                for row in reader:
+                    html_file.write('<tr>\n')
+                    for cell in row:
+                        html_file.write(f'<td>{cell}</td>\n')
+                    html_file.write('</tr>\n')
+                html_file.write('</tbody>\n')
+                
+                html_file.write('</table>\n')
+        
+        print(f"Successfully created {html_path} from {csv_path}")
+
+    except:
+        pass
+
+if __name__ == '__main__':
+    csv_file_name = 'temp_sensor_data.csv'
+    html_file_name = 'test.html'
+    create_html_table_from_csv(csv_file_name, html_file_name)

index.css

@@ -0,0 +1,197 @@
+/* menu part */
+.menu {
+    border-top: double thick silver;
+    border-bottom: double thick silver;
+    font-size: 0;
+    display: grid;
+    grid-template-columns: repeat(7, min-content);
+    grid-template-rows: 1fr;
+    justify-items: start;
+}
+
+
+
+.menu-item {
+    display: inline-block;
+    width: max-content;
+    height: 3em;
+    line-height: 3em;
+    /* to align to center */
+    text-align: center;
+    vertical-align: middle;
+    padding: 0 10px;
+    margin: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: medium;
+
+}
+
+.menu .selected {
+    color: green;
+    font-weight: bold;
+    border-left: double thin silver;
+    border-right: double thin silver;
+}
+
+.menu .menu-header {
+    color: green;
+    font-weight: bold;
+}
+
+.menu a {
+    color: black;
+}
+
+
+@media screen and (max-width: 800px) {
+    .menu {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        justify-items: center;
+    }
+
+    .menu .selected {
+        border-bottom: double thick silver;
+
+    }
+}
+
+/* 3 images part */
+.images-container {
+    display: flex;
+    flex-direction: row;
+    width: 90%;
+    margin: auto;
+}
+
+.images-container>img {
+    margin: auto;
+    width:100%;
+    border: thin solid black;
+}
+
+.images-container>img:nth-child(2n+1) {
+    margin-top: 10px;
+}
+
+@media screen and (max-width: 800px) {
+    .images-container {
+        display: inline-flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .images-container>img {
+        width: 100%;
+        height: 100%;
+
+    }
+
+    .images-container>img:nth-child(2n+1) {
+        margin-top: 0px;
+    }
+}
+
+
+/* text block part */
+.info-block-header {
+    display: block;
+    font-weight: bold;
+    text-align: center;
+}
+
+.block-border {
+    border: solid thin black;
+    padding: 2vw;
+    margin: 1vw 0;
+}
+
+.block-a-container {
+    display: grid;
+    grid-template-columns: 3fr 3fr 2fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .block-a-container {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.block-b-container {
+    display: grid;
+    grid-template-columns: 4fr 7fr 4fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .block-b-container {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+
+.h-block>* {
+    margin: 2vw;
+}
+
+.h-block>span,
+.h-block>div {
+    text-align: justify;
+}
+
+.h-block>img {
+    margin: auto;
+    width: 100%;
+}
+/*small articles part*/
+.main-right{
+    border-left: thin solid black;
+    margin: 30px 0 0 50px;
+
+}
+.small-info-block{
+    margin: 20px 10px 0 ;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+}
+@media screen and (max-width: 1000px) {
+    .small-info-block {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.small-info-block-header{
+    display: block;
+    font-weight: bold;
+    text-align: right;
+}
+
+.small-info-block-image >img{
+    width: 100%;
+}
+.small-info-block-text {
+    text-align: justify;
+}
+.small-info-block-text >a{
+    display: block;
+    text-align: right;
+}
+/*main part*/
+.main{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .main {
+        display: flex;
+        flex-direction: column;
+    }
+}

index.html

@@ -3,227 +3,143 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>
-
+        "Portfolio"
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet">
+    </title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.js"></script>
+    <link rel="stylesheet" href="./index.css">
-    <link href="labs/lab4/css/bootstrap.min.css" rel="stylesheet">
-    <script src="labs/lab4/js/bootstrap.bundle.min.js"></script>
-
-    <title>Portfolio</title>
 </head>
 
 <body>
-    <!-- Navigation -->
+    <div class="menu">
-    <nav class="navbar navbar-expand-md bg-light navbar-light">
+        <a href="./index.html">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <div class="menu-item selected">Home</div>
-                <span class="navbar-toggler-icon"></span>
+        </a>
-            </button>
+        <a href="./embeded_details.html">
-            <div class="collapse navbar-collapse" id="navbarNav">
+            <div class="menu-item">Embedded</div>
-                <ul class="navbar-nav">
+        </a>
-                    <li class="nav-item">
+        <a href="./opencv_details.html">
-                        <a class="nav-link selected-menu px-3" href="./index.html">Home</a>
+            <div class="menu-item">OpenCV</div>
-                    </li>
+        </a>
-                    <li class="nav-item">
+        <a href="./photography_details.html">
-                        <a class="nav-link px-3" href="./embeded_details.html">Embedded</a>
+            <div class="menu-item">Photography</div>
-                    </li>
+        </a>
-                    <li class="nav-item">
+        <a href="./table.html">
-                        <a class="nav-link px-3" href="./opencv_details.html">OpenCV</a>
+            <div class="menu-item">Table</div>
-                    </li>
+        </a>
-                    <li class="nav-item">
+        <a href="./images/institute.png">
-                        <a class="nav-link px-3" href="./photography_details.html">Photography</a>
+            <div class="menu-item">Institute</div>
-                    </li>
+        </a>
-                    <li class="nav-item">
-                        <a class="nav-link px-3" href="./table.html">Table</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link px-3" href="./images/institute.png">Institute</a>
-                    </li>
-                </ul>
-            </div>
-    </nav>
-
-    <!-- Image Gallery -->
-    <div class="container-fluid my-4 text-center">
-        <div class="row g-2">
-            <div class="col-lg-4 col-md-12">
-                <div class="hover-overlay">
-                <img src="./images/sqarucos.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="Arduino">
-                </div>
-            </div>
-            <div class="col-lg-4 col-md-12">
-                <div class="hover-overlay">
-                    <img src="./images/sqstm32.png" class="img-fluid border border-dark hover-shadow w-100" alt="STM32">
-                </div>
-            </div>
-            <div class="col-lg-4 col-md-12">
-                <div class="hover-overlay">
-                    <img src="./images/sqesp32.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="ESP32">
-                </div>
-            </div>
-        </div>
     </div>
 
-    <!-- Main Content -->
+
-    <div class="container-fluid">
+    <div class="images-container">
-        <div class="row">
+        <img src="./images/sqarucos.png" alt="Arduino">
-            <!-- Main Content Area -->
+        <img src="./images/sqstm32.png" alt="Institute">
-            <div class="col-lg-9 col-md-12">
+        <img src="./images/sqesp32.png" alt="ESP32">
-                <!-- First Block -->
-                <div class="card mb-4">
-                    <div class="card-header text-center">
-                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
     </div>
-                    <div class="card-body">
+    <div class="main">
-                        <div class="row align-items-center">
+        <div class="main-center">
-                            <div class="col-lg-4 col-md-12 mb-3">
+            <div class="block-border">
-                                <p class="text-justify">
+                <span class="info-block-header">Embedded Systems</span>
-                                    Had several projects with different MCUs and wrote firmware for them.
+                <div class="block-a-container h-block">
+                    <span>Had a serval projects with different MCUs and wrote firmware for them.
                         My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
-                                </p>
+                    </span>
-                            </div>
+                    <div>
-                            <div class="col-lg-4 col-md-12 mb-3">
+                        <div>I love embeded development beceuse of autonomity of produced devices, the redices are not
-                                <p class="text-justify">
+                            dependant on
-                                    I love embedded development because of autonomy of produced devices, the devices are
+                            any other hardware and can work autunomously
-                                    not
-                                    dependent on any other hardware and can work autonomously
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
-                            </div>
-                            <div class="col-lg-4 col-md-12 mb-3">
-                                <img src="./images/AQ_monitor.png" class="img-fluid" alt="ESP32">
                         </div>
+                        <a href="#"> More info</a>
                     </div>
+                    <img src="./images/AQ_monitor.png" alt="ESP32">
+
                 </div>
             </div>
 
-                <!-- Second Block -->
+            <div class="block-border">
-                <div class="card mb-4">
+                <span class="info-block-header">Embedded Systems</span>
-                    <div class="card-header text-center">
+                <div class="block-b-container h-block">
-                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
+                    <span>Had a serval projects with different MCUs and wrote firmware for them.
-                    </div>
-                    <div class="card-body">
-                        <div class="row align-items-center">
-                            <div class="col-lg-3 col-md-12 mb-3">
-                                <p class="text-justify">
-                                    Had several projects with different MCUs and wrote firmware for them.
                         My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
-                                </p>
+                    </span>
+                    <img src="./images/remote.jpeg" alt="ESP32">
+                    <div>
+                        <div>I love embeded development device because of autonomity of produced devices, the devices
+                            are
+                            not dependant on
+                            any other hardware and can work autunomously or off the grid</div>
+                        <a href="#"> More info</a>
                     </div>
-                            <div class="col-lg-6 col-md-12 mb-3 text-center">
+
-                                <img src="./images/remote.jpeg" class="img-fluid" alt="Remote">
-                            </div>
-                            <div class="col-lg-3 col-md-12 mb-3">
-                                <p class="text-justify">
-                                    I love embedded development because of autonomy of produced devices, the devices
-                                    are not dependent on any other hardware and can work autonomously or off the grid
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
                 </div>
             </div>
         </div>
+        <div class="main-right">
+            <div class="small-info-block">
+                <div class="small-info-block-text">
+                    <div class="small-info-block-header">Заголовок</div>
+                    <span>
+                        3D printers are versatile tools
+                        used for creating prototypes,
+                        custom parts, and artistic designs.
+                        They work by layering materials.
+                    </span>
+                    <a href="#">Подробнее»</a>
+
+                </div>
+                <div class="small-info-block-image">
+                    <img src="images/16x10/3d-printer.jpeg" alt="3D Printer">
+                </div>
+            </div>
+            <div class="small-info-block">
+                <div class="small-info-block-text">
+                    <div class="small-info-block-header">BLHeli ESCs</div>
+                    <span>
+                        BLHeli ESCs are electronic
+                        speed controllers designed
+                        for drones, offering smooth
+                        and precise motor control.
+                    </span>
+                    <a href="#">Подробнее»</a>
+                </div>
+                <div class="small-info-block-image">
+                    <img src="images/16x10/blheli-esc.jpeg" alt="BLHeli ESC">
+                </div>
+            </div>
+            <div class="small-info-block">
+                <div class="small-info-block-text">
+                    <div class="small-info-block-header">Raspberry Pi Nano</div>
+                    <span>
+                        Raspberry Pi Nano is a compact
+                        computer ideal for learning,
+                        prototyping, and IoT projects.
+                        It is highly energy-efficient.
+                    </span>
+                    <a href="#">Подробнее»</a>
+                </div>
+                <div class="small-info-block-image">
+                    <img src="images/16x10/rpi-nano.jpeg" alt="Raspberry Pi Nano">
+                </div>
+            </div>
+            <div class="small-info-block">
+                <div class="small-info-block-text">
+                    <div class="small-info-block-header">Smart Thermostats</div>
+                    <span>
+                        Smart thermostats help regulate
+                        home temperatures efficiently,
+                        saving energy and enhancing
+                        comfort with automation.
+                    </span>
+                    <a href="#">Подробнее»</a>
+                </div>
+                <div class="small-info-block-image">
+                    <img src="images/16x10/thermostat.jpeg" alt="Smart Thermostat">
                 </div>
             </div>
 
-            <!-- Sidebar -->
-            <div class="col-lg-3 col-md-12 border-start">
-                <!-- Small Info Block 1 -->
-                <div class="card mb-3 mt-lg-0 mt-3">
-                    <div class="row g-0">
-                        <div class="col-md-8 col-lg-12 col-xl-8">
-                            <div class="card-body p-3">
-                                <h6 class="card-title fw-bold text-end">3D Printer</h6>
-                                <p class="card-text small text-justify">
-                                    3D printers are versatile tools used for creating prototypes,
-                                    custom parts, and artistic designs. They work by layering materials.
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
         </div>
     </div>
-                        <div class="col-md-4 col-lg-12 col-xl-4">
-                            <div class="hover-overlay">
-                                <img src="images/16x10/3d-printer.jpeg" class="img-fluid hover-zoom" alt="3D Printer">
-                                <div class="mask" style="background-color: rgba(63, 107, 69, 0.2);"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Small Info Block 2 -->
-                <div class="card mb-3">
-                    <div class="row g-0">
-                        <div class="col-md-8 col-lg-12 col-xl-8">
-                            <div class="card-body p-3">
-                                <h6 class="card-title fw-bold text-end">BLHeli ESCs</h6>
-                                <p class="card-text small text-justify">
-                                    BLHeli ESCs are electronic speed controllers designed
-                                    for drones, offering smooth and precise motor control.
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
-                            </div>
-                        </div>
-                        <div class="col-md-4 col-lg-12 col-xl-4">
-                            <div class="hover-overlay">
-                                <img src="images/16x10/blheli-esc.jpeg" class="img-fluid hover-zoom" alt="BLHeli ESC">
-                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Small Info Block 3 -->
-                <div class="card mb-3">
-                    <div class="row g-0">
-                        <div class="col-md-8 col-lg-12 col-xl-8">
-                            <div class="card-body p-3">
-                                <h6 class="card-title fw-bold text-end">Raspberry Pi Nano</h6>
-                                <p class="card-text small text-justify">
-                                    Raspberry Pi Nano is a compact computer ideal for learning,
-                                    prototyping, and IoT projects. It is highly energy-efficient.
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
-                            </div>
-                        </div>
-                        <div class="col-md-4 col-lg-12 col-xl-4">
-                            <div class="hover-overlay">
-                                <img src="images/16x10/rpi-nano.jpeg" class="img-fluid hover-zoom"
-                                    alt="Raspberry Pi Nano">
-                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Small Info Block 4 -->
-                <div class="card mb-3">
-                    <div class="row g-0">
-                        <div class="col-md-8 col-lg-12 col-xl-8">
-                            <div class="card-body p-3">
-                                <h6 class="card-title fw-bold text-end">Smart Thermostats</h6>
-                                <p class="card-text small text-justify">
-                                    Smart thermostats help regulate home temperatures efficiently,
-                                    saving energy and enhancing comfort with automation.
-                                </p>
-                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
-                            </div>
-                        </div>
-                        <div class="col-md-4 col-lg-12 col-xl-4">
-                            <div class="hover-overlay">
-                                <img src="images/16x10/thermostat.jpeg" class="img-fluid hover-zoom"
-                                    alt="Smart Thermostat">
-                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="container-fluid bg-light">
-        <span class="lead p-4 ">Kulesh A.</span>
-        <span class="lead p-4 "> Б9123-09.03.04</span>
-    </div>
 </body>
 
 </html>

labs/fake-lab4/content.txt

@@ -1,40 +0,0 @@
-        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 человек). 

labs/fake-lab4/index.html

@@ -1,208 +0,0 @@
-<!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>

labs/lab3/lab3.css

@@ -3,9 +3,17 @@ h3{
     margin: 1vh;
 }
 
+a{
+    /* display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background-color: gray;
+    width: 10%;  это grid!!!*/ 
+}
+
 .content{
     background-color: lightgreen;
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     flex-wrap: nowrap;
     padding:10px;
@@ -30,8 +38,13 @@ h3{
 }
 @media (max-width:800px) {
     .content{
+        display: flex;
         flex-direction: column;
     }
+    .topic{
+        width: calc(100%-20px);
+        /* width:50%; */
+    }
 }
 
 /* grid part */

labs/lab4/index.html

@@ -1,99 +0,0 @@
-<!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;
-        }
-    </style>
-</head>
-
-
-
-<body class="container">
-
-    <div class="row bg-lg-light justify-content-center">
-        <div class="col-sm-12 col-md-6 col-xl-4  p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                JavaScript
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0">
-                    разработан в 1996 году, автор - американский программист Брендан Айк.
-                </p>
-                <img src="images/javascript.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-    </div>
-    <div class="row bg-lg-light justify-content-center">
-        <div class="col-sm-12 col-md-6  col-xl-4 p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Java
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0"></p>
-                    разработан в 1990–1996 годах канадским программистом Джеймсом Гослингом.
-                </p>
-                <img src="images/java.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-   
-        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                C
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0">
-                    разработан в 1969–1973 годах сотрудником Bell Labs Деннисом Ритчи.
-                </p>
-                <img src="images/c.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-   </div>
-
-    <div class="row bg-lg-light justify-content-center">
-        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Prolog
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0">
-                    разработан в 1972 году, автор - французский программист Ален Колмероэ.
-                </p>
-                <img src="images/prolog.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-   
-        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Python
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0">
-                    создан в 1989–1991 годах голландским программистом Гвидо ван Россумом.
-                </p>
-                <img src="images/python.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-    
-        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Ruby
-            </h3>
-            <div class="bg-light d-lg-flex align-self-center">
-                <p class="lead px-2 m-0">
-                    разработан в 1993-1995 годах, автор - японский программист Юкихиро Мацумото.
-                </p>
-                <img src="images/ruby.jpg" class="d-block m-auto w-50">
-            </div>
-        </div>
-    </div>
-</body>
-
-</html>

labs/lab5/.gitignore

@@ -1 +0,0 @@
-node_modules

labs/lab5/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "template_pug",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production",
-    "serve": "webpack serve --open --mode development",
-    "dev": "webpack --mode development",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "chokidar": "^4.0.3",
-    "css-loader": "^6.8.1",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "glob": "^11.0.3",
-    "html-webpack-plugin": "^5.5.3",
-    "pug": "^2.0.4",
-    "pug-loader": "^2.4.0",
-    "style-loader": "^3.3.3",
-    "stylus": "^0.61.0",
-    "stylus-loader": "^7.1.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
-  }
-}

labs/lab5/src/components/data.pug

@@ -1,36 +0,0 @@
-block variables
-- var title = 'Самые высокие здания и сооружения'
-	-
-		var dictMenu = {'Главная': 'index.html', 
-				'Небоскребы' : "#",  
-				'Башни': "#", 
-				'Список': "#"
-		}
-		
-	- var listImages = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']
-
-	- 
-		var listSections = [
-			{'header' : 'Бурдж-Халифа в Дубае, ОАЭ',
-			'image' : 'image7.jpg', 
-			'text' : 'Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.'
-			},
-			{'header' : 'Токийское небесное дерево, Япония',
-			'image' : 'image6.jpg', 
-			'text' : 'Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.'
-			},
-			{'header' : 'CN Tower, Канада',
-			'image' : 'image8.jpg', 
-			'text' : 'Си-Эн Тауэр  — самое высокое свободно стоящее сооружение в мире с 1976 по 2007 год. Его высота составляет 553,33 метра.'
-			}
-		]
-	-
-		var structures = [
-		{
-			menuItem: "Ворота Запада, США",
-			pict: "image1_big.jpg",
-			firstP: `Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
-			secondP: `Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра. 
-			Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
-		}
-		]

labs/lab5/src/components/header.pug

@@ -1,2 +0,0 @@
-h2= 'Hello World!'
-img(src= require("../images/img1.jpg"))

labs/lab5/src/components/mixin.pug

@@ -1,20 +0,0 @@
-include ../components/data.pug
-
-mixin createMenu(menu, active)
-    each value, key in menu
-        if active == key
-            a.active(href= value)= key
-        else
-            a(href= value)= key
-
-mixin createMenuBuild(menu, active)
-    each value, key in menu
-            a(href= value)= key
-    a.active(href= "")= active
-mixin createSection()
-    each item in listSections
-        section
-            h3= item.header
-            img(src= require("../images/" + item.image))
-            p= item.text
-                a(href="#") …

labs/lab5/src/index.js

@@ -1 +0,0 @@
-import './styles/main.styl'

labs/lab5/src/pages/building.pug

@@ -1,19 +0,0 @@
-extends template
-
-block nav
-    title #{structures[0].menuItem}
-    nav
-        +createMenuBuild(dictMenu, structures[0].menuItem)
-
-block header 
-    h2= structures[0].menuItem
-
-block content
-
-    img.big(src= require("../images/" + structures[0].pict))
-
-    section
-        p= structures[0].firstP
-        p= structures[0].secondP
-
-    

labs/lab5/src/pages/index.pug

@@ -1,19 +0,0 @@
-extends template
-
-block nav
-    nav
-        +createMenu(dictMenu, 'Главная')
-        
-block content
-    div.images
-        each pict in listImages
-            a(href= "building.html")
-                img(src= require("../images/" + pict))
-
-    article
-        each item in listSections
-            section
-                h3= item.header
-                img(src= require("../images/"  + item.image))
-                p= item.text
-                    a(href="#") …

labs/lab5/src/pages/template.pug

@@ -1,18 +0,0 @@
-include ../components/mixin.pug
-include ../components/data.pug
-
-doctype html
-html(lang="ru")
-    head
-        title #{title} 
-    body
-        block header
-            h2= title
-
-        block nav
-
-        block content
-            
-        block footer
-            footer
-                h4 © Пример html-страницы 

labs/lab5/src/styles/main.styl

@@ -1,86 +0,0 @@
-colorText = #6f6d6d
-
-back(size)
-	background-color #f1f1f1
-	box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
-	padding: size + "%"
-	margin 0 0 1% 0
-
-html
-	color colorText
-
-nav
-	back(0)
-	text-align right
-
-	& a
-		display inline-block
-		padding 1%
-		color colorText
-		text-decoration: none
-				
-		&:hover
-		&.active
-			background-color #f87777
-			color #f8f8f8     
-
-div.images
-	display grid
-	grid-template-columns repeat(5, 1fr)
-	grid-gap 0.5%
-	back(1)
-	overflow hidden
-
-	& img
-		width: 100%
-	@media (max-width: 600px)
-		grid-template-rows repeat(5, 1fr)
-		grid-template-columns 1fr
-		justify-items center
-		
-article
-	width 80%
-	margin auto
-	display grid
-	grid-template-columns repeat(3, 1fr)
-	grid-gap 4%
-	overflow hidden
-
-	@media (max-width: 600px)
-		grid-template-rows repeat(3, 1fr)
-		grid-template-columns 1fr
-	& section
-		display grid
-		grid-template-columns 1fr 2fr
-		grid-gap 2%
-		align-items center
-		back(2)
-		
-		& h3
-			grid-column 1/3
-			margin 0
-			text-align center
-
-		& img
-			width: 100%
-
-
-footer
-	background-color colorText
-	color white
-	@media (max-width: 600px)
-		margin 3vh 0
-	& h4 
-			padding:10px
-
-.big
-	width 50vw
-	@media (max-width: 600px)
-		width 100vw
-
-section
-	display grid
-	grid-template-columns 1fr 1fr 
-
-	@media (max-width: 600px)
-		grid-template-columns 1fr

labs/lab5/webpack.config.js

@@ -1,69 +0,0 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const FileManagerPlugin = require("filemanager-webpack-plugin");
-const path = require("path");
-const fs = require("fs");
-
-const pagesDir = path.join(__dirname, "src", "pages");
-const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
-
-module.exports = {
-  output: {
-    path: path.join(__dirname, "dist"),
-    filename: "index.[contenthash].js",
-    assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
-  },
-  entry: path.join(__dirname, "src", "index.js"),
-  module: {
-    rules: [
-      {
-        test: /\.pug$/,
-        loader: "pug-loader",
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif)$/i,
-        type: "asset/resource",
-      },
-      {
-        test: /\.svg$/,
-        type: "asset/resource",
-        generator: {
-          filename: path.join("icons", "[name].[contenthash][ext]"),
-        },
-      },
-      {
-        test: /\.styl$/,
-        use: [
-          {
-            loader: "style-loader",
-          },
-          {
-            loader: "css-loader",
-          },
-          {
-            loader: "stylus-loader",
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    ...pages.map(
-      (page) =>
-        new HtmlWebpackPlugin({
-          template: path.join(pagesDir, page),
-          filename: page.replace(".pug", ".html"),
-        })
-    ),
-    new FileManagerPlugin({
-      events: {
-        onStart: {
-          delete: ["dist"],
-        },
-      },
-    }),
-  ],
-  devServer: {
-    watchFiles: path.join(__dirname, "src"),
-    port: 9000,
-  },
-};