oi como eu faço para posicionar esses icones nesse site de forma que fique organizado? https://drive.google.com/file/d/1BAqvFatISh2xk6s-Iq6wTPw40HOJUcFF/view?usp=sharing
Solucionado
oi como eu faço para posicionar esses icones nesse site de forma que fique organizado? https://drive.google.com/file/d/1BAqvFatISh2xk6s-Iq6wTPw40HOJUcFF/view?usp=sharing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>portifólio-Geovane</title>
</head>
<body>
<header>
<div class="cabeçalho">
<h1>About</h1>
<nav>
<ul>
<div class="listas">
<li class="primeiro"><a href="sobre-mim">About</a></li>
<li class="segundo"><a href="projetos">Projetos</a></li>
<li class="terceiro"><a href="">Contato</a></li>
</div>
</ul>
</nav>
</div>
</header>
<main>
<div class="sobre-mim">
<img src="foto.png">
<p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
</div>
<h2 id="projetos">Projetos</h2>
<p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
<h3>Contato</h3>
<nav>
<ul>
<div class="social-midia">
<li class="whatsapp"><img src="whatsapp.png.png"></li>
<li class="linkedin"><img src="linkedin.png.png"></li>
<li class="email"><img src="email.png.png"></li>
</div>
</ul>
</nav>
</main>
</body>
</html>body {
background-color: #e6e6e6;
}
.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
margin: 8px;
font-size: 36px;
}
.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}
.p-projetos {
margin: 901px -65px;
font-size: 28px;
}
main {
display: flex;
}
a {
color: black;
}
.listas {
margin: 8px;
}
h1 {
margin: 46px 69px;
font-size: 60px;
}
h2 {
margin: 768px -299px;
font-size: 60px;
}
h3 {
margin: 996px -312px;
font-size: 60px;
}
img {
margin: 143px 903px;
position: absolute;
width: 423px;
}
.primeiro :hover {
font-size: 29px;
}
.segundo :hover {
font-size: 29px;
}
.terceiro :hover {
font-size: 29px;
}
.whatsapp {
margin: 9px 458px;
}
.linkedin {
margin: 9px 8px;
}
.email {
margin: 9px 458px;
}
.social-midia {
position: absolute;
margin: 909px -1864px;
}
Fala ai Geovane, tudo bem? Tu pode utilizar o display: flex no container pai e definir uma altura fixa para os elementos filhos, algo assim:
<div class="container">
<div class="box">
Box 1
</div>
<div class="box">
Box 2
</div>
<div class="box">
Box 3
</div>
</div>.container {
display: flex;
justify-content: space-between;
}
.box {
height: 100px;
background-color: black;
width: 200px;
}Espero ter ajudado.
olha como ficou não é assim que eu quero que fica! https://drive.google.com/file/d/1MYHUkW5_E0RmSYZW5zpbn2H-gUITvK5h/view?usp=sharing
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>portifólio-Geovane</title>
</head>
<body>
<header>
<div class="cabeçalho">
<h1>About</h1>
<nav>
<ul>
<div class="listas">
<li class="primeiro"><a href="">About</a></li>
<li class="segundo"><a href="">Projetos</a></li>
<li class="terceiro"><a href=" ">Contato</a></li>
</div>
</ul>
</nav>
</div>
</header>
<main>
<div class="sobre-mim">
<img src="foto.png">
<p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
</div>
<h2>Projetos</h2>
<p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
<h3>Contato</h3>
<nav>
<ul>
<div class="social-midia">
<div class="container">
<div class="box">
<li class="whatsapp">
<a href="https://web.whatsapp.com/"><img src="whatsapp.png.png"></a>
</li>
</div>
<div class="box">
<li class="linkedin">
<a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png"></a>
</li>
</div>
<div class="box">
<li class="email">
<a href=""><img src="email.png.png"></a>
</li>
</div>
</div>
</ul>
</nav>
</main>
</body>
</html>body {
background-color: #e6e6e6;
}
.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
margin: 8px;
font-size: 36px;
}
.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}
.p-projetos {
margin: 901px -65px;
font-size: 28px;
}
main {
display: flex;
}
a {
color: black;
}
.listas {
margin: 8px;
}
h1 {
margin: 46px 69px;
font-size: 60px;
}
h2 {
margin: 768px -299px;
font-size: 60px;
}
h3 {
margin: 996px -312px;
font-size: 60px;
align-items: center;
}
img {
margin: 143px 1143px;
position: absolute;
width: 423px;
}
.primeiro :hover {
font-size: 29px;
}
.segundo :hover {
font-size: 29px;
}
.terceiro :hover {
font-size: 29px;
}
.whatsapp {
margin: 9px 458px;
}
.linkedin {
margin: 9px 8px;
}
.email {
margin: 9px 458px;
}
.social-midia {
position: absolute;
margin: 909px -1864px;
}
.container {
display: flex;
justify-content: space-between;
}
.box {
height: 100px;
background-color: black;
width: 200px;
}E ai Matheus beleza? você poderia revizar meu codigo ? porque eu acho que é a falta de organização de principiante que eu tenho, que fez a parte de icones do contato ficar assim!
Fala Geovane, dei uma olhada nas imagens e nos códigos, como tu quer que fique os estilos no final? Tem alguma imagem de exemplo? Ficaria mais te ajudar.
Fico no aguardo.
Eu quero que os ícones fiquem um do lado do outro com uma margem mais ou menos de uns 5 Px de largura entre eles e também um width 9 Px menor!
Eu já tentei tudo isso que eu tô te pedindo pra você com o flaxbox e com o CSS puro, mais nada funciona eu arrumo um atrapalho o outro mexo nos ícones atrapalho o reader, porisso acho que meu código tá ruim para o navegador entender, tentei criar classes para ver se resolvia mais continua do mesmo geito!
Fala Geovane, estranho, aquele display: flex deveria resolver, os ícones que tu fala seria das redes sociais né? Consegue compartilhar o projeto completo comigo? Assim eu consigo simular o problema e ir testando os ajustes por aqui.
Pode compartilhar através do Github ou Google Drive (zipado).
Fico no aguardo.
eu consegui agora Matheus mais agora meu site ta com muito espaço de baixo dos icones de contato como eu faço pra tira esse espaço?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="programador.png">
<link rel="stylesheet" href="style.css">
<title>Geovane-dev-front-end</title>
</head>
<body>
<header>
<div class="cabeçalho">
<h1>About</h1>
<nav>
<ul>
<div class="listas">
<li class="primeiro"><a href="">About</a></li>
<li class="segundo"><a href="">Projetos</a></li>
<li class="terceiro"><a href=" ">Contato</a></li>
</div>
</ul>
</nav>
</div>
</header>
<main>
<div class="sobre-mim">
<img src="foto.png">
<p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
</div>
<h2>Projetos</h2>
<p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
<h3>Contato</h3>
<nav>
<ul>
<div class="social-midia">
<div class="container">
<div class="box">
<li class="whatsapp">
<a href="https://web.whatsapp.com/"><img src="whatsapp.png.png" class="whatsapp-a"></a>
</li>
</div>
<div class="box">
<li class="linkedin">
<a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png" class="linkedin-a"></a>
</li>
</div>
<div class="box">
<li class="email">
<a href=""><img src="email.png.png" class="email-a"></a>
</li>
</div>
</div>
</ul>
</nav>
</main>
<footer>
</footer>
</body>
</html>body {
background-color: #e6e6e6;
}
.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}
img {
margin: 143px 1143px;
position: absolute;
width: 423px;
}
li {
display: inline-block;
margin: 8px;
font-size: 36px;
}
.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}
.p-projetos {
margin: 901px -65px;
font-size: 28px;
}
main {
display: flex;
}
a {
color: black;
}
.listas {
margin: 8px;
}
h1 {
margin: 46px 69px;
font-size: 60px;
}
h2 {
margin: 768px -299px;
font-size: 60px;
}
h3 {
margin: 996px -312px;
font-size: 60px;
align-items: center;
}
.primeiro :hover {
font-size: 29px;
}
.segundo :hover {
font-size: 29px;
}
.terceiro :hover {
font-size: 29px;
}
.whatsapp {
margin: 9px 458px;
}
.linkedin {
margin: 9px 8px;
}
.email {
margin: 9px 458px;
}
.social-midia {
position: absolute;
margin: 909px -1864px;
}
.container {
display: flex;
justify-content: space-between;
}
.box {
height: 100px;
background-color: black;
width: 200px;
}
.whatsapp-a {
margin: 187px 1545px;
width: 69px;
}
.linkedin-a {
margin: 187px 1690px;
width: 69px;
}
.email-a {
margin: 187px 1253px;
width: 64px;
}Fala Geovane, dei uma olhada no projeto e organizada no HTML e CSS, segue os códigos:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="programador.png">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<title>Geovane-dev-front-end</title>
</head>
<body>
<header>
<div class="cabeçalho">
<h1 id="about">About</h1>
<nav>
<ul>
<div class="listas">
<li class="primeiro"><a href="#about">About</a></li>
<li class="segundo"><a href="#projetos">Projetos</a></li>
<li class="terceiro"><a href="#contato">Contato</a></li>
</div>
</ul>
</nav>
</div>
</header>
<main>
<div class="sobre-mim">
<img src="foto.png" class="foto">
<p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
</div>
<h2 id="projetos">Projetos</h2>
<p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
<h3>Contato</h3>
<nav class="redes-sociais">
<a><img src="email.png.png" alt="" class="icone-email"></a>
<a><img src="linkedin.png.png" alt="" class="icone-linkedin"></a>
<a><img src="whatsapp.png.png" alt="" class="icone-whatsapp.png.png"></a>
</nav>
</main>
<footer>
</footer>
</body>
</html>body {
background-color: #e6e6e6;
}
.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}
.foto {
position: absolute;
width: 286px;
right: 350px;
}
li {
display: inline-block;
margin: 8px;
font-size: 36px;
}
.quem-sou {
font-size: 25px;
padding-top: 150px;
}
main {
display: flex;
flex-direction: column;
}
.p-projetos {
font-size: 28px;
text-align: center;
}
a {
color: black;
}
.listas {
margin: 8px;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 60px;
text-align: center;
}
h3 {
font-size: 60px;
text-align: center;
}
.primeiro :hover {
font-size: 29px;
}
.segundo :hover {
font-size: 29px;
}
.terceiro :hover {
font-size: 29px;
}
.redes-sociais {
display: flex;
align-items: center;
justify-content: center;
}
.redes-sociais a {
display: block;
height: 50px;
margin-right: 15px;
}
.redes-sociais a:last-child {
margin-right: 0;
}Espero ter ajudado.