mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-18 13:35:50 +00:00
AA: Final touch up for home / landing page
This commit is contained in:
Andrew Abogado
parent
fe15021c93
commit
24fdafe499
15 changed files with 282 additions and 142 deletions
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
BIN
src/main/webapp/static/app/images/bg-appointment.png
Normal file
BIN
src/main/webapp/static/app/images/bg-appointment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 798 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
BIN
src/main/webapp/static/app/images/logo-footer.png
Normal file
BIN
src/main/webapp/static/app/images/logo-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 B |
BIN
src/main/webapp/static/app/images/testimonial-tiles.png
Normal file
BIN
src/main/webapp/static/app/images/testimonial-tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
BIN
src/main/webapp/static/app/images/vet1.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/main/webapp/static/app/images/vet2.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/main/webapp/static/app/images/vet3.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/main/webapp/static/app/images/vet4.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/main/webapp/static/app/images/vet5.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/main/webapp/static/app/images/vet6.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/main/webapp/static/app/images/vet7.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/main/webapp/static/app/images/vet8.jpg
Normal file
BIN
src/main/webapp/static/app/images/vet8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -24,8 +24,8 @@
|
||||||
<div class="jumbotron jumbotron-welcome">
|
<div class="jumbotron jumbotron-welcome">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header>
|
<header>
|
||||||
<a class="navbar-brand pull-left" href="/">
|
<a class="navbar-brand navbar-brand-nopadding pull-left" href="/">
|
||||||
<img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo_brand.png">
|
<img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo-brand.png">
|
||||||
</a>
|
</a>
|
||||||
<a class="btn btn-default btn-inverse pull-right" href="#">Sign In</a>
|
<a class="btn btn-default btn-inverse pull-right" href="#">Sign In</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<a class="btn btn-cta js-scroll-nav" href="#appointment" role="button">Make an Appointment</a>
|
<a class="btn btn-cta js-scroll-nav" href="#appointment" role="button">Make an Appointment</a>
|
||||||
<a class="btn btn-cta btn-inverse js-scroll-nav" href="#services" role="button">Learn More</a>
|
<a class="btn btn-cta btn-inverse js-scroll-nav" href="#services" role="button">Learn More</a>
|
||||||
</p>
|
</p>
|
||||||
<a href="#services" class="scroll-down">Scroll Down</a>
|
<a href="#services" class="scroll-down js-scroll-nav">Scroll Down</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,28 +46,28 @@
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Clients -->
|
<!-- Companies -->
|
||||||
<section class="sections sections-alt text-center">
|
<section class="sections sections-narrow sections-companies">
|
||||||
<img src="images/client-logos.png" alt="Client logos">
|
<img src="images/client-logos.png" alt="Client logos">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services 2 section -->
|
<!-- Services 1 section -->
|
||||||
<section id="services2" class="sections">
|
<section id="services" class="sections sections-services">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6 col-md-push-6">
|
||||||
|
<img class="img-circle img-circle-auto pull-right" src="images/image-service-1.png" alt="Service 1">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-md-pull-6">
|
||||||
<h3 class="section-heading">Everything you need to manage you clients and their pets</h3>
|
<h3 class="section-heading">Everything you need to manage you clients and their pets</h3>
|
||||||
<p class="section-desc">PetClinic is everything you need for an effective management. 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 class="section-desc">PetClinic is everything you need for an effective management. 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 class="col-md-6">
|
|
||||||
<img class="img-circle img-circle-auto pull-right" src="images/image-service-1.png" alt="Service 1">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services 1 section -->
|
<!-- Services 2 section -->
|
||||||
<section id="services" class="sections">
|
<section id="services2" class="sections sections-services">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
|
|
@ -82,16 +82,16 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services 3 section -->
|
<!-- Services 3 section -->
|
||||||
<section id="services3" class="sections">
|
<section id="services3" class="sections sections-services">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6 col-md-push-6">
|
||||||
|
<img class="img-circle img-circle-auto pull-right" src="images/image-service-3.png" alt="Service 3">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-md-pull-6">
|
||||||
<h3 class="section-heading">Access anywhere even on-the-go</h3>
|
<h3 class="section-heading">Access anywhere even on-the-go</h3>
|
||||||
<p class="section-desc">Whether you’re on your desk or on mobile, PetClinic is available wherever you may be. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains.</p>
|
<p class="section-desc">Whether you’re on your desk or on mobile, PetClinic is available wherever you may be. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<img class="img-circle img-circle-auto pull-right" src="images/image-service-3.png" alt="Service 3">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -108,140 +108,140 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-3">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<img src="images/600x345.gif" alt="Generic placeholder image">
|
<img src="images/vet1.jpg" alt="Vet 1" class="img-circle">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<h3>Thumbnail label</h3>
|
<h3 class="caption-heading">James Carter</h3>
|
||||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
|
<p class="caption-meta caption-meta-uppercase">Radiology</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<img src="images/600x600.gif" alt="Generic placeholder image">
|
<img src="images/vet2.jpg" alt="Vet 2" class="img-circle">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<h3>Thumbnail label</h3>
|
<h3 class="caption-heading">Carlos Estaban</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>
|
<p class="caption-meta caption-meta-uppercase">Radiology</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<img src="images/600x600.gif" alt="Generic placeholder image">
|
<img src="images/vet3.jpg" alt="Vet 3" class="img-circle">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<h3>Thumbnail label</h3>
|
<h3 class="caption-heading">Helen Leary</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>
|
<p class="caption-meta caption-meta-uppercase">Surgery</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /row -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="thumbnail">
|
|
||||||
<img src="images/600x600.gif" 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>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<img src="images/600x600.gif" alt="Generic placeholder image">
|
<img src="images/vet4.jpg" alt="Vet 4" class="img-circle">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<h3>Thumbnail label</h3>
|
<h3 class="caption-heading">Linda Douglas</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>
|
<p class="caption-meta caption-meta-uppercase">Dentistry surgery</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-3">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<img src="images/600x345.gif" alt="Generic placeholder image">
|
<img src="images/vet5.jpg" alt="Vet 5" class="img-circle">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<h3>Thumbnail label</h3>
|
<h3 class="caption-heading">Sharon Jenkins</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>
|
<p class="caption-meta caption-meta-uppercase">Surgery</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-3">
|
||||||
<!-- /row -->
|
<div class="thumbnail thumbnail-noborder">
|
||||||
<div class="row">
|
<img src="images/vet6.jpg" alt="Vet 6" class="img-circle">
|
||||||
<div class="col-md-4 col-md-offset-4">
|
<div class="caption">
|
||||||
<p><a class="btn btn-primary btn-lg btn-block" href="/veterinarians">View More »</a></p>
|
<h3 class="caption-heading">Rafael Ortega</h3>
|
||||||
|
<p class="caption-meta caption-meta-uppercase">Radiology</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="thumbnail thumbnail-noborder">
|
||||||
|
<img src="images/vet7.jpg" alt="Vet 7" class="img-circle">
|
||||||
|
<div class="caption">
|
||||||
|
<h3 class="caption-heading">Henry Stevens</h3>
|
||||||
|
<p class="caption-meta caption-meta-uppercase">Surgery</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="thumbnail thumbnail-noborder">
|
||||||
|
<img src="images/vet8.jpg" alt="Vet 8" class="img-circle">
|
||||||
|
<div class="caption">
|
||||||
|
<h3 class="caption-heading">Jenkins Helen</h3>
|
||||||
|
<p class="caption-meta caption-meta-uppercase">Radiology</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Testimonials -->
|
<!-- Testimonials -->
|
||||||
<section id="testimonials" class="sections">
|
<section id="testimonials" class="sections sections-testimonials">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 col-md-offset-2">
|
<div class="col-md-8 col-md-offset-2 text-center">
|
||||||
<div class="text-center">
|
<h3 class="section-heading">Our happy customers say</h3>
|
||||||
<h3 class="section-heading">What our customers are saying.</h3>
|
<img class="img-circle img-circle-medium" src="images/veterinarian-default.jpg" alt="Generic placeholder image">
|
||||||
<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>
|
<h4 class="section-title">Betty Davis, Dogs Associations Inc.</h4>
|
||||||
</div>
|
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
|
||||||
|
<ol class="carousel-indicators carousel-indicators-static">
|
||||||
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
|
||||||
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-4 text-center">
|
|
||||||
<img class="img-circle" src="images/140x140.gif" 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="images/140x140.gif" 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="images/140x140.gif" 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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Client logos -->
|
<!-- Numbers -->
|
||||||
<section id="companies" class="sections sections-narrow">
|
<section id="companies" class="sections sections-numbers">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 col-md-offset-2">
|
<div class="col-md-3">
|
||||||
<div class="text-center">
|
<div class="stats-numbers">
|
||||||
<h3 class="h4">Trusted by some of the world's smartest companies</h3>
|
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
|
||||||
|
<p class="stats-number">1325</p>
|
||||||
|
<span class="stats-label">Pet Owners</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-3">
|
||||||
<div class="row">
|
<div class="stats-numbers">
|
||||||
<div class="col-lg-2">
|
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
<p class="stats-number">2325</p>
|
||||||
|
<span class="stats-label">Pets</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-2">
|
<div class="col-md-3">
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
<div class="stats-numbers">
|
||||||
|
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
|
||||||
|
<p class="stats-number">903</p>
|
||||||
|
<span class="stats-label">Pet Visits</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-2">
|
<div class="col-md-3">
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
<div class="stats-numbers">
|
||||||
</div>
|
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
|
||||||
<div class="col-lg-2">
|
<p class="stats-number">24</p>
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
<span class="stats-label">Veterinarians</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-2">
|
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<img src="images/100x40.gif" alt="Companies placeholder image">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Make an appointment call to action -->
|
<!-- Make an appointment call to action -->
|
||||||
<section id="appointment" class="jumbotron jumbotron-secondary jumbotron-pattern jumbotron-appointment">
|
<section id="appointment" class="jumbotron jumbotron-secondary jumbotron-appointment">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="jumbotron-headline">
|
<div class="jumbotron-headline">
|
||||||
<div class="jumbotron-headline-cell">
|
<div class="jumbotron-headline-cell">
|
||||||
|
|
@ -274,30 +274,51 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- Three columns of text below the carousel -->
|
<!-- Three columns of text below the carousel -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4">
|
<div class="col-md-3">
|
||||||
<h3 class="h4">Business Hours</h3>
|
<h3 class="h5">Company Information</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>
|
<ul class="list-unstyled">
|
||||||
</div><!-- /.col-lg-4 -->
|
<li><a href="#">About Us</a></li>
|
||||||
<div class="col-lg-4">
|
<li><a href="#">Updtes</a></li>
|
||||||
<h3 class="h4">Our Location</h3>
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
<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>
|
<li><a href="#">Terms of Services</a></li>
|
||||||
</div><!-- /.col-lg-4 -->
|
<ul>
|
||||||
<div class="col-lg-4">
|
</div>
|
||||||
<h3 class="h4">Questions or comments</h3>
|
<div class="col-md-3">
|
||||||
|
<h3 class="h5">Wanna talk?</h3>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li>Call us at (203) 420-0234</li>
|
||||||
|
<li>Email us to info@petclinic.com</li>
|
||||||
|
<li>We respond to emails within one business day. Hours: Mon - Fri from 9am - 7pm ET</li>
|
||||||
|
<ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<h3 class="h5">Follow Us</h3>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="#">Facebook</a></li>
|
||||||
|
<li><a href="#">Twitter</a></li>
|
||||||
|
<li><a href="#">Google Plus</a></li>
|
||||||
|
<ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<h3 class="h5">Questions or comments</h3>
|
||||||
<p>Cras mattis consectetur purus sit amet fermentum. </p>
|
<p>Cras mattis consectetur purus sit amet fermentum. </p>
|
||||||
<p>
|
<p>
|
||||||
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-primary">Drop us a line</a>
|
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-primary">Drop us a line</a>
|
||||||
</p>
|
</p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div>
|
||||||
</div><!-- /.row -->
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="colophon container">
|
|
||||||
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
|
|
||||||
<p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<div class="colophon">
|
||||||
|
<div class="container">
|
||||||
|
<p class="pull-left">
|
||||||
|
<img src="images/logo-footer.png" class="logo-footer"> © 2015 Pet Clinic, A Spring Framework Demonstration.
|
||||||
|
</p>
|
||||||
|
<p class="pull-right">Design by Andrew Abogado. See the Colophon for details on the design and code.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- build:js(.) scripts/vendor.js -->
|
<!-- build:js(.) scripts/vendor.js -->
|
||||||
<!-- bower:js -->
|
<!-- bower:js -->
|
||||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
|
@ -305,16 +326,6 @@
|
||||||
<!-- endbower -->
|
<!-- endbower -->
|
||||||
<!-- endbuild -->
|
<!-- endbuild -->
|
||||||
|
|
||||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
|
||||||
<script>
|
|
||||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
|
||||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
|
||||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
|
||||||
e.src='//www.google-analytics.com/analytics.js';
|
|
||||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
|
||||||
ga('create','UA-XXXXX-X');ga('send','pageview');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- build:js({app,.tmp}) scripts/main.js -->
|
<!-- build:js({app,.tmp}) scripts/main.js -->
|
||||||
<script src="scripts/main.js"></script>
|
<script src="scripts/main.js"></script>
|
||||||
<!-- endbuild -->
|
<!-- endbuild -->
|
||||||
|
|
|
||||||
|
|
@ -100,13 +100,42 @@ input::-moz-focus-inner {
|
||||||
/* Custom page footer */
|
/* Custom page footer */
|
||||||
.footer {
|
.footer {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 30px 0;
|
padding: 40px 0;
|
||||||
|
|
||||||
|
h5, .h5 {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-unstyled {
|
||||||
|
a {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colophon {
|
.colophon {
|
||||||
border-top: 1px solid $sections-border;
|
background-color: $btn-cta;
|
||||||
margin-top: 30px;
|
color: $btn-default-color;
|
||||||
padding-top: 30px;
|
font-size: 12px;
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.logo-footer {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-narrow > hr {
|
.container-narrow > hr {
|
||||||
|
|
@ -142,15 +171,15 @@ input::-moz-focus-inner {
|
||||||
|
|
||||||
h1, .h1 {
|
h1, .h1 {
|
||||||
color: $text-color-inverse;
|
color: $text-color-inverse;
|
||||||
font-size: 48px;
|
font-size: 52px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: $text-color-inverse;
|
color: $navbar-default-link-color;
|
||||||
font-size: 23px;
|
font-size: 24px;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -181,6 +210,9 @@ input::-moz-focus-inner {
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron-appointment {
|
.jumbotron-appointment {
|
||||||
|
background: image-url("images/bg-appointment.png") $brand-primary;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
.form-inline {
|
.form-inline {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -285,10 +317,14 @@ input::-moz-focus-inner {
|
||||||
background-color: $text-color-inverse;
|
background-color: $text-color-inverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sections-alt {
|
.sections-companies {
|
||||||
|
@extend .text-center;
|
||||||
background-color: #f9fafb;
|
background-color: #f9fafb;
|
||||||
}
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sections-darker {
|
.sections-darker {
|
||||||
background-color: #f3f5f7;
|
background-color: #f3f5f7;
|
||||||
|
|
@ -311,6 +347,43 @@ input::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sections-testimonials {
|
||||||
|
background: image-url("images/testimonial-tiles.png") $brand-primary;
|
||||||
|
color: $text-color-inverse;
|
||||||
|
padding: 50px 0;
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
color: $text-color-inverse;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
color: $text-color-inverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 32px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-circle {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-services {
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.img-circle {
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-6 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hr-lg {
|
.hr-lg {
|
||||||
border-top-color: darken($sections-border,4%);
|
border-top-color: darken($sections-border,4%);
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
|
@ -331,6 +404,10 @@ input::-moz-focus-inner {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-brand-nopadding {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
> li {
|
> li {
|
||||||
> a {
|
> a {
|
||||||
|
|
@ -749,6 +826,10 @@ input::-moz-focus-inner {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.caption-meta-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.caption-label {
|
.caption-label {
|
||||||
@extend .label;
|
@extend .label;
|
||||||
@extend .label-default;
|
@extend .label-default;
|
||||||
|
|
@ -800,6 +881,11 @@ input::-moz-focus-inner {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thumbnail-noborder {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Image circle classes */
|
/* Image circle classes */
|
||||||
.img-circle {
|
.img-circle {
|
||||||
|
|
@ -1013,6 +1099,23 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Stat numbers */
|
||||||
|
.stats-numbers {
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
.glyphicon {
|
||||||
|
color: $gray-lighter;
|
||||||
|
font-size: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-number {
|
||||||
|
color: $headings-color;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Action Items */
|
/* Action Items */
|
||||||
.action-wrappers,
|
.action-wrappers,
|
||||||
.action-items {
|
.action-items {
|
||||||
|
|
@ -1048,7 +1151,7 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-down {
|
.scroll-down {
|
||||||
background: image-url("images/arrow_down.png") no-repeat center center;
|
background: image-url("images/arrow-down.png") no-repeat center center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
text-indent: -9999px;
|
text-indent: -9999px;
|
||||||
|
|
@ -1060,3 +1163,29 @@ label {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -16px;
|
margin-left: -16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.carousel-indicators-static {
|
||||||
|
left: auto;
|
||||||
|
margin: 30px 0;
|
||||||
|
position: static;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: $text-color-inverse;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 8px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
background-color: $text-color-inverse;
|
||||||
|
background-color: rgba($text-color-inverse,.5);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 8px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue