Responsive blog layout with full-width images and offset quotes

  • by Amando Abreu
  • on 11 August 2016
  • Beautifully responsive
  • Menu slides in from the left
  • Top menu bar turns transparent when scrolling(to get out of the way for reading) and reappears when the mouse moved and you scroll up
  • Full width images for heavy visual content focus
  • Offset quotes to look cool and modern and stuff
  • Burger menu turns into X
  • Minimal JavaScript
  • Text body is on the narrow side for readability
  • Full SCSS

See the Pen Simple layout with menu and search by Amando Abreu (@amando96) on CodePen.

About the author

Amando Abreu got into electronics as a kid, started programming microchips in his early teens, moved onto web development in his late teens, and got into people; psychology; and business in his twenties.