cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <!doctype html>

	<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='https://fonts.googleapis.com/css?family=Crimson+Text:600' rel='stylesheet' type='text/css'>	

<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 class="belief">
          <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 class="belief">
          <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 class="belief bottom">
          <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 class="column end">
        <div class="belief top">
          <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 class="belief">
          <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 class="belief">
          <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 class="belief bottom">
          <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>

              /* 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 {
  margin:30px 0;

/*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;

section.box-container h2 {

/*Formatting for columns of the box */

div.column {

a.box.end, body.index div.column.end {

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;

Loading ..................