Jumbotron is a special area in which you can place your images of any content which want to be important. This area should be highly attract able for the user.
Always use this to display pictures its a better idea.
Always use this to display pictures its a better idea.
Requirements:
- Download bootstrap files from here
- Place them into your html templates folder or where you want to use.
- Basic knowledge of HTML, CSS and JAVASCRIPT.
*****SOURCE CODE*****
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>My Website</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<div class="container">
<!-- row 1 starts -->
<header class="row">
<!-- row 1 column 1 starts -->
<div class="col-lg-6 col-sm-5"> <a href="index.html"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a> </div><!-- row 1 column 1 ends -->
<!-- row 1 column 2 starts -->
<div class="col-lg-6 col-sm-7"> <img src="img/animals.jpg" alt=""> </div><!-- row 1 column 2 starts ends -->
</header><!-- row 1 ends -->
<!-- row 2 starts here-->
<div class="row">
<!-- jumbotron is special attention area for viewers. you can place images or sliders or anything you want to give importance -->
<div class="jumbotron">
<!-- jumbotron image --> <img src="img/jumbotron.jpg" alt="" class="pull-right">
<h1> We treat your pets like our own</h1>
<p>At Wisdom Pet Medicine, we strive to blend the best in traditional and alternative healing techniques to diagnose and treat companion animals, including dogs, cats, birds, reptiles, rodents, and fish. </p>
</div><!-- jumbotron div ends here -->
</div><!-- row 2 ends here -->
<!-- row 3 starts here -->
<div class="row">
<!-- row 3 column 1 starts -->
<div class="col-md-3 col-xs-6"> <p><img src="img/gsd.jpg" alt=""></p>
<h4>Thanks for helping our German Shepherd</h4>
<p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
<p><a href="#">Read more >></a></p>
</div>
<!-- row 3 column 3 starts -->
<div class="col-md-3 col-xs-6">
<p><img src="img/kitten.jpg" alt=""></p>
<h4>Our diabetic kitty is better</h4>
<p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
<p><a href="#">Read more >></a></p>
</div>
<!-- row 3 column 4 starts -->
<div class="col-md-3 col-xs-6">
<p><img src="img/bulldog.jpg" alt=""></p>
<h4>Our grape-loving dog</h4>
<p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
<p><a href="#">Read more >></a></p>
</div>
<!-- row 3 column 4 starts -->
<div class="col-md-3 col-xs-6">
<p><img src="img/goldfish.jpg" alt=""></p>
<h4>A dog antibiotic cured our fish</h4>
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
<p><a href="#">Read more >></a></p>
</div>
</div>
<!-- row 4 starts here -->
<footer class="row">
<p>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</p>
<p>Wisdom Pet Medicine is a training brand owned by lynda.com.</p>
</footer><!-- row 4 ends here -->
</div> <!-- end container -->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment