<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.