<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--made by Larbi JIRARI <jirari.larbi@gmail.com> -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="body">
<div id="navigation">
<ul>
<li>Home</li>
<li>FIND A SITE</li>
<li>INDUSTRY RESOURCES</li>
<li>JOIN THE DIRECTORY</li>
<li>CONTACT</li>
</ul>
</div>
<div id="hero"><img src="http://via.placeholder.com/769x150"/></div>
<div id="content">
<div id="content-title">
<h1>Create a Site Listing</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<div id="content-navigation">
<ul>
<li>Information</li>
<li>Contact Info</li>
<li>Personnal</li>
<li>Patient</li>
<li>Payment</li>
<li>Equipment</li>
<li class="active">Listing type</li>
</ul>
</div>
<div id="content-body">
<div id="content-body-title">
<h2>Listing Type</h2>
<p>See your listing type from the options below.</p>
</div>
<div id="content-body-listing">
<div class="listing-item">
<div class="listing-item-img">
<img src="http://via.placeholder.com/250x250">
</div>
<div class="listing-item-content">
<h3 class="listing-item-title">Featured Listing</h3>
<p class="listing-item-price">$24.95 /mo</p>
<p class="listing-item-text">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop (injected humour and the like).
</p>
</div>
<div class="listing-item-buttons-group">
<button class="listing-item-button primary">Choose Monthly <br>$24.95 / month</button>
<button class="listing-item-button secondary">Choose Annual <br>$299 / year</button>
</div>
</div>
</div>
<div id="content-body-listing">
<div class="listing-item">
<div class="listing-item-img">
<img src="http://via.placeholder.com/250x250">
</div>
<div class="listing-item-content">
<h3 class="listing-item-title">Featured Listing</h3>
<p class="listing-item-price">$24.95 /mo</p>
<p class="listing-item-text">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop (injected humour and the like).
</p>
</div>
<div class="listing-item-buttons-group">
<button class="listing-item-button primary">Choose Monthly <br>$24.95 / month</button>
<button class="listing-item-button secondary">Choose Annual <br>$299 / year</button>
</div>
</div>
</div>
</div>
</div>
<link type="text/css" rel="stylesheet" href="index.css">
</body>
</div>
</html>
