mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 21:35:50 +00:00
Structure content properly on home page
This commit is contained in:
Andrew Abogado
parent
d0352e1414
commit
94e37c7801
2 changed files with 333 additions and 32 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>petclinic</title>
|
||||
<title>Pet Clinic</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
|
|
@ -46,39 +46,268 @@
|
|||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
<div class="jumbotron-headline">
|
||||
<div class="jumbotron-headline-cell">
|
||||
<h1>Pet Clinic <br> A Spring Framework Demonstration</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<!-- Featured veterinarians -->
|
||||
<section id="veterianarians" class="sections">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="text-center">
|
||||
<h3 class="section-heading">Our Veterinarians</h3>
|
||||
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x345" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /row -->
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/600x345" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /row -->
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-offset-4">
|
||||
<p><a class="btn btn-primary btn-lg btn-block" href="/veterinarians">View More »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
<!-- Services 1 section -->
|
||||
<section id="services" class="sections">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<img class="img-thumbnail" src="http://placehold.it/560x250" alt="Generic placeholder image">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3 class="section-heading">Services One</h3>
|
||||
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="/business">Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2014</p>
|
||||
</footer>
|
||||
</div> <!-- /container -->
|
||||
<!-- Services 2 section -->
|
||||
<section id="services2" class="sections">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h3 class="section-heading">Services Two</h3>
|
||||
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="/business">Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img class="img-thumbnail" src="http://placehold.it/560x250" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services 3 section -->
|
||||
<section id="services3" class="sections">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<img class="img-thumbnail" src="http://placehold.it/560x250" alt="Generic placeholder image">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3 class="section-heading">Services Three</h3>
|
||||
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="/business">Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="testimonials" class="sections">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="text-center">
|
||||
<h3 class="section-heading">What our customers are saying.</h3>
|
||||
<p class="section-desc">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 text-center">
|
||||
<img class="img-circle" src="http://placehold.it/140x140" alt="Generic placeholder image">
|
||||
<h4>Client One</h4>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4 text-center">
|
||||
<img class="img-circle" src="http://placehold.it/140x140" alt="Generic placeholder image">
|
||||
<h4>Client Two</h4>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4 text-center">
|
||||
<img class="img-circle" src="http://placehold.it/140x140" alt="Generic placeholder image">
|
||||
<h4>Client Three</h4>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Client logos -->
|
||||
<section id="companies" class="sections sections-narrow">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="text-center">
|
||||
<p class="section-desc">Trusted by some of the world's smartest companies</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Make an appointment call to action -->
|
||||
<section id="appointment" class="jumbotron jumbotron-secondary">
|
||||
<div class="container">
|
||||
<div class="jumbotron-headline">
|
||||
<div class="jumbotron-headline-cell">
|
||||
<h2>Make an appointment today.</h2>
|
||||
<p>Use it as a starting point to create something more unique.</p>
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="clientName">Your Name</label>
|
||||
<input type="text" class="form-control input-lg" id="clientName" placeholder="Your Name">
|
||||
</div><div class="form-group">
|
||||
<label class="sr-only" for="emailAddress">Email address</label>
|
||||
<input type="email" class="form-control input-lg" id="emailAddress" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="clientInquiry">Your Inquiry</label>
|
||||
<input type="text" class="form-control input-lg" id="clientInquiry" placeholder="Your Inquiry">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-lg">Get Started - Free Consultation!</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact details -->
|
||||
<section id="contact_details" class="sections sections-narrow">
|
||||
<div class="container">
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h3>Business Hours</h3>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<h3>Our Location</h3>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<h3>Contact Us</h3>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right">Follow us at <a href="#">Facebook</a> & <a href="#">Twitter</a></p>
|
||||
<p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- build:js(.) scripts/vendor.js -->
|
||||
<!-- bower:js -->
|
||||
|
|
|
|||
|
|
@ -38,9 +38,12 @@ body {
|
|||
|
||||
/* Custom page footer */
|
||||
.footer {
|
||||
padding-top: 19px;
|
||||
color: #777;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding: 20px 0;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container-narrow > hr {
|
||||
|
|
@ -49,20 +52,89 @@ body {
|
|||
|
||||
/* Main marketing message and sign up button */
|
||||
.jumbotron {
|
||||
height: 620px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Supporting marketing content */
|
||||
.marketing {
|
||||
margin: 40px 0;
|
||||
p + h4 {
|
||||
margin-top: 28px;
|
||||
.jumbotron-headline {
|
||||
display: table;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jumbotron-headline-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Secondary marketing message and call to action */
|
||||
.jumbotron-secondary {
|
||||
height: 500px;
|
||||
margin-bottom: 0;
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.sections {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 100px 0;
|
||||
|
||||
.thumbnail {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.sections-narrow {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Responsive: Portrait tablets and up */
|
||||
|
|
|
|||
Loading…
Reference in a new issue