0

problemas com a criação da pagina no instagram

V
Vitorio Borges

Boa tarde Devs, tudo bem ?

Meu nome é Vitorio


começei a fazer a pagina do instagram acompanhando e tudo certinho.


logo após fazer todas as linhas de codigos e revelas, quando fui abrir na web para ver e está como a imagem acima e eu não consigo resolver isso de jeito nenhum.


Alguem pode me ajudar ?


HTML5


<!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.png" class="instagram-logo" alt="instagram logo">

                <div class="profile-photo">

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

                </div>

                <a href="#" class="instagram-login">Continue como sprucegabriela</a>

                <a href="#" class="instagram-logout">Remover conta</a>

            </div>

            <div class="group">

                <p class="not-account">Não é sprucegabriela?</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


CSS3


@@ -0,0 +1,159 @@

* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    text-decoration: none;

    font-family: sans-serif;

    font-size: 14px;

}


body {

    width: 100%;

    min-height: 100vh;

    background-color: rgb(243243243);

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

}


.instagram-wrapper {

    display: flex;

    align-items: center;

    justify-content: start;

    width: 60%;

    height: 100vh;

}


.instagram-phone {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50%;

}


.instagram-phone img {

    height: 50rem;

}


.instagram-continue {

    display: flex;

    align-items: center/* horizontal */

    justify-content: space-around/* vertical */

    flex-direction: column;

    width: 50%;

    min-height: 34rem;

}


.group {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-direction: column;

    background-color: #ffffff;

    width: 100%;

    padding: 1.3rem 0;

    border: 1px solid lightgray;

}


.group:nth-child(1) {

    min-height: 19rem;

}


.instagram-logo {

    height: 3rem;

}


.profile-photo {

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    overflow: hidden;

}


.profile-photo img {

    height: 6rem;

}


.instagram-login {

    background-color: #0095f6;

    color: #ffffff;

    padding: 8px;

    border-radius: 4px;

}


.instagram-logout {

    color: #0095f6;

    margin-top: 1rem;

}


.not-account {

    color: rgb(160160160);

}


.link-blue {

    color: #0095f6;

}


.get-the-app {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 1.3rem 0;

}


.download {

    display: flex;

    width: 100%;

    justify-content: space-evenly;

    align-items: center;

    padding: 1rem;

}


.app-download {

    height: 3rem;

    width: 10rem;

    background-size: cover;

}


.app-download:nth-child(1) {

    background-image: url('./img/apple-button.png');

}


.app-download:nth-child(2) {

    background-image: url('./img/googleplay-button.png');

}


/* media queries */



@media (max-width: 1024px) {

    .instagram-wrapper {

        width: 90%;

    }

}


@media (max-width: 650px) {

    body {

        background-color: #ffffff;

    }


    .instagram-wrapper {

        width: 90%;

    }


    .instagram-phone {

        display: none;

    }


    .instagram-continue {

        width: 100%;

    }


    .group {

        border: 1px solid transparent;

    }


se alguem poder me ajudar, muito obrigado pela atenção de todos que forem olhar esse artigo.

0
0

Comentários (5)

0
V

Vitorio Borges

03/06/2021 21:12

eu consegui resolver eu refiz o codigo e comparei com outro e deu certo. Obrigado.

0
Guilhermano Silva

Guilhermano Silva

03/06/2021 17:58

Você verificou se lá no flex-direction da class .group está como column? Testei aqui e vi que esse erro está sendo causado nessa linha.

0
V

Vitorio Borges

03/06/2021 17:40

nossa que estranho estou tentando e até baixei outros navegadores e não vai


0
Guilhermano Silva

Guilhermano Silva

03/06/2021 17:24

Fala Vitorio!


Também testei aqui no Codepen e está tudo normal. Lógico que apenas sem as imagens, mas no restante está tudo ok.

Ai na tua imagem está muito parecido com um flex-direction: row, no lugar de ser "column". Porém, no código que você mostrou está correto.

Tenta abir em outro navegador pra ver o que acontece.


Uma dica: usa o liveserver no vscode que ajuda você visualizar as modificações no browser assim que salva o arquivo.

1
Adriana Oliveira

Adriana Oliveira

03/06/2021 16:52

Prezado Vitorio, boa tarde/noite/dia


Conferi cada linha do seu index, juntamente com a css, passei pra cá, no meu VSCode, abri no navegador e deu bom.

Não sei oq deve ter ocorrido pra ter dado esse erro, sugiro (caso não tenha feito isso ainda), a abrir o seu index em outro navegador, o Microsoft Edge é um bom navegador pra monitorar o andamento do site enquanto vc escreve.

Aqui está o print dos testes q fiz: https://imgur.com/a/dFdWTBo


Peço desculpas por não ter podido te ajudar mais.

None

Brasil