3
\$\begingroup\$

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">&#9654;</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>

\$\endgroup\$
1
\$\begingroup\$

I would move the play button inside the image section. It make more sense to have a container, not empty, used to host it also by a semantic point of view. By setting it up to display: flex; it will be pretty easy to position it. Of course, you'll need to adapt the design to smaller devices.

See code snippet for details.

Finally, even if it "sounds" correct, I'd use div in place of section for non semantic (I.E. no header, no footer, no content) portions of your page.

I hope this helps.

: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: relative;
  left: -37px;
  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;
  display: flex;
  align-items: center;
}

.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">

  <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">
      <a href="#" class="play-btn">&#9654;</a>
  </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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.