homework p2 continuing
This commit is contained in:
134
index.css
134
index.css
@@ -1,8 +1,9 @@
|
|||||||
/* menu part */
|
/* menu part */
|
||||||
.menu {
|
.menu {
|
||||||
border-top: double 5px silver;
|
border-top: double 4px silver;
|
||||||
border-bottom: double 5px silver;
|
border-bottom: double 4px silver;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
@@ -15,13 +16,15 @@
|
|||||||
margin: 0 1%;
|
margin: 0 1%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis ;
|
text-overflow: ellipsis ;
|
||||||
|
font-size: medium;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .selected {
|
.menu .selected {
|
||||||
color: green;
|
color: green;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-left: double 5px silver;
|
border-left: double 4px silver;
|
||||||
border-right: double 5px silver;
|
border-right: double 4px silver;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .menu-header {
|
.menu .menu-header {
|
||||||
@@ -38,39 +41,38 @@
|
|||||||
/* 4 images part */
|
/* 4 images part */
|
||||||
.images-container {
|
.images-container {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 140pt;
|
height: 200pt;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half-size {
|
.half-size {
|
||||||
width: 49%;
|
width: 49%;
|
||||||
margin: 0.5%;
|
margin: 0.2%;
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quarter-size {
|
.quarter-size {
|
||||||
width: 24%;
|
width: 24%;
|
||||||
margin: 0.5%;
|
margin: 0.2%;
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-column-container {
|
.image-column-container {
|
||||||
width: 24%;
|
width: 24%;
|
||||||
height:100%;
|
height:100%;
|
||||||
margin:0.5%;
|
margin: 0.15%;
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-column-container > div {
|
.image-column-container > div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 49%;
|
height: 50%;
|
||||||
margin: 0.5%;
|
margin-bottom: 1.4%;
|
||||||
text-align: center;
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* text-align: center; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.images-container img{
|
.images-container img{
|
||||||
@@ -81,49 +83,123 @@
|
|||||||
|
|
||||||
.main-block{
|
.main-block{
|
||||||
width:80%;
|
width:80%;
|
||||||
margin: auto;
|
margin:1.2% auto;
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.main-column{
|
||||||
|
display: inline-block;
|
||||||
|
width:25%;
|
||||||
|
}
|
||||||
|
.main-center{
|
||||||
|
vertical-align: top;
|
||||||
|
width: 48%;
|
||||||
|
height:100%;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
.info-block{
|
.info-block{
|
||||||
width:30%;
|
height:10%;
|
||||||
height:40%;
|
padding: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-aqua{
|
.bg-aqua{
|
||||||
background: aqua;
|
background: #80DEEA;
|
||||||
}
|
}
|
||||||
|
.bg-grey{
|
||||||
|
background: #B0BFC6;
|
||||||
|
}
|
||||||
|
.bg-blue{
|
||||||
|
background: #BBDEFA;
|
||||||
|
}
|
||||||
|
.bg-yellow{
|
||||||
|
background: #FFE0B2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.info-block-header{
|
.info-block-header{
|
||||||
display: block;
|
display: block;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
width:min-content;
|
text-align: center;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block-text{
|
.info-block-text{
|
||||||
|
display: block;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
/* font-size: 0.7em; not sure */
|
|
||||||
}
|
}
|
||||||
.info-block-image{
|
.info-block-image{
|
||||||
margin: auto;
|
margin: 0% 5% 5%;
|
||||||
width:25%;
|
width:90%;
|
||||||
|
height:100px;
|
||||||
height:10%;
|
height:10%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.info-block-image >img{
|
.info-block-image >img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded{
|
.rounded{
|
||||||
border-radius: 5%;
|
border-radius: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block-button{
|
.info-block-button{
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 10%;
|
|
||||||
color:white;
|
color:white;
|
||||||
background-color: blue;
|
background-color: #2294F4;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
.button-left{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.pad-down{
|
||||||
|
margin-top: 40%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
/* main block center part */
|
||||||
|
.center-upper, .center-lower, .center-center{
|
||||||
|
background-color: lightblue;
|
||||||
|
margin:5%;
|
||||||
|
}
|
||||||
|
.info-block-image-small{
|
||||||
|
display: inline-block;
|
||||||
|
width: 20%;
|
||||||
|
height: 100px;
|
||||||
|
background-color:black ;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.info-block-image-small >img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.align-left{
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.align-right{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.inline {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
.info-block-wide-text-container{
|
||||||
|
width: 77%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link{
|
||||||
|
display: block;
|
||||||
|
color:gray;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.info-block-image-center{
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
/* height: 100px; */
|
||||||
|
background-color:black ;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.info-block-image-center >img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.small-w{
|
||||||
|
width: 23%;
|
||||||
|
}
|
||||||
164
index.html
164
index.html
@@ -9,7 +9,7 @@
|
|||||||
<link rel="stylesheet" href="./index.css">
|
<link rel="stylesheet" href="./index.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body bgcolor="#F0F8FF">
|
<body>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="menu-item menu-header">Portfolio Site </div>
|
<div class="menu-item menu-header">Portfolio Site </div>
|
||||||
<a href="./index.html">
|
<a href="./index.html">
|
||||||
@@ -53,104 +53,114 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-block">
|
<div class="main-block">
|
||||||
<div class="main-right main-column">
|
<div class="main-column">
|
||||||
<div class="info-block rounded bg-aquae">
|
<div class="info-block rounded bg-aqua">
|
||||||
<span class="info-block-header">ASdasdasd</span>
|
<span class="info-block-header">Aboba Header 1</span>
|
||||||
<span class="info-block-text">
|
<span class="info-block-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 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 Text
|
||||||
</span>
|
</span>
|
||||||
<div class="info-block-image rounded">
|
<div class="info-block-image rounded">
|
||||||
<img src="./images/institute.png" alt="ESP32">
|
<img src="./images/institute.png" alt="ESP32">
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="info-block-button" >More info-</button>
|
<button type="button" class="info-block-button">More info»</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="info-block rounded bg-grey pad-down">
|
||||||
|
<span class="info-block-header">Aboba Header 1</span>
|
||||||
|
<span class="info-block-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 Text
|
||||||
|
</span>
|
||||||
|
<div class="info-block-image rounded">
|
||||||
|
<img src="./images/institute.png" alt="ESP32">
|
||||||
|
</div>
|
||||||
|
<button type="button" class="info-block-button">More info»</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-center">
|
<div class="main-center">
|
||||||
|
<div class="center-upper">
|
||||||
|
<div class="info-block-image-small">
|
||||||
|
<img src="./images/institute.png" alt="ESP32">
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="main-left main-column">
|
<div class="main-column">
|
||||||
|
<div class="info-block rounded bg-blue">
|
||||||
|
<div class="info-block-image rounded">
|
||||||
|
<img src="./images/institute.png" alt="ESP32">
|
||||||
|
</div>
|
||||||
|
<span class="info-block-header">Aboba Header 1</span>
|
||||||
|
<span class="info-block-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 Text
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button type="button" class="info-block-button button-left">More info»</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-block rounded bg-yellow pad-down">
|
||||||
|
|
||||||
|
<div class="info-block-image rounded">
|
||||||
|
<img src="./images/institute.png" alt="ESP32">
|
||||||
|
</div><span class="info-block-header">Aboba Header 1</span>
|
||||||
|
<span class="info-block-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 Text
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button type="button" class="info-block-button button-left">More info»</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>Author: Kulesh <br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2 align="center">OkunElya's Portfolio</h2>
|
|
||||||
<p align="center">
|
|
||||||
<b>Q:</b> What's this site for? <br>
|
|
||||||
<b>A:</b> Just to show progress in education ( check git)
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<b>Q:</b> Why? <br>
|
|
||||||
<b>A:</b> Because.
|
|
||||||
</p>
|
|
||||||
<p align="center">
|
|
||||||
<img src="./images/AQ_monitor.png" alt="Air Quality Monitor Device" height="30">
|
|
||||||
<img src="./images/arduino.png" alt="Arduino" height="30">
|
|
||||||
<img src="./images/arucos.png" alt="Arucos" height="30">
|
|
||||||
<img src="./images/esp32.png" alt="ESP32" height="30">
|
|
||||||
<img src="./images/institute.png" alt="Institute" height="30">
|
|
||||||
<img src="./images/opencv.png" alt="OpenCV" height="30">
|
|
||||||
<img src="./images/stm32.png" alt="STM32" height="30">
|
|
||||||
</p>
|
|
||||||
<hr width="800" align="center">
|
|
||||||
<h3>Experience:</h3>
|
|
||||||
<a href="./embeded_details.html">
|
|
||||||
<h4><i>Embedded Systems:</i></h4>
|
|
||||||
</a>
|
|
||||||
<p> Had a serval projects with different MCUs and wrote firmware for them. <br>
|
|
||||||
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>
|
|
||||||
<p><i>Click the image to check GitHub Project</i></p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<hr width="800" align="center">
|
|
||||||
|
|
||||||
<a href="./opencv_details.html">
|
|
||||||
<h4><i>OpenCV:</i></h4>
|
|
||||||
</a>
|
|
||||||
<p> I love when programs are able to <i>see</i> things or recognise them<br>
|
|
||||||
so i had serval projects involding image processing <br>
|
|
||||||
Sadly i'm used to opencv binding in python and not C++ , but that is solvable)</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<img src="./images/arucos.png" width="500" alt="Image of a table with arucos sheet"><br>
|
|
||||||
<i>Random image from the internet (not mine)</i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<hr width="800" align="center">
|
|
||||||
<h3>Hobbies:</h3>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<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>
|
|
||||||
</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>
|
Group: Б9123-09.03.04</p>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user