CSS Revolution
Get thee to the barricades lassy.

Flexbox layout

joeschmoe

The main layout here uses flexbox. There are two asides (L and R) and the main article in the middle.

To hide something but keeping it's space there use:
visibility:hidden and
visibility:visible.
Ideal for these star menu above.

Another option is:
opacity: 0 and
opacity: 100.

Using opacity allows the use of transitions because it uses numerical values.

Body font is Renner, a clone of the beautiful classic font Futura.

Image is from Joe Schmoe.

Maxime, delectus! Pariatur deserunt, amet repellat possimus, adipisci corporis? Corporis amet id totam nobis repudiandae, natus doloremque obcaecati? Autem libero reprehenderit fuga provident excepturi qui?

Quibusdam sunt, vel officiis quae architecto accusantium mollitia amet at fuga aperiam quas, modi, consequuntur illum nesciunt libero. Atque quaerat rem, ipsum, ab voluptate ut?

.flexcontainer {
  display: flex;
}

.flexcontainer .left {
  flex: 1;
}
.flexcontainer .content {
  flex: 5;
  background: var(--OffWhite);
  border-radius: 80px 80px 0 0;
  padding: 50px 1.5em;
}
.flexcontainer .right {
  flex: 2;
}

Recusandae commodi, dolor, iste neque vitae non unde exercitationem amet dicta sint maiores doloremque deleniti possimus? Facilis ratione deserunt consequatur architecto iusto voluptatibus, laboriosam delectus.

Culpa, facere? Eaque laudantium tempora eos quaerat fugit quas dolores beatae incidunt, autem, modi iusto a sed harum reprehenderit aperiam expedita provident animi et! Iusto.

Accusamus quod corporis, magnam. Repudiandae corrupti saepe repellendus exercitationem nesciunt assumenda commodi provident veniam qui consequuntur totam ea, voluptates velit vero eligendi beatae sequi harum!

Beatae, veritatis dolorum voluptates dignissimos modi nostrum voluptatum, magnam consequuntur sint, fuga vitae natus placeat dolores ullam. Dolorem provident necessitatibus, nam suscipit, reiciendis sapiente officia.

©2020