<!-- The ui_gradient instagram page set out a challenge to design an office website hero section. After completing the task in figma, I decided to code it here. -->
<header class="header" role="banner" aria-label="The Office">
<div class="header__wrapper">
<h1 class="header__logo">Office</h1>
<nav class="[ nav ] [ flow ]" aria-role="navigation">
<ul class="nav__list">
<li class="nav__item"><a href="#">Home Office</a></li>
<li class="nav__item"><a href="#">Gallery</a></li>
<li class="nav__item"><a href="#">About</a></li>
</ul>
</nav>
</div>
</header>
<section class="section__img">
<img src="https://images.unsplash.com/photo-1518455027359-f3f8164ba6bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80" alt="A home office">
</section>
<main class="[ flow ] [ main ]">
<h2 class="main__heading">Find the space that spurs your creativity</h2>
<p class="main__sub">Browse combinations of storage, lighting, chairs, desks and more.</p>
<button class="main__button">View Offices</button>
</main>
:root {
--color-bg-black: #1D1D1D;
--color-text: #333333;
--color-light: #fff;
--color-text-light: #444444;
--font-base-family: 'Lato', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
--line-height: 1.2;
}
/**
* SASS utils
*/
.text-uppercase {
text-transform: uppercase;
}
.font-700 {
font-weight: 700;
}
.font-300 {
font-weight: 300;
}
.font-400 {
font-weight: 400;
}
/**
* BASE
*/
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-base-family, sans-serif);
background: var(--color-light);
color: var(--color-text);
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: repeat(5, 1fr);
line-height: var(--line-height);
padding: 0 0 0 5rem;
}
/**
* FLOW UTILITY
*/
.flow {
--metric-rhythm: 2rem;
--flow-space: var(--metric-rhythm);
}
.flow > * + * {
margin-top: 1em;
margin-top: var(--flow-space);
}
/**
* HEADER
*/
.header {
@extend .text-uppercase;
grid-area: 1 / 1 / 3 / 2;
padding-top: 2.5rem;
&__wrapper {
display: flex;
align-items: center;
--flow-space: 2.5rem;
}
&__logo {
font-size: 1.1rem;
@extend .font-700;
letter-spacing: 5px;
display: inline-block;
}
.nav {
.nav__list {
display: flex;
padding-left: 3rem;
}
.nav__item {
padding-left: 2rem;
}
a {
letter-spacing: 2px;
@extend .font-300;
font-size: 0.825rem;
text-decoration: none;
color: var(--color-text);
}
}
}
/**
* SECTION
*/
.section__img {
grid-area: 1 / 2 / 6 / 3;
}
/**
* MAIN
*/
.main {
--flow-space: 3rem;
grid-area: 2 / 1 / 6 / 2;
.main__heading {
font-size: 4rem;
max-width: 13ch;
@extend .font-700;
}
.main__sub {
--flow-space: 1rem;
@extend .font-300;
font-size: 1.5rem;
max-width: 35ch;
}
.main__button {
background: var(--color-bg-black);
color: var(--color-light);
font-size: 1rem;
width: 16.5rem;
height: 4.5rem;
cursor: pointer;
line-height: 1.4;
@extend .font-700;
@extend .text-uppercase;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.