fixed attributes

2025-10-31 10:27:11 +10:00
10 changed files with 275 additions and 249 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +0,0 @@
-**node_modules
-**to_reform
--- a/images/16x10/3d-printer.jpeg
+++ b/images/16x10/3d-printer.jpeg
--- a/images/16x10/blheli-esc.jpeg
+++ b/images/16x10/blheli-esc.jpeg
--- a/images/16x10/rpi-nano.jpeg
+++ b/images/16x10/rpi-nano.jpeg
--- a/images/16x10/thermostat.jpeg
+++ b/images/16x10/thermostat.jpeg
--- a/images/remote.jpeg
+++ b/images/remote.jpeg
--- a/images/sqesp32.png
+++ b/images/sqesp32.png
--- a/index.css
+++ b/index.css
@@ -1,28 +1,21 @@
 /* menu part */
 .menu {
-    border-top: double thick silver;
-    border-bottom: double thick silver;
+    border-top: double 4px silver;
+    border-bottom: double 4px silver;
+    text-align: right;
    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;
+    width: 8%;
    height: 3em;
-    line-height: 3em;
-    /* to align to center */
+    line-height: 3em; /* to align to center */
    text-align: center;
    vertical-align: middle;
-    padding: 0 10px;
-    margin: 0 10px;
+    margin: 0 1%;
    overflow: hidden;
-    text-overflow: ellipsis;
+    text-overflow: ellipsis ;
    font-size:  medium;

 }
@@ -30,13 +23,14 @@
 .menu .selected {
    color: green;
    font-weight: bold;
-    border-left: double thin silver;
-    border-right: double thin silver;
+    border-left: double 4px silver;
+    border-right: double 4px silver;
 }

 .menu .menu-header {
    color: green;
    font-weight: bold;
+    float: left;
 }

 .menu a {
@@ -44,154 +38,177 @@
 }


-@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;
-
-    }
+/* 4 images part */
+.images-container  *{
+    border:solid thin black;
 }
-
-/* 3 images part */
 .images-container {
-    display: flex;
-    flex-direction: row;
    width: 90%;
+    height: 200pt;
    margin: auto;
+    overflow: hidden;
 }

-.images-container>img {
-    margin: auto;
-    width:100%;
-    border: thin solid black;
+.half-size {
+    width: 49%;
+    margin: 0.2%;
+    float: left;
 }

-.images-container>img:nth-child(2n+1) {
-    margin-top: 10px;
+.quarter-size {
+    width: 24%;
+    margin: 0.2%;
+    float: left;
 }

-@media screen and (max-width: 800px) {
-    .images-container {
-        display: inline-flex;
-        flex-direction: column;
+.image-column-container {
+    width: 24%;
+    height:100%;
+    margin: 0.15%;
+    float: left;
+
+}
+
+.image-column-container > div {
    width: 100%;
-    }
+    height: 50%;
+    margin-bottom: 1.4%;
+    overflow: hidden;

-    .images-container>img {
-        width: 100%;
-        height: 100%;
-
-    }
-
-    .images-container>img:nth-child(2n+1) {
-        margin-top: 0px;
-    }
+    /* text-align: center; */
 }


-/* text block part */
-.info-block-header {
+.images-container img{
+    width:100% 
+}
+
+/* main block part */
+
+.main-block{
+    width:80%;
+    margin:1.2% auto;
+
+}
+.main-column{
+    display: inline-block;
+    width:25%;
+}
+.main-center{
+    vertical-align: top;
+    width: 48%;
+    height:100%;
+    display: inline-block;
+    
+}
+
+.img-margin-fix {
+    margin-right:10px;
+}
+.info-block{
+    height:10%;
+    padding: 5%;
+}
+
+.bg-aqua{
+    background: #80DEEA;
+}
+.bg-grey{
+    background: #B0BFC6;
+}
+.bg-blue{
+    background: #BBDEFA;
+}
+.bg-yellow{
+    background: #FFE0B2;
+}
+
+
+.info-block-header{
    display: block;
-    font-weight: bold;
+    margin:auto;
    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-size: 1.5em;
    font-weight: bold;
-    text-align: right;
 }
-
-.small-info-block-image >img{
-    width: 100%;
-}
-.small-info-block-text {
+.info-block-text{
+    display: block;
    text-align: justify;
 }
-.small-info-block-text >a{
-    display: block;
+.info-block-image{
+    margin: 0% 5% 5%;
+    width:90%;
+    overflow: hidden;
+}
+.info-block-image >img{
+    width: 100%;
+}
+.rounded{
+    border-radius: 20px;
+    overflow: hidden;
+}
+.info-block-button{
+    float: right;
+    color:white;
+    background-color: #2294F4;
+    border-radius: 5px;
+}
+.button-left{
+    float: left;
+}
+.pad-down{
+    margin-top: 40%;
+    bottom: 0;
+}
+/* main block center part */
+.center-upper, .center-lower, .center-center{
+    /* background-color: lightblue; DEBUG*/
+    margin:5%;
+}
+.info-block-image-small{
+    display: inline-block;
+    width: 20%;
+    height: 100%;
+    background-color:black ;
+    overflow: hidden;
+    vertical-align: top;
+}
+.info-block-image-small >img{
+    width: 100%;
+}
+.align-left{
+    text-align: left;
+}
+.align-right{
    text-align: right;
 }
-/*main part*/
-.main{
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    grid-template-rows: 1fr;
+.inline {
+    display: inline-block;
+
+}
+.info-block-wide-text-container{
+    width: 75%;
+    margin: 0 1%;
 }

-@media screen and (max-width: 800px) {
-    .main {
-        display: flex;
-        flex-direction: column;
-    }
+.link{
+    display: block;
+    color:gray;
+    margin-bottom: 0px;
+    white-space: nowrap;
+}
+.info-block-image-center{
+    display: inline-block;
+    width: 50%;
+    /* height: 100px; */
+    background-color:black ;
+    overflow: hidden;
+    vertical-align: top;
+}
+.info-block-image-center >img{
+    width: 100%;
+}
+.small-w{
+    vertical-align: top;
+    width: 23%;
 }
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@

 <body>
    <div class="menu">
+        <div class="menu-item menu-header">Portfolio Site </div>
        <a href="./index.html">
            <div class="menu-item selected">Home</div>
        </a>
@@ -33,113 +34,136 @@


    <div class="images-container">
-        <img src="./images/sqarucos.png" alt="Arduino">
-        <img src="./images/sqstm32.png" alt="Institute">
-        <img src="./images/sqesp32.png" alt="ESP32">
+        <div class="half-size">
+            <img src="./images/arduino.png" alt="Arduino">
        </div>
-    <div class="main">
+
+        <div class="quarter-size">
+            <img src="./images/esp32.png" alt="ESP32">
+        </div>
+
+        <div class="image-column-container">
+            <div>
+                <img src="./images/institute.png" alt="ESP32">
+            </div>
+            <div>
+                <img src="./images/arucos.png" alt="ESP32">
+            </div>
+        </div>
+    </div>
+
+    <div class="main-block">
+        <div class="main-column">
+            <div class="info-block rounded bg-aqua">
+                <span class="info-block-header">Embedded Systems</span>
+                <span class="info-block-text">THad a serval projects with different MCUs and wrote firmware for them.
+                    My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
+                </span>
+                <div class="info-block-image rounded">
+                    <img src="./images/16x9/esp32.png" alt="ESP32">
+                </div>
+                <button type="button" class="info-block-button">More info»</button>
+            </div>
+
+            <div class="info-block rounded bg-grey pad-down">
+                <span class="info-block-header">OpenCV</span>
+                <span class="info-block-text">I love when programs are able to see things or recognise them
+                    so i had serval projects involding image processing
+                    Sadly i'm used to opencv binding in python and not C++ , but that is solvable)
+                </span>
+                <div class="info-block-image rounded">
+                    <img src="./images/16x9/opencv.png" alt="ESP32">
+                </div>
+                <button type="button" class="info-block-button">More info»</button>
+            </div>
+        </div>
+
        <div class="main-center">
-            <div class="block-border">
-                <span class="info-block-header">Embedded Systems</span>
-                <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
+            <div class="center-upper">
+                <div class="info-block-image-small ">
+                    <img src="./images/sqstm32.png" alt="stm32">
+                </div>
+                <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
+                        reliable tools can help resolve these.</span>
                    </span>
-                    <div>
-                        <div>I love embeded development beceuse of autonomity of produced devices, the redices are not
-                            dependant on
-                            any other hardware and can work autunomously
+                    <a class="link align-left" href="./index.html">More info»</a>
                </div>
-                        <a href="#"> More info</a>
            </div>
-                    <img src="./images/AQ_monitor.png" alt="ESP32">
+            <div class="center-center">
+                <span class="info-block-header">Stephen King's books</span>
+                <span class="info-block-text inline small-w">Stephen King's books are a fascinating blend of horror,
+                    suspense, and deep
+                    character development. His storytelling captivates readers and keeps them on the edge of their
+                    seats.</span>

-                </div>
+                <div class="info-block-image-center">
+                    <img src="./images/institute.png" alt="ESP32">
                </div>

-            <div class="block-border">
-                <span class="info-block-header">Embedded Systems</span>
-                <div class="block-b-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
+                <span class="info-block-text inline small-w">
+                    Especially I love the institute, its architecture, and the vibrant community it fosters. The
+                    institute has been a source of inspiration and growth for me, providing countless opportunities to
+                    learn and collaborate.
+                    <a class="link small-w" href="./index.html">More info»</a>
+
                </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>
-            </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 class="center-lower">

-                </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.
+                <div class="inline info-block-wide-text-container">
+                    <span class="info-block-header align-right">Arucos</span>
+                    <span class="info-block-text ">ArUco markers are widely used in computer vision for camera
+                        calibration, pose estimation, and augmented reality applications. They are square fiducial
+                        markers with a unique binary pattern that can be easily detected and identified in
+                        images.</span>
                    </span>
-                    <a href="#">Подробнее»</a>
+                    <a class="link align-right" href="./index.html">More info»</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 class="info-block-image-small">
+                    <img src="./images/sqarucos.png" alt="ESP32">
                </div>
            </div>

        </div>
+
+
+        <div class="main-column">
+            <div class="info-block rounded bg-blue">
+                <div class="info-block-image rounded">
+                    <img src="./images/16x9/image0.png" alt="Photography">
                </div>
+                <span class="info-block-header">Photography</span>
+                <span class="info-block-text">Capturing moments through the lens is a passion of mine. I enjoy exploring
+                    different perspectives and techniques to create different visuals.</span>
+
+                <button type="button" class="info-block-button button-left">More info»</button>
+            </div>
+
+            <div class="info-block rounded bg-yellow pad-down">
+
+                <div class="info-block-image rounded">
+                    <img src="./images/16x9/AQ_monitor.png" alt="Air Quality Monitor">
+                </div>
+                <span class="info-block-header">IoT and Air Quality Monitoring</span>
+                <span class="info-block-text">The Internet of Things (IoT) enables devices to communicate and share data
+                    seamlessly. One of the applications is air quality monitoring, where sensors collect data on
+                    pollutants and environmental conditions, providing real-time insights to improve health and
+                    safety.</span>
+
+                <button type="button" class="info-block-button button-left">More info»</button>
+            </div>
+
+        </div>
+    </div>
+
+
+
+    <p>Author: Kulesh <br>
+        Group: Б9123-09.03.04</p>
 </body>

 </html>
--- a/labs/lab3/lab3.css
+++ b/labs/lab3/lab3.css
@@ -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 */