104 lines
2.3 KiB
HTML
104 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title> Deez nuts </title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'xenippa';
|
|
src: URL('img/xenippa.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'ninifont';
|
|
src: URL('img/ninifont.otf') format('opentype');
|
|
}
|
|
h1 {
|
|
color: black;
|
|
font-size: 300%;
|
|
}
|
|
h2 {
|
|
color: black;
|
|
font-size: 275%;
|
|
}
|
|
a, p {
|
|
color: black;
|
|
font-size: 150%;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.quote {
|
|
font-family: 'ninifont';
|
|
}
|
|
.box {
|
|
border-radius: 1%;
|
|
margin: 5%;
|
|
padding: 1%;
|
|
background-color: lightgray;
|
|
}
|
|
.main {grid-area: main;}
|
|
.left {grid-area: left;}
|
|
.right {grid-area: right;}
|
|
.down {grid-area: down;}
|
|
.imgcontain {object-fit: contain;}
|
|
.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>Tohle je přepadení</h1>
|
|
<div class='box'>
|
|
<p class='text quote'>
|
|
"Proč jsme takový vemena Matúši?"<br> - Kačka
|
|
</p>
|
|
<p class='text quote'>
|
|
"Nepřišel Mohamed za javascriptem, přišel javascript za Mohamedem."<br> - Kubík
|
|
</p>
|
|
<p class='text quote'>
|
|
"Chudák Mohamed."<br> - Jirka
|
|
</p>
|
|
<p class='text quote'>
|
|
"Čau lidi, já jsem křeček."<br> - Topení
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='left'> <div class='imgcontain'>
|
|
<img src='img/karinka.jpg'>
|
|
<a><i>Obrázek 1:</i></a>
|
|
<a style="font-family: xenippa">Karinka</a>
|
|
</div> </div>
|
|
|
|
<div class='right'> <div class='imgcontain'>
|
|
<img src='img/puficek.jpg'>
|
|
<a><i>Obrázek 2:</i></a>
|
|
<a style="font-family: xenippa">Pufíček</a>
|
|
</div> </div>
|
|
|
|
<div class='down'>
|
|
<h2>Projekty</h2>
|
|
<a>Rekurzivní piškvorky: </a>
|
|
<a href='p/index.html'>mat.uuush.eu/p</a>
|
|
|
|
<br>
|
|
|
|
<h2>Kontakt</h2>
|
|
<p>
|
|
E-mail: matus1@pull.cz<br>
|
|
Discord: the_matuush
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</center> </body>
|
|
</html>
|