2 changed files with 129 additions and 0 deletions
@ -0,0 +1,49 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<link rel="stylesheet" href="layout.css"> |
||||
|
</head> |
||||
|
<body id="home"> |
||||
|
<div class="header"> |
||||
|
<h1>Záhlaví/hlavička</h1> |
||||
|
<p>malý text na doplnění nebo rozšíření textu pod h1</p> |
||||
|
</div> |
||||
|
<div class="topnav"> |
||||
|
<a href="#kotva1">kotva 1</a> |
||||
|
<a href="#kotva2">kotva 2</a> |
||||
|
<a href="#kotva3">kotva 3</a> |
||||
|
<a href="#kotva4" style="float: right;">kotva 4</a> |
||||
|
</div> |
||||
|
<div class="container"> <!--Obsah --> |
||||
|
<div class="card secret" id="kotva1"> |
||||
|
<h2>Kotva 1</h2> |
||||
|
<h5>podnadpis karty, který by mohl být delší</h5> |
||||
|
<p>Begin:</p> |
||||
|
<p ><i>lorem + tab =</i> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.</p> |
||||
|
<a href="#home">Nahoru domů</a> |
||||
|
</div> |
||||
|
<div class="card" id="kotva2"> |
||||
|
<h2>Kotva 2</h2> |
||||
|
<h5>podnadpis karty, který by mohl být delší</h5> |
||||
|
<p>Begin:</p> |
||||
|
<p><i>lorem + tab =</i> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.</p> |
||||
|
<a href="#home">Nahoru domů</a> |
||||
|
</div> |
||||
|
<div class="card" id="kotva3"> |
||||
|
<h2>Kotva 3</h2> |
||||
|
<h5>podnadpis karty, který by mohl být delší</h5> |
||||
|
<p>Begin:</p> |
||||
|
<p><i>lorem + tab =</i> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.</p> |
||||
|
<a href="#home">Nahoru domů</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer" id="kotva4"> |
||||
|
<h2>Zapatí</h2> |
||||
|
<p>Lorem ipsum</p> |
||||
|
<a href="#home">Nahoru domů</a> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,80 @@ |
|||||
|
body { |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
padding: 10px; |
||||
|
background-color: rgb(220, 220, 220); |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
text-align: center ; |
||||
|
/* border: 2px solid darkblue; */ |
||||
|
padding: 5px 0px; |
||||
|
border-radius: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
background-image: linear-gradient(45deg,#19264c,#9ebeca); |
||||
|
color: whitesmoke; |
||||
|
transition: 2s; |
||||
|
} |
||||
|
.header:hover { |
||||
|
opacity: 0.8; |
||||
|
box-shadow: 5px 5px 10px black; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
|
.topnav { |
||||
|
background-image: linear-gradient(30deg,#03202e,#073d66); |
||||
|
overflow: hidden; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
.topnav a{ |
||||
|
color: whitesmoke; |
||||
|
text-decoration: none; |
||||
|
float: left; |
||||
|
display: block; |
||||
|
padding: 5px 15px; |
||||
|
} |
||||
|
|
||||
|
.topnav a:hover { |
||||
|
background-color: #ddd; |
||||
|
color: black; |
||||
|
} |
||||
|
|
||||
|
.container::after { |
||||
|
clear:both; |
||||
|
display: table; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
padding: 20px; |
||||
|
margin-top: 20px; |
||||
|
background-color: white; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
background-image: radial-gradient(circle,#000,#555); |
||||
|
color: whitesmoke; |
||||
|
text-align: center; |
||||
|
padding: 10px; |
||||
|
margin-top: 20px; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.footer a { |
||||
|
text-decoration: underline; |
||||
|
color: white |
||||
|
} |
||||
|
|
||||
|
@keyframes example { |
||||
|
0% {color:#FF0000} |
||||
|
35% {color:#FF0000} |
||||
|
65% {color:#0000FF} |
||||
|
100% {color:#00FF00} |
||||
|
} |
||||
|
|
||||
|
.secret { |
||||
|
/* color:black; */ |
||||
|
animation-name: example; |
||||
|
animation-duration: 2s; |
||||
|
animation-iteration-count: infinite; |
||||
|
animation-direction: alternate; |
||||
|
} |
||||
Loading…
Reference in new issue