"CHP"
Bootstrap 3.3.0 Snippet by orangepeelbeef

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <body> <!-- start block jumbotron --> <div class="container-fluid containWidth bg-warning" id="wrapper"> <!-- start wrapper div --> <div class="row jumbotron1"> <!-- start jumbotron div --> <!--<div class="jumbotron containWidth" >--> <h2 style="text-align: right; line-height: 1.5em; font-family: 'Rock Salt', cursive;">Welcome<br/>to<br/>Camp<br/>Happy<br/>Paws </h2> <!-- <p>This can be a rotating display of images, banners, specials, etc.</p> --> <br/> <br/> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> <!-- end jumbotron div --> <!-- endblock jumbotron --> <!--<div class="row"> --> <!-- start col-1 block --> <div class="row "> <!-- start middle row content & sidebars div --> <!-- Example row of columns --> <!-- <div class="row"> --> <div class="col-sm-2"> <!-- start left nav div --> <ul> <li><a href="/"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnHome.png"></a></li> <li><a href="/camp"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnCamp.png"></a></li> <li><a href="/rates"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnRates.png"></a></li> <li><a href="/blog"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnBlog.png"></a></li> <li><a href="/map"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnMap.png"></a></li> <li><a href="/campers"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnCampers.png"></a></li> <li><a href="/awards"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnAwards.png"></a></li> <li><a href="/links"><img style="width: 100%;" src="http://test-camphappypaws.rhcloud.com/static/images/btnLinks.png"></a></li> </ul> </div> <!-- end left nav div --> <!-- end col-1 block --> <!-- start block col-2 main content area --> <div class="col-md-7"> <!-- start middle content div --> <h2><a href="/blog/9/">Test Blog</a></h2> <p><h1><strong>new blog to test functionality</strong></h1> <p> </p> <p> </p> <p>yay it works!</p> </p> <hr> <hr> <p>Camp Happy Paws is a kennel free dog boarding and daycare facility located on five securely fenced acres of wooded trails, trees and grassy fields.</p> <p>The staff at Camp Happy Paws kennel free dog boarding and daycare spend the day walking and with our campers, giving them all lots of love and attention. Whether dogs want to come in the Dog House and relax, or play outside, Camp Happy Paws has something for our campers of all ages and stages. At the end of the day, the campers are all tucked in safely for a cozy night's rest in our clean, comfy doghouse.</p> <p>Camp Happy Paws is happy to have been a family owned and operated kennel free dog boarding and daycare facility since 1996. We take pride in the loving, individualized care and attention given to each and every one of our campers. We look forward to meeting you and your dog friends.</p> <!-- <p><a class="btn btn-default" href="#" role="button">Read More »</a></p> --> </div> <!-- end middle content div --> <!-- end col-2 main content block --> <!-- start col-3 bolock right sidebar --> <div class="col-sm-3"> <!-- start right sidebar div --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <h2>Connect with us</h2> <div class="fb-page" data-href="https://www.facebook.com/Camp-Happy-Paws-151189311619712/?fref=ts" data-tabs="timeline" data-width="100%" data-height="100%" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"> </div><!-- open and close facebook div --> <a href="https://openclipart.org/detail/191214/dogs-pack"><img src="https://openclipart.org/download/191214/1393079419.svg" /></a> </div> <!-- end right sidebar div --> </div> <!-- end middle row content & sidebars div --> <!--</div> --> <!--</div> --> <!-- end content block --> <div class="row col-sm-12"> <!-- start footer row div --> <footer> <div id="footer"> <!-- start footer --> <nav class="navbar navbar-light bg-faded"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item pull-left"> <a class="nav-link" href="#">Camp</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Rates</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Map</a> </li> <li class="nav-item pull-right"> <a class="nav-link" href="#">Campers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Awards</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Links</a> </li> </ul> </nav> <hr > <h3 style="text-align: center;">© 2016 Camp Happy Paws</h3> </div> <!-- end footer --> </footer> </div> <!-- end footer row div --> </div> <!-- end wrapper div --> </body>
/* this is the CHP specific CSS */ /* jumbotron styles */ body { background-image: url('https://farm1.staticflickr.com/135/371023165_1e0fa24e10_o.jpg'); repeat: repeat; width: 100%; } .jumbotron { background-image: url('http://test-camphappypaws.rhcloud.com/static/images/buttercup.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 300px; max-height: 450px; /* width: 80%; */ overflow: visible; background-position: center; border-radius: 30px; margin-top: 3%; background: contain; max-width: 100% } .jumbotron1 { padding-top: 0px; padding-bottom:0px; background-image:url('http://test-camphappypaws.rhcloud.com/static/images/buttercup.jpg'); background-size: cover; background: contain; width: 100%; /* make sure to define width to fill container */ height: 30%; /* define the height in pixels or make sure */ /* you have something in your div with height */ /* so you can see your image */ max-width:100%; /* define the max width */ } .containWidth { width: 80%; } .jumbotron h1 { color: #fff; } .jumbotron p { color: #fff; } /* navigation styles */ ul { list-style-type: none } /* @media (max-width: 480px) { .navItem { background-image: none !important; } } */ .btn btn-primary btn-lg { background-color: green; font: white; } #footer { background-image: url('http://test-camphappypaws.rhcloud.com/static/images/boardFooter.png'); color: white; width: 100%; margin: auto; height: auto; list-style-type: none; padding-top: 10px; border-radius: 30px; } @font-face { font-family: 'puppyBellies'; src: url('fonts/puppyBellies.ttf'); format('truetype'); } p { font-family: 'puppyBellies', sans-serif; font-size: 1.5em; font-weight: normal; } .wrapper { margin: auto; width: 80%; } .navbar-nav { width: 100%; text-align: center; } .navbar-nav > li { float: none; display: inline-block; } /*#footer a:link { color: white; } #footer a:visited { color: #white; } #footer a:hover { color: white; } #footer a:active { color: #white; }*/

Related: See More

Paper Kit 2 Angular

Questions / Comments: