I have coded up the layout using the following Dribbble shot:
https://dribbble.com/shots/5382121-Nike-Future
To help get better at layouts.
This is using a mix of Grid and Flexbox, but an area where I think I may need to revisit is the play button which is using the old method of position: absolute to veritally align it to the middle.
The ideal solution would be to have the play button positioned on the middle grid line. If people have optimisations I would be happy to hear them.
:root {
--main-orange: #ff4644;
--main-blue: #2f333e;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.wrapper {
display: grid;
height: 100vh;
min-height: 800px;
grid-template-columns: 50fr 40fr 10fr;
grid-template-rows: 50fr 50fr;
position: relative;
}
.main-area {
background-color: #fff;
grid-column: 1 / 2;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.play-btn {
width: 75px;
height: 75px;
background-color: var(--main-orange);
border-radius: 40px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
color: var(--main-blue);
text-decoration: none;
transition: 0.3s;
}
.play-btn:hover {
box-shadow: 0px 30px 30px 0px rgba(255, 100, 68, 0.4);
color: #fff;
}
.main-nav {
width: 100%;
display: flex;
justify-content: flex-end;
padding: 60px 75px;
}
.main-nav a {
color: var(--main-blue);
text-decoration: none;
text-transform: uppercase;
}
.logo-area {
margin-right: auto;
}
.logo-area img {
width: 75px;
}
.menu-item {
padding-left: 15px;
padding-right: 15px;
letter-spacing: 7.5px;
font-size: 0.75rem;
transition: 0.3s;
}
.menu-item:hover {
color: var(--main-orange);
}
.menu-item:last-child {
padding-right: 0;
}
.nike-box {
width: 180px;
word-break: break-all;
margin-left: 75px;
justify-self: flex-end;
}
.nike-box h2 {
font-family: 'Roboto Mono', monospace;
text-transform: uppercase;
letter-spacing: 3rem;
font-size: 4rem;
font-weight: 300;
}
.img-area {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background-image: url('https://images.pexels.com/photos/733505/pexels-photo-733505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.search-area {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: var(--main-blue);
}
.social-area {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: var(--main-orange);
color: #fff;
display: flex;
}
.search-icon-container {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding-top: 60px;
color: #fff;
}
.social-links {
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
align-self: flex-end;
width: 100%;
align-items: center;
padding-bottom: 60px
}
.social-links li {
transform: rotate(-90deg);
margin-bottom: 30px;
font-size: 0.75rem;
}
.social-links li:last-child {
margin-bottom: 0;
}
.social-links li a {
color: #fff;
text-decoration: none;
}<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
</head>
<div class="wrapper">
<a href="#" class="play-btn">▶</a>
<section class="main-area">
<nav class="main-nav">
<a href="#" class="logo-area"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/400px-Logo_NIKE.svg.png" alt=""></a>
<a href="#" class="menu-item">Mens</a><a href="#" class="menu-item">Womens</a>
</nav>
<div class="nike-box">
<h2>Nike</h2>
</div>
</section>
<section class="img-area"></section>
<section class="search-area">
<div class="search-icon-container">
<i class="fas fa-search"></i>
</div>
</section>
<section class="social-area">
<ul class="social-links">
<li><a href="#">Fb</a></li>
<li><a href="#">In</a></li>
<li><a href="#">Tw</a></li>
</ul>
</section>
</div>
