css-layout

3 years ago · 33aedf6bc0
2 changed files with 94 additions and 0 deletions
--- a/05/index.html
+++ b/05/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>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/05/style.css
+++ b/05/style.css
@ -0,0 +1,45 @@
+body{
+    font-family: Arial;
+    padding: 10px;
+    background-color: rgb(200, 200, 200);
+}
+
+.header {
+    text-align: center;
+}
+
+.topnav{
+    background-color: #333;
+    overflow: hidden;
+}
+
+.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*/
+}
+
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+.container:after{
+    clear:both;
+    display: table;
+}
+
+.card{
+    padding: 20px;
+    margin-top: 20px;
+    background-color: white;
+}
+
+.footer{
+    background-color: #ddd;
+    text-align: center;
+    padding: 20px;
+    margin-top: 20px;
+}