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;
 }