[Projeto] Mão na massa !

• HTML

<section class="conteudo">
            <img class="conteudo_imagem3" src="Imagens/Ys VIII.jpg" alt="Imagem do jogo Ys VIII">
            <div class="conteudo_div">
                <h2 class="subtitulo">Ys VIII - Lacrimosa of Dana</h2>
                <p class="texto">A maioria dos jogos da série Ys retrata as crônicas de Adol Christin, um aventureiro que explora o mundo na companhia de seu amigo Dogi. Os episódios são completamente independentes e podem ser aproveitados separadamente. Em Lacrimosa of Dana o barco em que a dupla viajava é atacado por uma imensa criatura e todos eles vão parar na ilha de Seiren. O local é conhecido por ser amaldiçoado: embarcações que chegam perto da ilha afundam e ninguém voltou vivo de lá.</p>
                <p class="texto">Adol não se deixa abalar pela reputação sombria da ilha de Seiren e vai fazer o máximo para sair de lá. Para isso, ele se une aos outros sobreviventes e juntos eles fundam uma vila a fim de encontrar uma maneira de escapar da ilha. Curiosamente, desde que colocou os pés em Seiren, Adol começa a ter sonhos estranhos que mostram a vida de uma bela garota chamada Dana. Pouco a pouco o aventureiro percebe que a moça tem ligação com a ilha e descobrir o significado desses sonhos será essencial para sair ileso da situação.</p>
                <div class="div_logo">
                    <img class="imagem_logo" src="Imagens/playstation.png" alt="Imagem do logo da playstation">
                    <img class="imagem_logo" src="Imagens/nintendo.png" alt="Imagem do logo da nintendo">
                </div>
            </div>
        </section>
        <hr class="separador">
        <section id="contato">
            <h2 class="contato_subtitulo">Fale conosco</h2>
            <div class="contato_div">
                <div>
                    <h3 class="subtitulo">Fale conosco para receber atualizações</h3>
                    <form class="contato_formulario">
                        <input class="formulario" type="text" placeholder="Seu nome" required>
                        <input class="formulario" type="email" placeholder="Insira seu E-mail" required>
                        <input class="formulario" type="tel" placeholder="Insira seu telefone">
                        <textarea class="mensagem" placeholder="Deixe-nos uma mensagem" required></textarea>
                        <button class="botao" type="submit">Enviar</button>
                    </form>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="rodape">
            <p>©JRPG Series - Todos os direitos reservados - 2024</p>
        </div>
    </footer>
</body>
</html>

• CSS

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Merriweather&display=swap');

:root {
    --cor-de-fundo: #A9A9A9;
    --cor-primaria: #000000;
    --cor-secundaria: #ffffff;
    --cor-terciaria: #ffff00;

    --fonte-primaria: 'Bebas Neue', sans-serif;
    --fonte-secundaria: 'Merriweather', serif;

}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--cor-de-fundo);
    box-sizing: border-box;
}

.cabecalho {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    align-items: center;
}

.cabecalho_titulo {
    font-family: var(--fonte-primaria);
    padding: 0 0 0 8%;
    font-size: 3rem;
}

.cabecalho_nav {
    display: flex;
    gap: 30px;
    padding: 0 8% 0 0;
}

.cabecalho_nav_link {
    color: var(--cor-secundaria);
    font-family: var(--fonte-primaria);
    text-decoration: none;
    font-size: 1.5rem;
}

.cabecalho_nav_link:hover, .cabecalho_titulo:hover {
    color: var(--cor-terciaria);
}

#sobre, .conteudo, #conteudo {
    display: flex;
    gap: 30px;
}

.sobre_imagem {
    width: 50%;
    padding: 2% 0 0 8%;
}

.sobre_div, .conteudo_div {
    padding: 2% 8% 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subtitulo, .contato_subtitulo {
    font-family: var(--fonte-primaria);
}

.texto {
    font-family: var(--fonte-secundaria);
    font-size: 0.9rem;
}

.separador {
    margin: 2% 0;
    height: 5px;
    border-width: 0;
    background-color: var(--cor-primaria);
}

.conteudo_imagem {
    width: 50%;
    padding: 0 0 0 8%;
}

.div_logo {
    display: flex;
    align-items: center;
    gap: 30px;
}

.imagem_logo {
    width: 10%;
}

.conteudo_div2 {
    display: flex;
    flex-direction: column;
    padding: 2% 0 0 8%;
    gap: 20px;
}

.conteudo_imagem2 {
    width: 40%;
    padding: 0 8% 0 0;
}

.conteudo_imagem3 {
    width: 40%;
    padding: 0 0 0 8%;
}

.contato_subtitulo {
    padding: 0 0 1% 8%;
}

.contato_div {
    display: flex;
    justify-content: space-between;
    margin: 0 8%;
}

h3 {
    padding: 0 0 5% 0;
}

.contato_formulario {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.formulario, .mensagem, .botao {
    padding: 4%;
}

.mensagem {
    resize: none;
    height: 180px;
}

.botao {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border: none;
    cursor: pointer;
    font-family: var(--fonte-primaria);
    font-size: 1.2rem;
    margin-bottom: 5%;
}

.rodape {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    padding: 25px 0;
    text-align: center;
    font-family: var(--fonte-primaria);
    font-size: 1.7rem;
}

Oii, como vai? Espero que esteja bem!

Fico feliz em ver que realizou a atividade, é isso aí! Continue se dedicando aos estudos e colocando em prática seus aprendizados.

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

Olá tudo bem? Teu projeto ficou muito legal, parabéns pela dedicação!