<div class="menu">
  <svg class="menu-icon" viewBox="0 0 448 512" width="100" title="bars">
    <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
  </svg>
</div>
<div class="container">
  <h1>Lorem ipsum dolor sit amet</h1>
  <h2>Aenean commodo ligula eget dolor aenean massa</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Donec quam felis,
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

  <h2>Aenean commodo ligula eget dolor aenean massa</h2>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Donec quam felis,
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

  <ul>
    <li>Lorem ipsum dolor sit amet consectetuer.</li>
    <li>Aenean commodo ligula eget dolor.</li>
    <li>Aenean massa cum sociis natoque penatibus.</li>
  </ul>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Donec quam felis,
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

  <h3>Cum sociis natoque penatibus et magnis dis
    parturient montes nascetur ridiculus mus</h3>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Donec quam felis,
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

  <h2>Aenean commodo ligula eget dolor aenean massa</h2>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Donec quam felis,
    ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
@import url('https://fonts.googleapis.com/css2?family=Arima:wght@500&display=swap');

body {
  background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTgxMjQ5NDg&ixlib=rb-1.2.1&q=80');
  background-size: cover;
  background-attachment: fixed;
}
h1, h2, h3 {
  font-family: 'Arima', cursive;
}
.container {
  background: #fff;
  box-shadow: 0 0 30px 3px rgba(110,90,70,.7);
  padding: 2rem;
  max-width: 350px;
  margin: auto;
}
.menu-icon {
  width: 2rem;
  height: 2rem;
  fill: #fff;
  background: #0bd;
  padding: 1rem;
  position: fixed;
  right: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.