Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] não sei qual código então coloquei o CSS hahaha, porém concluído

:root {
        --branco-principal: #FFFFFF;
        --cinza-secundario: #C0C0C0;
        --botão-azul: #167BF7;
        --cor-de-fundo: #00030C;
        --fonte-principal: 'Roboto';
        --botao-azul-efeito: #4b9afa;
}

body {
        background-color: var(--cor-de-fundo);
        color: var(--branco-principal);
        font-family: Arial, Helvetica, sans-serif;
        font-family: var(--fonte-principal);
        font-size: 16px;
        font-weight: 400;
}

* {
        margin: 0;
        padding: 0;
}

.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__botao {
        background-color: var(--botão-azul);
        border-radius: 5px;
        padding: 1em;
        color: var(--branco-principal);
        display: block;
        text-decoration: none;
        margin-bottom: 1em;

}

.botao_secudario {
        background-color: transparent;
        border: 2px solid var(--branco-principal);
}

.container__aviso {
        font-size: 12px;
        color: var(--cinza-secundario);
}

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

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

.container__caixa {
        margin: 0 6em;

}

.secudario__imagem {
        width: 80%;

}

.secudario {
        align-items: center;
        margin: 0 10em;
}

.descricao__titulo {
        font-weight: 700;
        font-size: 48px;
        margin-bottom: 0.1em;
}

.descricao__texto {
        color: var(--cinza-secundario);
}

.secundario__botao {
        display: inline-block;
        margin-top: 1em;
}

.container__descricao {
        padding: 8em;
}

.quarto {
        align-items: center;
        margin: 0 15em;
}

.dispositivos__lista {
        display: flex;
        justify-content: center;
        list-style-type: none;
}

.dispositivos {
        text-align: center;

}

.dispositivos__titulo {
        font-size: 48px;
        color: var(--branco-principal);
}

.dispositivos__texto {
        font-size: 32px;
        color: var(--branco-principal);
}

.rodape {
        text-align: center;
        margin: 3em;

}

.rodape__logo {
        margin-top: 2em;

}


.rodape__lista {
        display: flex;
        justify-content: center;
        list-style-type: none;
        margin: 2em 1em;
        gap: 18px;

}

.lista__link a{
        text-decoration: none;
        color: var(--branco-principal);
        font-size: 16px;
}

.rodape__texto {
        text-align: center;
        color: var(--cinza-secundario);
        margin: 1.5em;
        font-size: 14px;
}

.lista__link a:hover{
        color: var(--botão-azul);
        text-decoration: underline;
}

.lista__link a:active{
        color: yellow;
}

.container__botao:hover{
        background-color: var(--botao-azul-efeito);
        color: var(--cor-de-fundo);
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta
solução!

Oi, Samuel, tudo bem?

Parabéns pelo resultado, ficou ótimo!

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum. Abraços!