homework p2 continuing

2025-10-30 22:23:48 +10:00
parent b3fd772683
commit c21e4184b4
2 changed files with 198 additions and 112 deletions
--- a/index.css
+++ b/index.css
@@ -1,8 +1,9 @@
 /* menu part */
 .menu {
-    border-top: double 5px silver;
-    border-bottom: double 5px silver;
+    border-top: double 4px silver;
+    border-bottom: double 4px silver;
    text-align: right;
+    font-size:  0;
 }

 .menu-item {
@@ -15,13 +16,15 @@
    margin: 0 1%;
    overflow: hidden;
    text-overflow: ellipsis ;
+    font-size:  medium;
+
 }

 .menu .selected {
    color: green;
    font-weight: bold;
-    border-left: double 5px silver;
-    border-right: double 5px silver;
+    border-left: double 4px silver;
+    border-right: double 4px silver;
 }

 .menu .menu-header {
@@ -38,39 +41,38 @@
 /* 4 images part */
 .images-container {
    width: 90%;
-    height: 140pt;
+    height: 200pt;
    margin: auto;
    overflow: hidden;
 }

 .half-size {
    width: 49%;
-    margin: 0.5%;
+    margin: 0.2%;
    float: left;
-    text-align: center;
 }

 .quarter-size {
    width: 24%;
-    margin: 0.5%;
+    margin: 0.2%;
    float: left;
-    text-align: center;
 }

 .image-column-container {
    width: 24%;
    height:100%;
-    margin:0.5%;
+    margin: 0.15%;
    float: left;
-    text-align: center;

 }

 .image-column-container > div {
    width: 100%;
-    height: 49%;
-    margin: 0.5%;
-    text-align: center;
+    height: 50%;
+    margin-bottom: 1.4%;
+    overflow: hidden;
+
+    /* text-align: center; */
 }

 .images-container img{
@@ -81,49 +83,123 @@

 .main-block{
    width:80%;
-    margin: auto;
-}
+    margin:1.2% auto;

+}
+.main-column{
+    display: inline-block;
+    width:25%;
+}
+.main-center{
+    vertical-align: top;
+    width: 48%;
+    height:100%;
+    display: inline-block;
+    
+}
 .info-block{
-    width:30%;
-    height:40%;
+    height:10%;
+    padding: 5%;
 }

 .bg-aqua{
-    background: aqua;
+    background: #80DEEA;
 }
+.bg-grey{
+    background: #B0BFC6;
+}
+.bg-blue{
+    background: #BBDEFA;
+}
+.bg-yellow{
+    background: #FFE0B2;
+}
+

 .info-block-header{
    display: block;
    margin:auto;
-    width:min-content;
+    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
 }
-
 .info-block-text{
+    display: block;
    text-align: justify;
-    /* font-size: 0.7em; not sure */
 }
 .info-block-image{
-    margin: auto;
-    width:25%;
+    margin: 0% 5% 5%;
+    width:90%;
+    height:100px;
    height:10%;
    overflow: hidden;
 }
 .info-block-image >img{
    width: 100%;
 }
-
 .rounded{
-    border-radius: 5%;
+    border-radius: 20px;
    overflow: hidden;
 }
-
 .info-block-button{
    float: right;
-    margin-right: 10%;
    color:white;
-    background-color: blue;
+    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;
+    margin:5%;
+}
+.info-block-image-small{
+    display: inline-block;
+    width: 20%;
+    height: 100px;
+    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;
+}
+.inline {
+    display: inline-block;
+
+}
+.info-block-wide-text-container{
+    width: 77%;
+}
+
+.link{
+    display: block;
+    color:gray;
+    margin-bottom: 0px;
+}
+.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{
+    width: 23%;
+}
--- a/index.html
+++ b/index.html
@@ -9,20 +9,20 @@
    <link rel="stylesheet" href="./index.css">
 </head>

-<body bgcolor="#F0F8FF">
+<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>
        <a href="./embeded_details.html">
-            <div class="menu-item">Embeded </div>
+            <div class="menu-item">Embeded</div>
        </a>
        <a href="./opencv_details.html">
-            <div class="menu-item">OpenCV </div>
+            <div class="menu-item">OpenCV</div>
        </a>
        <a href="./photography_details.html">
-            <div class="menu-item">Photography </div>
+            <div class="menu-item">Photography</div>
        </a>
        <a href="./table.html">
            <div class="menu-item">Table</div>
@@ -53,104 +53,114 @@
    </div>

    <div class="main-block">
-        <div class="main-right main-column">
-            <div class="info-block rounded bg-aquae">
-                <span class="info-block-header">ASdasdasd</span>
-                <span class="info-block-text">
-                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+        <div class="main-column">
+            <div class="info-block rounded bg-aqua">
+                <span class="info-block-header">Aboba Header 1</span>
+                <span class="info-block-text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text Text Text
                    Text Text Text Text Text
                </span>
                <div class="info-block-image rounded">
                    <img src="./images/institute.png" alt="ESP32">
                </div>
-                <button type="button" class="info-block-button" >More info-</button>
+                <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">Aboba Header 1</span>
+                <span class="info-block-text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text Text Text
+                    Text Text Text Text Text
+                </span>
+                <div class="info-block-image rounded">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+                <button type="button" class="info-block-button">More info»</button>
+            </div>
        </div>

        <div class="main-center">
+            <div class="center-upper">
+                <div class="info-block-image-small">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+                <div class="inline info-block-wide-text-container">
+                    <span class="info-block-header align-left">Aboba Header 1</span>
+                    <span class="info-block-text ">Text Text Text TextText TextText TextText TextText TextText TextText
+                        Text
+                    </span>
+                    <a class="link align-left" href="./index.html">More info»</a>
+                </div>
+            </div>
+            <div class="center-center">
+                <span class="info-block-header">Aboba Header 1</span>
+                <span class="info-block-text inline small-w">Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text
+                    Text Text Text Text Text
+                    Text Text Text Text Text
+                </span>

+                <div class="info-block-image-center">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+
+                <span class="info-block-text inline small-w">Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text
+                    Text Text Text Text Text
+                    Text Text Text Text Text
+                </span>
+
+            </div>
+            <div class="center-lower">
+
+                <div class="inline info-block-wide-text-container">
+                    <span class="info-block-header align-right">Aboba Header 1</span>
+                    <span class="info-block-text ">Text Text Text TextText TextText TextText TextText TextText TextText
+                        Text
+                    </span>
+                    <a class="link align-right" href="./index.html">More info»</a>
+                </div>
+                <div class="info-block-image-small">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+            </div>

        </div>


-        <div class="main-left main-column">
+        <div class="main-column">
+            <div class="info-block rounded bg-blue">
+                <div class="info-block-image rounded">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+                <span class="info-block-header">Aboba Header 1</span>
+                <span class="info-block-text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text Text Text
+                    Text Text Text Text Text
+                </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/institute.png" alt="ESP32">
+                </div><span class="info-block-header">Aboba Header 1</span>
+                <span class="info-block-text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text Text Text
+                    Text Text Text Text Text
+                </span>
+
+                <button type="button" class="info-block-button button-left">More info»</button>
+            </div>

        </div>
    </div>



-
-
-
-
-
-
-
-    <h2 align="center">OkunElya's Portfolio</h2>
-    <p align="center">
-        <b>Q:</b> What's this site for? <br>
-        <b>A:</b> Just to show progress in education ( check git)
-    </p>
-
-    <p align="center">
-        <b>Q:</b> Why? <br>
-        <b>A:</b> Because.
-    </p>
-    <p align="center">
-        <img src="./images/AQ_monitor.png" alt="Air Quality Monitor Device" height="30">
-        <img src="./images/arduino.png" alt="Arduino" height="30">
-        <img src="./images/arucos.png" alt="Arucos" height="30">
-        <img src="./images/esp32.png" alt="ESP32" height="30">
-        <img src="./images/institute.png" alt="Institute" height="30">
-        <img src="./images/opencv.png" alt="OpenCV" height="30">
-        <img src="./images/stm32.png" alt="STM32" height="30">
-    </p>
-    <hr width="800" align="center">
-    <h3>Experience:</h3>
-    <a href="./embeded_details.html">
-        <h4><i>Embedded Systems:</i></h4>
-    </a>
-    <p> Had a serval projects with different MCUs and wrote firmware for them. <br>
-        My main stack consists of Platformio+EspIdf or Arduino, also tried STM32</p>
-
-    <a href="https://github.com/OkunElya/Air-Quality-Monitor-Device">
-        <img src="./images/AQ_monitor.png" width="500" alt="Air Quality Monitor Device"><br>
-        <p><i>Click the image to check GitHub Project</i></p>
-    </a>
-
-    <hr width="800" align="center">
-
-    <a href="./opencv_details.html">
-        <h4><i>OpenCV:</i></h4>
-    </a>
-    <p> I love when programs are able to <i>see</i> things or recognise them<br>
-        so i had serval projects involding image processing <br>
-        Sadly i'm used to opencv binding in python and not C++ , but that is solvable)</p>
-
-    <p>
-        <img src="./images/arucos.png" width="500" alt="Image of a table with arucos sheet"><br>
-        <i>Random image from the internet (not mine)</i>
-    </p>
-
-    <hr width="800" align="center">
-    <h3>Hobbies:</h3>
-    <ol>
-        <li>
-            <p>Reading:<br> I love Stephen King's books , especially "<a href="./images/institute.png">Insitite</a>"
-            </p>
-        </li>
-        <li>
-            <p><a href="./photography_details.html">Photography:</a><br> If I have some <i>free time</i> I may take
-                some pictures and post them <a href="https://t.me/iTakePhotosOnTapok">here</a> </p>
-        </li>
-    </ol>
-    <hr width="800" align="center">
-
-    <h3><a href="./table.html"> Table!!!! With Filters!!! (not working yet)</a></h3>
-    <p align="right">Author: Kulesh <br>
+    <p>Author: Kulesh <br>
        Group: Б9123-09.03.04</p>
 </body>