Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

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

por João Lino Adão Manuel

| 87.4k xp | 71 posts

Chief Operations Officer

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

| 7123.2k xp | 10318 posts

Alura Scuba Team Monitora

15/03/2023

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

15/03/2023

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