layout & animation

3 weeks ago · 1f8935a38b
2 changed files with 129 additions and 0 deletions
--- a/04_layout/index.html
+++ b/04_layout/index.html
@ -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>
--- a/04_layout/layout.css
+++ b/04_layout/layout.css
@ -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;
+}