Loading

About Us Section

Pair with the Responsive Testimonials Grid!

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>About Us Section</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:300,600|Roboto:700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="about-us">

	<article>

		<h2>Strength in numbers</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta id dolorem cupiditate eos cumque earum esse ipsa sunt impedit aperiam, dolor velit sit officia quaerat autem magni, sint voluptatum aut.</p>

	</article>

	<aside>

		<ul>
			<li>
				<h3>
					<span>27+</span>
					<span>Years of Service</span>
				</h3>
			</li>
			<li>
				<h3>
					<span>500+</span>
					<span>Projects Implemented</span>
				</h3>
			</li>
			<li>
				<h3>
					<span>1M+</span>
					<span>Costumers Served</span>
				</h3>
			</li>
		</ul>

	</aside>

</div>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

.about-us {
  margin: 4em auto;
  width: 1100px;
  max-width: 90%;
}
.about-us::after {
  clear: both;
  content: "";
  display: table;
}
@media only screen and (min-width: 1000px) {
  .about-us article, .about-us aside {
    float: left;
    width: 47.5%;
  }
}
@media only screen and (min-width: 1000px) {
  .about-us article {
    margin-right: 5%;
  }
}
.about-us article h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 300;
  color: #308fc3;
}
.about-us article p {
  margin-bottom: 2em;
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  color: #676767;
}
.about-us aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-us aside ul::after {
  clear: both;
  content: "";
  display: table;
}
.about-us aside ul li {
  display: table;
  width: 100%;
  height: 170px;
}
@media only screen and (min-width: 1000px) {
  .about-us aside ul li {
    float: left;
    width: 33.33333%;
  }
}
.about-us aside ul li:first-child {
  background-color: #afce44;
}
.about-us aside ul li:nth-child(2) {
  background-color: #35b8e4;
}
.about-us aside ul li:nth-child(3) {
  background-color: #308fc3;
}
.about-us aside ul li h3 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.about-us aside ul li h3 span {
  display: block;
  color: #fff;
}
.about-us aside ul li h3 span:first-child {
  font-family: 'Roboto', sans-serif;
  font-size: 60px;
  font-weight: 700;
}
.about-us aside ul li h3 span:nth-child(2) {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Kevin Lesht, you can se more from this user in the personal repository