1

Problemas - Login Instagram - Bootcamp JavaScript - RESOLVIDO

#HTML #CSS
Matheus Quinalha
Matheus Quinalha

Bom Dia Pessoal!

Estou dando inicio ao Bootcamp JavaScript Game Developer, porém, logo nas primeiras aulas estou com problema. Não estou conseguindo deixar o Login do Instagram de acordo com a Instrutora/Desenvolvedora Gabriela. Ele não divide as DIV's em 02 colunas, de jeito nenhum. Se alguém puder me ajudar a ver o que estou fazendo de errado, por favor.

O código segue abaixo, para analise:

INDEX.HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css"> 
        <title> </title>
    </head>
    <body>
      <div class="instragram-wrapper">          
        <div class="instagram-phone">
            <img src="./img/Celular Instagram.png" alt="Celular">
        </div>

        <div class="instagram-continue">
            <div class="group">
                <img src="./img/Logotipo Instagram.png" alt="Logotipo Instagram" class="instagram-logo">
                <div class="profile-photo">
                    <img src="./img/Eu.png" alt="Foto de Perfil">
                </div>
                <a href="#" class="instagram-login">Continue como Matheus</a>
                <a href="#" class="instagram-logout">Remover Conta</a>
            </div>

            <div class="group">
                <p class="not-account">Não é Matheus?</p>
                <p class="not-account">
                    <span class="link-blue">Alterar Conta</span>
                    ou
                    <span class="link-blue">Inscreva-se</span>
                </p>
            </div>

            <div class="get-the-app">
                <p class="get-app">Baixe o Aplicativo</p>
                <div class="download">
                        <a href="#" class="app-download"></a>
                        <a href="#" class="app-download"></a>
                </div> 
            </div>
        </div>
      </div>
    </body>
</html>


STYLE.CSS:


* {
    padding0px;
    margin0px;
    box-sizingborder-box;
    text-decorationnone;
    font-familysans-serif;
    font-size14px;
}

body {
    width100%;
    min-height100vh;
    background-colorrgb(243,243,243);
    margin0;
    padding0;
    displayflex;
    justify-contentcenter;
}

.instagram-wrapper{
    displayflex;
    align-items:center;
    justify-content:space-evenly;
    width60%;
    height100vh;
}

.instagram-phone{
    displayflex;
    align-itemscenter;
    justify-contentcenter;
    width50%;
}

.instagram-phone img{
    height30rem;
}

.instagram-continue{
    displayflex;    
    align-itemscenter/*horizontal*/
    justify-contentspace-around/*vertical*/
    flex-directioncolumn;
    width60%;
    min-height34rem;
}

.group{
    displayflex;
    justify-contentspace-between;
    align-itemscenter;
    flex-directioncolumn;
    background-color#fff;
    width100%;
    padding1.3rem 0;
    border1px solid lightgray;
}

.group:nth-child(1){
    min-height19rem;
}

.instagram-logo{
    height3rem;
}

.profile-photo{
    displayflex;
    justify-contentcenter;
    align-itemscenter;
    border-radius50%;
    overflowhidden;
}

.profile-photo img{
    height6rem;
}

.instagram-login{
    background-color#0095f6;
    color#fff;
    padding8px;
    border-radius4px;
    margin8px;
}

.instagram-logout{
    color#0095f6;
    margin-top1rem;   
}

.not-account{
    colorrgb(160,160,160);

}

.link-blue{
    color#0095f6;
}

.get-the-app{
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    justify-contentcenter;
    width100%;
    padding1.3rem 0;
}

.download{
    displayflex;
    width100%;
    justify-contentspace-evenly;
    align-itemscenter;
    padding1rem;
}

.app-download{
    height3rem;
    width10rem;
    background-sizecover;
}

.app-download:nth-child(1){
    background-imageurl('./img/DownloadApple.png');
}

.app-download:nth-child(2){
    background-imageurl('./img/DownloadGooglePlay.png');
}

/* media queries */

@media(max-width1024px){
    .instagram-wrapper{
        width90%;
    }
}

@media(max-width650px){
    .body{
        background-color#fff;
    }

    .instagram-wrapper{
        width90%;
    }
    .instagram-phone{
        display:none;
    }
    .instagram-continue{
        width100%;
    }

    .group{
        border1px solid transparent;
    }
}


MEU SITE:


SITE EXEMPLO:


LINK GITHUB:

