Example CSS Box Panel

Example CSS Box Panel

by Adi Jaya

HTML

<div class="container">


  <h1>Example CSS Box Panel</h1>
  
  <div class="panel bg-green text-white">
    <h2>Heading</h2>
      <p>
      London is the most populous city in the United Kingdom,
      with a metropolitan area of over 9 million inhabitants.
      </p>
  </div>
  
  <div class="panel bg-red text-white">
    <h3>Heading</h3>
      <p>
      London is the most populous city in the United Kingdom,
      with a metropolitan area of over 9 million inhabitants.
      </p>
  </div>
  
  <div class="panel bg-blue text-white">
      <p>
      London is the most populous city in the United Kingdom,
      with a metropolitan area of over 9 million inhabitants.
      </p>
  </div>
 
 
  <div class="panel bg-green text-white round-small">
    <h2>Rounded (Small)</h2>
      <p>
      London is the most populous city in the United Kingdom,
      with a metropolitan area of over 9 million inhabitants.
      </p>
  </div>
  
  <div class="panel bg-red text-white round-large">
    <h3>Rounded (Large)</h3>
      <p>
      London is the most populous city in the United Kingdom,
      with a metropolitan area of over 9 million inhabitants.
      </p>
  </div>
  
  <div class="panel bg-blue text-white round-x-large text-center">
      <p>Rounded (X-Large)</p>
  </div> 
  <div class="panel bg-green text-white round-xx-large text-center">
      <p>Rounded (XX-Large)</p>
  </div>  
  
</div><!-- /.container/ -->

CSS

html, body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: #fFF;
    margin:0;
}
h1,h2,h3,h4,h5,h6 {
  margin-top:0;
  margin-bottom:13px;
  line-height:1;
  font-weight:400;
}
.container {
  padding-left:15px;
  padding-right:15px;
}

.panel {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
}

/* Text Align */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}

/* color */
.bg-green {background-color: #007505;}
.bg-red {background-color: #cc0d4b;}
.bg-blue {background-color: #0040b5;}
.text-green {color: #007505;}
.text-red {color: #cc0d4b;}
.text-blue {color: #0040b5;}
.text-white {color: #fff;}

/* Rounded */
.round-small {
  border-radius:4px;
}
.round-large {
    border-radius: 16px;
}
.round-x-large {
    border-radius: 100px;
}
.round-xx-large {
    border-radius: 100px;
}
.round-xx-large {
    border-radius: 100%;
}