Fixed, add images, and login page
This commit is contained in:
HenryGBC
parent
bd2b430742
commit
1fb15671c6
|
|
@ -56,8 +56,8 @@ h6 {
|
|||
color: #f8f8f8;
|
||||
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
max-height: 620px;
|
||||
height: 80vh;
|
||||
max-height: 820px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -113,11 +113,54 @@ h6 {
|
|||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
background: url(../img/signup-bg.png) no-repeat center center;
|
||||
background-size: cover;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
|
||||
$( document ).ready(function() {
|
||||
|
||||
init_nav();
|
||||
initBackgroundsHeader();
|
||||
});
|
||||
|
||||
|
|
@ -35,4 +35,14 @@
|
|||
_changeBg(0, arrayElements, 4000);
|
||||
}
|
||||
|
||||
function init_nav(){
|
||||
|
||||
$('.nav-local').click(function(){
|
||||
$('html, body').animate({
|
||||
scrollTop: $('#'+$(this).data('href')).offset().top
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -79,28 +79,28 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</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>
|
||||
<!-- 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="#how">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#your">Usecase</a>
|
||||
<a class="nav-local" href="javascript:void(0)" data-href="about">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#our">Why Alplora?</a>
|
||||
<a class="nav-local" href="javascript:void(0)" data-href="our" >Why Alplora?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#price">Testimonials</a>
|
||||
<a class="nav-local" href="javascript:void(0)" data-href="usecase" >Usecase</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact">Contact</a>
|
||||
<a class="nav-local" href="javascript:void(0)" data-href="testimonial" >Testimonials</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/hosting/login?next=">Login</a>
|
||||
<a class="nav-local" href="javascript:void(0)" data-href="contact" >Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'alplora:login' %}">Login</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -113,12 +113,12 @@
|
|||
|
||||
|
||||
<a name="about"></a>
|
||||
<section class="intro-header">
|
||||
<section class="intro-header" id="home">
|
||||
<!-- 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/configure.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/rails-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/banner-2.jpg' %});"></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/banner-4.jpg' %});"></div>
|
||||
<div class="intro-message">
|
||||
|
||||
<img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}">
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
|
||||
</section>
|
||||
<!-- /.intro-header -->
|
||||
<section id="whatis">
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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></section>
|
||||
<section id="portfolio" class="bg-light-gray">
|
||||
<section id="why" class="bg-light-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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>
|
||||
<!-- Page Content -->
|
||||
<a name="how"></a>
|
||||
<div class="content-section-b">
|
||||
<div class="content-section-b" id="usecase">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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 -->
|
||||
|
||||
|
||||
<a name="your"></a>
|
||||
<div class="content-section-a" id="own">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
|
@ -333,7 +330,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
|
|||
<!-- /.container -->
|
||||
|
||||
</div>
|
||||
<section id="team" class="bg-light-gray">
|
||||
<section id="testimonial" class="bg-light-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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>
|
||||
</section>
|
||||
<a name="about"></a>
|
||||
<div class="intro-header-1">
|
||||
<div class="intro-header-1" id="contact">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
from django.conf.urls import url
|
||||
|
||||
from .views import IndexView
|
||||
from .views import IndexView, LoginView
|
||||
|
||||
|
||||
urlpatterns = [
|
||||
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'^/landing/?$', LandingProgramView.as_view(), name='landing'),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,3 +3,6 @@ from django.views.generic import TemplateView
|
|||
|
||||
class IndexView(TemplateView):
|
||||
template_name = "alplora/index.html"
|
||||
|
||||
class LoginView(TemplateView):
|
||||
template_name = "alplora/login.html"
|
||||
|
|
|
|||
Loading…
Reference in New Issue