web/index.html
2024-02-26 11:07:37 +01:00

90 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title> Deez nuts </title>
<style>
.title {
color: black;
font-size: 300%;
}
.subtitle {
color: black;
font-size: 275%;
}
.text {
color: black;
font-size: 150%;
}
.main {grid-area: main;}
.left {
grid-area: left;
object-fit: contain;
}
.right {
grid-area: right;
object-fit: contain;
}
.down {grid-area: down;}
img {
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: 3fr 2fr 2fr 3fr;
grid-template-rows: auto;
grid-template-areas:
"left main main right"
"left main main right"
"down down down down";
justify-items: center;
}
</style>
</head>
<body> <center>
<div class='container'>
<div class='main'>
<h1 class='title'>Tohle je přepadení</h1>
<div id='quotes'> </div>
</div>
<div class='left'>
<img src='img/karinka.jpg'>
<a class='text'><i>Obrázek 1:</i> Karinka</a>
</div>
<div class='right'>
<img src='img/puficek.jpg'>
<a class='text'><i>Obrázek 2:</i> Pufíček</a>
</div>
<div class='down'>
<br> <p class='text'>Webové stránky takového toho tamtoho člověka</p> <br>
<h2 class='subtitle'>Projekty</h2>
<p class='text'>
Rekurzivní piškvorky v C++ do WebAssembly: <a href='pisiskvory/pisiskvory.html'>mat.uuush.eu/pisiskvory</a><br>
Rekurzivní piškvorky ve Svelte: <a href='p/index.html'>mat.uuush.eu/p</a><br>
</p>
<h2 class='subtitle'>Kontakt</h2>
<p class='text'>
E-mail: matus1@pull.cz<br>
Discord: the_matuush<br>
</p>
</div>
</div>
<script>
let q = [
['Proč jsme takový vemena Matúši?', 'Kačka'],
['Nepřišel Mohamed za javascriptem, přišel javascript za Mohamedem.', 'Kubík'],
['Chudák Mohamed.', 'Jirka'],
['Čau lidi, já jsem křeček.', 'Topení']
];
let quotes = document.getElementById('quotes');
q.forEach(quote => {
quotes.innerHTML += '<p class=\'text\'>"<i>' + quote[0] + '</i>"<br> - ' + quote[1] + '</p>';
});
</script>
</center> </body>
</html>