Apply design in Signup and change password, and fixed details

This commit is contained in:
Henry Bravo 2017-05-28 12:57:02 -05:00
parent 3f0a93357f
commit 67d24462ec
4 changed files with 81 additions and 45 deletions

View file

@ -196,14 +196,32 @@ h6 {
} }
/*------Auth section---------*/ /*------Auth section---------*/
.auth-container{ .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; height: 100vh;
position: relative; position: relative;
} }
.auth-bg{
background: url(../img/auth-bg.jpg);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.auth-bg::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(75, 75, 101, 0.55);
z-index: 1;
}
.auth-container .container{ .auth-container .container{
z-index: 1000; z-index: 1000;
} }
@ -214,6 +232,9 @@ h6 {
margin-top: 60px; margin-top: 60px;
} }
.auth-container .auth-title{
margin-top: 40px;
}
.auth-container .auth-title h2{ .auth-container .auth-title h2{
color: #fff; color: #fff;
font-family: 'Montserrat-Bold'; font-family: 'Montserrat-Bold';
@ -234,16 +255,7 @@ h6 {
left: 50%; left: 50%;
transform: translate(-50%, 0); 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{ .auth-box{
background: #fff; background: #fff;
padding: 0; padding: 0;
@ -253,17 +265,18 @@ h6 {
border-radius: 4px; border-radius: 4px;
z-index: 10; z-index: 10;
} }
.auth-box .section-heading{ .auth-box .section-heading{
text-align: left; color: #5a5a5a;
margin-bottom: 20px; padding-top: 20px;
background-color: rgba(33, 69, 113, 0.82); padding-bottom: 5px;
color: #fff;
padding: 10px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
font-size: 17px; font-size: 20px;
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
margin: 0 auto;
font-family: 'Montserrat-Medium';
} }
.auth-box .form{ .auth-box .form{
padding: 20px; padding: 20px;
@ -296,6 +309,14 @@ h6 {
.auth-box .auth-footer .links a:hover{ .auth-box .auth-footer .links a:hover{
color: #1e94cc; color: #1e94cc;
} }
.auth-box.sign-up{
padding-bottom: 5px;
}
.auth-box.sign-up .form{
padding: 15px 20px 0 20px;
}
@media (max-width: 1199px) { @media (max-width: 1199px) {
ul.banner-social-buttons { ul.banner-social-buttons {
float: left; float: left;

View file

@ -4,6 +4,7 @@
{% block content %} {% block content %}
<div class="auth-container"> <div class="auth-container">
<div class="auth-bg"></div>
<div class="container"> <div class="container">
<div class="auth-title"> <div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2> <h2>{% trans "Your VM hosted in Switzerland"%}</h2>

View file

@ -3,27 +3,34 @@
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<div class="intro-auth intro-reset-password"> <div class="auth-container">
<div class="auth-bg"></div>
<div class="container"> <div class="container">
<div class="col-md-4">&nbsp;</div> <div class="auth-title">
<div class="col-md-4"> <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
<div class="intro-message"> </div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Reset your password"%}</h2> <h2 class="section-heading">{% trans "Reset your password"%}</h2>
<form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate> <form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
{% csrf_token %} {% csrf_token %}
{% for field in form %} {% for field in form %}
{% bootstrap_field field show_label=False %} {% bootstrap_field field show_label=False %}
{% endfor %} {% endfor %}
{% buttons %} {% buttons %}
<button type="submit" class="btn btn-default"> <button type="submit" class="btn btn-block btn-success">
{% trans "Reset"%} {% trans "Reset"%}
</button> </button>
{% endbuttons %} {% endbuttons %}
</form> </form>
<span>{% trans "Already have an account ?"%} <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%} </a></span> <div class="auth-footer">
<ul class="list-inline intro-social-buttons"> <div class="text">
</ul> <span>{% trans "Already have an account ?"%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -2,27 +2,34 @@
{% load staticfiles bootstrap3 i18n %} {% load staticfiles bootstrap3 i18n %}
{% block content %} {% block content %}
<div class="intro-auth intro-signup"> <div class="auth-container">
<div class="auth-bg"></div>
<div class="container"> <div class="container">
<div class="col-md-4 col-sm-4 col-xs-4">&nbsp;</div> <div class="auth-title">
<div class="col-md-4 col-sm-6 col-xs-6"> <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
<div class="intro-message"> </div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Sign up"%}</h2> <h2 class="section-heading">{% trans "Sign up"%}</h2>
<form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate> <form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate>
{% csrf_token %} {% csrf_token %}
{% for field in form %} {% for field in form %}
{% bootstrap_field field show_label=False %} {% bootstrap_field field show_label=False %}
{% endfor %} {% endfor %}
{% buttons %} {% buttons %}
<button type="submit" class="btn btn-default"> <button type="submit" class="btn btn-block btn-info">
{% trans "Sign up"%} {% trans "Sign up"%}
</button> </button>
{% endbuttons %} {% endbuttons %}
</form> </form>
<span>{% trans "Already have an account ?"%} <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a></span> <div class="auth-footer">
<ul class="list-inline intro-social-buttons"> <div class="text">
</ul> <span>{% trans "Already have an account ?"%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>