"Professional landing page (native css)"
Bootstrap 3.0.0 Snippet by laroox

<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>
/*made by Larbi JIRARI <jirari.larbi@gmail.com>*/ ul{ padding: 0; list-style-type: none; } #body{ max-width: 769px; font-family: Sans-serif; vertical-align: inherit; margin-left: auto; margin-right: auto; } #navigation >ul { float: right; margin-left: 15%; font-weight: 600; } #navigation li { display: inline-block; margin: 10px; width:15%; text-align: center; } #navigation li:hover { cursor: pointer; text-decoration:underline; } #content-navigation >ul { width: 100%; font-size: 1.1em; display: table; } #content-navigation li { display: table-cell; padding: 5px; /* width:15%; */ text-align: center; } #content-navigation{ background-color: #D7D7D7; } #content-navigation li:hover{ cursor: pointer; background-color: #EBEBEB; font-weight: 600; } #content-navigation li.active{ background-color: #EBEBEB; } .listing-item{ position: relative; width: 100%; margin-bottom: 50px; } .listing-item-img{ display: inline-block; width: 33%; vertical-align: top; } .listing-item-content{ display: inline-block; width: 42%; vertical-align: top; } .listing-item-title{ margin-top:0px; } .listing-item-price{ color: #8DA2F7; font-weight: 600; } .listing-item-buttons-group{ display: inline-block; width: 23%; vertical-align: top; text-align: center; } .listing-item-button{ border: none; background-color: transparent; font-size: 1.05em; width: 100%; margin-bottom: 25px; } .listing-item-button.primary{ background-color: #5177F6; color: #ffffff; } .listing-item-button.secondary{ background-color: #54AAFF; color: #ffffff; }

Related: See More


Questions / Comments: