CSS - animations

3 years ago · fa2cfe1e86
2 changed files with 143 additions and 0 deletions
--- a/06/index.html
+++ b/06/index.html
@ -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>
--- a/06/style.css
+++ b/06/style.css
@ -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;
+}