Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Exercicio

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Construindo a página e atividade Lista de exercícios

por Douglas Ribeiro dos Santos
| 54.4k xp | 48 posts

Olá pessoal, segue abaixo o exercício feito, se alguém tiver alguma sugestão de melhoria no código e quiser compartilhar!! Obs: Exercício simples mas para quem esta começando como no meu caso, um pouco confuso com os containers...mas seguimos praticando!!

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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <title>Exercicios</title>
</head>

<body>
    <main>
            <div class="container">
                <form class="caixa-de-sugestoes">
                <h1 class="caixa-de-sugestoes-h1">Caixa de sugestões</h1>
                <input id="input-sugestao" type="text" placeholder="Escreva sua sugestão"/>       
                <button class="caixa-de-sugestoes-botao">Enviar</button>
            <div class="checkbox-container">
                <label for="checkbox-exercicio">
                    <input class="checkbox-input" type="checkbox" id="checkbox-exercicio"/>
                    <div class="checkbox-customizado checked"></div>
                </label>
            </div>
            </div>
            
        </form>
    </main> 
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

:root {
    --cor-roxa: #9353FF;
    --cor-placeholder: #6C757D;
    --cor-preto : #000000;
    --cor-branco: #F9F9F9;
    --fonte-inter: "Inter", sans-serif;
}

body, main, .caixa-de-sugestoes {  
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    margin-top: 64px;
}

.caixa-de-sugestoes {
    font-family: var(--fonte-inter);
    text-align: center; 
    height: 100vh;
    margin: 0;
    gap: 24px;
}

.caixa-de-sugestoes-h1{
    font-size: 20px;
    font-style: var(--fonte-inter);
}

#input-sugestao {
    padding: 7px 15px;
    width: 60%;
}

#input-sugestao::placeholder {
    font-size: var(--fonte-inter);
    font-size: 16px;
    color: #6C757D;
}

.caixa-de-sugestoes-botao {
    padding: 9px 18px;
    background-color: var(--cor-roxa);
    border: none;
    color: var(--cor-branco);
}

.container {
    width: 729px;
    padding: 40px;
    border: 2px solid var(--cor-preto);
}

.checkbox-input {
    display: none;
}

.checkbox-customizado {
    width: 24px;
    height: 24px;
    background-color: var(--cor-branco);
    border: 2px solid var(--cor-preto);
    border-radius: 4px;
    cursor: pointer;
    border-radius: 4px;
}

.checked {
    background-color: var(--cor-roxa);
    position: relative;
}

.checkbox-customizado.checked::after {
    content: "";
    position: absolute;
    left: 30%;
    width: 5px;
    height: 14px;

    border-top: 2px solid var(--cor-branco);
    border-left: 2px solid var(--cor-branco);
    transform: rotate(-140deg);
}
1 resposta
solução!
por Mike de Sousa
| 562.4k xp | 752 posts
Alura Scuba Team Suporte Educacional

Oi, Douglas! Como vai?

O seu código está muito bom! Dá para notar que você aplicou as variáveis CSS de maneira eficiente e organizou bem os estilos. Vou destacar alguns pontos positivos e trazer uma dica para ajustes:

Pontos Positivos:

  1. Uso de variáveis no :root, como --cor-roxa e --fonte-inter, é excelente para manter o código escalável e organizado.
  2. A centralização dos elementos no formulário está bem implementada com flexbox.
  3. A personalização do checkbox ficou ótima, especialmente com a pseudo-classe ::after para criar o "check".

Dica:

No seletor #input-sugestao::placeholder, há um detalhe pequeno. Você adicionou a propriedade font-size duas vezes. Isso não quebra o código, mas é sempre bom evitar redundâncias. O seletor ficaria assim:

#input-sugestao::placeholder {
    font-family: var(--fonte-inter);
    font-size: 16px;
    color: var(--cor-placeholder);
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado