Applicazione del layout flex-box ad un sito responsive

Creazione di un sito dedicato ad una rassegna di Hitchckock: impostazioni generali e creazione della Barra di Navigazione. 

Struttura del progetto:

  •   htch
    •  css
      •  stile.css
    •  img
      • conte.svg
      • ....
    •  index.html

File

/index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hitchckok</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;600&family=Limelight&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/stile.css">
</head>
<body>
    <nav>
        <div class="contenitore d-flex">
            <img src="img/conte.svg" class="nav-brand"> 
            <ul>
                <li>
                    <a href="#links">Link</a>
                </li>
                <li>
                    <a href="#biografia">Bio</a>
                </li>
                <li>
                    <a href="#gallery">Galleria</a>
                </li>   
                <li>   
                    <a href="#films">Film</a>
                </li>
            </ul>
        </div>
    </nav>
    <header>
        <div class="contenitore">

        </div>
    </header>

    <!-- Sezione LINKS -->
    <section id="links">
        <div class="contenitore">

        </div>
    </section>

    <!-- Sezione Bio -->
    <section id="biografia">
        <div class="contenitore">

        </div>
    </section>

    <!-- Sezione GALLERIA -->
    <section id="gallery">
        <div class="contenitore">

        </div>
    </section>

    <!-- Sezione FILMOGRAFIA -->
    <section id="films">
        <div class="contenitore">

        </div>
    </section>

</body>
</html>

/css/stile.css

/*==============
    GENERALE
================*/

* {
    box-sizing: border-box;
    margin:0;
}

html {
    font-size: 20px;
}

/*==============
    TIPOGRAFIA
================*/
body {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1rem;
    color: #222222; 
    line-height: 1.4;
}

h1,h2,h3 {
    font-family: 'Limelight', cursive;
}

h4,h5,h6 {
    font-weight: 600;
    font-variant: small-caps;
}

h1,h2,h3,h4,h5,h6 {
    line-height: 1.1;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size:1.4rem;
}

h6 {
    font-size: 1.1rem;
}

a {
    color: #660000;
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: #dd0000;
    text-decoration: underline;
}

p {
    margin-bottom: 1.6rem;
}

/*==============
    CONTAINER
================*/

.contenitore {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    .contenitore {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.d-flex {
    display: flex;
    align-items: center;
}


/*========================
    BARRA DI NAVIGAZIONE
==========================*/

nav {
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

nav ul > li > a {
    display: block;
    padding: 0.8rem 2rem;
    color: #eeeeee;
    text-transform: uppercase;
}

nav ul > li > a:hover {
    color: #222222;
    background-color: #cccccc;
    text-decoration: none;
}

.nav-brand {
    height: 40px;
}