menu done
This commit is contained in:
71
index.css
71
index.css
@@ -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%;
|
||||
}
|
||||
71
index.html
71
index.html
@@ -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>
|
||||
@@ -70,11 +111,12 @@
|
||||
<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">
|
||||
@@ -83,4 +125,5 @@
|
||||
<p align="right">Author: Kulesh <br>
|
||||
Group: Б9123-09.03.04</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user