html creation web

//html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <title>Exercice grille</title>
</head>
<body>
    <header>
        <h1>Exercice Grille</h1>
    </header>
    <main>
        <h2>HTML-CSS</h2>
        <aside class="tier">
            <h3>Le multimédia</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem magnam esse alias, dolore, inventore dignissimos harum id perspiciatis similique ea ut odio nobis dolores eveniet enim at placeat ratione aliquam.lorem Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus ullam nobis, quo aperiam, repellendus officia eius facere ex suscipit sapiente! Nihil soluta veniam dolores alias! Odio cupiditate hic corrupti!</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, atque in. Nihil vel recusandae corrupti, fuga non facilis culpa sit id deleniti, suscipit minima? Quasi ut dolorum enim odit quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima illo cum ipsum quaerat facilis iste consequatur, earum itaque laborum, at, beatae et? Exercitationem sed nobis cupiditate expedita accusantium eaque repellat? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos temporibus totam nulla dolor accusamus nihil dolore illo. Laboriosam, repellendus quae, itaque qui nihil fugiat odio ea, ratione recusandae in est!</p>
        </aside>
        <section>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <article>
                <h3>Projet Multimédia</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus repellendus laudantium perspiciatis incidunt laborum porro reprehenderit distinctio natus explicabo excepturi praesentium soluta, hic, odio ad dignissimos voluptates! Assumenda, commodi velit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere veniam dolorem nesciunt velit quae. Consectetur quos esse, velit mollitia temporibus provident ducimus. Cumque beatae velit soluta eligendi culpa veniam facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic dolor minus consequuntur ipsa dolorem sunt fugiat earum voluptatem recusandae. Labore, deleniti ex. Non ipsa, pariatur labore numquam asperiores accusantium voluptatibus!</p>
            </article>
            <div  class="tier">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div class="demi">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div class="demi">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div  class="tier">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div  class="tier">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div  class="tier">
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
        </section>
        <section>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
            <div>
                <img src="images/img_23.jpg" alt="Édiffice avec graffiti">
                <p>Image 1</p>
            </div>
        </section>
        <footer>
            <article>
                <h3>Titre 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio quae sit est a eaque cum. Dolorem id asperiores quis, nulla ea sequi quas eum tempora quam veritatis possimus exercitationem.</p>
            </article>
            <article>
                <h3>Titre 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio quae sit est a eaque cum. Dolorem id asperiores quis, nulla ea sequi quas eum tempora quam veritatis possimus exercitationem.</p>
            </article>
            <article>
                <h3>Titre 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio quae sit est a eaque cum. Dolorem id asperiores quis, nulla ea sequi quas eum tempora quam veritatis possimus exercitationem.</p>
            </article>
        </footer>
    </main>
</body>
</html>


//css
header {
    background-color: black;

    h1 {
        color: white;
        padding: 50px;
    }
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100vw;
    max-width: 1280px;
    margin: auto;

    h2 {
        width: 100%;
        margin-left: 50px;
    }

    .tier {
        width: 30%;
    }

    .demi {
        width: 45%;
    }

    aside {
        margin-left: 50px;
    }

    section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    section:first-of-type {
        width: 60%;
        margin-right: 50px;

        article {
            width: 60%;
        }

        img {
            width: 100%;
        }

        div:nth-of-type(1) {
            width: 100%;
        }
    }

    section:nth-of-type(2) {
        margin: 0 50px 0 50px;

        div {
            width: 15%;
        }

        img {
            width: 100%;
        }
    }
}

footer {
    display: flex;
    justify-content: space-evenly;

    article {
        width: 25%;
    }
}