Simplex-UI

Navigation:

Free HTML Starter Kit

If you want to start your site with a starter kit, this is the right place. I propose you a kit to be able to start in the web world. This kit does not pretend to be turnkey, you will subsequently create a site to your image. The use of the kit has been made as easy as possible.

About Version

Actual:

Current version is 1.1

Alpha Version

She was released on June 2014.
Aborted, go to beta version.

Beta Version

She was released on July 2014.
Many bugs corrected, add lot of things.

How to use Simplex-UI

If you don't want to search code to made something, here you can get it.

Made with prism.js

This page is provide by Prism.js, it is an extensible syntax highlighter, built with modern web standards.

See top-page. You can change color using menu on left. Possibility to have fixed-top navbar, just add top-nav to <div class="page"> like <div class="page top-nav">, with this way Navbar will be fixed on top when you scroll down, you can activate "sticky-header" with left demo menu.
HTML code:
<div class="page *top-nav"> <!-- remove * before top-bar to enable fixed navbar on top -->
    <div class="header-container">
    <header class="wrapper clearfix">
        <div class="brand">
                <img src="img/brand.png"><h1>Simplex-UI</h1>
         </div>
        <nav>
            <ul>
                <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="/demo"><i class="fa fa-paw"></i> Demo</a></li>
                <li><a><i class="fa fa-plus"></i> Tools</a>
                    <ul><!-- DropDown -->
                        <li><a href="/download"><i class="fa fa-slark"></i> Download</a></li>
                        <li><a href="/use"><i class="fa fa-slark"></i> How to use</a></li>
                        <li><a target="_blank" href="https://github.com/Chikoumi/Simplex-UI"><i class="fa fa-slark"></i> Github</a></li>
                    </ul><!-- End DropDown -->
                </li>
            </ul>
        </nav>
    </header>
</div>

Buttons :

Small format
Small Small Small Small Small
HTML code:
<a class="button button-default button-small">Small</a>
<a class="button button-green button-small">Small</a>
<a class="button button-yellow button-small">Small</a>
<a class="button button-blue button-small">Small</a>
<a class="button button-red button-small">Small</a>
Default format
Default Default Default Default Default
HTML code:
<a class="button button-default">Default</a>
<a class="button button-green">Default</a>
<a class="button button-yellow">Default</a>
<a class="button button-blue">Default</a>
<a class="button button-red">Default</a>
Big format
Big one Big one Big one Big one Big one
HTML code:
<a class="button button-default button-big">Big one</a>
<a class="button button-green button-big">Big one</a>
<a class="button button-yellow button-big">Big one</a>
<a class="button button-blue button-big">Big one</a>
<a class="button button-red button-big">Big one</a>
Specials buttons
button-dsbl button-ico
Block button
HTML code:
<a class="button button-default button-big button-dsbl" disabled>button-dsbl</a>
<a class="button button-default button-blue button-big button-ico">button-ico <i class="fa fa-cogs"></i></a><br>
<a class="button button-blue button-big button-block">Block button</a>
Buttons-group
Button Button Button Button

HTML code:
<div class="button-group">
    <a class="button button-green">Button</a>
    <a class="button button-blue">Button</a>
    <a class="button button-red">Button</a>
    <a class="button button-green">Button</a>
</div>

Labels

Lorem Lorem Lorem Lorem Lorem
HTML code:
<span class="lbl default">Lorem</span> 
<span class="lbl green">Lorem</span>
<span class="lbl blue">Lorem</span>
<span class="lbl yellow">Lorem</span>
<span class="lbl red">Lorem</span>

Code :

Lorem ipsum dolor cd /home sed do eiusmod tempor incididunt, wget "https://github.com/Chikoumi/Ioncube-Autoinstall/archive/master.zip" && unzip master.zip" && cd Ioncube-Autoinstall && chmod +x fr_ioncube.sh && ./fr_ioncube.sh consectetur adipiscing elit.
HTML code:
Lorem ipsum dolor <code>cd /home</code> sed do eiusmod tempor incididunt,
<code>wget "https://github.com/Chikoumi/Ioncube-Autoinstall/archive/master.zip" && unzip master.zip" && cd Ioncube-Autoinstall && chmod +x fr_ioncube.sh && ./fr_ioncube.sh</code> consectetur adipiscing elit.

