Bom dia amigos, estou com um amigo criando um site para colocar em pratica nossos estudos, só que estamos com um grande problema neste botões de rede social, não conseguimos posicionar esta imagem no centro dos círculos…

Problemas com posicionamento de icones

<h1>Atari Mania</h1> <section> <div class="rede" id="facebook"> <img class="icone" src="imagens/facebook.png"/> </div> <div class="rede" id="twitter"> <img class="icone" src="imagens/twitter.png"/> </div> <div class="rede" id="instagram"> <img class="icone" src="imagens/instagram.png"/> </div> <div class="rede" id="snap"> <img class="icone" src="imagens/snap.png"/> </div> <div class="rede" id="plus"> <img class="icone" src="imagens/plus.png"/> </div> <div class="rede" id="youtube"> <img class="icone" src="imagens/youtube.png"/> </div> </section>

/<em>REDE SOCIAL INTERATICA INICIO</em>/ section{ margin: 10px auto; width: 1200px; height: 90px; } .rede { width: 50px; height: 50px; float: right; margin-left: 30px; transition: all 0.4s ease-out; border-radius: 50%;

} .rede#twitter{ background-color: #0084b4; } .rede#instagram { background-color: #3f729b; } .rede#snap { background-color: #fc0; } .rede#plus{ background-color: #dd4b39; } .rede#youtube { background-color: #b00; } .icone { padding: 3px; width: 3%; position: absolute; margin-right: 15%; transform: translate(15%, 15%, 1%); float: right;

1 Resposta

Michel_Spirlandeli 12 de mai. de 2018

Html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<center><h1>Atari Mania</h1></center>

<img class="icone" src="images/facebook.png" />

    </div>

    <div class="rede" id="twitter">

        <img class="icone" src="images/twitter.png"/>

    </div>

    <div class="rede" id="instagram">

        <img class="icone" src="images/instagram.png"/>

    </div>

    <div class="rede" id="snap">

        <img  class="icone" src="images/snap.png"/>

    </div>

    <div class="rede" id="plus">

        <img class="icone" src="images/plus.png"/>

    </div>

    <div class="rede" id="youtube">

        <img class="icone" src="images/youtube.png"/>

    </div>

</section>

CSS

*{

padding: 0px;

margin: 0px;

}

section{

margin: 50px auto;

width: 1025px;

height: 150px;

}

.rede{

width: 150px;

height: 150px;

float: left;

margin-left: 20px;

transition: all 0.4s ease-out;

border-radius: 50%;

}

.rede:hover{

cursor: pointer;

transform: translateY(-20px);

box-shadow: 4px 30px 16px 0px rgba(50,50,50, 0.45);

}

.rede#facebook{
background-color: #2372a3;

}

.rede#twitter{

background-color: #0084b4;

}

.rede#instagram{

background-color: #3f729b;

}

.rede#snap{

background-color: #fc0;

}

.rede#plus{

background-color: #dd4b39;

}

.rede#youtube{

background-color: #8B0000;

}

.icone{

margin:0px auto;

padding: 35px;

width: 80px;

}

1 Resposta

Topicos relacionados