Project: Slack's About Page (Part 2)

June 21, 2018

Now that we know a bit more about how to use CSS to, we will get started on styling our Slack About page project.

Objective

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

Goal for Part 2

It’s still far away from looking anything like the actual page we want to build, but stay patient.

Workspace

You can get started by working in the workspace below (hit “Try it now” to activate it):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <title>About Us | Slack</title>
  <style>
    // Your code here
  </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

Note that the solution below is just one possible solution — but if you’re feeling stuck, feel free to see the new files below:

Note: If you’re wondering where the exact pixel values come from in the CSS file below — we’d advise you to not worry about them at the moment and use your best guess via trial-and-error. Different teams have different workflows for handing off a design from UI Designers to Frontend Engineers. It’s usually the UI designers who specify the exact distances in pixels between various elements — as a frontend engineer, you can expect to get exact specifications from the UI Designers. Our goal in this project is to just use our best guess and build something that looks close enough to the original Slack About page design.

Code:

<!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>