Bash console

Bash console

root@chk:/# ls
bin dev home lib64 media opt reboot run selinux sys usr
boot etc lib lost+found mnt proc root sbin srv tmp var
root@chk:/# uptime
03:40:48 up 11 days, 4:44, 0 users, load average: 0.00, 0.00, 0.00
root@chk:/# service teamspeak start
root@chk:/# TeamSpeak 3 server started, for details please view the log file
root@chk:/#
HTML code:
<div class="console">
  <div class="console-head">
  <h3>Bash console</h3>
  </div>
  <div class="console-body">
    root@chk:/# ls <br>
    bin   dev  home  lib64       media  opt   reboot  run   selinux  sys  usr <br>
    boot  etc  lib   lost+found  mnt    proc  root    sbin  srv  tmp  var <br>
    root@chk:/# uptime <br>
      03:40:48 up 11 days,  4:44,  0 users,  load average: 0.00, 0.00, 0.00 <br>
    root@chk:/# service teamspeak start <br>
    root@chk:/# TeamSpeak 3 server started, for details please view the log file<br>
    root@chk:/#
  </div>
</div>

Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
HTML code:
<div class="message msg-default">
    Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
</div>
<div class="message msg-green">
    Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
</div>
<div class="message msg-blue">
    Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
</div>
<div class="message msg-yellow">
    Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
</div>
<div class="message msg-red">
    Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
</div>

Card message

Exceptur sint occaecat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Exceptur sint occaecat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Exceptur sint occaecat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Exceptur sint occaecat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Exceptur sint occaecat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
HTML code:
<div class="card card-default">
    <div class="card-head">
        <h3>Exceptur sint occaecat</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</div>
    <div class="card card-green">
    <div class="card-head">
        <h3>Exceptur sint occaecat</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</div>
    <div class="card card-blue">
    <div class="card-head">
        <h3>Exceptur sint occaecat</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</div>
    <div class="card card-yellow">
    <div class="card-head">
        <h3>Exceptur sint occaecat</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</div>
    <div class="card card-red">
    <div class="card-head">
        <h3>Exceptur sint occaecat</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</div>

Progress Bar

One line progress bar
HTML code:
<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="bar bar-green" style="width: 20%;"></div>
</div>
<div class="progress">
  <div class="bar bar-blue" style="width: 80%;"></div>
</div>
<div class="progress">
  <div class="bar bar-yellow" style="width: 65%;"></div>
</div>
<div class="progress">
  <div class="bar bar-red" style="width: 90%;"></div>
</div>

Highlight paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

HTML code:
<p class="hl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="hl-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="hl-blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="hl-yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="hl-red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Blockquote

Delenda cartago est,
Il faut détruire Carthage. Caton
Delenda cartago est,
Il faut détruire Carthage. Caton
HTML code:
<blockquote class="quote-left">
    Delenda cartago est, <br>
    Il faut détruire Carthage.
    <span class="copy">Caton </span>
</blockquote>

<blockquote class="quote-right">
    Delenda cartago est, <br>
    Il faut détruire Carthage.
    <span class="copy">Caton </span>
</blockquote>

Hint on hover

Hover-me Hint message

Hover-me Hint Tips

HTML code:
<a class="button button-default tips">Hover-me <span class="tips-hint">Hint message</span></a> 
<p class="tips">Hover-me <span class="tips-hint">Hint Tips</span></p>

Tables

