<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 ----------> <nav class="nav navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">RBS</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li id="whatLink"><a href="#whatIsResponsiveDesign">What is Responsive?</a></li> <li id="workLink"><a href="#portfolioSection">Our Work</a></li> <li id="pricingLink"><a href="#pricing">Pricing</a></li> <li id="servicesLink"><a href="#services">Other Services</a></li> <li id="contactLink"><a href="#contact">Get in Touch</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12"><h1>Responsive business websites <br>starting at $99</h1> <h3>Get your business involved in the mobile revolution today.</h3> <p><a class="btn btn-primary btn-lg" role="button" href="#whatIsResponsiveDesign">What is Responsive Design?</a> <a class="btn btn-success btn-lg" role="button" href="#contact">Get in Touch</a></p> </div> <div class="col-lg-3 col-md-4 hidden-sm hidden-xs"> <img src="http://i59.tinypic.com/2n65fyd.jpg" style="height: 100%;"> </div> </div> </div> <div class="container" id="featurelist"> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-phone"></span> Beautiful on any device.</h4> <p>Responsive websites adapt themselves to the screen they are being viewed on, meaning no "mobile site" is necessary, saving you the time and money of having to create a dedicated mobile-facing site.</p> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-thumbs-up"></span> No experience? No problem.</h4> <p>We build our websites on some of the easiest-to-use content management systems available on the net today, so you'll never have to type a line of code. Plus, we're on call for you, free of charge, if you need us.</p> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-ok"></span> Future-proofing comes standard.</h4> <p>If a new technology in web development is created that can help to better serve your businesses, we'll notify you and implement it free of charge for as long as your site maintains our design.</p> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-usd"></span> A Better Bottom Line</h4> <p>Better mobile presentation means better user experiences and more conversions. Without it, you're making it difficult for as many as 30% of your customers to find what they need.</p> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-wrench"></span> Don't worry! We'll deal with it.</h4> <p>Sorting things out with your domain or hosting provider is never fun, especially if you don't know the terminology. We'll make all the calls for you and keep you updated every step of the way.</p> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-block"> <h4><span class="glyphicon glyphicon-time"></span> Same-day Updates</h4> <p>Time is money and every minute that goes by without a key piece of information on your site is lost business. We can take charge of your site's updating for a nominal monthly fee with lightning-fast turnaround.</p> </div> </div> <div class="container well"> <h5 align="center">Want to keep up with how the web can help your business, but don't have the time? <strong>Join our mailing list » </strong> <input type="text" class="form-control" placeholder="Email" style="width: 200px; display: inline-block;"> <button type="button" class="btn btn-info">Sign Up</button></h5> </div> <div class="container" id="whatIsResponsiveDesign"> <h2 align="center">What is Responsive Design?</h2> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <h3>Adaptive</h3> <p>Responsive design detects the size of the screen of the user and morphs the page content to maintain optimal presentation on any device. All the code needed is embedded right in the code of your existing site, removing the need to spend time and money to develop a separate mobile site.</p> <h3>Advantage</h3> <p>Take a look at your competitors' websites on your mobile phone or tablet. Chances are they haven't implemented responsive design. Beat your competitors to the punch and give your customers exceptional mobile service that will drive business to your door.</p> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align: center;"> <img src="http://ww1.prweb.com/prfiles/2013/10/20/11249791/Distimo-App-iPhone-5-mock-up.jpg" style="width: 70%;"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <h3>No Zoom Required</h3> <p>For most sites on the web, mobile users need to pinch and separate their fingers on their screens in order to zoom in on a webpage they're viewing. Responsive design makes everything readable and all clickable objects to be finger-friendly.</p> <h3>Streamlined Content</h3> <p>Because of its versatility, responsive design can be used to highlight important information for mobile users that may not be as pertinent for users visiting on their laptops or desktops. Expandable content sections can also be used to make large amount of information manageable.</p> </div> </div> <div class="container" id="portfolioSection"> <h2 align="center">Our Responsive Design Portfolio</h2> </div> <div class="container"> <div id="portfolio"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site A</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site B</div> <div class="panel-body"> Lorem ipsum dolor sit amet. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site C</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site D</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site E</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site F</div> <div class="panel-body"> Lorem ipsum dolor sit amet. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site G</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="panel panel-default"> <div class="panel-heading">Site H</div> <div class="panel-body"> Lorem ipsum dolor sit amet. Consectitur adipiscing elit. Lorem ipsum dolor sit amet. Consectitur adipiscing elit. </div> </div> </div> </div> </div> <div class="container" id="pricing"> <h2 align="center">Responsive Website Design Pricing</h2> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-info"> <div class="panel-heading">Basic</div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Up to 5 Pages Responsive Web Design</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Content Management System</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Future-proof Guarantee</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Domain & Hosting Support</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Template-Based Website Design</span></li> <li class="list-group-item"> </li> </ul> <div class="panel-footer" align="center"><h3>$99</h3> <p><strong>Optional Monthly Maintenance Fee:</strong> $19.99/mo</p></div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-primary"> <div class="panel-heading">Deluxe - <strong>Best Value!</strong></div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 5-8 Pages Responsive Web Design</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Content Management System</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Future-proof Guarantee</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Domain & Hosting Support</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Custom Website Design</span></li> <li class="list-group-item"> </li> </ul> <div class="panel-footer" align="center"><h3>$499</h3><p><strong>Optional Monthly Maintenance Fee:</strong> $29.99/mo</p></div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-success"> <div class="panel-heading">Premium</div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 8+ Pages Responsive Web Design</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Content Management System</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Future-proof Guarantee</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Domain & Hosting Support</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Custom Website Design</span></li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Free Search Engine Optimization</span></li> </ul> <div class="panel-footer" align="center"><h3>$799</h3><p><strong>Optional Monthly Maintenance Fee:</strong> $39.99/mo</p></div> </div> </div> </div> <div class="container" id="services"> <h2 align="center">Other Services</h2> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Social Media Management</h3> <p>We provide complete Social Media solutions for businesses of all sizes. We specialize in Social Media profile design, strategy, account management, viral marketing, and content creation on the Facebook, Twitter, LinkedIn, Google+, Instagram, Pinterest, and Youtube platforms.</p> <p>Our social media management has experienced great success with quite a few clients, with one client in particular reaching over <strong>one million</strong> users on Facebook with a single post. Our focus on organic, true follower growth, combined with our niche market knowledge across a variety of industries, makes us exceptionally suited to tackle Social Media projects of all kinds.</p> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Search Engine Optimization</h3> <p>Search Engines are still the primary way users find information, products, and services relevant to them. It is crucial to have a seasoned expert at the helm of your website's search engine marketing to ensure your company is getting the visibility it deserves.</p> <p>We'll assess your company, your competition, and keyword competition on the search engines themselves, set realistic goals and expectations, and then enact a solid plan to get your website ranking where it should. We've seen too many clients come to us who have been blacklisted from various search engines for illegal SEO practices performed by former SEO providers, so any plan we set in place will fully comply with all best practices to avoid the same fate.</p> </div> </div> <div class="container" id="contact"> <h2 align="center">Get In Touch</h2> <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12"> <form> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <input type="text" class="form-control" placeholder="Name"><br><input type="text" class="form-control" placeholder="Phone"><br> <div class="panel panel-default"> <div class="panel-heading">Plan</div> <ul class="list-group"> <li class="list-group-item"><input type="radio"> Basic</li> <li class="list-group-item"><input type="radio"> Deluxe</li> <li class="list-group-item"><input type="radio"> Premium</li> <li class="list-group-item"><input type="radio"> Other</li> </ul> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <input type="text" class="form-control" placeholder="Email"> <br><input type="text" class="form-control" placeholder="Company"><br> <div class="panel panel-default"> <div class="panel-heading">Other Services(If Applicable):</div> <ul class="list-group"> <li class="list-group-item"><input type="checkbox"> Social Media Management</li> <li class="list-group-item"><input type="checkbox"> Search Engine Optimization</li> </ul> </div> <br><input type="text" class="form-control" placeholder="How did you hear about us?"> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <label>Notes/Comments:</label> <textarea class="form-control" rows="6"></textarea><br> <input type="submit" class="btn btn-primary dropdown-toggle" value="Send"><br><br> </div> </form> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <p>There's no day better than today to make your business mobile-friendly. Let us set you up with a solution today that improves your customer service, boosts your bottom line, saves you time, and maximizes the way your business utilizes the internet.</p> <p>To contact us directly:</p> <p><strong>Responsive Business Sites<br> 121 Littleton Road #19<br> Ayer, MA 01432<br></strong></p> <p><span class="glyphicon glyphicon-earphone"></span> <a href="tel: 7742491819">+1 (774) 249-1819</a></p> <p><span class="glyphicon glyphicon-envelope"></span> <a href="mailto: info@responsivebusinesssites.com">info@responsivebusinesssites.com</a></p> </div> </div> <div class="container" style="margin-bottom: 100px;"> © 2014 ResponsiveBusinessSites.com. All Rights Reserved. </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="https://masonry.desandro.com/masonry.pkgd.min.js"></script> <script> var container = document.querySelector('#portfolio'); var msnry = new Masonry( container, { // options itemSelector: '.portfolio-item' }); </script>

