CommonLounge Archive

Project: Slack's About Page (Part 5)

June 21, 2018

Finally, in this part, we will put in the header Slack logo and insert the giant hero image in our Slack About page project.

You can download the two images here from Dropbox.

Place the assets folder with the two images in your project, and link up the two images in the appropriate places in your html.

This is what your page should now look like:

Goal for Part 5

Workspace

Here’s the solution code from Part 4. You can hit “Try it now” button to get started

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

Discussion

All we did here was add the images, and a little bit cleanup around header paddings, added a border-bottom to header, and increased the weights and changed the colors for those stats.

Here’s a side-by-side comparison:

Which is the original? Left or right?

Hopefully, this project would’ve given you confidence to build real-world pages. It’s usually a great exercise to try and copy an existing page you admire — it’s one of the best ways to practice.

What’s next? If you look at the actual page, you’ll notice that we haven’t done anything to make the page work on both mobile and desktop (i.e. responsive) — we will come back to it in the near future.

Solution

Here’s the full code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us | Slack</title>
  <style>
    body{
      margin: 0;
    }
    header{
      position: fixed;
      width: 100%;
      background-color: white;
      border-bottom: solid 1px #ebebeb;
    }
    header .slack-logo{
      padding: 32px;
      float: left;
    }
    header nav{
      float: right;
      padding: 32px 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 img.hero-image{
      display: block;
      margin: 0 auto;
    }
    article h2{
      text-align: center;
      padding-top: 20px;
      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;
      color: #3f46ad;
      font-weight: 700;
    }
    article .stat-box .label{
      font-family: Verdana, sans-serif;
      color: #6d6f7b;
      font-size: 16px;
      line-height: 1.5em;
    }
  </style>
</head>
<body>
  <header>
    <div class="slack-logo">
      <img src="https://i.imgur.com/PXyx6JY.jpg" alt="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>
      <img class="hero-image" src="https://i.imgur.com/et5rPNZ.png" width="90%" alt="Slack is Fun!" />
      <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.