images fixed

This commit is contained in:
2025-10-30 23:45:38 +10:00
parent 36c358e9d9
commit c0c5d4dbcd
4 changed files with 31 additions and 21 deletions

BIN
images/sqarucos.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/sqstm32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -154,7 +154,7 @@
}
/* main block center part */
.center-upper, .center-lower, .center-center{
background-color: lightblue;
/* background-color: lightblue; DEBUG*/
margin:5%;
}
.info-block-image-small{
@@ -186,6 +186,7 @@
display: block;
color:gray;
margin-bottom: 0px;
white-space: nowrap;
}
.info-block-image-center{
display: inline-block;
@@ -199,5 +200,6 @@
width: 100%;
}
.small-w{
vertical-align: top;
width: 23%;
}

View File

@@ -81,46 +81,50 @@
<div class="main-center">
<div class="center-upper">
<div class="info-block-image-small">
<img src="./images/institute.png" alt="ESP32">
<img src="./images/sqstm32.png" alt="stm32">
</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 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>
<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>
<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 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 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>
</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 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 class="link align-right" href="./index.html">More info»</a>
</div>
<div class="info-block-image-small">
<img src="./images/institute.png" alt="ESP32">
<img src="./images/sqarucos.png" alt="ESP32">
</div>
</div>
@@ -133,7 +137,8 @@
<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>
<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>
@@ -144,7 +149,10 @@
<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>
<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>