Desafio clase 4 - Curso Flexbox - Alura Latam

Hola!

Comparto mi solución:

HTML:

<h1 class="titulo">Tecnologías Front-end</h1>
<section class="cuadros__container">
  <div class="html" >
    <img src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/html.png" alt="Logo HTML">
  </div>
  <div class="css" >
    <img src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/css.png" alt="Logo CSS">
  </div>
  <div class="angular">
    <img src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/angular.png" alt="Logo Angular">
  </div>
  <div class="tailwind">
    <img  src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/tailwind.png" alt="Logo Tailwind">
  </div>
  <div class="react">
    <img src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/react.png" alt="Logo React">
  </div>
  <div class="javascript">
    <img src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/js.png" alt="Logo JavaScript">
  </div>

</section>

CSS:

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

body {
  font-family: "Jura", sans-serif;
  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;
}

.cuadros__container {
  width: 1150px;
  height: 600px;
  position: absolute;
  left: 176px;
  top: 120px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.html {
  order: 1;
}

.angular {
  order: 2;
}

.css {
  order: 4;
}

.angular {
  order: 2;
}

.tailwind {
  order: 5;
}

.react {
  order: 3;
}

.javascript {
  order: 6;
}