Imagens e vídeo:

https://drive.google.com/drive/folders/1WRVQyTKScw6af0pbljzK6NLnjwuVp2Ec?usp=sharing

Arquivo HTML:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Seal World</title>
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&display=swap" rel="stylesheet"/>
    <link href="index.css" rel="stylesheet"/>
</link></meta></meta></head>

<body>
    <main>
        <section class="hero">
            <video autoplay="" class="hero__background" loop="" muted="">
                <source src="video/pexels-zlatin-georgiev-5607740_2160p.mp4" type="video/mp4"/>
            </video>
            <div class="hero__foreground">
                <h1 class="hero__title">Get Ready to Seal-abrate!</h1>
                <p class="hero__text">
                    Dive in and Discover the Charm of These Aquatic Wonders
                </p>
            </div>
        </section>

        <section class="section">
            <h2 class="section__title">Exploring the World of Seals</h2>
            <img alt="" class="section__img" src="img/pexels-minsu-b-11932453.jpg"/>
            <p class="section__text">
                Hold onto your flippers, because we're about to embark on a journey
                into the lives of seals! These adorable aquatic mammals are real stars
                of the ocean, and they've got some seal-iously cool tales to tell.
                From Arctic cold to sunny shores, seals have mastered the art of
                enjoying life both above and below the waves. Let's splash into the
                deep waters of seal knowledge!
            </p>
        </section>

        <section class="section">
            <h2 class="section__title">Style and Moves</h2>
            <img alt="" class="section__img-inline" src="img/pexels-sabine-freiberger-16788877.jpg"/>
            <div class="section__text-inline">
                <p>
                    Seals are known for their elegant swimming skills, often rivalling
                    those of top-tier Olympic swimmers. Their flippers, akin to
                    well-trained athletes, effortlessly guide them through water with a
                    mesmerizing grace.
                </p>
                <p>
                    A fascinating aspect is their natural insulation: layers of blubber.
                    This built-in warmth mechanism allows them to thrive in various
                    water temperatures. Picture these creatures gliding beneath the
                    water's surface – a seamless dance with currents, their streamlined
                    bodies moving with fluidity and elegance. It's a testament to
                    nature's adaptability and the awe-inspiring beauty of aquatic life.
                </p>
            </div>
        </section>

        <section class="section">
            <h2 class="section__title">Seal Hangouts</h2>
            <img alt="" class="section__img" src="img/pexels-diana-4445229.jpg"/>
            <p class="section__text">
                Guess where you can find these fantastic creatures? From the icy polar
                plunge zones to the sunny coastal chill spots, seals know how to pick
                their pads. They love lounging on rocky shores, showing off their
                sun-kissed fur, and occasionally doing the cha-cha-slide into the
                water.
            </p>
        </section>

        <section class="section">
            <h2 class="section__title">Meet the Seal Crew</h2>
            <div class="gallery">
                <span class="gallery__img-wrapper">
                    <img alt="" class="gallery__img" src="img/harbor_seal.jpg"/>
                </span>
                <span class="gallery__img-wrapper">
                    <img alt="" class="gallery__img" src="img/grey_seal.jpg"/>
                </span>
                <span class="gallery__img-wrapper">
                    <img alt="" class="gallery__img" src="img/elephant_seal.jpg"/>
                </span>
                <span class="gallery__img-wrapper">
                    <img alt="" class="gallery__img" src="img/leopard_seal.jpg"/>
                </span>
            </div>
            <p class="section__text">
                Meet the VIPs (Very Important Pinnipeds)! We've got the harbor seal,
                the grey seal, the elephant seal (yep, the one with the hilarious
                schnoz), and the fierce leopard seal. It's like a star-studded cast of
                the ocean! Each has their own quirks and skills, making them the true
                icons of the underwater red carpet.
            </p>
        </section>

        <section class="section">
            <h2 class="section__title">Cool Facts About Seals</h2>
            <img alt="" class="section__img-inline" src="img/pexels-daniel-lee-3187036.jpg"/>
            <div class="section__text-inline">
                <p>
                    Dive into the world of seals, those charming sea creatures with a
                    flair for the extraordinary. From holding their breath like
                    underwater champs to using their whiskers for underwater GPS, these
                    marine wonders are quite the showstoppers.
                </p>
                <p>
                    Seals rock the art of breath-holding, making any professional diver
                    green with envy. And those whiskers? They're like nature's very own
                    GPS, guiding these underwater explorers through their aquatic
                    escapades.
                </p>
                <p>
                    For a deeper dive into seal awesomeness, visit
                    <a href="#">sealworld.com</a>
                </p>
            </div>
        </section>
    </main>

    <footer class="footer">
        Made with
        <svg fill="#f64348" height="14" stroke="#f64348" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
        </svg>
        by
        <a href="https://github.com/isaacpontes" target="_blank">@isaacpontes</a>
    </footer>
</body>

</html>

Arquivo CSS:

* {
    box-sizing: border-box;
    font-family: "Oxygen", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
}

:root {
    --color-background: #030207;
    --color-white: #fff;
    --color-blue: #1474b4;
}

body {
    background-color: var(--color-background);
    color: var(--color-white);
}

a {
    color: var(--color-blue);
}

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.1), var(--color-background));
    position: relative;
    min-height: 100vh;
}

.hero__background {
    object-fit: cover;
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: -10;
}

.hero__foreground {
    color: var(--color-white);
    padding-top: 40vh;
    text-align: center;
}

.hero__title {
    font-size: 5rem;
    font-weight: 300;
}

.hero__text {
    margin-top: 2rem;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
}