5
respostas

[Projeto] Mão na massa !

  • HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JRPG Series</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="cabecalho">
        <h1 class="cabecalho_titulo">JRPG SERIES</h1>
        <nav class="cabecalho_nav">
            <a class="cabecalho_nav_link" href="#sobre">Sobre</a>
            <a class="cabecalho_nav_link" href="#conteudo">Conteudo</a>
            <a class="cabecalho_nav_link" href="#contato">Fale conosco</a>
        </nav>
    </header>
    <main>
        <section id="sobre">
            <img class="sobre_imagem" src="Imagens/JRPGs.jpeg" alt="Imagem com varios JRPGs">
            <div class="sobre_div">
                <h2 class="subtitulo">Sobre</h2>
                <p class="texto">  que é um JRPG ? Significa "Japanese Role-Playing Game" (jogo de interpretação de personagens japoneses, em português). É um subgênero de jogos de RPG que é produzido no Japão e influenciado pela cultura e estética japonesas.Os JRPGs têm muitas características distintas, como enredos profundos e emocionais, personagens memoráveis, ambientes ricos e uma jogabilidade estratégica. Eles geralmente apresentam esta última característica baseada em turnos, em que os jogadores e inimigos executam ataques e habilidades em batalhas.</p>
                <p class="texto">Os JRPGs também são conhecidos por sua arte estilo anime/mangá, trilhas sonoras memoráveis e elementos de fantasia, como magia e monstros. Alguns dos JRPG mais populares e influentes de todos os tempos são <mark> Final Fantasy, Dragon Quest, Chrono Trigger e Persona.</mark>Os JRPGs ganharam uma grande base de fãs em todo o mundo e continuam sendo uma parte importante do mercado de jogos eletrônicos.</p>
            </div>
        </section>
        <hr class="separador">
        <section id="conteudo">
            <img class="conteudo_imagem" src="Imagens/Tales of arise.jpg" alt="Imagem do jogo tales of arise">
            <div class="conteudo_div">
                <h2 class="subtitulo">Tales of Arise</h2>
                <p class="texto">Tales of Arise (テイルズ オブ アライズ Teiruzu obu Araizu?) é um jogo eletrônico de RPG de ação desenvolvido e publicado pela Bandai Namco Entertainment para Microsoft Windows, PlayStation 4, PlayStation 5, Xbox One e Xbox Series X/S. É o décimo sétimo título principal da série Tales.É também o primeiro jogo da série com lançamento mundial simultâneo.</p>
                <p class="texto">Por 300 anos, Rena dominou Dahna, saqueando os recursos do planeta e roubando a dignidade e liberdade das pessoas. A história começa com duas pessoas, nascidas em mundos diferentes, ambas desejosas de mudar seu destino e criar um novo futuro.</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/xbox.png" alt="Imagem do logo do Xbox">
                </div>
            </div>
        </section>
        <hr class="separador">
        <section class="conteudo">
            <div class="conteudo_div2">
                <h2 class="subtitulo">Final Fantasy VII</h2>
                <p class="texto">Final Fantasy VII (ファイナルファンタジーVII Fainaru Fantajī Sebun?) é um jogo eletrônico de RPG desenvolvido e publicado pela Square. É o sétimo título principal da série Final Fantasy e foi lançado originalmente para PlayStation em 1997 e depois também para Microsoft Windows no ano seguinte. <br>A história segue Cloud Strife, um mercenário que junta-se a uma organização ecoterrorista a fim de impedir que a megacorporação Shinra use a essência vital do planeta como uma fonte de energia.</br> Acontecimentos colocam Cloud e seus aliados atrás de Sephiroth, um "super-humano" que deseja destruir o planeta.</p>
                <div class="div_logo">
                    <img class="imagem_logo" src="Imagens/playstation.png" alt="Imagem do logo da playstation">
                </div>
            </div>
            <img class="conteudo_imagem2" src="Imagens/Final Fantasy.jpg" alt="Imagem do jogo Final fantasy VII">
        </section>
        <hr class="separador">
      
5 respostas
  • 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;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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!