Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Olá, terminei os cursos de HTML5 e CSS3 semana passada.

por Nayra Alessandra
| 40k xp | 14 posts

Eu estou bolando um site sobre os meus animais de estimação para treinar, estou encontrando algumas dificuldades. A primeira foi porque eu queria colocar as imagens lado a lado com um texto em cada uma delas. Colocar lado a lado eu consegui, o texto ainda nao. A outra duvida é na questão do linear gradient. Não estou conseguindo mais aplicar a propriedade. Se alguem puder me ajudar, agradeço. Deixarei abaixo o CSS e o HTML. Se houver uma forma de simplificar também agradecerei pois acho que o meu css está muito carregado

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="utf-8">
        <title>Meus nenês</title>
        <link rel="stylesheet" href="style-projeto.css">
        <link rel="stylesheet" href="reset.css">
    </head>

    <header>

    </header>

    <body>
        <section>
            <img class="bg" src="bg-mimadinhos.jpg" alt="imagem com 2 gatos e 2 cachorros sem raça definida">

            <h1 class="titulo-principal"><strong>Sobre os meus bichinhos</strong></h1> 

            <p>O grupo que antes era composto pela dupla:<strong>Sirius e Meggy</strong>, dois pinshers muito companheiros e amorosos, agora conta com mais 4 membros:<strong>Frajola, Pretinha, Egipcia e Morgana</strong>.</p>

            <p class="trabalho"><em>Me dão tanto trabalho que as vezes me questiono:<strong>“são animais ou crianças?”</strong> </em></p>

            <p>Cada um com sua personalidade única e um mais mimado que o outros, eles fazem a alegria de toda a casa.</p>
        </section>

        <div>
            <h2 class="titulo">Conhecendo as peças</h2>

            <figure>    
            <img class="imagem-meggy" src="Meggy.jpg" >
            </figure>

            <figure>
            <img class="imagem-sirius" src="sirius.jpg">
            </figure>

            <figure>
            <img class="imagem-frajola" src="frajola.jpg">
            </figure>

            <figure>
            <img class="imagem-pretinha" src="pretinha.jpg">
            </figure>

            <figure>
            <img  class="imagem-egipcia" src="egipcia.jpg">
            </figure>

            <figure >
            <img class="imagem-morgana" src="morgana.jpeg">
            </figure>
        </div>
    </body>
</html>

