Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
15
respostas

posicionar icones!

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Lidando com bordas e atividade Aplicando bordas

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

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

15 respostas
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
<!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>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
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;
}
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

olha como ficou não é assim que eu quero que fica! https://drive.google.com/file/d/1MYHUkW5_E0RmSYZW5zpbn2H-gUITvK5h/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts
<!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>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
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;
}
por Geovane Ferreira Santana
| 204.9k xp | 669 posts

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!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

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!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

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!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

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>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
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;
}
por Geovane Ferreira Santana
| 204.9k xp | 669 posts

https://drive.google.com/file/d/1nCc12HgxXNXQhuBfgV444NhsE9RMmeUw/view?usp=sharing

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.