Login page design new styles

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

@@ -82,24 +82,25 @@ h6 {
     text-align: center;
     color: #f8f8f8;
     position: relative;
-    padding-bottom: 25%;
-    padding-top: 10%;
 }
 
 .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;
     height: 100%;
 }
 
 .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;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .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;
     height: 100%;
 }
@@ -193,7 +194,108 @@ h6 {
     float: right;
     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) {
     ul.banner-social-buttons {
         float: left;
@@ -218,7 +320,17 @@ h6 {
         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 {
     padding: 2%;
     background-color: #f8f8f8;
@@ -250,4 +362,5 @@ a.unlink {
 
 a.unlink:hover {
     color: inherit;
-}
+}
+

hosting/templates/hosting/base_short.html

@@ -44,6 +44,7 @@
 
 
     <!-- Navigation -->
+    {% if request.user.is_authenticated %}
     <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
         <div class="container topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -61,7 +62,7 @@
                 <ul class="nav navbar-nav navbar-right">
 
 
-                    {% if request.user.is_authenticated %}
+                    
                         <li>
                             <a href="{% url 'hosting: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>
                           </ul>
                         </li>
-                    {% else %}
+                        <!-- 
                         <li>
                             <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
                         </li>
@@ -107,8 +108,7 @@
                         </li>  
                         <li>
                             <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
-                        </li> 
+                        </li>  -->
-                    {% endif %}
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
@@ -116,6 +116,7 @@
         <!-- /.container -->
     </nav>
 
+    {% endif %}
 
     <!-- Header -->
     <a name="about"></a>
@@ -123,6 +124,7 @@
     {% endblock %}
 
     <!-- Footer -->
+    {% if request.user.is_authenticated %}
     <footer class="navbar-fixed-bottom">
         <div class="container">
             <div class="row">
@@ -133,20 +135,28 @@
                         </li>
                         <li class="footer-menu-divider">&sdot;</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 class="footer-menu-divider">&sdot;</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>
 
                     </ul>
@@ -155,7 +165,7 @@
             </div>
         </div>
     </footer>
-
+    {% endif %}
     <!-- jQuery -->
     <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>

hosting/templates/hosting/login.html

@@ -3,12 +3,15 @@
 {% load staticfiles bootstrap3%}
 {% block content %}
 
-<div class="intro-auth intro-login">
+<div class="auth-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 %}
-                    <ul class="list-unstyled">
+                    <ul class="list-unstyled" style="color: #fff">
                     {% for message in messages %}
                         <li>{{ message }}</li>
                     {% endfor %}
@@ -23,31 +26,33 @@
                             </div>
                     {% endif %}
                 {% endblock %}
-
+    
-
+                <div class="intro-message auth-box">
-                <div class="intro-message">
                     <h2 class="section-heading">{% trans "Login"%}</h2>
                     <form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False type='fields'%}
                         {% endfor %}
-                        <p>{{form.non_field_errors|striptags}}</p>
+                        <p class="red">{{form.non_field_errors|striptags}}</p>
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-success">
                                 {% trans "Login"%}
                             </button>
                         {% endbuttons %}
 						
 						<input type='hidden' name='next' value='{{request.GET.next}}'/> 
                     </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>