https://github.com/matheusquinalha/Bootcamp-JavaScript-Game-Developer/tree/main/HTML5%20e%20CSS3/Pagina%20Inicial%20do%20Instagram

8
110

Comentários (8)

0
Matheus Quinalha

Matheus Quinalha

29/12/2020 15:23

Gabrielle Silva, boa tarde!


Agradeço a atenção e o auxilio, porém consegui resolver o problema. Estava realmente escrevendo errado o nome da class no TAG, porém, estarei utilizando dessas informações em projetos futuros, para que não volte a acontecer o problema.

0
Gabrielle Silva

Gabrielle Silva

29/12/2020 15:13

veja tambem o tamanho da imagem pode ser que isso esteja influenciando nas DIVs

0
Gabrielle Silva

Gabrielle Silva

29/12/2020 14:17

Boa tarde Matheus, pelo que vi do teu codigo acredito que o problema sejá como você está fechando as divs... presta atenção nos detalhes,
Esse é o meu codigo: (meu github caso tu queria fazer uma compraração : https://github.com/gabriellebraz/pagina-do-instagram-DIO )

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Instagram</title>

</head>


<body>

    <div class="instagram-wrapper">

        <div class="instagram-phone">

            <img src="./img/instagram-celular.png" alt="celular">

        </div>


        <div class="instagram-continue">

            <div class="group">

                <img src="./img/instagram-logo-17.png" class="instagram-logo" alt="instagram logo">

                <div class="profile-photo">

                    <img src="./img/perfil-instagram3.jpg" alt="foto perfil">

                </div>

                <a href="#" class="instagram-login">continue como @gaby_bzs</a>

                <a href="#"class="instagram-lougot">remover conta</a>

            </div>

            <div class="group">

                <p class="not-account">Não é Gaby_bzs?</p>

                <p class="not-account">

                    <span class="link-blue">Alternar contas</span>

                    ou 

                    <span class="link-blue">Inscreva-se</span>

                </p>

            </div>

            <div class="get-the-app">

                <p class="get-app">baixe o aplicativo</p>

                <div class="download">

                    <a href="#" class="app-download"></a>

                    <a href="#" class="app-download"></a>

                </div>

            </div>

        </div>


    </div> 


</body>

</html>
 

espero ter ajudado, qualquer coisa pode entrar em contato comigo que te ajudo o maximo que puder Boa Sorte.

1
Matheus Quinalha

Matheus Quinalha

29/12/2020 14:17

André Romoaldo, Boa Tarde!!


Cara, muito obrigado!! kkkkk Passei por ai umas 300 vezes, mas não vi esse R a mais. Agora funcionou perfeitamente. Muito obrigado mesmo!

0
Matheus Quinalha

Matheus Quinalha

29/12/2020 14:13

Silvino Filho, olhei para seu código e tentei identificar o problema. Realmente estava faltando. Adicionei essa DIV, ele deu uma melhorada no layout mas mesmo assim continua um embaixo do outro :/.


E Ariel Alves, eu fiz isso sim. Fui verificando todos os fechamentos, mas todos (aparentemente) estão corretos. Não identifiquei nenhuma TAG que não estava com />, fora as IMG, mas elas não usam a barra para fechar, pois se trata de uma unica TAG

1
André Romoaldo

André Romoaldo

29/12/2020 14:09

Opa amigão boa tarde!

Logo no começo do teu HTML tem um erro no nome da classe:

  <body>
      <div class="instragram-wrapper"> <!--AQUI ESTA O ERRO - INSTRAGRAM!-->          
        <div class="instagram-phone">
            <img src="./img/Celular Instagram.png" alt="Celular">
        </div>


Corrigindo o nome os items vão pra posição certa. : D

Se ajudou marca a resposta como util! : DD

0
Ariel Alves

Ariel Alves

29/12/2020 14:02

Já tentou fechar as tags com /> ?

Vi que suas tags no html estão fechando apenas com o >, tente fechar com /> e veja se isso corrige o problema.

0
Silvino Filho

Silvino Filho

29/12/2020 14:02

Olá Matheus,


Aparentemente está falando um display flex. Olhando por cima vi que faltou uma div (class group-logo) logo após a group


dá uma olhada no meu código lá


https://github.com/Silvino-Cardoso/bootcamp_everis/blob/main/HTML_CSS/landing-instagram/index.html

Gostou muito de aprender novas linguagens e tecnologias. Iniciei minha carreira profissional na área de T.I. a pouco tempo (em torno de 1 ano), e meu objetivo e virar desenvolvedor

Brasil