CommonLounge Archive

Project: Slack's About Page (Part 3)

June 21, 2018

Now that we know a bit more about how to use CSS to position elements and create layouts, we will do the layouts for the header section and the stats sections in this part.

Your challenge in this part is to style the page so that it now looks like the following:

Goal for Part 3

To make it easier for you, here’s are three major changes we made in this part:

  1. Made the header fixed positioned, so that it stays sticky even when the page scrolls.
  2. Did the layout for the Slack logo and the nav using floats
  3. Did the layout for the stats section by making them inline-blocks.

It’s somewhat starting to come together — but you know we still have a long way to go after this.

Workspace

Write your styling code directly in the workspace below. (Click “Try it now” to activate it)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us | Slack</title>
  <style>
    body{
      margin: 0;
    }
    header .navigation-item{
      padding: 16px;
    }
    header .navigation-item.has-dropdown{
      border: solid 1px black;
      border-radius: 5px;
      margin-left: 12px;
    }
    article section {
      margin: 0 auto;
      text-align: center;
    }
    article h1{
      padding-top: 160px;
      padding-bottom: 24px;
      text-align: center;
    }
    article h2{
      text-align: center;
      padding-bottom: 16px;
    }
  </style>
</head>
<body>
  <header>
    <div class="slack-logo">Slack</div>
    <nav>
      <a class="navigation-item">Why Slack?</a>
      <a class="navigation-item">Pricing</a>
      <a class="navigation-item">About Us</a>
      <a class="navigation-item has-dropdown">Your Workspaces</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Making work simpler, more pleasant, and more productive</h1>
      <section>
        <p>Slack is the collaboration hub that brings the right people together with all the right information and tools to get work done. Launched in 2014, Slack is the fastest-growing business application in history. Millions of people around the world use Slack to connect their teams, unify their systems, and drive their business forward. From Fortune 100 companies to corner markets, Slack helps people communicate better.</p>
      </section>
      <h2>70,000+ paying companies use Slack (and counting)</h2>
      <section>
        <div class="stat-box">
          <div class="stat">8M</div>
          <div class="label">8 million daily active users</div>
        </div>
        <div class="stat-box">
          <div class="stat">65M</div>
          <div class="label">65 companies from the Fortune 100 have paid Slack workspaces</div>
        </div>
        <div class="stat-box">
          <div class="stat">500K</div>
          <div class="label">500,000 organizations use Slack</div>
        </div>
      </section>
    </article>
  </main>
</body>
</html>

Solution

As always, there’s the solution below for the page above, but look at it only if you can’t get a part to look like above:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us | Slack</title>
  <style>
    body{
      margin: 0;
    }
    header{
      padding: 16px;
      position: fixed;
      top: 0;
      width: 100%;
      background-color: white;
    }
    header .slack-logo{
      padding: 16px;
      float: left;
    }
    header nav{
      float: right;
      padding: 16px;
    }
    header .navigation-item{
      padding: 16px;
    }
    header .navigation-item.has-dropdown{
      padding: 6px 12px;
      border: solid 1px black;
      border-radius: 5px;
      margin-left: 12px;
    }
    main{
      clear: both;
    }
    article section {
      margin: 0 auto;
      text-align: center;
      max-width: 704px;
      padding-bottom: 80px;
    }
    article h1{
      padding-top: 160px;
      padding-bottom: 24px;
      text-align: center;
    }
    article h2{
      text-align: center;
      padding-top: 80px;
      padding-bottom: 16px;
    }
    article section .stat-box{
      width: 32%;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <header>
    <div class="slack-logo">Slack</div>
    <nav>
      <a class="navigation-item">Why Slack?</a>
      <a class="navigation-item">Pricing</a>
      <a class="navigation-item">About Us</a>
      <a class="navigation-item has-dropdown">Your Workspaces</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Making work simpler, more pleasant, and more productive</h1>
      <section>
        <p>Slack is the collaboration hub that brings the right people together with all the right information and tools to get work done. Launched in 2014, Slack is the fastest-growing business application in history. Millions of people around the world use Slack to connect their teams, unify their systems, and drive their business forward. From Fortune 100 companies to corner markets, Slack helps people communicate better.</p>
      </section>
      <h2>70,000+ paying companies use Slack (and counting)</h2>
      <section>
        <div class="stat-box">
          <div class="stat">8M</div>
          <div class="label">8 million daily active users</div>
        </div>
        <div class="stat-box">
          <div class="stat">65M</div>
          <div class="label">65 companies from the Fortune 100 have paid Slack workspaces</div>
        </div>
        <div class="stat-box">
          <div class="stat">500K</div>
          <div class="label">500,000 organizations use Slack</div>
        </div>
      </section>
    </article>
  </main>
</body>
</html>

© 2016-2022. All rights reserved.