menu done

This commit is contained in:
2025-10-17 04:10:13 +10:00
parent c8c35a4cf2
commit bc8100246d
2 changed files with 131 additions and 17 deletions

View File

@@ -0,0 +1,71 @@
/* menu part */
.menu {
border-top: double 5px silver;
border-bottom: double 5px silver;
text-align: right;
}
.menu-item {
display: inline-block;
width: 8%;
height: 3em;
line-height: 3em;
text-align: center;
vertical-align: middle;
margin: 0 1%;
overflow: hidden;
text-overflow: ellipsis ;
}
.menu .selected {
color: green;
font-weight: bold;
border-left: double 5px silver;
border-right: double 5px silver;
}
.menu .menu-header {
color: green;
font-weight: bold;
float: left;
}
.menu a {
color: black;
}
/* 4 images part */
.images-container{
width: 90%;
height:20%;
margin:auto;
overflow: hidden;
margin: 1%;
}
.images-container .half-size{
float: left;
width: 50%;
height: 100%;
}
.images-container .quarter-size{
float: left;
width: 25%;
height: 100%;
}
.images-container .image-column-container{
float: left;
width: 25%;
height: 100%;
}
.images-container img{
width: 100%;
height: 100%;
}
.image-column-container div{
height: 50%;
}

View File

@@ -6,20 +6,61 @@
<title>
"Portfolio"
</title>
<link rel="stylesheet" href="./index.css">
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html"><h4>Home</h4></a></li>
<li><a href="./embeded_details.html">Embeded Details</a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html">Photography Details</a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute</a></li>
</ul>
</details>
<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>
</a>
<a href="./opencv_details.html">
<div class="menu-item">OpenCV </div>
</a>
<a href="./photography_details.html">
<div class="menu-item">Photography </div>
</a>
<a href="./table.html">
<div class="menu-item">Table</div>
</a>
<a href="./images/institute.png">
<div class="menu-item">Institute</div>
</a>
</div>
<div class="images-container">
<div class="half-size">
<img src="./images/arduino.png" alt="Arduino">
</div>
<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>
<h2 align="center">OkunElya's Portfolio</h2>
<p align="center">
<b>Q:</b> What's this site for? <br>
@@ -48,7 +89,7 @@
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>
<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>
@@ -70,17 +111,19 @@
<h3>Hobbies:</h3>
<ol>
<li>
<p>Reading:<br> I love Stephen King's books , especially "<a href="./images/institute.png">Insitite</a>"</p>
<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>
<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>
Group: Б9123-09.03.04</p>
<p align="right">Author: Kulesh <br>
Group: Б9123-09.03.04</p>
</body>
</html>