Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Projeto final - escolha Pokémon

Boa noite, tentei aplicar o que aprendi no curso em uma página nova. Gostaria de saber o que poderia melhorar, e se apliquei tudo direitinho. https://imgur.com/a/D552TB6

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Escolha</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="escolha.css">
    </head>

    <body>
        <header class="cabeçalho">
            <img class="logo" src="logo.svg">
            <nav>
                <h1><a href="https://www.pokemon.com/br/">OFFICIAL WEBSITE</a></h1>
            </nav>
        </header>

        <main>
            <ul class="tresPoke">
                <li>
                    <h2 class="nome">Bulbasaur</h2>
                    <img class="imagemPokemon" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png">
                    <p class="descrição">There is a plant seed on its back right from the day this Pokémon is born. The seed slowly grows larger</p>
                    <h3 class="numero">Nº 001</h3>
                </li>
                <li>
                    <h2 class="nome">Charmander</h2>
                    <img class="imagemPokemon" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png">
                    <p class="descrição">It has a preference for hot things. When it rains, steam is said to spout from the tip of its tail</p>
                    <h3 class="numero">Nº 004</h3>
                </li><li>
                    <h2 class="nome">Squirtle</h2>
                    <img class="imagemPokemon" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png">
                    <p class="descrição">When it retracts its long neck into its shell, it squirts out water with vigorous force</p>
                    <h3 class="numero">Nº 007</h3>
                </li>
            </ul>
        </main>

        <footer class="rodape">
            <img class="logo2" src="pokemonCompany.png"> 
            <p>&copy; All rights reserved</p>
        </footer>
    </body>

</html>
body {
    background: #f0f0f0;
    font-family: 'flexo.ttf';
}

.logo {
    width: 13%;
    display: inline-block;
    padding: 0 60px;
}

header {
    font-family: 'flexo';
    background: #ffffff;
    padding: 30px 0;
}

nav {
    position: absolute;
    top: 60px;
    right: 60px;
    font-size:30px;
    font-weight: bold;
}

nav a {
    text-decoration: none;
    color: #00428b;
}

nav a:hover {
    text-decoration: underline;
    color: #2c58b7;
}

.tresPoke {
    width: 940px;
    margin: 0 auto;
    padding: 0 50px;    
}

.tresPoke li {
    font-family: 'flexo';
    display: inline-block;
    width: 25%;
    margin: 30px;
    text-align: center;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 10px;
    vertical-align: top;
}

.tresPoke li:active {
    background: #ffffc9;
}

.tresPoke li:hover h2{
    font-size: 38px;
}

.nome {
    font-size: 30px;
    font-weight: bold;
    padding: 15px 0;
}



.imagemPokemon {
    width: 80%;
}

.descrição {
    padding: 15px;
    font-kerning: 10px;
}

.numero {
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

.rodape {
    width: 940px;
    margin: 0 auto;
    text-align: center;
}

.logo2 {
    width:30%;
}
4 respostas

Ficou muito boa, acho que pra melhorar só precisar fazer a responsividade quando tiver aprendendo sobre, e dar uma espaçamento maior entre o conteúdo principal e o cabeçalho e rodapé. De resto eu gostei muito.

solução!

Olá Giovanni, tudo bem?

Seu projeto ficou muito legal! Parabéns!!

O comentário do Italo do Nascimento é de se destacar! Ainda não é responsivo, ele precisa aplicar as medias queries no CSS para diferentes tamanhos de tela. Esse Tópico da Laís Cavalcanti fala disso.

Qualquer duvida é só perguntar!!!! Bons Estudos!!!

Muito obrigado aos dois! Continuarei estudando Front-end com a Alura, para complementar minha formação como UX/UI Designer. Para projetar boas telas e interfaces é necessário saber como elas irão ser implementadas pelos devs hahah.

Tenham um ótimo final de semana! Abraços.

Obrigado, te desejo todo sucesso como profissional. Você tem muito talento!