2 changed files with 143 additions and 0 deletions
@ -0,0 +1,49 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body id="home"> |
||||
|
<div class="header"><!-- hlavička --> |
||||
|
<h1>Záhlaví/hlavička</h1> |
||||
|
<p>Mnohem menší text pro doplnění</p> |
||||
|
</div> |
||||
|
<div class="topnav"><!-- navigace --> |
||||
|
<a href="#kotva1">Kotva 1</a> |
||||
|
<a href="#kotva2">Kotva 2</a> |
||||
|
<a href="#kotva3">Kotva 3</a> |
||||
|
<a href="#kotva4" style="float: right;">zapatí</a> |
||||
|
</div> |
||||
|
<div class="container"> <!-- obsah --> |
||||
|
<div class="card" id="kotva1"> |
||||
|
<h2>Kotva 1</h2> |
||||
|
<h5>Podnadpis karty ktery muze byt delsi</h5> |
||||
|
<p>Begin</p> |
||||
|
<p class="secret">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?</p> |
||||
|
<a href="#home">NAHORU DOMU</a> |
||||
|
</div> |
||||
|
<div class="card" id="kotva2"> |
||||
|
<h2>Kotva 2</h2> |
||||
|
<h5>Podnadpis karty ktery muze byt delsi</h5> |
||||
|
<p>Begin</p> |
||||
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?</p> |
||||
|
<a href="#home">NAHORU DOMU</a> |
||||
|
</div> |
||||
|
<div class="card" id="kotva3"> |
||||
|
<h2>Kotva 3</h2> |
||||
|
<h5>Podnadpis karty ktery muze byt delsi</h5> |
||||
|
<p>Begin</p> |
||||
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?</p> |
||||
|
<a href="#home">NAHORU DOMU</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer" id="kotva4"> <!-- zapatí --> |
||||
|
<h2>Zápatí</h2> |
||||
|
<a href="#home">NAHORU DOMU</a> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,94 @@ |
|||||
|
@import url('https://fonts.googleapis.com/css2?family=Island+Moments&family=Roboto:wght@100;300;400;900&display=swap'); |
||||
|
|
||||
|
body{ |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
padding: 10px; |
||||
|
background-color: rgb(218, 218, 218); |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
text-align: center; |
||||
|
/* border: 0px solid darkblue; */ |
||||
|
padding: 5px 0px; |
||||
|
margin-bottom: 10px; |
||||
|
border-radius: 20px; |
||||
|
color: white; |
||||
|
background-image: linear-gradient(45deg,#283048,#859398); |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.header:hover { |
||||
|
opacity: 0.8; |
||||
|
box-shadow: 5px 5px 10px black; |
||||
|
padding: 8px 0px; |
||||
|
} |
||||
|
|
||||
|
.topnav{ |
||||
|
/* background-color: rgb(51, 51, 51); */ |
||||
|
background-image: linear-gradient(30deg, #232526,#43474a); |
||||
|
overflow: hidden; |
||||
|
border-radius: 10px; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
|
.topnav:hover { |
||||
|
box-shadow: 5px 5px 10px black; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.topnav a{ |
||||
|
color: whitesmoke; /* barva textu*/ |
||||
|
text-decoration: none; /*odstrani podržítko*/ |
||||
|
float: left; /* nastaví elementy do leva*/ |
||||
|
display: block; /*blokové zobrazení*/ |
||||
|
padding: 5px 15px; /* mezery pro odkazy*/ |
||||
|
transition: 0.4s; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
.topnav a:hover { |
||||
|
background-color: #d0d0d0; |
||||
|
color: black; |
||||
|
} |
||||
|
|
||||
|
.container:after{ |
||||
|
clear:both; |
||||
|
display: table; |
||||
|
} |
||||
|
|
||||
|
.card{ |
||||
|
padding: 20px; |
||||
|
margin-top: 20px; |
||||
|
background-color: white; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
|
||||
|
.footer{ |
||||
|
background-image: radial-gradient(circle,#000, #434343); |
||||
|
text-align: center; |
||||
|
padding: 20px; |
||||
|
margin-top: 20px; |
||||
|
color:white; |
||||
|
border-radius: 20px; |
||||
|
|
||||
|
} |
||||
|
.footer a { |
||||
|
text-decoration: underline; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
@keyframes example { |
||||
|
0% {color: #FF0000} |
||||
|
35%{color: #FF0000} |
||||
|
65% {color: #0000FF} |
||||
|
100% {color: #0000FF} |
||||
|
} |
||||
|
|
||||
|
.secret { |
||||
|
color: black; |
||||
|
animation-name: example; |
||||
|
animation-duration: 2s; |
||||
|
animation-iteration-count: infinite; |
||||
|
animation-direction: alternate; |
||||
|
} |
||||
Loading…
Reference in new issue