Entrar Ainda não tem acesso?
3
respostas

Não ficou igual ao video

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

por Mariana Honorato Rodrigues
| 37k xp | 10 posts

Como faço para ficar organizado igual no video

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root{
    --cor-principal: #001C30;
    --cor-secundaria: #176B87;
    --cor-terciaria: #64CCC5;
    --font-principal: 'Krona One', sans-serif;
    --font-secundaria: 'Montserrat', sans-serif;
}


* {
    margin: 0;
    padding: 0;
}

body {

    background-color: var(--cor-principal);
    box-sizing: border-box;
    color: var(--cor-secundaria);
}

.cabecalho{
    padding: 1% 0 0 25%;
}

.cabecalho__menu{
display: flex;
gap: 80px;

}


.cabecalho__menu__link{
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-secundaria);
text-decoration: none;
transition: .5s;
}

.cabecalho__menu__link:hover{

scale: 1.1;
transition: .5s;   

}

.apresentacao__conteudo__titulo {

    color: var(--cor-secundaria);
    font-family: var(--font-principal);
    font-size: 2.25rem;

}

.destaque-titulo {

    color: var(--cor-terciaria);

}



.apresentacao {
   
    padding: 3% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    gap: 82px;

}

.apresentacao__conteudo {
    width: 50%;
    height: 482px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__texto {
    font-size: 1.5rem;
    font-family: var(--font-secundaria);
}

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

}

.apresentacao___botao__link {

    background-color: transparent;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 25%;
    padding: 21.5px 0;
    text-align: center;
    border-radius: 8px;
    border-color: var(--cor-secundaria);
    color: var(--cor-terciaria);
    font-size: 1.5rem;
    text-decoration: none;
    font-family: var(--font-secundaria);
    font-weight: 600;
    border: 2px solid;


}
.apresentacao_botao_subtitulo{
  
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao___botao__link:hover{
    cursor: grab;
    background-color:var(--cor-secundaria);

}
.rodape{
 color: var(--cor-principal);
 background-color: var(--cor-terciaria);
 padding: 30px;
 text-align: center;
 font-weight:bolder;
 font-size: 1.1rem;
 font-family: var(--font-secundaria);
}

.apresentacao__imagem{

    width: 30%;
}

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas
por Lorena Garcia
| 8364.6k xp | 12215 posts
Alura Scuba Team Suporte Educacional

Oi Mariana, tudo bem?

Você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Lembrando que você sempre pode baixar o projeto da aula e comparar o código da aula com o seu. É uma ótima maneira de praticar também.

Um abraço e bons estudos.

por Mariana Honorato Rodrigues
| 37k xp | 10 posts
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root{
    --cor-principal: #001C30;
    --cor-secundaria: #176B87;
    --cor-terciaria: #64CCC5;
    --font-principal: 'Krona One', sans-serif;
    --font-secundaria: 'Montserrat', sans-serif;
}


* {
    margin: 0;
    padding: 0;
}

body {

    background-color: var(--cor-principal);
    box-sizing: border-box;
    color: var(--cor-secundaria);
}

.cabecalho{
    padding: 1% 0 0 25%;
}

.cabecalho__menu{
display: flex;
gap: 80px;

}


.cabecalho__menu__link{
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-secundaria);
text-decoration: none;
transition: .5s;
}

.cabecalho__menu__link:hover{

scale: 1.1;
transition: .5s;   

}

.apresentacao__conteudo__titulo {

    color: var(--cor-secundaria);
    font-family: var(--font-principal);
    font-size: 2.25rem;

}

.destaque-titulo {

    color: var(--cor-terciaria);

}



.apresentacao {
   
    padding: 3% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    gap: 82px;

}

.apresentacao__conteudo {
    width: 50%;
    height: 482px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__texto {
    font-size: 1.5rem;
    font-family: var(--font-secundaria);
}

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

}

.apresentacao___botao__link {

    background-color: transparent;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 25%;
    padding: 21.5px 0;
    text-align: center;
    border-radius: 8px;
    border-color: var(--cor-secundaria);
    color: var(--cor-terciaria);
    font-size: 1.5rem;
    text-decoration: none;
    font-family: var(--font-secundaria);
    font-weight: 600;
    border: 2px solid;


}
.apresentacao_botao_subtitulo{
  
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao___botao__link:hover{
    cursor: grab;
    background-color:var(--cor-secundaria);

}
.rodape{
 color: var(--cor-principal);
 background-color: var(--cor-terciaria);
 padding: 30px;
 text-align: center;
 font-weight:bolder;
 font-size: 1.1rem;
 font-family: var(--font-secundaria);
}

.apresentacao__imagem{

    width: 30%;
}

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

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Sobre mim</title>
</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="aboutme.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis voluptatem dolor debitis. Adipisci ipsum quibusdam quaerat eius nostrum, repudiandae laborum est inventore voluptatem ea earum maiores nulla voluptatibus maxime minus!</p>
            <p class="apresentacao__conteudo__texto">Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quibusdam et inventore explicabo nostrum iure voluptatem officia fugit, dolor quo vel cupiditate, vitae dolorem optio suscipit! Quod ducimus porro magni.</p>
            
        </section>
        <img class="apresentacao__imagem" src="assets/img/Imagem_mariana.svg" alt="imagem de Mariana Honorato">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Mariana.</p>
    </footer>
</body>

</html>
por Mariana Honorato Rodrigues
| 37k xp | 10 posts
<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Home</title>
</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="aboutme.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong
                    class="destaque-titulo"> com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade
                em <strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas
                ideias. Vamos conversar?</p>
            <div class="apresentacao__botao">
                <h2 class="apresentacao_botao_subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao___botao__link" href="http">

                    <img src="./assets/img/github.png" alt="">
                    GitHub

                </a>

                <a class="apresentacao___botao__link" href="http">
                    <img src="./assets/img/linkedin.png" alt="">
                    Linkedln

                </a>

            </div>
        </section>

        <img class="apresentacao__imagem" src="assets/img/Imagem_mariana.svg" alt="imagem de Mariana Honorato">

    </main>
    <footer class="rodape">
        <p>Desenvolvido por Mariana.</p>
    </footer>
</body>

</html>