OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

images fixed

Browse Source
This commit is contained in:
OkunElya
2025-10-30 23:45:38 +10:00
parent 36c358e9d9
commit c0c5d4dbcd
4 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/sqarucos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/sqstm32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

4
index.css
View File

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

48
index.html
View File

@@ -81,46 +81,50 @@
<div class="main-center"> <div class="main-center">
<div class="center-upper"> <div class="center-upper">
<div class="info-block-image-small"> <div class="info-block-image-small">
<img src="./images/institute.png" alt="ESP32"> <img src="./images/sqstm32.png" alt="stm32">
</div> </div>
<div class="inline info-block-wide-text-container"> <div class="inline info-block-wide-text-container">
<span class="info-block-header align-left">Aboba Header 1</span> <span class="info-block-header align-left">STM 32</span>
<span class="info-block-text ">Text Text Text TextText TextText TextText TextText TextText TextText <span class="info-block-text ">Chinese STM32 microcontrollers are affordable and compatible with
Text STM32 tools but may face flashing issues due to bootloader differences. Proper connections and
reliable tools can help resolve these.</span>
</span> </span>
<a class="link align-left" href="./index.html">More info»</a> <a class="link align-left" href="./index.html">More info»</a>
</div> </div>
</div> </div>
<div class="center-center"> <div class="center-center">
<span class="info-block-header">Aboba Header 1</span> <span class="info-block-header">Stephen King's books</span>
<span class="info-block-text inline small-w">Text Text Text Text Text Text Text Text Text Text Text Text <span class="info-block-text inline small-w">Stephen King's books are a fascinating blend of horror,
Text Text Text suspense, and deep
Text Text Text Text Text character development. His storytelling captivates readers and keeps them on the edge of their
Text Text Text Text Text seats.</span>
</span>
<div class="info-block-image-center"> <div class="info-block-image-center">
<img src="./images/institute.png" alt="ESP32"> <img src="./images/institute.png" alt="ESP32">
</div> </div>
<span class="info-block-text inline small-w">Text Text Text Text Text Text Text Text Text Text Text Text <span class="info-block-text inline small-w">
Text Text Text Especially I love the institute, its architecture, and the vibrant community it fosters. The
Text Text Text Text Text institute has been a source of inspiration and growth for me, providing countless opportunities to
Text Text Text Text Text learn and collaborate.
<a class="link small-w" href="./index.html">More info»</a>
</span> </span>
</div> </div>
<div class="center-lower"> <div class="center-lower">
<div class="inline info-block-wide-text-container"> <div class="inline info-block-wide-text-container">
<span class="info-block-header align-right">Aboba Header 1</span> <span class="info-block-header align-right">Arucos</span>
<span class="info-block-text ">Text Text Text TextText TextText TextText TextText TextText TextText <span class="info-block-text ">ArUco markers are widely used in computer vision for camera
Text 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> </span>
<a class="link align-right" href="./index.html">More info»</a> <a class="link align-right" href="./index.html">More info»</a>
</div> </div>
<div class="info-block-image-small"> <div class="info-block-image-small">
<img src="./images/institute.png" alt="ESP32"> <img src="./images/sqarucos.png" alt="ESP32">
</div> </div>
</div> </div>
@@ -133,7 +137,8 @@
<img src="./images/16x9/image0.png" alt="Photography"> <img src="./images/16x9/image0.png" alt="Photography">
</div> </div>
<span class="info-block-header">Photography</span> <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> <button type="button" class="info-block-button button-left">More info»</button>
</div> </div>
@@ -144,7 +149,10 @@
<img src="./images/16x9/AQ_monitor.png" alt="Air Quality Monitor"> <img src="./images/16x9/AQ_monitor.png" alt="Air Quality Monitor">
</div> </div>
<span class="info-block-header">IoT and Air Quality Monitoring</span> <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> <button type="button" class="info-block-button button-left">More info»</button>
</div> </div>