<div class="menu">
<button class="menu__item">
  Home
</button>
<button class="menu__item menu__item--disabled" disabled>
  About
</button>
<button class="menu__item">
  Log out
</button>
</div>
<div class="page-content">
  <h1 class="page-content__header">
    Welcome to my page
  </h1>
  <p class="page-content__paragraph">
    This is my personal webpage
  </p>
  <p class="page-content__paragraph page-content__paragraph--secret">
    This is my secret paragraph, no one will know
  </p>
  <button class="button">Ok</button>
  <button class="button button--danger">Not ok</button>
</div>
.menu{
  display:flex;
  background: #788978;
  justify-content: flex-end;
  &__item{
    border: none;
    background-color: #346634;
    color: white;
    cursor: pointer;
    padding:1.5em;
    margin-right: 1em;
    &--disabled{
      background: #BBBBBB;
      color: #888888;
      cursor: not-allowed;
    }
  }
}
.page-content{
  width:50%;
  margin:auto;
  background: #CCFFCC;
  &__header{
    font-size: 32px;
    padding: 1em;
  }
  &__paragraph{
    font-size:20px;
    &--secret{
      color:#CCFFCC;
    }
  }
}

.button{
  border:1px solid #343434;
  border-radius:3px;
  padding:1em;
  font-weight: 600;
  font-size:16px;
  cursor:pointer;
  &--danger{
    background-color: #BC2827;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.