Kód:
<!DOCTYPE html>
<html>
<head>
<title>Titulek stránky</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.zprava {
font-family: arial,sans-serif;
font-size: 14px;
}
.header {
padding: 5px;
text-align: center;
background: #555555;
color: white;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
font-family: arial,sans-serif;
}
h3.nadpis {
color: #bc102c;
}
.tlacitko {
background: linear-gradient(to bottom, #ff0000 0%, #bc102c 100%);
border: none;
border-radius: 14px;
color: white;
padding: 6px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
transition: 0.4s;
}
.tlacitko:hover {
color: white;
transition: 0.4s;
opacity: 0.8;
}
.nabidka3 {
overflow: hidden;
background-color: #ccc;
}
.nabidka3 a {
float: left;
display: block;
color: #003334;
text-align: center;
padding: 5px 20px;
text-decoration: none;
}
.nabidka3 a.right {
float: right;
}
.nabidka3 a:hover {
background-color: #eee;
color: #bc102c;
}
.footer {
padding: 10px;
text-align: center;
background: #cccccc;
color: #bc102c;
}
</style>
</head>
<body>
<div class="side">
<div class="header">
<h1>Moje stránka</h1>
<p>Mnou vytvořený web.</p>
</div>
<div class="nabidka3">
<a href="#no">Stránka</a>
<a href="#no">Stránka</a>
<a href="#no">Stránka</a>
<a href="#no" class="right">Stránka</a>
<a href="#no" class="right">Stránka</a>
</div>
<div class="zprava">
<h3 class="nadpis">Meteorologie</h3>
<p>Meteorologie, zajímavá věda, která se zabývá atmosférou a studuje její složení, stavbu, vlastnosti, jevy a děje v ní probíhající, jako například počasí. Meteorologie je považována za část fyziky a je často chápána jako "fyzika atmosféry".Je to věda, která se vyučuje na matematicko-fyzikálních fakultách a na mnoha univerzitách je meteorologie často vyučována jako součást věd o Zemi, což zohledňuje souvislost atmosféry s dalšími krajinnými sférami. Poznatky meteorologie jsou nezbytné v mnoha odvětvích lidské činnosti a mají široké uplatnění v oblastech jako doprava, zemědělství, energetika, letectví, námořní doprava a mnoho dalších.</p>
<a href="#no" class="tlacitko">Přečíst vše</a>
<a href="#no" class="tlacitko">Bouřkové jevy - charakteristika</a>
<h3 class="nadpis">Počasí</h3>
<p>Počasí je jedním jedinečným stavem atmosféry. Počasí je obvykle chápáno jako stav troposféry, protože ta je člověku nejblíže a bezprostředně ho obklopuje. Množství oblačnosti lze vyjádřit v procentech.</p>
<a href="#no" class="tlacitko">Předpověď počasí</a>
</div></div>
<div class="footer">
<h3>Zápatí webu</h3>
</div>
</body>
</html>
