Apply design in Signup and change password, and fixed details

hosting/static/hosting/css/landing-page.css

@@ -196,14 +196,32 @@ h6 {
 }
 /*------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-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{
     z-index: 1000;
 }
@@ -214,6 +232,9 @@ h6 {
     margin-top: 60px;
 
 }
+.auth-container .auth-title{
+    margin-top: 40px;
+}
 .auth-container .auth-title h2{
     color: #fff;
     font-family: 'Montserrat-Bold';
@@ -234,16 +255,7 @@ h6 {
     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;
@@ -253,17 +265,18 @@ h6 {
     border-radius: 4px;
     z-index: 10;
 }
+
 .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-transform: uppercase;
     letter-spacing: 3px;
-    font-size: 17px;
+    font-size: 20px;
     border-radius: 3px 3px 0px 0px;
+    margin: 0 auto;
+    font-family: 'Montserrat-Medium';
 }
 .auth-box .form{
     padding: 20px;
@@ -296,6 +309,14 @@ h6 {
 .auth-box .auth-footer .links a:hover{
     color: #1e94cc;
 }
+
+.auth-box.sign-up{
+    padding-bottom: 5px;
+}
+.auth-box.sign-up .form{
+    padding: 15px 20px 0 20px;
+}
+
 @media (max-width: 1199px) {
     ul.banner-social-buttons {
         float: left;

hosting/templates/hosting/login.html

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

hosting/templates/hosting/reset_password.html

@@ -3,29 +3,36 @@
 {% load i18n %}
 
 {% block content %}
-    <div class="intro-auth intro-reset-password">
+<div class="auth-container">
+   <div class="auth-bg"></div>
     <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>
-
                     <form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False %}
                         {% endfor %}
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-success">
                                 {% trans "Reset"%}
                             </button>
                         {% endbuttons %}
                     </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>
 {% endblock %}

hosting/templates/hosting/signup.html

@@ -2,29 +2,36 @@
 {% load staticfiles bootstrap3 i18n %}
 
 {% block content %}
-    <div class="intro-auth intro-signup">
+<div class="auth-container">
+   <div class="auth-bg"></div>
     <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>
-
                     <form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False %}
                         {% endfor %}
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-info">
                                 {% trans "Sign up"%}
                             </button>
                         {% endbuttons %}
                     </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>
 {% endblock %}