CodePen

HTML

            
              <!doctype html>
<html>


<head>
	<title>Benefits Overview</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="jkstyle.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Crimson+Text:600' rel='stylesheet' type='text/css'>	
</head>	
<body>



<section class="box-container">
  
      <header>We built the company that we’d want to do business with. We hope you do too.</header>
  
      <div class="column">
        <div class="belief top">
          <h3 style="padding-left: 5px; width: 25px;">1</h3>
          <h4>Useful is forever</h4>
          <p>Bells and whistles wear off, but usefulness never does. We build useful software that does just what you need and nothing you don’t.</p>
        </div>
   
        <div class="belief">
          <h3>2</h3>
          <h4>Great service is everything</h4>
          <p>We’re famous for fast and friendly customer service. We work hard to make sure we live up to that reputation every day. See how our customers rate our service.</p>
        </div>
   
        <div class="belief">
          <h3>3</h3>
          <h4>Clarity is king</h4>
          <p>Buzzwords, lingo, and sensationalized sales-and-marketing-speak have no place at 37signals. We communicate clearly and honestly.</p>
        </div>
   
        <div class="belief bottom">
          <h3>4</h3>
          <h4>Our customers are our investors</h4>
          <p>Our customers fund our daily operations by paying for our products. We answer to them — not investors, the stock market, or a board of directors.</p>
        </div>
      </div>
     
      <div class="column end">
        <div class="belief top">
          <h3>5</h3>
          <h4>The basics are beautiful</h4>
          <p>We’ll never overlook what really matters: The basics. Great service, ease of use, honest pricing, and respect for our customer’s time, money, and trust.</p>
        </div>
   
        <div class="belief">
          <h3>6</h3>
          <h4>No hidden fees or secret prices</h4>
          <p>We believe everyone is entitled to the best price we can offer. Our prices are public, published right on our site, and the same no matter who you are.</p>
        </div>
   
        <div class="belief">
          <h3>7</h3>
          <h4>Software should be easy</h4>
          <p>Our products are intuitive. You’ll pick them up in seconds or minutes, not hours, days or weeks. We don’t sell you training because you don’t need it.</p>
        </div>
   
        <div class="belief bottom">
          <h3>8</h3>
          <h4>Long-term contracts are obscene</h4>
          <p>No one likes being locked into something they don’t want anymore. Our customers can cancel at any time, no questions asked. No setup/termination fees either.</p>
        </div>
      </div>
     
    </section>




</body>
            
          
!
via HTML Inspector

CSS

            
              /* General font assignment for all headers */

h1, h2, h3, h4, h5, header { 
  font-family:"Crimson Text", "Lucida Sans Unicode","Times New Roman", serif; 
} /* <--- THIS IS IRNORED ???? */


header {
  color:#232323;
  font-size:48px;
  font-style:normal;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.1em;
  margin:30px 0;
  text-align:center;
  font-size:42px;
}



/*The Container Div for All Content...would want to nest this inside something else with CENTER*/

section.box-container {
  padding-left: 15px;
  overflow: hidden;
  margin-bottom: 40px;
  margin-top: 10px;
  width:840px;
}

section.box-container h2 {
width:800px;
}




/*Formatting for columns of the box */

div.column {
  float:left;
  margin-right:40px;
  width:380px;
}

a.box.end, body.index div.column.end {
  margin-right:0;
}


div.column div.belief {
  text-align: left;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  line-height: 1.4em;
  font-size: 12px;
  overflow: hidden;
  margin: 20px 0;
}

div.column div.belief.top { margin-top: 0; }
div.column div.belief.bottom { margin-bottom: 0; }

div.column div.belief h3 { float: left; font-size: 58px; font-weight: 500; line-height: normal; margin: -10px 15px 0 0; color: #ccc; width: 30px; }

div.column div.belief h4 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 16px;
  margin: 5px 0;
  color: #cc0000;
}

div.column div.belief p {
  margin: 0 0 0 45px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}




            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................