Login page design new styles

This commit is contained in:
Henry Bravo 2017-05-28 00:44:36 -05:00
parent 8d8b387cc7
commit 3f0a93357f
4 changed files with 167 additions and 39 deletions

View file

@ -82,24 +82,25 @@ h6 {
text-align: center; text-align: center;
color: #f8f8f8; color: #f8f8f8;
position: relative; position: relative;
padding-bottom: 25%;
padding-top: 10%;
} }
.intro-login { .intro-login {
background: url(../img/login-bg.jpg) no-repeat center center; background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
} }
.intro-signup { .intro-signup {
background: url(../img/signup-bg.png) no-repeat center center; background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
display: flex;
justify-content: center;
align-items: center;
} }
.intro-reset-password { .intro-reset-password {
background: url(../img/signup-bg.png) no-repeat center center; background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
} }
@ -193,7 +194,108 @@ h6 {
float: right; float: right;
margin-top: 0; margin-top: 0;
} }
/*------Auth section---------*/
.auth-container{
display: flex;
align-items: center;
justify-content: center;
background: url(../img/auth-bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
position: relative;
}
.auth-container .container{
z-index: 1000;
}
.auth-container .auth-content{
width: 80%;
margin: 0 auto;
max-width: 390px;
margin-top: 60px;
}
.auth-container .auth-title h2{
color: #fff;
font-family: 'Montserrat-Bold';
font-size: 44px;
text-align: center;
width: 425px;
margin: 0 auto;
margin-bottom: 30px;
position: relative;
}
.auth-container .auth-title h2::after{
content: "";
position: absolute;
bottom: -20px;
background: #fff;
height: 7px;
width: 70px;
left: 50%;
transform: translate(-50%, 0);
}
.auth-container::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(75, 75, 101, 0.55);
z-index: 1;
}
.auth-box{
background: #fff;
padding: 0;
padding-bottom: 30px;
box-sizing: border-box;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
border-radius: 4px;
z-index: 10;
}
.auth-box .section-heading{
text-align: left;
margin-bottom: 20px;
background-color: rgba(33, 69, 113, 0.82);
color: #fff;
padding: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 17px;
border-radius: 3px 3px 0px 0px;
}
.auth-box .form{
padding: 20px;
width: 80%;
margin: 0 auto;
}
.auth-box .form .red{
color: #ea3a3a;
}
.auth-box .form .btn{
box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23);
letter-spacing: 3px;
font-size: 17px;
text-transform: uppercase;
}
.auth-box .form .form-control{
height: 44px;
font-size: 16px;
}
.auth-box .auth-footer {
text-align: center;
padding: 10px;
}
.auth-box .auth-footer .text{
color: #777;
}
.auth-box .auth-footer .links a{
color: #1e94cc;
}
.auth-box .auth-footer .links a:hover{
color: #1e94cc;
}
@media (max-width: 1199px) { @media (max-width: 1199px) {
ul.banner-social-buttons { ul.banner-social-buttons {
float: left; float: left;
@ -218,7 +320,17 @@ h6 {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (max-width: 540px) {
.auth-container .auth-title h2{
font-size: 32px;
width: 90%;
margin-bottom: 50px;
}
.auth-box .form {
padding: 15px;
width: 90%;
}
}
footer { footer {
padding: 2%; padding: 2%;
background-color: #f8f8f8; background-color: #f8f8f8;
@ -251,3 +363,4 @@ a.unlink {
a.unlink:hover { a.unlink:hover {
color: inherit; color: inherit;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 KiB

View file

@ -44,6 +44,7 @@
<!-- Navigation --> <!-- Navigation -->
{% if request.user.is_authenticated %}
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav"> <div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
@ -61,7 +62,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li> <li>
<a href="{% url 'hosting:virtual_machines' %}"> <a href="{% url 'hosting:virtual_machines' %}">
<i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%} <i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%}
@ -89,7 +90,7 @@
<li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li> <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
</ul> </ul>
</li> </li>
{% else %} <!--
<li> <li>
<a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a> <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
</li> </li>
@ -107,8 +108,7 @@
</li> </li>
<li> <li>
<a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a> <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
</li> </li> -->
{% endif %}
</ul> </ul>
</div> </div>
<!-- /.navbar-collapse --> <!-- /.navbar-collapse -->
@ -116,6 +116,7 @@
<!-- /.container --> <!-- /.container -->
</nav> </nav>
{% endif %}
<!-- Header --> <!-- Header -->
<a name="about"></a> <a name="about"></a>
@ -123,6 +124,7 @@
{% endblock %} {% endblock %}
<!-- Footer --> <!-- Footer -->
{% if request.user.is_authenticated %}
<footer class="navbar-fixed-bottom"> <footer class="navbar-fixed-bottom">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -133,20 +135,28 @@
</li> </li>
<li class="footer-menu-divider">&sdot;</li> <li class="footer-menu-divider">&sdot;</li>
<li> <li>
<a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a> <a href="{% url 'hosting:virtual_machines' %}">
<li class="footer-menu-divider">&sdot;</li> {% trans "My Virtual Machines"%}
<li> </a>
<a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a></li>
<li>&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a></li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#services">{% trans "Pricing"%}</a>
</li> </li>
<li class="footer-menu-divider">&sdot;</li> <li class="footer-menu-divider">&sdot;</li>
<li> <li>
<a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a> <a href="{% url 'hosting:orders' %}">
{% trans "My Orders"%}
</a>
</li>
<li>&sdot;</li>
<li>
<li>
<a href="{% url 'hosting:key_pair' %}">
{% trans "Keys"%}
</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{% url 'hosting:notifications' %}">
{% trans "Notifications "%}
</a>
</li> </li>
</ul> </ul>
@ -155,7 +165,7 @@
</div> </div>
</div> </div>
</footer> </footer>
{% endif %}
<!-- jQuery --> <!-- jQuery -->
<script src="{% static 'hosting/js/jquery.js' %}"></script> <script src="{% static 'hosting/js/jquery.js' %}"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

View file

@ -3,12 +3,15 @@
{% load staticfiles bootstrap3%} {% load staticfiles bootstrap3%}
{% block content %} {% block content %}
<div class="intro-auth intro-login"> <div class="auth-container">
<div class="container"> <div class="container">
<div class="col-md-4 col-md-offset-4"> <div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
{% if messages %} {% if messages %}
<ul class="list-unstyled"> <ul class="list-unstyled" style="color: #fff">
{% for message in messages %} {% for message in messages %}
<li>{{ message }}</li> <li>{{ message }}</li>
{% endfor %} {% endfor %}
@ -24,30 +27,32 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
<div class="intro-message auth-box">
<div class="intro-message">
<h2 class="section-heading">{% trans "Login"%}</h2> <h2 class="section-heading">{% trans "Login"%}</h2>
<form action="{% url 'hosting:login' %}" method="post" class="form" novalidated> <form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
{% csrf_token %} {% csrf_token %}
{% for field in form %} {% for field in form %}
{% bootstrap_field field show_label=False type='fields'%} {% bootstrap_field field show_label=False type='fields'%}
{% endfor %} {% endfor %}
<p>{{form.non_field_errors|striptags}}</p> <p class="red">{{form.non_field_errors|striptags}}</p>
{% buttons %} {% buttons %}
<button type="submit" class="btn btn-default"> <button type="submit" class="btn btn-block btn-success">
{% trans "Login"%} {% trans "Login"%}
</button> </button>
{% endbuttons %} {% endbuttons %}
<input type='hidden' name='next' value='{{request.GET.next}}'/> <input type='hidden' name='next' value='{{request.GET.next}}'/>
</form> </form>
<span>{% trans "Don't have an account yet ? "%}<a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a></span> <div class="auth-footer">
<br/> <div class="text">
<span> <a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a></span> <span>{% trans "Don't have an account yet ? "%}</span>
</div>
<ul class="list-inline intro-social-buttons"> <div class="links">
<a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a>
</ul> <span class="text"> or </span>
<a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>