mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-18 21:45:49 +00:00
cool nav bar 2
This commit is contained in:
Austin-Mills
parent
8b3d5831f0
commit
53c8a65a96
4 changed files with 191 additions and 4 deletions
|
|
@ -55,19 +55,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel {
|
.carousel {
|
||||||
height: 100vh;
|
height: 66%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
.carousel .carousel-inner {
|
.carousel .carousel-inner {
|
||||||
height:100%;
|
height:66%;
|
||||||
}
|
}
|
||||||
.carousel .carousel-inner img {
|
.carousel .carousel-inner img {
|
||||||
display:block;
|
display:block;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.mycarousel {
|
.mycarousel {
|
||||||
height: 100%;
|
height: 66%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -106,6 +106,22 @@
|
||||||
//margin: 20px 0;
|
//margin: 20px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-custom
|
||||||
|
{
|
||||||
|
|
||||||
|
margin-right:auto;
|
||||||
|
margin-left:auto;
|
||||||
|
text-align:center;
|
||||||
|
position:fixed;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: white;
|
||||||
|
width: 100%;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
|
|
@ -123,6 +139,94 @@ code {
|
||||||
//margin-right: -60px;
|
//margin-right: -60px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
///////
|
||||||
|
.portion {
|
||||||
|
|
||||||
|
background-image: url('http://p1.pichost.me/640/60/1842352.jpg');
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.portion.two {
|
||||||
|
background-image: url('http://cdn.desktopwallpapers4.me/media/thumbs_400x250/4/31677.jpg');
|
||||||
|
}
|
||||||
|
.portion h2 {
|
||||||
|
color: white;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 3em;
|
||||||
|
padding: 2em 0;
|
||||||
|
margin: 0;
|
||||||
|
text-shadow: 0 0 10px black;
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background: #FFFAF0;
|
||||||
|
color: #777;
|
||||||
|
padding: 3em 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.button a {
|
||||||
|
display: inline-block;
|
||||||
|
border: 2px solid #777;
|
||||||
|
padding: .75em 1.5em;
|
||||||
|
color: #777;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 5px;
|
||||||
|
letter-spacing: .15em;
|
||||||
|
word-spacing: .25em;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.button a:hover {
|
||||||
|
color: #FFFAF0;
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
|
footer.info {
|
||||||
|
color: #FFFAF0;
|
||||||
|
background: #777;
|
||||||
|
padding: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toTop img {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
#toTop img:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.move {
|
||||||
|
top: -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.movetext {
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
///////
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: 15px
|
margin-bottom: 15px
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,15 @@
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
}
|
}
|
||||||
|
.floating-custom
|
||||||
|
{
|
||||||
|
|
||||||
|
margin-right:auto;
|
||||||
|
margin-left:auto;
|
||||||
|
text-align:center;
|
||||||
|
position:fixed;
|
||||||
|
|
||||||
|
}
|
||||||
.navbar a.navbar-brand span {
|
.navbar a.navbar-brand span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
<li th:classappend="${module == 'vets' ? 'active' : ''}"><a href="/vets.html" th:href="@{/vets.html}"><span class="glyphicon glyphicon-th-list"> Doctors</a></li>
|
<li th:classappend="${module == 'vets' ? 'active' : ''}"><a href="/vets.html" th:href="@{/vets.html}"><span class="glyphicon glyphicon-th-list"> Doctors</a></li>
|
||||||
|
|
||||||
<li th:classappend="${module == 'error' ? 'active' : ''}"><a href="/oups" th:href="@{/oups}" ><span class="glyphicon glyphicon-star"> Reviews</a></li>
|
<li th:classappend="${module == 'error' ? 'active' : ''}"><a href="/oups" th:href="@{/oups}" ><span class="glyphicon glyphicon-star"> Reviews</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,25 @@
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id ="navbar-2" class="container-custom">
|
||||||
|
|
||||||
|
<ul class="nav navbar-nav nav-collapse navbar-right">
|
||||||
|
<li > <a href="#myCarousel" class="active">Photos</a> </li>
|
||||||
|
<li > <a href="#portion2">About</a> </li>
|
||||||
|
<li > <a href="#portion3">Features</a></li>
|
||||||
|
<li > <a href="#portion4">Future</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- This is a test for a picture car. -->
|
<!-- This is a test for a picture car. -->
|
||||||
|
|
||||||
|
|
@ -49,6 +66,64 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="portion two">
|
||||||
|
<h2>Portion 2</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portion2" class="info">
|
||||||
|
<h3>Heading for Portion 2</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora pariatur voluptate laboriosam impedit praesentium sed, nihil, dignissimos et minima recusandae quaerat enim consectetur. Molestiae assumenda distinctio, rem nostrum dolores repellendus.</p>
|
||||||
|
<div class="button">
|
||||||
|
<a href="#">Example Button</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portion">
|
||||||
|
<h2>Portion 3.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portion3" class="info">
|
||||||
|
<h3>Heading for Portion 3.</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus in vitae saepe harum soluta reiciendis eaque repellat distinctio quos voluptate nemo error ratione numquam, nisi quibusdam veritatis repudiandae ea possimus rerum pariatur dolores? Optio inventore iusto, voluptatibus numquam aperiam, harum maxime beatae minima aliquam quas sapiente totam cumque unde..</p>
|
||||||
|
<div class="button">
|
||||||
|
<a href="#">Example Button</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portion two">
|
||||||
|
<h2>Portion 4.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portion4" class="info">
|
||||||
|
<h3>Heading for Portion 4.</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni incidunt quos iste voluptates, tenetur ad repudiandae ea fuga eveniet quam, unde iure suscipit rem odit in, sint nulla itaque? Labore beatae, est voluptatibus saepe rerum illum repudiandae quasi perspiciatis, molestiae quidem fugiat voluptates voluptate neque totam earum enim mollitia iure quod tempora veritatis quam optio. Error odit laudantium eum voluptate.</p>
|
||||||
|
<div class="button">
|
||||||
|
<a href="#">Example Button</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="info">
|
||||||
|
<div id="toTop"><a href="#"><img src="http://www.superdruglookatme.com/wp-content/themes/superdrug/images/top.png"></a></div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue