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. In this article, Solodev will provide you with an effective about us page design.
For detailed instructions, view Solodev's Designing your Website's About Us Page article.
Try out a working example on JSFiddle.
The about us page contains the following basic HTML markup.
<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);">
</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">
</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’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">
</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>
All required CSS is in about-us.css
This tutorial contains the following third party resources.
<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>