Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Érica Campelo

| 143.8k xp | 20 posts

bom dia , estou tentando fazer uma nova página HTML , seguindo a ideia do curso, fiquei com uma dúvida sobre como deixar as caixinhas alinhadas e com o msm tamanho.. fiZ os exercícios da aula e deu certo ,mas quando eu fui fazer um nova página HTML não consegui.. alguém puder me ajudar .. abaixo o código HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title> MaVie - Produtos Personalizados </title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="produtos.css">
        <link rel ="stylesheet" href="reset.css"
    </head>

    <body>
        <header>
            <div class="caixa">

                <img class ="logo" src="logo.png" alt = "logo MaVie" >
                <h1 class="tituloprincipal"> Produtos </h1>
            </div>
        </header>
        <main>
            <div class="caixa">
                <ul class="produtos">
                    <li>
                        <h2 class="tituloprodutos">Agenda & Cadernos </h2>
                        <img class ="imagem-produtos" src="caderno.png">


                    </li>
                    <li>
                        <h2 class="tituloprodutos">Azulejos e Quadros de MDF</h2>
                        <img class="imagem-produtos" src="azulejos.png">
                    </li>
                    <li>
                        <h2 class="tituloprodutos">Camisas</h2>
                        <img class ="imagem-produtos" src ="camisa.png">
                    </li>
                    <li>
                        <h2 class="tituloprodutos">Canecas</h2>
                            <img class="imagem-produtos" src="caneca.png">
                    </li>
                    <li>
                        <h2 class="tituloprodutos">Produtos Gráficos</h2>
                        <img class="imagem-produtos" src="banner.png">
                    </li>
                    <li>
                        <h2 class="tituloprodutos">Outros Produtos</h2>
                        <img class="imagem-produtos" src="outros.png">
                    </li>

                </ul>
</div>


        </main>



    </body>

</html>

Código CSS

html{
    background: #cc9966;
}

.logo {
    width: 35%;
}
.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

.tituloprincipal {
    font-size : 80px;
    font-family:DK Lemon Yellow Sun ;
    font-weight: bold;
    text-align: center ;
    padding-bottom: 25px;
}

.produtos li{
    display: inline-block;
    width:25%;
    font-size: 25px;
    font-family:Century Gothic;
    font-weight: bold;
    text-align: center;
    padding: 30px 20px;
    border: 2px solid #000000;
    margin :10px;
    box-sizing: border-box;
    vertical-align: top;

}

.imagem-produtos{
    width: 80%;


 }

2 respostas

solução!

por Renan Lima

| 3455.9k xp | 7303 posts

Alura Scuba Team Apoio Educacional - Alura

13/06/2022

Olá, Érica.

Tudo bem?

Eu testei o seu código, porém como eu não tenho as suas imagens, eu baixei algumas aqui:

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

Vamos lá! O que eu fiz?

Primeiro eu mudei o tamanho das li que é o seu card, eu deixei com largura e altura fixa de width:300px; e height: 300px;:

.produtos li{
    display: inline-block;
    width:300px;
    height: 300px;
    font-size: 25px;
    font-family:Century Gothic;
    font-weight: bold;
    text-align: center;
    padding: 30px 20px;
    border: 2px solid #000000;
    margin :10px;
    box-sizing: border-box;
    vertical-align: top;

}

Depois fiz a mesma coisa para as imagens, para elas terem o mesmo tamanho fixo porém menor com width: 200px; e height: 200px; para caber dentro da li com o título:

.imagem-produtos{
    width: 200px;
    height: 200px;
 }

Mudei também o tamanho da caixa que é a sua <div class="caixa"> fui testando e achei uma largura legal de width: 68%; coloquei 68% para caber mais li(cards) uma do lado do outra e sobrar um pouco de espaço nos cantos para a margem margin: 0 auto; :

.caixa {
    position: relative;
    width: 68%;
    margin: 0 auto;
}

A margem:

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

Última coisa: OBS: no seu <head> o link do reset.css está uma linha depois do seu arquivo de produtos.css e isso não é legal, sempre tem que dar o reset antes, ou seja, ele tem que estar uma linha antes dos seus arquivos principais de css como no exemplo a baixo.

<head>
        <title> MaVie - Produtos Personalizados </title>
        <meta charset="UTF-8">
          <link rel ="stylesheet" href="reset.css"
        <link rel="stylesheet" href="produtos.css"
    </head>

Valeu Érica. Espero ter ajudado! Mas qualquer dúvida manda no fórum de novo.

por Érica Campelo

| 143.8k xp | 20 posts

14/06/2022

Oi bom dia Renan ! vou fazer essas mudanças e prestar mais atenção nesses detalhes.. muito obrigada pelas dicas e pela resposta !!