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 align-items-center justify-content-between">
            <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 id="home" class="copertina">
        <div class="contenitore">
            <div class="riga align-items-center">
                <div class="col-33">
                    <img src="img/hitch-quadrata.jpg" alt="Hitchckock durante le riprese degli uccelli" class="img-fluid rotondo">
                </div>
                <div class="col-66">
                    <h1>Alfred Hitchcock</h1>
                    <h4>Un maestro del cinema</h4>
                </div>
            </div>
        </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;
    padding-top: 60px;
}

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 {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.rotondo {
    border-radius: 50%;;
}

/*========================
    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;
}

/*========================
       COPERTINA
==========================*/
.copertina {
    background-color: #333;
    color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/*========================
       GRIGLIA
==========================*/

.img-fluid {
    max-width: 100%;
    height: auto;
}

.riga {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col-33, .col-66 {
    padding-left: 15px;
    padding-right: 15px;
}

.col-33 {
    flex: 1 1 33.33%;
    max-width: 33%;
}

.col-66 {
    flex: 1 1 66.66%;
    max-width: 66.66%;
}