Untitled

*{
    margin:0;
    padding:0;
}
.clearfix::afer{
    content: "";
    display: block;
    clear: both;
}
body{
    background-color:pink;
    width:100vw;
}

nav{
    height: 15vh;
    width:100%;
    background-color:red;
    position:fixed;


}
nav ul{
    line-height: 15vh;
    width: 100%;
}
nav ul li{
    float: left;
    list-style: none;
    width: 25%;
    text-align: center;
}
nav ul li a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    display: block;
    font-family: arial;
}
nav ul li a:hover{
    color: blue;
    background-color: white;
}

header{
    background-image:url(tlo.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
    text-align:center;
    height:100vh;
    calc:height(100vh-15vh);

}
h1{
    position:relative;
    top:25%;

}

#contener{
    width:100%;
    height:65vh;

}
#jeden{
    position: absolute;
    top: 100vh;
    left: 0;
    height:65vh;
    width: 25vw;
    background-color:yellow;
}
h2{
    text-align:center;
}

ol{
    position:absolute;
    left:45%;
    bottom:45%;

}
#dwa{
    position: absolute;
    top: 100vh;
    left: 25vw;
    height:65vh;
    width: 25vw;
    background-color:orange;
}

h3{
    text-align:center;
}

img{
    position:absolute;
    bottom:0%;
    width:100%;

}

#trzy{
    position: absolute;
    top: 100vh;
    right: 25vw;
    height:65vh;
    width: 25vw;
    background-color:brown;
}

h4{
    text-align:center;

}
table{
    border-collapse:collapse;
    position:absolute;
    left:35%;
    top:120px;
}
td{
    border:dotted 2px;

}
#cztery{
    position: absolute;
    top: 100vh;
    right: 0;
    height:65vh;
    width: 25vw;
    background-color:aqua;
}

h5{
    text-align:center;

}
h6{
    position:absolute;
    top:50%;
    right:0;

}
#piec{
    height:30vh;
    width:100vw;
    background-image:url(tlo.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;

}
footer{
    position:relative;
    left:32.5%;
    height:10vh;
    width:35vw;
    background-color:gray;
    text-align:center;
}
.stopka{
    position:absolute;
    top:40%;
    left:40%;


}


<!DOCTYPE html>
    <html lang="pl">
        <head>
            <meta charset="UTF-8">
            <title>Praca domowa</title>
            <link rel="stylesheet" href="strona.css">
        </head>

        <body>
            <nav class="clearfix">
                <ul>
                    <li><a href="#contener">TEKST</li></a>
                    <li><a href="">TEKST</a></li>
                    <li><a href="">TEKST</a></li>
                    <li><a href="">TEKST</a></li>
                </ul>
            </nav>
            <header class="clearfix">
                <h1>Nagłówek 1</h1>
            </header>
            <div id="contener">

                <div id="jeden">

                    <h2>Nagłówek 2</h2>

                    <ol>
                        <li>Jeden</li>
                        <li>Dwa</li>
                        <li>Trzy</li>
                    </ol>

                </div>

                <div id="dwa">

                    <h3>Nagłówek 3</h3>

                    <img src="png.jpg" alt="obrazek">

                </div>

                <div id="trzy">

                    <h4>Nagłówek 4</h4>

                    <table>

                        <tr>
                            <td>Raz</td>
                            <td>Dwa</td>
                            <td>Trzy</td>
                        </tr>

                        <tr>
                            <td>Raz</td>
                            <td>Dwa</td>
                            <td>Trzy</td>
                        </tr>

                        <tr>
                            <td>Raz</td>
                            <td>Dwa</td>
                            <td>Trzy</td>
                        </tr>

                    </table>

                </div>

                <div id="cztery">
                    <h5>Nagłówek5</h5>
                    <h6>TEKST PRZYKŁADOWY</h6>

                </div>

            </div>
            <div id="piec"></div>
                <footer><p class="stopka">STOPKA</p></footer>

        </body>

    </html>