Polygon widget - flex CSS

index.html

<div class = "container">
  <div class = "box">
  <h3> Rick and Morty the Game Review: a fun romp blah blah</h3>
</div>
<div class = "box middle">
  <h3> Lord of the Rings Seventeen million review: a fun romp blah blah</h3>
  </div>
  <div class = "box">
    <h3> Game of Thrones the game review: a fun romp blah blah</h3>
  </div>
  </div

    

polygon-widget-flex-css.markdown

Polygon widget - flex CSS

A Pen by daniel on CodePen.

License.

style.css

/* objective: how to make space between the boxes ?
i am going to export it, i am much more comfortable for mess aroud with it, with vscode */
*, *::after, *::before {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  padding: 15px;
}
.box {
  background: #cc0042;
/*   flex: 1 1 200px; */
  color: white;
  font-family: Helvetica;
  padding: 40px;
  margin: 10xp;
  text-align: center;
  transition: 0.1s background;
}
.middle {
  background: #b20039;
/*   flex-shrink: 1; */
}

.box:hover {
  background: #ff0052;
}

h3 {
  font-size: 30px;
}