1
resposta

feito

body { background: linear-gradient(180deg, #154580 0%, #041833 100%); background-repeat: no-repeat; height: 100vh; }

.container{ position: absolute; left: 176px; top: 98px; border-radius: 10px; background: #C4C4C433; padding: 1rem; }

img { display: flex; margin: auto; }

h1 { font-family: Open Sans, "sans-serif"; font-size: 24px; font-weight: 900; line-height: 33px; letter-spacing: 0em; text-align: center; color: white; }

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; }

.grid-item { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: 0em; text-align: center; vertical-align: middle; color: white; background: #041833; border-radius: 0.5rem; padding: 0.5rem; }

.item1 { grid-area: 1/1/2/2; }

.item2 { grid-area:1/2/2/2; }

.item3 { background: #84EEC1; color: #041833; grid-area:1/4/3/3; }

.item4 { grid-area:2/3/2/1; }

.item5 { grid-area:3/3/4/1; }

.item6 { grid-area:3/3/4/4; }

1 resposta

Oi Breno, tudo bem?

Parabéns por concluir o desafio e continue praticando, é uma ótima forma de fixar o conteúdo.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software