Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou com um problema para alinhar os nomes das redes sociais dentro desse button, tentei com padding, margin, coloquei em display block, inline e nada, ou não funciona ou meche com os ícones <i> também, aparentemente parece algo bem simples mas não consegui identificar a solução. Estou tentando deixar semelhante à imagem. É apenas um site para um trabalho de um curso que estou fazendo. Sou estou estudando desenvolvimento web a pouco tempo e ainda fico meio perdido em meio a coisas simples. Desde já agradeço.
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<title>Portfolio | Pedro Nunes</title>
</head><!--HEADER + NAV-->
<body>
<header>
<h1><a href="#one">PedroNunes</a></h1>
<nav>
<ul>
<li><a href="#two">About</a></li>
<li><a href="#tree">Portfolio</a></li>
<li><a href="#four">Contact</a></li>
</ul>
</nav>
</header>
<!--IMAGES-->
<div class="img">
<div id="one">
<img src="https://i.imgur.com/gkfc9m4.jpg" alt="">
<section>
<button class="btn1"><i class="fab fa-github-square fa-2x"></i><a href="https://github.com/pedronuness" target="_blank"> GitHub</a></button>
<button class="btn2"><i class="fab fa-facebook fa-2x"></i><a href="https://www.facebook.com/pedronuness10"> Facebook</a></button>
<button class="btn3"><i class="fab fa-twitter-square fa-2x"></i><a href="https://twitter.com/Vector2500"> Twitter</a></button>
</section>
</div>
<div id="two">
<img src="https://i.imgur.com/A9rXfSU.jpg" alt="">
<section>
<h2>Hi, I'm Pedro</h2>
<p>Hello, I'm So-and-so, I'm 19 and working with front-end development for 2 years. I am currently in the second year of the Information Systems course.
My specialties include developing websites with HTML5, CSS3 and JavaScript. check my top jobs in my portfolio ou get in touch with me if you want to hire my services.</p>
</section>
</div>
<div id="tree">
<img src="https://i.imgur.com/22kB3E8.jpg" alt="">
<section>
<a href="https://github.com/pedronuness/projeto_google_glass" target="_blank"><img id="img1" src="https://i.imgur.com/iDsRVO3.png" alt=""></a>
<a href="https://pedronuness.github.io/projeto_mirror_fashion/" target="_blank"><img id="img2" src="https://i.imgur.com/EpIkQnB.png" alt=""></a>
<a href="https://pedronuness.github.io/projeto_noteshop/" target="_blank"><img id="img3" src="https://i.imgur.com/wNbk1we.png" alt=""></a>
<a href="https://pedronuness.github.io/projeto_patas/" target="_blank"><img id="img4" src="https://i.imgur.com/0IyMlK2.png" alt=""></a>
</section>
</div>
<div id="four">
<img src="https://i.imgur.com/GwocD46.jpg" alt="">
<h3>pedronuness10@gmail.com</h3>
<section>
<button class="btn1"><a href="https://github.com/pedronuness" target="_blank">GitHub</a></button>
<button class="btn2"><a href="https://www.facebook.com/pedronuness10" target="_blank">Facebook</a></button>
<button class="btn3"><a href="https://twitter.com/Vector2500" target="_blank">Twitter</a></button>
</section>
</div>
</div>
<!--FOOTER-->
<footer>
<p>© All rights reserved - 2018</p>
</footer>
</body>
</html>/----------ALL----------/
body{
background-color: rgba(100, 100, 100, 0.69);
margin: 0px 0 0 0;
padding: 0;
list-style: none;
font-family: monospace;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}/----------HEADER----------/
header{
background: rgba(211, 211, 211, 0.88);
width: 100%;
height: 50px;
position: fixed;
border-bottom: 2px solid;
z-index: 1;
} border-left: 2px solid;
float: left;
margin: 0 0 0 30px;
padding: 7px;
word-spacing: -10px;
} color: #000;
} float: right;
margin: 0px 41px 0 0;
} display: inline-block;
list-style: none;
} background-color: rgba(100, 100, 100, 0.69);
color: #fff;
text-transform: uppercase;
padding: 16px 30px;
border-right: 2px solid #000000;
border-left: 2px solid #000000;
margin-right: -6px;
} background-color: #191919;
}/----------CONTENT----------/
div img{
border: 2px solid;
margin-top: -6px;
box-sizing: border-box;
} color: #fff;
} width: 100%;
} position: absolute;
border: 2px solid #fff;
width: 160px;
height: 50px;
cursor: pointer;
font-size: 20px;
background-color: rgba(100, 100, 100, 0.69);
} color: rgba(0, 0, 0, 0.79);
} background-color: #191919;
} margin: -300px 0 0 400px;
} margin: -300px 0 0 600px;
} margin: -300px 0 0 800px;
}/----------Segunda Imagem----------/
div#two img{
margin-left: 30px; /margin: o auto não funcionou/
}
div#two section{
border: 2px solid;
width: 380px;
height: 400px;
position: absolute;
margin: -550px 150px;
background-color: rgba(100, 100, 100, 0.95);
padding: 20px;
line-height: 25px;
} color: #fff;
} color: #fff;
}/Terceira Imagem/
div#tree img{
margin-left: 30px;
} border: 2px solid black;
position: absolute;
} margin: -800px 70px;
} margin: -800px 730px;
} margin: -400px 70px;
} margin: -400px 730px;
}/Quarta Imagem/
div#four img{
margin-left: 30px;
} position: absolute;
margin: -350px 150px;
font-size: 25px;
} position: absolute;
margin: -250px 150px;
} position: absolute;
border: 2px solid #fff;
width: 120px;
height: 50px;
cursor: pointer;
font-size: 20px;
background-color: rgba(100, 100, 100, 0.69);
} background-color: #191919;
} margin: -70px 0 0 700px;
} margin: 30px 0 0 700px;
} margin: 130px 0 0 700px;
}/----------FOOTER----------/
footer{
width: 100%;
background-image: url(https://i.imgur.com/hwYMH6L.png);
height: 60px;
border: 2px solid;
box-sizing: border-box;
margin-top: -6px;
} margin-left: 15px;
}
Carregando comentários...