projektos

<!doctype html>
<html>
<head>
    <meta http-equiv="content-language" content="pl" lang="pl">
    <meta charset="UTF-8" />
    <title>NBA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="Stylesheet" href="index.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><img src="img/NBA.jpg"/></li>
                <li><a href="index.html">Main page</a></li>
                <li><a href="teams.html">Teams</a></li>
                <li><a href="players.html">Players</a></li>
            </ul>
        </nav>
    </header>

    <div id="content">
        <section>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim sem, pellentesque vitae porttitor quis, semper ut augue. Maecenas elementum enim at volutpat accumsan. Fusce quis rhoncus ipsum. Vestibulum porttitor aliquam interdum. Pellentesque quis diam porttitor, fringilla dolor eu, aliquam arcu. Nam placerat, ante ac lobortis vulputate, arcu est viverra eros, quis eleifend risus arcu in eros. Donec tincidunt tristique lobortis. Nunc vel bibendum nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim sem, pellentesque vitae porttitor quis, semper ut augue. Maecenas elementum enim at volutpat accumsan. Fusce quis rhoncus ipsum. Vestibulum porttitor aliquam interdum. Pellentesque quis diam porttitor, fringilla dolor eu, aliquam arcu. Nam placerat, ante ac lobortis vulputate, arcu est viverra eros, quis eleifend risus arcu in eros. Donec tincidunt tristique lobortis. Nunc vel bibendum nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim sem, pellentesque vitae porttitor quis, semper ut augue. Maecenas elementum enim at volutpat accumsan. Fusce quis rhoncus ipsum. Vestibulum porttitor aliquam interdum. Pellentesque quis diam porttitor, fringilla dolor eu, aliquam arcu. Nam placerat, ante ac lobortis vulputate, arcu est viverra eros, quis eleifend risus arcu in eros. Donec tincidunt tristique lobortis. Nunc vel bibendum nulla.
            </p>
        </section>
    </div>
    <footer> EL SZYMEXUS BRODZIŃSKI </footer>
</body>
</html>

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 16px;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
}


header {
    display: inline-block;
    width: 100%;
    min-width: 100%;
}


nav {
    width: 100%;
    min-width: 100%;
    font-size: 24px;
    background-color: #006CB7;
    padding: 0 0 0 2em;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    display: inline-block;
    vertical-align: middle;
}

ul li a {
    color: #ffffff;
    margin: 0 1em 0 1em;
}

li img {
    height: 4em;
}

ul li a:hover {
    color: #e6194d;
}

#content {
    padding: 1em 14% 0 14%;
}

footer {
    text-align: center;
    padding: 1em 0 1em 0;
    width: 100%;
}

/*RWD - responsive web design*/
@media only screen and (max-width: 900px) {
    nav {
        width: 88%;
        position: absolute;
        height: 30px;
    }

    nav ul li {
        display: inline;
    }

    nav ul li:after {
        content: " |";
    }

    #content {
        width: 98%;
        position: relative;
        top: 30px;
        margin-top: 5%;
    }
}