Blue
ID First Name Last Name Email
#1121 Bob Sponge spongebob@mail.com-
#7120 Jacob Matador j-mat@mail.eu
#9981 Ben Scott b.scott@mail.uk
Red
ID First Name Last Name Email
#1121 Bob Sponge spongebob@mail.com-
#7120 Jacob Matador j-mat@mail.eu
#9981 Ben Scott b.scott@mail.uk
Green
ID First Name Last Name Email
#1121 Bob Sponge spongebob@mail.com-
#7120 Jacob Matador j-mat@mail.eu
#9981 Ben Scott b.scott@mail.uk
Yellow
ID First Name Last Name Email
#1121 Bob Sponge spongebob@mail.com-
#7120 Jacob Matador j-mat@mail.eu
#9981 Ben Scott b.scott@mail.uk
Default
ID First Name Last Name Email
#1121 Bob Sponge spongebob@mail.com-
#7120 Jacob Matador j-mat@mail.eu
#9981 Ben Scott b.scott@mail.uk
HTML code:
<h5>Blue</h5>
<table class="blue">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1121</td>
      <td>Bob</td>
      <td>Sponge</td>
      <td>spongebob@mail.com-</td>
    </tr>
    <tr>
      <td>#7120</td>
      <td>Jacob</td>
      <td>Matador</td>
      <td>j-mat@mail.eu</td>
    </tr>
    <tr>
      <td>#9981</td>
      <td>Ben</td>
      <td>Scott</td>
      <td>b.scott@mail.uk</td>
    </tr>
  </tbody>
</table>

<h5>Red</h5>
<table class="red">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1121</td>
      <td>Bob</td>
      <td>Sponge</td>
      <td>spongebob@mail.com-</td>
    </tr>
    <tr>
      <td>#7120</td>
      <td>Jacob</td>
      <td>Matador</td>
      <td>j-mat@mail.eu</td>
    </tr>
    <tr>
      <td>#9981</td>
      <td>Ben</td>
      <td>Scott</td>
      <td>b.scott@mail.uk</td>
    </tr>
  </tbody>
</table>

<h5>Green</h5>
<table class="green">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1121</td>
      <td>Bob</td>
      <td>Sponge</td>
      <td>spongebob@mail.com-</td>
    </tr>
    <tr>
      <td>#7120</td>
      <td>Jacob</td>
      <td>Matador</td>
      <td>j-mat@mail.eu</td>
    </tr>
    <tr>
      <td>#9981</td>
      <td>Ben</td>
      <td>Scott</td>
      <td>b.scott@mail.uk</td>
    </tr>
  </tbody>
</table>

<h5>Yellow</h5>
 <table class="yellow">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1121</td>
      <td>Bob</td>
      <td>Sponge</td>
      <td>spongebob@mail.com-</td>
    </tr>
    <tr>
      <td>#7120</td>
      <td>Jacob</td>
      <td>Matador</td>
      <td>j-mat@mail.eu</td>
    </tr>
    <tr>
      <td>#9981</td>
      <td>Ben</td>
      <td>Scott</td>
      <td>b.scott@mail.uk</td>
    </tr>
  </tbody>
</table>

<h5>Default</h5>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1121</td>
      <td>Bob</td>
      <td>Sponge</td>
      <td>spongebob@mail.com-</td>
    </tr>
    <tr>
      <td>#7120</td>
      <td>Jacob</td>
      <td>Matador</td>
      <td>j-mat@mail.eu</td>
    </tr>
    <tr>
      <td>#9981</td>
      <td>Ben</td>
      <td>Scott</td>
      <td>b.scott@mail.uk</td>
    </tr>
  </tbody>
</table>

Scrabble

Lorem
HTML code:
<span class="scrabble">Lorem</span>
<!-- JS automatically transform letters-->

Pop-up

Clic me Clic me Clic me Clic me Clic me
HTML code:
 <a href="" data-width="500" data-rel="popup1" class="pop-me button button-big button-default">Clic me</a>
<div id="popup1" class="popup default">
     <div class="header"><h2>Default one Pop-up</h2></div>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     </p>
     <div class="btn">
         <a class="button button-green">I agree</a>
         <a class="button button-red" id="cancel">I disagree</a> <!-- Just add #cancel to button if it should close pop-up -->
     </div>
 </div>

 <a href="" data-width="500" data-rel="popup2" class="pop-me button button-big button-green">Clic me</a>
<div id="popup2" class="popup green">
     <div class ="header"><h2>Green one Pop-up</h2></div>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     </p>
     <div class="btn">
         <a class="button button-green">I agree</a>
         <a class="button button-red" id="cancel">I disagree</a> <!-- Just add #cancel to button if it should close pop-up -->
     </div>
 </div>

 <a href="" data-width="500" data-rel="popup3" class="pop-me button button-big button-blue">Clic me</a>
