Patrick.Sy/spring-petclinic
1
0
Fork 0
mirror of https://github.com/spring-projects/spring-petclinic.git synced 2025-07-17 21:35:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

AA: WIP: Added services section on home page

Browse source
This commit is contained in:
Andrew Abogado 2015-02-11 18:56:57 +08:00
parent bf5212bfc9
commit 0baeb789d8
6 changed files with 79 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/main/webapp/static/app/images/client-logos.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/main/webapp/static/app/images/image-service-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
src/main/webapp/static/app/images/image-service-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
src/main/webapp/static/app/images/image-service-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 135 KiB

106
src/main/webapp/static/app/index.html
View file

@ -47,7 +47,53 @@
</div>
<!-- Clients -->
<section class="sections">
<section class="sections sections-alt text-center">
<img src="images/client-logos.png" alt="Client logos">
</section>
<!-- Services 2 section -->
<section id="services2" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<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>
</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>
</section>
<!-- Services 1 section -->
<section id="services" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-circle img-circle-auto" src="images/image-service-2.png" alt="Service 2">
</div>
<div class="col-md-6">
<h3 class="section-heading">Customized that’s just right for you </h3>
<p class="section-desc">Our scalable system is configured to suit your need. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</div>
</div>
</div>
</section>
<!-- Services 3 section -->
<section id="services3" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<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>
</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>
</section>
<!-- Featured veterinarians -->
@ -56,8 +102,8 @@
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h3 id="veterianarians" 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>
<h3 id="veterianarians" class="section-heading">Our awesome veterinarians</h3>
<p class="section-desc">We believe in a diverse range of personel to bring creative skills, thoughts, and ideas to the table. Be cool, we awesome, be with us today, really ok?</p>
</div>
</div>
</div>
@ -129,60 +175,6 @@
</div>
</section>
<!-- Services 1 section -->
<section id="services" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-thumbnail" src="images/560x250.gif" 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>
<!-- 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="images/560x250.gif" 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="images/560x250.gif" 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">

47
src/main/webapp/static/app/styles/main.scss
View file

@ -198,7 +198,7 @@ input::-moz-focus-inner {
border-radius: 3px;
box-shadow: none;
}
.form-control-group {
padding-top: $padding-large-vertical;
}
@ -231,7 +231,7 @@ input::-moz-focus-inner {
.jumbotron-video {
position: absolute;
opacity: .15;
opacity: .20;
left: 0;
right: 0;
bottom: 0px;
@ -285,17 +285,25 @@ input::-moz-focus-inner {
background-color: $text-color-inverse;
}
.sections-alt {
background-color: #f9fafb;
}
.sections-darker {
background-color: #f3f5f7;
}
.section-heading {
font-size: 40px;
font-size: 28px;
line-height: 40px;
margin-bottom: 35px;
}
.section-desc {
font-size: 18px;
margin-bottom: 25px;
font-size: 16px;
line-height: 30px;
margin-bottom: 35px;
}
.sections-bottom-nav {
@ -602,7 +610,7 @@ input::-moz-focus-inner {
.btn {
border-color: transparent;
border-radius: 3px;
font-size: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
transition: .3s ease-in-out;
@ -729,7 +737,7 @@ input::-moz-focus-inner {
.caption-heading {
font-size: 16px;
margin-bottom: 10px;
a {
color: $headings-color;
}
@ -763,7 +771,7 @@ input::-moz-focus-inner {
margin-left: 10px;
}
}
img {
margin-top: 0;
}
@ -809,6 +817,11 @@ input::-moz-focus-inner {
width: 30px;
}
.img-circle-auto {
height: auto;
width: auto;
}
/* Forms */
label {
color: $headings-color;
@ -822,7 +835,7 @@ label {
color: $gray-dark;
font-weight: 600;
transition: background-color ease-in-out .15s;
&:active,
&:focus {
background-color: darken($input-bg,5%);
@ -834,7 +847,7 @@ label {
height: 34px;
}
.form-control[disabled],
.form-control[disabled],
.form-control[readonly] {
background-color: $text-color-inverse;
border: 1px solid $gray-lighter;
@ -874,14 +887,14 @@ label {
.modal-header {
border: 0;
padding: 50px 0 20px 0;
.close {
font-size: 34px;
position: absolute;
top: 10px;
right: 20px;
}
.sub-header {
padding-bottom: 0;
}
@ -893,7 +906,7 @@ label {
.modal-backdrop {
background-color: $sections-bg;
&.in {
opacity: .98;
}
@ -910,11 +923,11 @@ label {
line-height: 60px;
font-weight: bold;
}
.form-group {
position: relative;
}
.btn {
background: 0 0;
border: 0;
@ -924,7 +937,7 @@ label {
top: 0;
z-index: 3;
}
.glyphicon-search {
color: $gray-light;
font-size: 20px;
@ -1046,4 +1059,4 @@ label {
opacity: .3;
left: 50%;
margin-left: -16px;
}
}