<div class="o-grid p-layout">
<div class="o-grid__item o-grid__header">
<form>
<label for="search">
<input type="search" name="search" id="search" />
<button class="c-btn c-btn--yellow">Search</button>
</label>
</form>
</div>
<div class="o-grid__item o-grid__main">
<button class="c-btn c-btn--yellow c-btn--3d">3D button</button>
</div>
<div class="o-grid__item o-grid__sidebar">
<a href="#" role="button" class="c-btn c-btn--yellow">Link button</a>
</div>
<div class="o-grid__item o-grid__footer">
<a href="#" role="button" class="c-btn c-btn--large c-btn--blue">Contact</a>
</div>
</div>
/* =Variables
--------------------------------*/
/* Colors */
$black: #000;
$white: #fff;
$grey: #d2d7df;
$yellow: #eca320;
$blue: #509cf6;
/* Font size */
$baseFontSize: 16;
/* =Functions
--------------------------------*/
@function rem($pixels) {
@return $pixels / $baseFontSize * 1rem;
}
/* =Mixins
--------------------------------*/
@mixin button-3d($color) {
box-shadow: 0px 4px darken($color, 20%);
}
/* =Elements style
--------------------------------*/
body {
background: #22c1c3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fdbb2d, #22c1c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* =Objects style
--------------------------------*/
.o-grid {
display: grid;
grid-gap: rem(10);
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20% 1fr 20%;
}
.o-grid__item {
background-color: $grey;
}
.o-grid__header {
align-items: center;
justify-content: flex-end;
display: flex;
grid-area: header;
padding: 0 rem(20);
}
.o-grid__main {
grid-area: main;
padding: rem(50);
}
.o-grid__sidebar {
grid-area: sidebar;
padding: rem(20);
}
.o-grid__footer {
align-items: center;
display: flex;
grid-area: footer;
justify-content: flex-end;
padding: rem(20);
}
/* =Components style
--------------------------------*/
/* Button */
.c-btn {
background-color: transparent;
border: 0;
border-radius: rem(3);
color: $black;
padding: rem(5) rem(10);
text-decoration: none;
}
.c-btn--large {
font-size: rem(25);
}
.c-btn--3d {
&.c-btn--yellow {
@include button-3d($yellow);
}
&.c-btn--blue {
@include button-3d($blue);
}
}
.c-btn--yellow {
background-color: $yellow;
}
.c-btn--blue {
background-color: $blue;
color: $white;
}
/* =Patterns style
--------------------------------*/
.p-layout {
background-color: $white;
height: calc(100vh - 100px);
margin: rem(50) auto;
width: 70%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.