Css
body {
 background: linear-gradient(#FEFEFE, #000000;);
}

.bg {
    width: 100%;
}

.titulo-principal {
    text-align: center;
    font-size: 40px;
}

body section {
    text-align: center;
    line-height: 1.5;

}

.trabalho {
    font-size: 20px;
    font-style: italic;
}

em strong {
     color: darkblue;
     font-weight: bold;
}


.titulo {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 40px;
    margin-top: 20px;
    font-height: 1.5;
}

div {
    line-height: 1.5; 
    text-align: center;

}

.imagem-meggy {
    float: left;
    margin: 20px 20px;
    width: 20%;
}

.imagem-sirius {
    float: left;
    margin: 20px 20px;
    width: 20%;
}

.imagem-frajola {
    float: left;
    margin: 20px 20px;
    width: 20%;
}

.imagem-pretinha {
    float: left;
    margin: 20px 20px;
    width: 20%;
}

.imagem-egipcia {
    float: left;
    margin: 20px 20px;
    width: 20%;
}

.imagem-morgana {
    float: left;
    margin: 20px 20px;
    width: 20%;

}

`

2 respostas
por Matheus Guedes Nogueira Reis
| 43.7k xp | 8 posts
Customer Experience

Boa noite, vamos lá, o background linear gradient não funciona por um pequeno detalhe, havia um ";", o certo é: body { background: linear-gradient(#fefefe, #000000); } Depois disso, as imagens são abaixo da imagem ou ao lado? Se for ao lado, dá pra você colocar um display flex.

Sobre diminuir um pouco o CSS, se você ver as classes .imagem-morgana, .imagem-egipcia e outras têm os mesmos atributos, então ao invés de gerar cada uma, coloque apenas uma classe imagem-pecas e essa classe em todas as imagens, já diminuiria bem.

O título da página deve ser h1, essencial para SEO.

Vou deixar aqui um html que funciona com o texto abaixo da imagem:

<head>
    <meta charset="utf-8">
    <title>Meus nenês</title>
    <link rel="stylesheet" href="style-projeto.css">
    <link rel="stylesheet" href="reset.css">
<body>
    <section>
        <img class="bg" src="bg-mimadinhos.jpg" alt="imagem com 2 gatos e 2 cachorros sem raça definida">

        <h1 class="titulo-principal"><strong>Sobre os meus bichinhos</strong></h1>

        <p>O grupo que antes era composto pela dupla:<strong>Sirius e Meggy</strong>, dois pinshers muito companheiros e amorosos, agora conta com mais 4 membros:<strong>Frajola, Pretinha, Egipcia e Morgana</strong>.</p>

        <p class="trabalho"><em>Me dão tanto trabalho que as vezes me questiono:<strong>“são animais ou crianças?”</strong> </em></p>

        <p>Cada um com sua personalidade única e um mais mimado que o outros, eles fazem a alegria de toda a casa.</p>
    </section>

    <div>
        <h2 class="titulo">Conhecendo as peças</h2>

        <ul>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="Meggy.jpg">
            </figure>
            <span>
              <h4>Meu amigo</h4>
            </span>
          </li>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="sirius.jpg">
            </figure>
            <span>
              <h4>Meu amigo</h4>
            </span>
          </li>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="frajola.jpg">
            </figure>
            <span>
              <h4>Meu amigo</h4>
            </span>
          </li>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="pretinha.jpg">
            <span>
              <h4>Meu amigo</h4>
            </span>
            </figure>
          </li>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="egipcia.jpg">
            </figure>
            <span>
              <h4>Meu amigo</h4>
            </span>
          </li>
          <li class="bloco">
            <figure >
            <img class="imagem-pecas" src="morgana.jpeg">
            </figure>
            <span>
              <h4>Meu amigo</h4>
            </span>
          </li>
        </ul>
    </div>
</body>

E CSS:

body { background: linear-gradient(#fefefe, #000000); }

.bg {
    width: 100%;
}

.titulo-principal {
    text-align: center;
    font-size: 40px;
}

body section {
    text-align: center;
    line-height: 1.5;
}

.trabalho {
    font-size: 20px;
    font-style: italic;
}

em strong {
     color: darkblue;
     font-weight: bold;
}


.titulo {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 40px;
    margin-top: 20px;
    font-height: 1.5;
}

div {
    line-height: 1.5;
    text-align: center;

}
ul {
  list-style: none;
}

.bloco {
  height: auto;
  width: 33.33%;
  float: left;
}
solução!
por Vanessa Cristiane Ribeiro
| 214.6k xp | 141 posts
Analista de Desenvolvimento Front-End

Sobre o gradiente

Você inseriu um ; dentro do parêntesis onde vai a cor. Removendo e deixando como no exemplo abaixo, ele já deve voltar a funcionar: 

background: linear-gradient(#FEFEFE, #000000);

Propriedade CSS line-height

Dentro da classe .titulo, você escreveu font-height: 1.5;. E, para o código funcione corretamente, é preciso corrigir para line-height.

Texto com Imagem

Dentro da tag figure, você pode usar uma tag chamada figcaption. Ali você pode inserir texto. Seu código para cada imagem ficaria assim:

HTML

<figure>
    <img class="imagem-sirius" src="img/cat.jpg">
    <figcaption>
      <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores exercitationem in accusamus repellendus, ad libero maxime sed itaque a cupiditate ea sunt velit qui omnis quo consequatur odio illum suscipit.
      </p>
    </figcaption>
</figure>

Para colocar uma imagem ao lado da outra:

Uma sugestão é transformar a div, também sugiro criar uma classe para facilitar o estilo, onde ficam as imagens dos gatinhos num elemento flex, usando a propriedade display:flex, e passar o h2 para fora da div. Exemplo:

HTML

<h2 class="titulo">Conhecendo as peças</h2>
<div class="imagens">
    <!-- imagens dos gatinhos-->
</div>

No CSS:

CSS:

.imagens { 
     display: flex;
 }

Isso vai colocar cada elemento figure, que contem as imagens e o texto, ficar um ao lado do outro. Aí você pode formatar da forma que achar melhor.