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

[Dúvida] Meu projeto não se movimenta, tentei de tudo mas continua assim

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e atividade Media Queries

por Victor Hugo Sampaio Da Silva
| 27.7k xp | 3 posts

print da tela do notebook, onde mostra o projeto 

@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
* {
    margin: 0;
    padding: 0;

}

body {
    height: 100vh; 
    box-sizing: border-box;
    background-color: 
    black;

   color: white

}
.cabecalho {
    padding: 2% 0 0 15%;
    
}
.cabecalho__menu {
    display: flex;
    gap: 80px;

}

.cabecalho__menu__link {
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
 color: red;
 text-decoration: none;

}

.titulo-destaque { color: red;}

.nome-destaque { color: red;}

.introducao {
    width: 50%;
    padding: 2% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;

}

.conteudo__introducao {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;

    
}

.conteudo__introducao__titulo{
    font-size: 5.25rem;
    font-family: "Oswald", sans-serif;
}

.conteudo__introducao__subtitulo {
    font-size: 1,5rem;
    font-family: "Oswald", sans-serif;
}

.conteudo__introducao__paragrafo {
    font-size: 2.12rem;
    font-family: "Montserrat", serif;

}



.conteudo__introducao__paragrafo2 {
    font-size: 2.125rem;
    font-family: "Montserrat", serif;
}



.conteudo__introducao__botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    gap: 32px;
    
}

.conteudo__introducao__subtitulo {
    font-size: 2.75rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    
 
}

.introducao__botao {

    /* background-color: red; */
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 50%;
    border: 2px, solid red;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: white;
    font-family: "Montserrat", sans-serif;
}


.introducao__botao:hover {
    background-color: red;
    padding: 5%;
}

.introducao__img {
    width: 50%;
}

.rodape {
    padding: 2%;
    color: black;
    background-color: red;
    text-align: center;
    font-family: "Montserrat", sansserif;
    font-weight: 500;
    font-size: 2.12em;
    border-radius: 8px;
}

@media (max-width:1200px) { .introducao
 {
    flex-direction: column-reverse;

}
}
4 respostas
por Victor Costa Santos
| 2065k xp | 4023 posts
Alura Scuba Team Monitor do suporte educacional

Olá Victor!

Seu código HTML apresenta algumas discrepâncias em relação ao da aula, o que impossibilita o teste completo. Por isso, solicito que me envie seu HTML completo. Além disso, poderia esclarecer o que você quis dizer com "não se movimenta"? Refere-se ao conteúdo que excede a tela ou a algo diferente?

Estou aqui para ajudar você a finalizar esse projeto que está ficando muito bonito. Aguardo seu código e mais detalhes sobre o erro.

Abraços!

por Victor Hugo Sampaio Da Silva
| 27.7k xp | 3 posts
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Sampaio</title>
    <link rel="stylesheet" href="./Syle/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">
                Home
            </a>
            <a class="cabecalho__menu__link" href="about.html">
                Sobre mim
            </a>
            <a class= "cabecalho__menu__link" href="Curriculum.html">
                Curriculo
            </a>
        </nav>
    </header>
    <main class="introducao">
                <section class="conteudo__introducao">
                <h1 class="conteudo__introducao__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1> 
                <p class="conteudo__introducao__paragrafo">Olá! Sou <strong class="nome-destaque"> Victor Sampaio</strong>, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
                <div class="conteudo__introducao__botao">
                    <h2 class="conteudo__introducao__subtitulo"> Acesse minhas redes sociais: </h2> </div>
                    <div>
                    <a href="https://instagram.com/_v1ctor_sampaio" class=" introducao__botao"> <img src="instagram.png" alt="logo instagram">Instagram</a></div>
                    <div>
                    <a href="https://github.com/VictorSampaio06" class="introducao__botao"> <img src="github.png" alt="logo do github" >Github</a> </div> 
                    <div>
                    <a
                href="https://www.linkedin.com/in/victor-hugo-sampaio-da-silva-5618b4220/" class="introducao__botao"> <img src="linkedin.png", alt="logo do linkedin">Linkedin 
            </a> </div>
                </section> 
                
        <img class="introducao__img" src="Moldura para perfil do Facebook elegante profissional preto e branco.png" alt="foto do Victor Sampaio">
    </main>
    <footer class="rodape">
        <p >Desenvolvido por Victor Sampaio.</p>
    </footer>

</body>
</html>

Boa noite Victor!, aqui está o código completo Em relação ao "bug" : o texto e a foto parece não acompanhar a borda, quando vou ajustar para o celular por exemplo, fica igual ao do print a cima, gigante.

solução!
por Victor Costa Santos
| 2065k xp | 4023 posts
Alura Scuba Team Monitor do suporte educacional

Olá Victor!

Podemos tentar reduzir o espaço entre as letras em dispositivos menores e fazer outras pequenas configurações para melhorar o seu projeto. Dei uns retoques e o seu CSS está assim:

@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
* {
    margin: 0;
    padding: 0;

}

body {
    height: 100vh; 
    box-sizing: border-box;
    background-color: 
    black;

   color: white

}
.cabecalho {
    padding: 2% 0% 0% 15%;
    
}
.cabecalho__menu {
    display: flex;
    gap: 80px;

}

.cabecalho__menu__link {
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
 color: red;
 text-decoration: none;

}

.titulo-destaque { color: red;}

.nome-destaque { color: red;}

.introducao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;

}

.conteudo__introducao {
    display: flex;
    flex-direction: column;
    gap: 40px;

    
}

.conteudo__introducao__titulo{
    font-size: 2.25rem;
    font-family: "Oswald", sans-serif;
}

.conteudo__introducao__subtitulo {
    font-size: 1.5rem;
    font-family: "Oswald", sans-serif;
}

.conteudo__introducao__paragrafo {
    font-size: 1.5rem;
    font-family: "Montserrat", serif;

}



.conteudo__introducao__paragrafo2 {
    font-size: 2.25rem;
    font-family: "Montserrat", serif;
}



.conteudo__introducao__botao {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    
}

.conteudo__introducao__subtitulo {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    
 
}

.introducao__botao {

    /* background-color: red; */
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 60%;
    border: 2px, solid red;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: white;
    font-family: "Montserrat", sans-serif;
}


.introducao__botao:hover {
    background-color: red;
    padding: 5%;
}

.introducao__img {
    width: 50%;
}

.rodape {
    color: black;
    background-color: red;
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

@media (max-width:1200px) { .introducao
 {
    flex-direction: column-reverse;

}
}

E o seu Index, na parte de links tinha algumas divs desncessárias, alterei para o seguinte código:

<div class="conteudo__introducao__botao">

                <h2 class="conteudo__introducao__subtitulo"> Acesse minhas redes sociais: </h2>

                <a href="https://instagram.com/_v1ctor_sampaio" class=" introducao__botao"> <img src="instagram.png" alt="logo instagram">Instagram</a>

                <a href="https://github.com/VictorSampaio06" class="introducao__botao"> <img src="github.png" alt="logo do github" >Github</a>

                <a
                href="https://www.linkedin.com/in/victor-hugo-sampaio-da-silva-5618b4220/" class="introducao__botao"> <img src="linkedin.png", alt="logo do linkedin">Linkedin 
                </a>
            </div>

Para evitar discrepâncias no projeto da aula, recomendo seguir o mesmo código apresentado em vídeo.

Algumas configurações serão aprimoradas ao longo das aulas.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Victor Hugo Sampaio Da Silva
| 27.7k xp | 3 posts

Muito obrigado Victor!, ajudou muito