CommonLounge Archive

Project: Slack's About Page (Part 4)

June 21, 2018

Now that we know a bit more about how to use CSS to style text and backgrounds, it’s time to return to our project.

Note that Slack’s real about page uses paid fonts, but we will use just the free and default web-safe fonts that come built-in right in your browser. We will use a font called Palatino for the huge headings and the numbers 8M, 65 and 500K, and Verdana for everything else.

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

Goal for Part 4

Wow! This is really starting to come together. Up next, we’ll insert images for the logo and the nice graphic that adorns the center of the page.

Workspace

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

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{
      position: fixed;
      top: 0;
      width: 100%;
      background-color: white;
    }
    header .slack-logo{
      padding: 16px;
      float: left;
    }
    header nav{
      float: right;
      padding: 16px;
      font-family: Verdana, sans-serif;
      color: #6d6f7b;
    }
    header .navigation-item{
      padding: 16px;
    }
    header .navigation-item.has-dropdown{
      padding: 6px 12px;
      border: solid 1px #6d6f7b;
      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;
      font-family: Palatino, serif;
      font-size: 44px;
      max-width: 580px;
      margin: 0 auto 24px;
    }
    article p{
      font-family: Verdana, sans-serif;
      font-size: 18px;
      color: #5b5e6d;
      line-height: 30px;
    }
    article h2{
      text-align: center;
      padding-top: 80px;
      padding-bottom: 16px;
      font-family: Palatino, serif;
      font-size: 32px;
      margin: 0 auto 16px;
    }
    article .stat-box{
      width: 32%;
      display: inline-block;
      vertical-align: top;
    }
    article section.stats{
      max-width: 90%;
    }
    article .stat-box .stat{
      font-family: Palatino, serif;
      font-size: 88px;
    }
    article .stat-box .label{
      font-family: Verdana, sans-serif;
      color: #6d6f7b;
      font-size: 14px;
    }
  </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 <br/>use Slack (and counting)</h2>
      <section class="stats">
        <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">65</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.