Fixed, add images, and login page

This commit is contained in:
HenryGBC 2017-02-16 02:45:00 -04:30
parent bd2b430742
commit 1fb15671c6
10 changed files with 315 additions and 28 deletions

View file

@ -56,8 +56,8 @@ h6 {
color: #f8f8f8; color: #f8f8f8;
width: 100%; width: 100%;
height: 70vh; height: 80vh;
max-height: 620px; max-height: 820px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -113,11 +113,54 @@ h6 {
} }
.intro-login { .intro-login {
background: url(../img/login-bg.jpg) no-repeat center center; background: url(../img/banner-4.jpg) no-repeat center center;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
} }
.section-login{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.section-login .box-login{
background: #fff;
padding: 60px;
text-align: center;
border-radius: 4px;
}
.section-login .box-login img{
width: 200px;
}
.section-login .title h1{
font-size: 41px;
}
.section-login .description{
font-size: 20px;
border-bottom: 3px solid #737373;
margin-bottom: 44px;
padding-bottom: 9px;
width: 96px;
margin: 0 auto;
margin-bottom: 44px;
}
.section-login .text{
margin: 5px 10px;
color: #797979;
}
.section-login .text a{
color: #0056c1;
}
.btn-red{
background: #980000;
}
.section-login .btn-login{
color: #fff;
font-weight: 700;
padding: 10px 20px;
text-transform: uppercase;
}
.intro-signup { .intro-signup {
background: url(../img/signup-bg.png) no-repeat center center; background: url(../img/signup-bg.png) no-repeat center center;
background-size: cover; background-size: cover;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 MiB

View file

@ -14,7 +14,7 @@
$( document ).ready(function() { $( document ).ready(function() {
init_nav();
initBackgroundsHeader(); initBackgroundsHeader();
}); });
@ -35,4 +35,14 @@
_changeBg(0, arrayElements, 4000); _changeBg(0, arrayElements, 4000);
} }
function init_nav(){
$('.nav-local').click(function(){
$('html, body').animate({
scrollTop: $('#'+$(this).data('href')).offset().top
});
});
}
})(jQuery); })(jQuery);

View file

@ -79,28 +79,28 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand topnav" href="/en-us/"><img src="{% static 'alplora/img/logo_black.svg'%}"></a> <a class="navbar-brand topnav" href="{% url 'alplora:index' %}"><img src="{% static 'alplora/img/logo_black.svg'%}"></a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<a href="#how">About</a> <a class="nav-local" href="javascript:void(0)" data-href="about">About</a>
</li> </li>
<li> <li>
<a href="#your">Usecase</a> <a class="nav-local" href="javascript:void(0)" data-href="our" >Why Alplora?</a>
</li> </li>
<li> <li>
<a href="#our">Why Alplora?</a> <a class="nav-local" href="javascript:void(0)" data-href="usecase" >Usecase</a>
</li> </li>
<li> <li>
<a href="#price">Testimonials</a> <a class="nav-local" href="javascript:void(0)" data-href="testimonial" >Testimonials</a>
</li> </li>
<li> <li>
<a href="#contact">Contact</a> <a class="nav-local" href="javascript:void(0)" data-href="contact" >Contact</a>
</li> </li>
<li> <li>
<a href="/hosting/login?next=">Login</a> <a href="{% url 'alplora:login' %}">Login</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -113,12 +113,12 @@
<a name="about"></a> <a name="about"></a>
<section class="intro-header"> <section class="intro-header" id="home">
<!-- Add images backgrounds url(url-image); --> <!-- Add images backgrounds url(url-image); -->
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/intro-bg.png' %});"></div> <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-1.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/configure.jpg' %});"></div> <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-2.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/django-intro-bg.png' %});"></div> <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-3.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/rails-intro-bg.png' %});"></div> <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-4.jpg' %});"></div>
<div class="intro-message"> <div class="intro-message">
<img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}"> <img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}">
@ -139,7 +139,7 @@
</section> </section>
<!-- /.intro-header --> <!-- /.intro-header -->
<section id="whatis"> <section id="about">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="col-lg-12 text-center wow fadeInDown">
@ -221,7 +221,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
</div> </div>
</div> </div>
</div></section> </div></section>
<section id="portfolio" class="bg-light-gray"> <section id="why" class="bg-light-gray">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="col-lg-12 text-center wow fadeInDown">
@ -258,8 +258,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
</section> </section>
<!-- Page Content --> <!-- Page Content -->
<a name="how"></a> <div class="content-section-b" id="usecase">
<div class="content-section-b">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 wow text-center fadeInDown"> <div class="col-lg-12 wow text-center fadeInDown">
@ -273,8 +272,6 @@ Alplora is just like a cattle bell, but much better.<p></p>
<!-- Your Infrastructure --> <!-- Your Infrastructure -->
<a name="your"></a>
<div class="content-section-a" id="own"> <div class="content-section-a" id="own">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -333,7 +330,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
<!-- /.container --> <!-- /.container -->
</div> </div>
<section id="team" class="bg-light-gray"> <section id="testimonial" class="bg-light-gray">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-16 text-center center-block wow fadeInDown"> <div class="col-sm-16 text-center center-block wow fadeInDown">
@ -390,8 +387,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
</div> </div>
</div> </div>
</section> </section>
<a name="about"></a> <div class="intro-header-1" id="contact">
<div class="intro-header-1">
<div class="container"> <div class="container">
<div class="row"> <div class="row">

