Capítulo 23 Aula 5 – Criando os botões de redes sociais

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Capítulo 23 Aula 5 – Criando os botões de redes sociais

Visualizando 4 respostas da discussão
  • Autor
    Posts
    • 9 de junho de 2023 às 22:21 #117660
      Douglas de Melo
      Participante

      olá, estou com uma dificuldade com o desafio de redes sociais, quando adiciono as imagens dos botões das redes sociais elas ficam em baixo da imagem do telefone, diferente das do professor
      onde as imagens ficam a trás do telefone conforme vão sendo adicionadas.

      <body>
      <main>
      <section id=”telefone”>
      <iframe src=”home.html” name=”tela” id=”tela” frameborder=”0″></iframe>
      </section>

      <section id=”redes”>
      home<br>
      github<br>
      instagram<br>
      youtube<br>
      twitter<br>
      facebook
      </section>
      </main>
      </body>

    • 13 de junho de 2023 às 09:33 #117874
      IcaroFilho
      Moderador

      Bom dia Douglas.

      Poderia mandar o código do CSS tbm ?
      Outra coisa, quando postar seus códigos no forum, formate-os.
      Para isso basta selecionar todo o código que colou e clicar no botão CODE (notará que adicionará crases no inicio e fim de seu código)

    • 13 de junho de 2023 às 20:32 #117908
      Douglas de Melo
      Participante

      *{
      margin: 0px;
      padding: 0px;
      font-family: Arial, Helvetica, sans-serif;
      }

      html , body {
      height: 100vh;
      width: 100vw;
      background-color: black;
      }

      body {
      background-color: blue;
      background: url(‘../imagens/fundo-madeira.jpg’);
      background-size: cover;

      }

      main{
      position: relative;
      height: 100vh;
      }

      section#telefone {
      background-color: blue;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50% ,-50%);
      height: 500px;
      width: 250px;
      background: url(‘../imagens/frame-iphone2.png’) no-repeat;
      }

      iframe#tela {
      position: relative;
      top: 65.2px;
      left: 18.5px;
      width: 215px;
      height: 380px;
      }

      section#redes {
      text-align: right;
      }

      section#redes img {
      width: 50px;
      margin: 10px;
      border-radius: 50px;
      box-shadow: 2px 2px 10px solid black;
      }`

    • 14 de junho de 2023 às 09:49 #117929
      IcaroFilho
      Moderador

      Bom dia.
      Tente passar a position do section#telefone para absolute:

      section#telefone {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  height: 500px;
  width: 250px;
  background: url(‘../imagens/frame-iphone2.png’) no-repeat;
}

      acredito que esta mudança já alcance o resultado esperado.
      Caso não, tente postar o link do seu repositório aqui para eu ver o projeto como um todo.
      Bons estudos

    • 14 de junho de 2023 às 21:08 #118092
      Douglas de Melo
      Participante

      Muito obrigado, deu certo!!
      precisa ler o código com muita atenção mesmo pois foi um detalhe.

  • Autor
    Posts
Visualizando 4 respostas da discussão
  • Você deve fazer login para responder a este tópico.