-1

body{
    background-image:url("backgorund.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: 800px;
    position:middle;
}

#nome{
    font-size:35px;
    left:60px;
    top:10px;
    position:relative;
}


.imagens{
    list-style-type: none;
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    position: middle; 
}


.links{
    color: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    list-style: none;
    position: relative;
    position: middle;
    left: 80px;
}
<doctype>
    <html>
        <head>
            <title>Cartão visitas gabriel</title>
            <meta charset="utf8">
                
          <link rel="stylesheet" href="cartão.css">
        </head>    
        
        <body>
         <div id="nome">marcos gabriel</div> 
      
      

      <div class="imagens" align='middle'> 
          <li><img src="insta.png" alt="instagram" height="70"></li>
          <li><img src="Twitter.png" alt="facebook" height="70"></li>
          <li><img src="Youtube.png" alt="Youtube" height="70"></li>
       </div>

        <div class="link">
           <ul align='middle'>
                <li><a href="https://www.instagram.com/gabrioso__/">@gabrioso__</a></li>
                <li><a href="https://www.facebook.com/profile.php?id=100013408385228">Marcos Gabriel</a></li>
                <li><a href="https://www.youtube.com/channel/UC3k8K1m5UsAn4lGLg6fppfw">gabrioso memes</a></li>
            </ul>
        </div>

        </body>
    </html>

1
  • sua pergunta não está muito clara, poderia nos dar mais informações de como você quer que aparcem os links na sua página?
    – William
    20/07/2021 às 21:22

1 Resposta 1

1

Sua pergunta não ficou muito clara, mas acho que você quer deixar os links da rede social na horizontal junto com o seu nome e cada link respectivo.

Seu Html

<ul class="links">
  <li>
    <a href="https://www.instagram.com/gabrioso__/">
      <img src="https://img.icons8.com/color/48/000000/youtube--v1.png"/>
      <span>@gabrioso__</span>
    </a>
  </li>
  <li>
    <a href="https://www.facebook.com/profile.php?id=100013408385228">
      <img src="https://img.icons8.com/color/50/000000/facebook.png"/>
      <span>Marcos Gabriel</span>
    </a>
 </li>
  <li>
    <a href="https://www.youtube.com/channel/UC3k8K1m5UsAn4lGLg6fppfw">
      <img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/>
      <span>gabrioso memes</span>
    </a>
  </li>
</ul>

Seu CSS

.links {
  list-style-type: none;
  flex: grid;
  display: flex;
}

a {
  text-decoration: none;
  font-family: 'Arial';
  font-size: 10px;
}

Segue o exemplo do código acima funcionando: link

1
  • 1
    moço, muito obrigado :)
    – gabrioso__
    20/07/2021 às 23:12

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .