Skip to content

Commit

Permalink
template for front end
Browse files Browse the repository at this point in the history
  • Loading branch information
AlyonaB committed Nov 18, 2017
1 parent c31cdc3 commit 98345c9
Show file tree
Hide file tree
Showing 55 changed files with 35,459 additions and 9 deletions.
152 changes: 152 additions & 0 deletions src/main/webapp/css/landing-page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/*!
* Start Bootstrap - Landing Page (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/

body, html {
width: 100%;
height: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}

.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
}

.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}

.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}

.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.intro-social-buttons i {
font-size: 80%;
}

@media(max-width:767px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message>h1 {
font-size: 3em;
}
ul.intro-social-buttons>li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons>li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}

.network-name {
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
letter-spacing: 2px;
}

.content-section-a {
padding: 50px 0;
background-color: #f8f8f8;
}

.content-section-b {
padding: 50px 0;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
}

.section-heading {
margin-bottom: 30px;
}

.section-heading-spacer {
float: left;
width: 200px;
border-top: 3px solid #e7e7e7;
}

.banner {
padding: 100px 0;
color: #f8f8f8;
background: url(../img/banner-bg.jpg) no-repeat center center;
background-size: cover;
}

.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 3em;
}

.banner ul {
margin-bottom: 0;
}

.banner-social-buttons {
float: right;
margin-top: 0;
}

@media(max-width:1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}

@media(max-width:767px) {
.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 3em;
}
ul.banner-social-buttons>li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons>li:last-child {
margin-bottom: 0;
}
}

footer {
padding: 50px 0;
background-color: #f8f8f8;
}

p.copyright {
margin: 15px 0 0;
}
Binary file added src/main/webapp/img/banner-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/webapp/img/dog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/webapp/img/intro-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/webapp/img/ipad.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/webapp/img/phones.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
206 changes: 197 additions & 9 deletions src/main/webapp/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
<meta name="description" content="">
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

<!-- Custom styles for this template -->
<link href="css/landing-page.css" rel="stylesheet">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css content/css/vendor.css -->
<!-- bower:css -->
Expand All @@ -26,18 +36,196 @@
<![endif]-->
<page-ribbon></page-ribbon>
<div ui-view="navbar" ng-cloak></div>
<div class="container">
<div class="well" ui-view="content">
<!-- Angular views -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<h1>Landing Page</h1>
<h3>A Template by Start Bootstrap</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-twitter fa-fw"></i>
<span class="network-name">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-github fa-fw"></i>
<span class="network-name">Github</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-linkedin fa-fw"></i>
<span class="network-name">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</header>


<section class="content-section-a">

<div class="container">
<div class="row">
<div class="col-lg-5 ml-auto">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to
<a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>
for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 mr-auto">
<img class="img-fluid" src="img/ipad.png" alt="">
</div>
</div>

</div>
<!-- /.container -->
</section>

<section class="content-section-b">

<div class="container">

<div class="row">
<div class="col-lg-5 mr-auto order-lg-2">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">3D Device Mockups<br>by PSDCovers</h2>
<p class="lead">Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by
<a target="_blank" href="http://www.psdcovers.com/">PSDCovers</a>! Visit their website to download some of their awesome, free photoshop actions!</p>
</div>
<div class="col-lg-5 ml-auto order-lg-1">
<img class="img-fluid" src="img/dog.png" alt="">
</div>
</div>

</div>
<!-- /.container -->

</section>
<!-- /.content-section-b -->

<section class="content-section-a">

<div class="container">

<div class="row">
<div class="col-lg-5 ml-auto">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Google Web Fonts and<br>Font Awesome Icons</h2>
<p class="lead">This template features the 'Lato' font, part of the
<a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as
<a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
</div>
<div class="col-lg-5 mr-auto ">
<img class="img-fluid" src="img/phones.png" alt="">
</div>
</div>

<div class="footer" ng-cloak>
<p data-translate="footer">This is your footer</p>
</div>
</div>
<noscript>
<h1>You must enable javascript to view this page.</h1>
</noscript>
<!-- /.container -->

</section>
<!-- /.content-section-a -->

<aside class="banner">

<div class="container">

<div class="row">
<div class="col-lg-6 my-auto">
<h2>Connect to Start Bootstrap:</h2>
</div>
<div class="col-lg-6 my-auto">
<ul class="list-inline banner-social-buttons">
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-twitter fa-fw"></i>
<span class="network-name">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-github fa-fw"></i>
<span class="network-name">Github</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-secondary btn-lg">
<i class="fa fa-linkedin fa-fw"></i>
<span class="network-name">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>

</div>
<!-- /.container -->

</aside>
<!-- /.banner -->

<!-- Footer -->
<footer>
<div class="container">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">Home</a>
</li>
<li class="footer-menu-divider list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#about">About</a>
</li>
<li class="footer-menu-divider list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#services">Services</a>
</li>
<li class="footer-menu-divider list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright &copy; Your Company 2017. All Rights Reserved</p>
</div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- uncomment this for adding service worker
<script>
if ('serviceWorker' in navigator) {
Expand Down
Loading

0 comments on commit 98345c9

Please sign in to comment.