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

Mão na massa!

Resultado até o momento no CSS:

:root {
    --cor-primaria: #FFFFFF;
    --cor-secundaria: #C0C0C0;
    --cor-de-fundo: #00030C;
    --botoes: #167BF7;
    --fonte-principal: 'Inter';
    --botao-azul-efeito: #3c92fa;
}

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

* {
    margin: 0;
    padding: 0;
}

.principal {
    background-image: url(/assets/Background.png);
    background-size: cover;
    background-repeat: no-repeat;
    align-items: center;
    text-align: center;
}

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

.container__caixa {
    margin: 0 6em;
}

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

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

.container__botao {
    background-color: var(--botoes);
    border-radius: 5px;
    padding: 1em;
    color: var(--cor-primaria);
    text-decoration: none;
    display: block;
    margin-bottom: 1em;
}

.botao__secundario {
    background-color: transparent;
    border: 2px solid var(--cor-primaria);
    text-decoration: none;
    color: var(--cor-primaria);
}

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

.secundario__imagem {
    width: 80%;
}

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

.descricao__titulo {
    font-weight: 700;
    font-size: 48px;
    color: var(--cor-primaria);
    margin-bottom: 0.1em;
}

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

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

.container__descricao {
    padding: 2em;
}

.dispositivos {
    text-align: center;
}

.dispositivos__titulo {
    font-size: 48px;
    color: var(--cor-primaria);
}

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

.lista__item {
    font-size: 32px;
    color: var(--cor-primaria);
}

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

.rodape__logo {
    margin-top: 2em;
}

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

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

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

.lista__link a:hover {
    color: var(--botoes);
}

.lista__link a:active {
    color: #102a4b;
}

.container__botao:hover {
    background-color: var(--botao-azul-efeito);
    color: var(--cor-de-fundo);
}
1 resposta
solução!

Oi, Maria Eduarda, tudo bem?

Parabéns pelo resultado, ficou ótimo! Também agradeço por compartilhar seu projeto, 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 e bons estudos!