Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Sugestão] Resposta Desafio Aula: 1

Referente ao curso CSS: Flexbox e layouts responsivos, no capítulo Rodapé responsivo e atividade Desafio

por João Lino Adão Manuel
| 108.5k xp | 78 posts

Olá, Removi algumas linhas de código e adicionei outras para implementar o que o cliente desejava. O código ficou assim:

CSS

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

body {
  display: flex;
  flex-flow: column wrap;
  font-family: "Jura", sans-serif;
  margin: 0 230px;
  background: linear-gradient(180deg, #154580 0%, #041833 100%);
  color: white;
  height: 100vh;
  width: 100vw;
}

.titulo {
  font-size: 34px;
  font-weight: bold;
  text-decoration: underline 3px;
  text-underline-offset: 25px;
  margin-bottom: 60px;
}

.quadros__container {
  width: fit-content;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

.obra-titulo {
  border: 1px dotted white;
  padding: 10px;
  user-select: none;
  text-align: center;
}

Resultado:

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

Link para o CodePen: https://codepen.io/linusmanuel/pen/VwGXOGa

2 respostas
solução!
por Lorena Garcia
| 11948.9k xp | 17886 posts
Alura Scuba Team

Olá João, tudo bem?

Obrigada por compartilhar seu código conosco e o link do codepen! Ficou bem legal a implementação que você fez para atender às necessidades do cliente.

O resultado final ficou bem harmônico e agradável visualmente.

Um abraço e bons estudos.

por Jorge Roberto dos Santos Felippe
| 27.7k xp | 17 posts

Prezados,

Somei a dica do Professor com a do colega João e o cheguei a esse resultado usando display:Flex , justify-content: space-between e width: fit-content;:

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

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

body {
  font-family: "Jura", sans-serif;
  margin: 0 230px;
  background: linear-gradient(180deg, #154580 0%, #041833 100%);
  color: white;
  height: 100vh;
  width: 100vw;
}

.titulo {
  position: absolute;
  top: 30px;
  left: 180px;
  font-size: 34px;
  font-weight: bold;
  text-decoration: underline 3px;
  text-underline-offset: 25px;
}

.quadros__container {
  display: Flex;
  justify-content: space-between;
  width: fit-content;
  position: absolute;
  left: 176px;
  top: 150px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
}

.quadros__item:nth-child(1),
.quadros__item:nth-child(3) {
  margin-top: 1px;
}

.obra-titulo {
  border: 1px dotted white;
  padding: 10px;
  user-select: none;
  text-align: center;

}

Segue o link para o codepen: https://codepen.io/pen/tour/welcome/start