<div id="popup3" class="popup blue">
     <div class ="header"><h2>Blue one Pop-up</h2></div>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     </p>
     <div class="btn">
         <a class="button button-green">I agree</a>
         <a class="button button-red" id="cancel">I disagree</a> <!-- Just add #cancel to button if it should close pop-up -->
     </div>
 </div>

 <a href="" data-width="500" data-rel="popup4" class="pop-me button button-big button-yellow">Clic me</a>
<div id="popup4" class="popup yellow">
     <div class ="header"><h2>Yellow one Pop-up</h2></div>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     </p>
     <div class="btn">
         <a class="button button-green">I agree</a>
         <a class="button button-red" id="cancel">I disagree</a> <!-- Just add #cancel to button if it should close pop-up -->
     </div>
 </div>

 <a href="" data-width="500" data-rel="popup5" class="pop-me button button-big button-red">Clic me</a>
<div id="popup5" class="popup red">
     <div class ="header"><h2>Red one Pop-up</h2></div>
           <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     </p>
     <div class="btn">
         <a class="button button-green">I agree</a>
         <a class="button button-red" id="cancel">I disagree</a> <!-- Just add #cancel to button if it should close pop-up -->
     </div>
 </div>

Price-List

$100
Article
  • Nice features
  • Nice features
  • Nice features
J'achète
$150
Best Offer
  • Nice features
  • Nice features
  • Nice features
J'achète
$9000
Another article
  • Nice features
  • Nice features
  • Nice features
J'achète
$100
Article
  • Nice features
  • Nice features
  • Nice features
J'achète
$150
Another Article
  • Nice features
  • Nice features
  • Nice features
J'achète
$9000
Best Offer
  • Nice features
  • Nice features
  • Nice features
J'achète
HTML code:
<div class="plist-container">
 <div class="plist red">
   <div class="price">$100</div>
     <div class="type">Article</div>
   <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
   </ul>
   <a  class="button">J'achète</a>
 </div>
                          
 <div class="plist better yellow">
   <div class="price">$150</div>
     <div class="type">Best Offer</div>
     <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     </ul>
     <a  class="button">J'achète</a>
 </div>

 <div class="plist blue">
   <div class="price">$9000</div>
    <div class="type">Another article</div>
     <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     </ul>
     <a  class="button">J'achète</a>
 </div>
</div>
 
 
<div class="plist-container">
 <div class="plist green">
   <div class="price">$100</div>
     <div class="type">Article</div>
   <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
   </ul>
   <a  class="button">J'achète</a>
 </div>
                          
 <div class="plist red">
   <div class="price">$150</div>
     <div class="type">Another Article</div>
     <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     </ul>
     <a  class="button">J'achète</a>
 </div>

 <div class="plist better">
   <div class="price">$9000</div>
    <div class="type">Best Offer</div>
     <ul class="options">
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     <li><strong>Nice</strong> features</li>
     </ul>
     <a  class="button">J'achète</a>
 </div>
</div>

Status icon

  • Server status:
  • Server status:
HTML code:
<ul>
  <li>Server status: <div class="status"></div></li>
  <li>Server status: <div class="status off"></div></li>
</ul>
<!-- <ul> and <li> are optional just add the class Status && off -->

Grid-System

3 Collums

Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.

HTML code:
<div class="grid">
    <h3>3 Collums</h3>
    <div class="col_1">
        <h5>Col_1</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div>
    <div class="col_1">
        <h5>Col_1</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div>
    <div class="col_1">
        <h5>Col_1</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div> 
</div>

2 Collums

Col_2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.
HTML code:
<div class="grid">
    <h3>2 Collums</h3>

    <div class="col_2">
        <h5>Col_2</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
     </div>
    <div class="col_1">
        <h5>Col_1</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.
     </div>
</div>

3 Collums with img

Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
Col_1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.

HTML code:
<div class="grid index">
    <h3>3 Collums</h3>
    <div class="col_1">
        <h5>Col_1</h5>
        <img src="img/many.png"></img>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div>
    <div class="col_1">
        <h5>Col_1</h5>
        <img src="img/many.png"></img>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div>
    <div class="col_1">
        <h5>Col_1</h5>
        <img src="img/many.png"></img>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero.
    </div> 
</div>
© 2014 | Company name