body { padding-top: 50px; } body, p { font-family: 'Linear', sans-serif; font-weight: 100; font-size: 16px; color: #555; } .navbar-brand { font-size: 32px; letter-spacing: 5px; font-family: 'Linear', sans-serif; } .nav, .navbar-default { background: #2a679c; } .nav a, .navbar-default a { color: white !important; } .btn { font-size: 20px; } h3 { font-family: 'Earthbound', sans-serif; color: #000; } .jumbotron { background: #2a679c; margin: 0; padding-top: 60px; padding-bottom: 0; } .jumbotron h1 { color: white !important; font-family: 'Linear', sans-serif; } .jumbotron h3 { color: white; } .active a { background: #255b8a !important; } h2 { color: #2a679c; font-family: 'Linear', sans-serif; font-size: 42px; border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 40px; } h4 { font-family: 'Linear', sans-serif; font-size: 20px; color: #000; } .feature-block { padding-top: 20px; padding-bottom: 20px; } #featurelist { margin-bottom: 30px; } h5 { font-size: 18px; } .panel-heading { font-size: 21px; } .panel-footer h3 { font-size: 36px; }

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 50 }, 1000); return false; } } }); }); $(window).scroll(function() { var scrollPos = $(window).scrollTop(), whatPos = $('#whatIsResponsiveDesign').offset().top - 50, workPos = $('#portfolioSection').offset().top - 50, pricingPos = $('#pricing').offset().top - 50, contactPos = $('#contact').offset().top - 50; servicesPos = $('#services').offset().top - 50; if (scrollPos >= whatPos && scrollPos < workPos) { $('#whatLink').addClass('active'); } else { $('#whatLink').removeClass('active'); } if (scrollPos >= workPos && scrollPos < pricingPos) { $('#workLink').addClass('active'); } else { $('#workLink').removeClass('active'); } if (scrollPos >= pricingPos && scrollPos < servicesPos) { $('#pricingLink').addClass('active'); } else { $('#pricingLink').removeClass('active'); } if (scrollPos >= contactPos) { $('#contactLink').addClass('active'); } else { $('#contactLink').removeClass('active'); } if (scrollPos >= servicesPos && scrollPos < contactPos) { $('#servicesLink').addClass('active'); } else { $('#servicesLink').removeClass('active'); } });