View file

@ -0,0 +1,234 @@
{% load staticfiles i18n%}
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Alplora.ch - Find your animal anywhere, anytime</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'alplora/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'alplora/css/pricing.css' %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static 'alplora/css/alplora.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="{% static 'alplora/font-awesome/css/font-awesome.min.css' %}">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="{% static 'alplora/img/favicon.ico' %}" type="image/x-icon">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-feedly-mini="yes">
<script async src="//www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62285904-5', 'auto');
ga('send', 'pageview');
</script>
<div class="page-loader">
<div class="loader">
<div class="circle circle-1"></div>
<div class="line line-1"></div>
<div class="circle circle-2"></div>
<div class="line line-2"></div>
<div class="circle circle-3"></div>
<div class="line line-3"></div>
<div class="circle circle-4"></div>
<div class="line line-4"></div>
<div class="circle circle-5"></div>
</div>
</div>
<!-- Navigation -->
<div class="page-loader">
<div class="loader">
<div class="circle circle-1"></div>
<div class="line line-1"></div>
<div class="circle circle-2"></div>
<div class="line line-2"></div>
<div class="circle circle-3"></div>
<div class="line line-3"></div>
<div class="circle circle-4"></div>
<div class="line line-4"></div>
<div class="circle circle-5"></div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="{% url 'alplora:index' %}"><img src="{% static 'alplora/img/logo_black.svg'%}"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/alplora#about" data>About</a>
</li>
<li>
<a href="/alplora#usecase">Usecase</a>
</li>
<li>
<a href="/alplora#why">Why Alplora?</a>
</li>
<li>
<a href="/alplora#testimonials">Testimonials</a>
</li>
<li>
<a href="/alplora#contact">Contact</a>
</li>
<li>
<a href="/alplora#login">Login</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="section-login intro-login">
<div class="box-login">
<img src="{% static 'alplora/img/logo_black.svg'%}">
<div class="title">
<h1>Login</h1>
</div>
<div class="description">
Welcome
</div>
<div class="form">
<form action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
</div>
<div class="text"><span>By loggin in you agree to our <a href="#">Terms of Service</a></span></div>
<div class="btn-login">
<button class="submit btn btn-red btn-login btn-round" type="submit">
<span>Login</span>
</button>
</div>
<div class="text"><span>Forgot Password <a href="#">Find ID/Password</a></span></div>
<div class="text"><span>Not a member yet? <a href="#">Sign up</a> now</span></div>
</div>
</section>
<!-- Header -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Alplora </h3>
<p><i class="fa fa-envelope-o"></i> info@alplora.ch</p>
<p>In der Au 7 Schwanden 8762</p>
<p>Switzerland</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider"></li>
<li>
<a href="#about">About</a></li>
<li class="footer-menu-divider"></li>
<li>
<a href="#about">Usecase</a></li>
<li></li>
<li>
<a href="#about">Why Alplora?</a></li>
<li class="footer-menu-divider"></li>
<li>
<a href="#services">Testimonials</a>
</li>
<li class="footer-menu-divider"></li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<div class="col-xs-6 col-lg-4"></div>
<div class="col-xs-6 col-lg-8 text-right">
<a href="www.ungleich.ch">
<img src="{% static 'alplora/img/ungleich_logo.svg'%}">
<img src="{% static 'alplora/img/digitalglarus_logo.svg'%}">
<img src="{% static 'alplora/img/adnexo_logo.svg'%}">
</div>
<p class="copyright text-muted small">Copyright © Alplora 2017. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- Lodash -->
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.min.js"></script>
<!-- jQuery -->
<script src="{% static 'alplora/js/jquery.js' %}"></script>
<!-- Pricing -->
<script src="{% static 'alplora/js/pricing.js' %}"></script>
<!-- Images loaded -->
<script type="text/javascript" src="{% static 'alplora/js/imagesloaded.pkgd.min.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'alplora/js/bootstrap.min.js' %}"></script>
<script src="{% static 'alplora/js/main.js' %}"></script>
</body>
</html>

View file

@ -1,10 +1,11 @@
from django.conf.urls import url from django.conf.urls import url
from .views import IndexView from .views import IndexView, LoginView
urlpatterns = [ urlpatterns = [
url(r'^/?$', IndexView.as_view(), name='index'), url(r'^/?$', IndexView.as_view(), name='index'),
url(r'/login/', LoginView.as_view(), name='login'),
# url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'), # url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
# url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'), # url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
] ]

View file

@ -3,3 +3,6 @@ from django.views.generic import TemplateView
class IndexView(TemplateView): class IndexView(TemplateView):
template_name = "alplora/index.html" template_name = "alplora/index.html"
class LoginView(TemplateView):
template_name = "alplora/login.html"