Arquivo index.html

<!DOCTYPE html>

<html lang="pt-br">

<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Bookshelf</title>
    <link href="index.css" rel="stylesheet"/>
    <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=Fira+Sans:wght@400;700&family=Lora:wght@400&display=swap" rel="stylesheet"/>
</head>

<body>
    <header>
        <h1>Bookshelf</h1>
        <p>Explore nosso catálogo e mergulhe em histórias incríveis.</p>
    </header>

    <main>
        <section class="feature">
            <h2>Leia a Qualquer Hora, em Qualquer Lugar</h2>
            <p>Aproveite o acesso instantâneo a uma ampla variedade de livros em seu dispositivo favorito.</p>
            <a class="cta-button" href="#">Inscreva-se</a>
            <img alt="Pessoa lendo um livro" src="reading.svg"/>
        </section>

        <section class="catalog">
            <h2>Explore Nosso Catálogo</h2>
            <p>Descubra milhares de livros de diversos gêneros, do romance à ficção científica.</p>
            <ul class="genres">
                <li class="genre"><a href="#">Romance</a></li>
                <li class="genre"><a href="#">Ficção Científica</a></li>
                <li class="genre"><a href="#">Mistério</a></li>
                <li class="genre"><a href="#">Fantasia</a></li>
                <li class="genre"><a href="#">Suspense</a></li>
                <li class="see-more"><a href="#">Ver Mais</a></li>
            </ul>
        </section>

        <section class="cta">
            <h2>Comece Sua Aventura Literária</h2>
            <p>Inscreva-se agora e desfrute de um mundo de histórias emocionantes.</p>
            <a class="cta-button" href="#">Inscreva-se</a>
        </section>
    </main>

    <footer>
        <p>© 2023 Bookshelf</p>
    </footer>
</body>

</html>

Arquivo index.css

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

header {
    border-bottom: 1px solid #030308;
    font-size: 1.125rem;
    padding: 2rem 0;
    text-align: center;
}

h1, h2 {
    font-family: "Lora", serif;
    font-weight: 400;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.feature, .catalog, .cta {
    font-size: 1.125rem;
    padding: 2rem;
    text-align: center;
}

.cta-button {
    background-color: #030308;
    border-radius: 9999px;
    color: #fff;
    display: block;
    margin: 2rem auto;
    padding: 1rem 1.5rem;
    width: fit-content;
    text-decoration: none;
    text-transform: uppercase;
}

.genres > li {
    display: inline-block;
    margin-top: 2rem;
}

.genres > li + li {
    margin-left: 1rem;
    margin-top: 1rem;
}

.genre > a,
.see-more > a {
    background-color: #43abf6;
    border-radius: 9999px;
    color: #fff;
    display: inline-block;
    padding: 1rem 1.5rem;
    text-decoration: none;
}

.see-more > a {
    background-color: #030308;
    text-transform: uppercase;
}

footer {
    background-color: #030308;
    color: #fff;
    font-family: "Lora", serif;
    padding: 2rem;
    text-align: center;
}