Designing your Website's About Us Page

According to marketing giant HubSpot, 52% website visitors want to see the "about us" page first when they land on your homepage.

According to marketing giant HubSpot, 52% of visitors to your website want to see your "about us" page immediately. Your company's about us page says a lot about who you are and will no doubt be seen by at least half of your website's visitors. The design of your website's about us page is also a visual reflection of your company - an opportunity to increase the interest of site visitors - so leave no stone unturned. This article will provide you with an effective about us page design.

Below is the HTML, CSS, and JavaScript required.

Demo on JSFiddle Download from GitHub

Step 1 - about-us.html

Add the HTML below to your web page

<div class="ct-pageWrapper" id="ct-js-wrapper">
<section class="company-heading intro-type" id="parallax-one">
   <div class="container">
      <div class="row product-title-info">
         <div class="col-md-12">
            <h1>
               About Us
            </h1>
         </div>
      </div>
   </div>
   <div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/hero/hero.jpg);">
      &nbsp;
   </div>
</section>
<section class="story-section company-sections ct-u-paddingBoth100 paddingBothHalf noTopMobilePadding" id="section">
   <div class="container text-center">
      <h2>
         WHAT DRIVES US
      </h2>
      <h3>
         Lorem ipsum - dolor
      </h3>
      <div class="col-md-8 col-md-offset-2">
         <div class="red-border">
            &nbsp;
         </div>
         <p class="ct-u-size22 ct-u-fontWeight300 marginTop40">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed libero vel ex maximus vulputate nec eu ligula. Vestibulum elementum nisi ut fermentum lobortis. Sed quis iaculis felis. 
         </p>
         <!-- <a class="ct-u-marginTop60 btn btn-solodev-red btn-fullWidth-sm ct-u-size19" href="#">Learn More</a> -->
      </div>
   </div>
</section>
<section class="culture-section company-sections ct-u-paddingBoth100 paddingBothHalf noTopMobilePadding">
   <div class="container">
      <div class="col-md-8 col-md-offset-2">
         <h2>
            Etiam varius porttitor 
         </h2>
         <h3>
            Vestibulum elementum nisi ut
         </h3>
         <p class="ct-u-size22 ct-u-fontWeight300 ct-u-marginBottom60">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
            Praesent sed libero vel ex maximus vulputate nec eu ligula. Vestibulum elementum nisi ut fermentum lobortis. 
         </p>
      </div>
      <div class="row ct-u-paddingBoth20">
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-medkit" aria-hidden="true"></i>
               <p>
                  LOREM IPSUM
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </p>
            </div>
         </div>
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-money" aria-hidden="true"></i>
               <p>
                  DOLOR SIT AMET
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Praesent sed libero vel ex maximus vulputate nec eu ligula.
               </p>
            </div>
         </div>
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-clock-o" aria-hidden="true"></i>
               <p>
                  SED TRISTIQUE
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Vestibulum elementum nisi ut fermentum lobortis. 
               </p>
            </div>
         </div>
      </div>
      <div class="row ct-u-paddingBoth20">
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-coffee" aria-hidden="true"></i>
               <p>
                  SEMPER IPSUM
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Nullam bibendum felis non laoreet rutrum.
               </p>
            </div>
         </div>
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-gamepad" aria-hidden="true"></i>
               <p>
                  NEC MATTIS
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Etiam diam mi, lacinia eu sapien in, dapibus sodales erat.
               </p>
            </div>
         </div>
         <div class="col-xs-6 col-md-4">
            <div class="company-icons-white">
               <i class="fa fa-cutlery" aria-hidden="true"></i>
               <p>
                  CRAS MOLLIS
               </p>
               <p class="company-icons-subtext hidden-xs">
                  Etiam varius porttitor tellus et aliquet.
               </p>
            </div>
         </div>
      </div>
      <a class="ct-u-marginTop60 btn btn-solodev-red-reversed btn-fullWidth-sm ct-u-size19" href="/careers/">Ready to Learn More?</a>
   </div>
</section>
<section class="customers-section company-sections ct-u-paddingBoth100 paddingBothHalf noTopMobilePadding">
<div class="container">
   <div class="col-md-8 col-md-offset-2">
      <h2>
         CUSTOMERS
      </h2>
      <h3>
         Trusted by some of the world&rsquo;s leading brands.
      </h3>
      <p class="ct-u-size22 ct-u-fontWeight300 ct-u-marginBottom60 marginTop40">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed libero vel ex maximus vulputate nec eu ligula. Vestibulum elementum nisi ut fermentum lobortis. Sed quis iaculis felis. 
      </p>
   </div>
   <div class="clearfix">
      &nbsp;
   </div>
</div>
</header>
<main>
   <div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
      <div class="row">
         <div class="col-md-12 ct-content">
            <section class="clients-home">
               <div class="container">
                  <div class="clients-logos text-center">
                     <!-- starting row div -->
                     <div class="row">
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/zeina.html" class="Zeina"><img alt="https://www.solodev.com/assets/clients/logo-zeina.png" src="https://www.solodev.com/assets/clients/logo-zeina.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Zeina - 0
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/logic.html" class="Logic"><img alt="https://www.solodev.com/assets/clients/logic.png" src="https://www.solodev.com/assets/clients/logic.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Logic
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/smart.html" class="Smart"><img alt="https://www.solodev.com/assets/clients/client3.png" src="https://www.solodev.com/assets/clients/client3.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Smart 
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/softtech.html" class="Softtech"><img alt="https://www.solodev.com/assets/clients/softtech.png" src="https://www.solodev.com/assets/clients/softtech.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Softtech 
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/wheel.html" class="Wheel"><img alt="https://www.solodev.com/assets/clients/logo-target.png" src="https://www.solodev.com/assets/clients/logo-target.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Wheel 
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/3designs.html" class="3designs"><img alt="https://www.solodev.com/assets/clients/designx.png" src="https://www.solodev.com/assets/clients/designx.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    3designs 
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/heart.html" class="Heart"><img alt="https://www.solodev.com/assets/clients/client7.png" src="https://www.solodev.com/assets/clients/client7.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Heart
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/devtech.html" class="Devtech"><img alt="https://www.solodev.com/assets/clients/devtech.png" src="https://www.solodev.com/assets/clients/devtech.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Devtech 
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-4 client-logos-repeater">
                           <a href="/path/to/detail/chartz.html" class="Chartz"><img alt="https://www.solodev.com/assets/clients/chartz.png" src="https://www.solodev.com/assets/clients/chartz.png"></a>
                           <div class="logo-title">
                              <div class="displayTable">
                                 <div class="displayTableCell">
                                    Chartz 
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- closing row div -->
                  </div>
               </div>
            </section>
         </div>
      </div>
   </div>
</main>

Step 2 - about-us.css

Download the CSS below and include it in your web page

about-us.css

Step 3 - Add the includes below to your web page

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="about-us.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Demo on JSFiddle Download from GitHub

In this article, Solodev showed you how to design your company's about us page as it is likely that over 50% of those who land on your homepage will visit that page first. Get an edge on your competitors by putting more time into the design and content of your about us page and you'll be well on your way.

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Designing your Website's About Us Page

Step 1 - about-us.html

Step 2 - about-us.css

Step 3 - Add the includes below to your web page

Product

Solutions

Resources

About

Thank you for subscribing!

Features

Solutions

Resources

About