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%;
|
||||||
|
}
|
||||||
75
index.html
75
index.html
@@ -6,20 +6,61 @@
|
|||||||
<title>
|
<title>
|
||||||
"Portfolio"
|
"Portfolio"
|
||||||
</title>
|
</title>
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body bgcolor="#F0F8FF">
|
<body bgcolor="#F0F8FF">
|
||||||
<details>
|
<div class="menu">
|
||||||
<summary>Menu</summary>
|
<div class="menu-item menu-header">Portfolio Site </div>
|
||||||
<ul>
|
<a href="./index.html">
|
||||||
<li><a href="./index.html"><h4>Home</h4></a></li>
|
<div class="menu-item selected">Home</div>
|
||||||
<li><a href="./embeded_details.html">Embeded Details</a></li>
|
</a>
|
||||||
<li><a href="./opencv_details.html">OpenCV Details</a></li>
|
<a href="./embeded_details.html">
|
||||||
<li><a href="./photography_details.html">Photography Details</a></li>
|
<div class="menu-item">Embeded </div>
|
||||||
<li><a href="./table.html">Table with filters (not working yet)</a></li>
|
</a>
|
||||||
<li><a href="./images/institute.png">Institute</a></li>
|
<a href="./opencv_details.html">
|
||||||
</ul>
|
<div class="menu-item">OpenCV </div>
|
||||||
</details>
|
</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>
|
<h2 align="center">OkunElya's Portfolio</h2>
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<b>Q:</b> What's this site for? <br>
|
<b>Q:</b> What's this site for? <br>
|
||||||
@@ -70,17 +111,19 @@
|
|||||||
<h3>Hobbies:</h3>
|
<h3>Hobbies:</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<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>
|
||||||
<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
|
<p><a href="./photography_details.html">Photography:</a><br> If I have some <i>free time</i> I may take
|
||||||
href="https://t.me/iTakePhotosOnTapok">here</a> </p>
|
some pictures and post them <a href="https://t.me/iTakePhotosOnTapok">here</a> </p>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<hr width="800" align="center">
|
<hr width="800" align="center">
|
||||||
|
|
||||||
<h3><a href="./table.html"> Table!!!! With Filters!!! (not working yet)</a></h3>
|
<h3><a href="./table.html"> Table!!!! With Filters!!! (not working yet)</a></h3>
|
||||||
<p align="right">Author: Kulesh <br>
|
<p align="right">Author: Kulesh <br>
|
||||||
Group: Б9123-09.03.04</p>
|
Group: Б9123-09.03.04</p>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user