Entrar Ainda não tem acesso?
4
respostas

[Dúvida] Botão inline-block não ficou de tamanho menor

Referente ao curso HTML e CSS: praticando HTML/CSS

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Fiz o desenvolvimento a partir do Figma e considerando os aprendizados da aula. Primeiro fiz sem consultar os repos do GitHub e depois comparei, mas não consegui encontrar a diferença no meu código para o botão dessa section estar grande:

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

No vídeo do curso e no código do repo, está assim:

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

Segue HTML:

<!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="/styles/style.css">
    <title>Alura Plus</title>
</head>
<body>
    <section class="container principal">
        <div class="container__box__principal">
            <h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="img/logo_combo.png" alt="O Combo+ é a junção do Alura+ e Alura Língua" class="container__imagem">
            <a href="https://www.alura.com.br" class="container__botao" target="blank">Assine por 12x de R$ 120,00*</a>
            <a href="https://www.alura.com.br" class="container__botao botao__secundario" target="blank">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>   
    <section class="container secundario">
        <img src="img/plataformas.png" alt="Um monitor e um celular com plataforma da Alura Plus abertas" class="secundario__imagem">
        <div class="container__conteudo">
            <h2 class="titulo__descricao">Assista do seu jeito</h2>
            <p class="container__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
        </div>
    </section>
    <section class="container secundario">
        <div class="container__conteudo">
            <p class="container__texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
            <a href="https://www.alura.com.br" class="container__botao botao__curto" target="blank">Assine o Combo+</a>
        </div>
        <img src="img/telas.png" alt="Telas do Alura Plus e Alura Língua" class="secundario__imagem">
    </section>
    <section class="container secundario">
        <img src="img/notebook.png" alt="Notebook com tela aberta em curso de HTML e CSS da Alura.">
        <div class="container__conteudo">
            <h2 class="titulo__descricao">Baixe seus cursos</h2>
            <p class="container__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
        </div>
    </section>

</body>
</html>
4 respostas
por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Segue CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    --cor-primaria: #FFFFFF;
    --cor-secundaria: #F9F9F9;
    --cor-terciaria: #C0C0C0;
    --cor-background: #00030C;
    --cor-botao-link: #167BF7;

    --fonte-primaria: 'Inter';
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    background-color: var(--cor-background);
    font-family: var(--fonte-primaria);
    color: var(--cor-primaria);
    font-size: 16px;
    font-weight: 400;
}

.principal{
    background-image: url("/img/background.png");
    background-repeat:  no-repeat;
    background-size: contain;
    align-items: center;
    text-align: center;
}

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}

.container__box__principal {
    margin: 0 6em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.container__imagem {
    margin: 1em 0 2em 0;
}

.container__titulo {
    font-size: 28px;
    font-weight: 700;
}

.container__botao {
    border-radius: 8px;
    background-color: var(--cor-botao-link);
    color: var(--cor-primaria);
    padding: 1em;
    display: block;
}

.botao__secundario {
    background-color: transparent;
    border: 1px solid var(--cor-primaria);
}

.container__conteudo {
    margin: 0% 8%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.container__aviso {
    color: var(--cor-terciaria);
    font-size: 12px;
}

.secundario {
    align-items: center;
    margin: 0 10%;
}

.titulo__descricao {
    font-size: 48px;
    font-weight: 700;
}

.container__texto {
    color: var(--cor-secundaria);
}

.secundario__imagem {
    width: 80%;
}

.botao__curto {
    display: inline-block;
}
por Roseane Mendes Moçali
| 20.5k xp | 10 posts

Oi! Estava com o mesmo problema. Recorri a Luri e foi essa a solução:

A solução da Luri foi usar no .secundario__botao : .secundario__botao { display: inline-block; margin-top: 1em; width: 150px; }

Dessa forma funcionou!

Mas mesmo assim ainda não descobri o pq de não ter dado certo como nós fizemos.

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Opa Roseane, obrigado pela sua solução!

Realmente não consegui descobrir o que havia de errado. Quem sabe alguém comenta aqui e nos soluciona esse mistério rsrs.

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Acho que ninguém conseguiu o motivo de originalmente ter dado errado.

Será que alguém da Alura conseguiria ajudar?