Redesign DCL Page

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -3,7 +3,22 @@
  * Code licensed under the Apache License v2.0.
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
-
+@font-face {
+    font-family: 'Montserrat-Regular';
+    src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
+}
+@font-face {
+    font-family: 'Montserrat-Bold';
+    src: url('../fonts/Montserrat/Montserrat-Bold.ttf');
+}
+@font-face {
+    font-family: 'Montserrat-Medium';
+    src: url('../fonts/Montserrat/Montserrat-Medium.ttf');
+}
+@font-face {
+    font-family: 'Montserrat-Light';
+    src: url('../fonts/Montserrat/Montserrat-Light.ttf');
+}
 body,
 html {
     width: 100%;
@@ -17,10 +32,11 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: 'Raleway' , "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'Montserrat-Regular', sans-serif;
     font-weight: 700;
 }
-
+/*blue light #5A74AF*/
+/*blue dark #29427A*/
 .topnav {
     font-size: 14px; 
 }
@@ -29,35 +45,154 @@ h6 {
     font-size: 18px;
     font-weight: 400;
 }
-
+.btn{
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+}
+.fa-li.fa-lg {
+    color: #29427A;
+    margin-top: 6px;
+}
+.btn-transparent{
+    background: transparent;
+    border: 2px solid #fff;
+    color: #fff;
+    transition: all .2s ease-in;
+}
+.btn-primary{
+    background: #29427A;
+    border-color: #29427A;
+    color: #fff;
+    width: auto;
+}
+.btn-primary:hover{
+    background: rgba(41, 66, 122, 0.8);
+    border-color: #29427A;
+}
+.btn-transparent:hover{
+    background: #fff;
+    border: 2px solid #fff;
+    color: #000;
+    transition: all .2s ease-in;
+}
+.btn-info {
+    color: #fff;
+    background-color: #5A74AF;
+    border-color: #5A74AF;
+}
+.btn-info:hover {
+    color: #fff;
+    background-color: rgba(90, 116, 175, 0.8);
+    border-color: #5A74AF;
+}
+.btn-lg{
+    min-width: 180px;
+}
+#logoWhite{
+    display: none;
+}
+#logoBlack{
+    display: block;
+}
+.navbar{
+    transition: all .3s ease-in;
+}
+.navbar-default{
+    background: #fff;
+    border: none;
+    padding: 5px;
+}
+.navbar-transparent{
+    background: transparent;
+    border: none;
+    padding: 20px;
+}
+.navbar-transparent #logoBlack{
+    display: none;
+}
+.navbar-transparent #logoWhite{
+    display: block;
+    width: 220px;
+}
+.navbar-default .navbar-nav>li>a {
+    cursor: pointer;
+}
+.navbar-transparent .navbar-nav>li>a {
+    color: #fff;
+    font-size: 17px;
+    cursor: pointer;
+}
+.navbar-transparent .navbar-nav>li>a:hover {
+    color: #fff;
+}
+.navbar-default .btn-link {
+    box-shadow: none;
+}
+.navbar-brand {
+    padding: 10px 15px;
+    cursor: pointer;
+}
 .intro-header {
-    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
+    height: 100vh;
-    padding-bottom: 50px;
     text-align: center;
-    color: #f8f8f8;
+    color: #fff;
-    background: url(../img/intro-bg.jpg) no-repeat center center;
+    background: url(../img/configure.jpg) no-repeat center center;
     background-size: cover;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.intro-header::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(90, 116, 175, 0.7);
 }
 .intro-header-1 {
     padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
     padding-bottom: 50px;
     text-align: center;
-    color: #f8f8f8;
+    color: #fff;
     background: url(../img/configure.jpg) no-repeat center center;
     background-size: cover;
+    position: relative;
+}
+.intro-header-1::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(90, 116, 175, 0.36);
 }
 .intro-header-2 {
     padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
     padding-bottom: 50px;
     text-align: center;
     color: #f8f8f8;
-    background: url(../img/configure.jpg) no-repeat center center;
+    background: url(../img/banner-bg.jpg) no-repeat center center;
     background-size: cover;
+    position: relative;
+}
+.intro-header-2::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(41, 66, 122, 0.59);
 }
 .intro-message {
     position: relative;
-    padding-top: 20%;
+     width: 80%;
-    padding-bottom: 20%;
+    margin: 0 auto;
+
 }
 .intro-signup {
     position: relative;
@@ -68,7 +203,8 @@ h6 {
 .intro-message > h1 {
     margin: 0;
     font-weight: 400;
-    font-size: 5em;
+    font-size: 6em;
+    font-family: 'Montserrat-Medium';
 }
 
 .intro-divider {
@@ -79,9 +215,275 @@ h6 {
 
 .intro-message > h3 {
     font-weight: 300;
+    font-family: 'Montserrat-Light';
+}
+.split-section {
+    padding: 70px 0;
+}
+.split-section .icon-section{
+    position: relative;
+    min-height: 330px;
+}
+.split-section .icon-section i{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 216px;
+    color: #5A74AF;
+}
+.split-section .split-text .lead{
+    font-size: 21px;
+    color: #3a3a3a;
+}
+.split-section .split-text .split-title{
+    position: relative;
+    margin-bottom: 25px;
+}
+.split-section .split-text .split-title h2{
+    font-family: 'Montserrat-Bold';
+    font-size: 50px;
+    line-height: 50px;
+    padding-bottom: 25px;
+    color: #3a3a3a;
+    letter-spacing: 3px;
+}
+.split-section.left{
+  background: -webkit-linear-gradient(#f0f4f7, #fff) no-repeat;
+  background: -o-linear-gradient(#f0f4f7, #fff) no-repeat;
+  background: linear-gradient(#f0f4f7, #fff) no-repeat;  
 }
 
-@media(max-width:767px) {
+.split-section.left .split-description{
+    width: 90%;
+    margin-right: auto;
+}
+.split-section.right .split-description{
+    width: 90%;
+    margin-left: auto;
+}
+.split-section.right .split-text {
+    text-align: right;
+}
+.split-section.right .split-text  ul{
+    text-align: left;
+}
+.split-section.left .split-text {
+    text-align: left;
+}
+
+.split-section.right .split-text .split-title h2{
+    text-align: right;
+}
+.split-section.left .split-text .split-title h2{
+    text-align: left;
+}
+.split-section.right .split-text .split-title::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #29427A;
+    height: 7px;
+    width: 70px;
+    right: 0;
+}
+.split-section.left .split-text .split-title::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #29427A;
+    height: 7px;
+    width: 70px;
+    left: 0;
+}
+.pricing-section{
+    padding: 80px 0 !important;
+    background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
+    background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
+}
+
+.pricing-section .card{
+    width: 350px;
+    margin: 0 auto;
+    background: #fff;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    padding-bottom: 40px;
+    border-radius: 7px;
+}
+.pricing-section .card .title{
+    padding: 15px 40px;
+    font-family: 'Montserrat-Medium';
+}
+.pricing-section .card .title h3{
+    font-family: 'Montserrat-Medium';
+}
+.pricing-section .card .price{
+    background: #5A74AF;
+    padding: 22px;
+    color: #fff;
+    font-size: 32px;
+}
+.pricing-section .card .description{
+    padding: 12px;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+}
+.pricing-section .card .descriptions{
+    padding: 10px 30px;
+}
+.pricing-section .card .description p{
+    margin: 0;
+}
+.pricing-section .card .btn{
+    margin-top: 20px;
+}
+.pricing-section .text{
+    text-align: left;
+}
+.pricing-section .text .section-heading{
+    font-family: 'Montserrat-Bold';
+    font-size: 50px;
+    line-height: 50px;
+    padding-bottom: 25px;
+    color: #3a3a3a;
+    letter-spacing: 1px;
+    position: relative;
+}
+.pricing-section .text .section-heading::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #29427A;
+    height: 7px;
+    width: 70px;
+    left: 0;
+}
+.request-section{
+    background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699));
+    background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%);
+    padding: 70px 0;
+}
+.request-section .title h2{
+    font-family: 'Montserrat-Bold';
+    font-size: 65px;
+    margin: 0;
+    color: #fff;
+    padding-bottom: 25px;
+    position: relative;
+}
+.request-section .title h2::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #fff;
+    height: 7px;
+    width: 70px;
+    left: 0;
+}
+.request-section .form-beta{
+    width: 80%;
+    margin: 0 auto;
+    max-width: 350px;
+    text-align: center;
+
+}
+.request-section .form-beta input{
+     height: 50px;
+}
+.request-section .form-beta input{
+     height: 50px;
+}
+.request-section .form-beta .btn-lg{
+    width: 100%;
+    font-size: 16px;
+}
+.banner {
+    padding: 100px 0;
+    color: #fff;
+    background: url(../img/banner-bg.jpg) no-repeat center center;
+    background-size: cover;
+    position: relative;
+}
+.full-contact-section{
+    padding-top: 90px;
+    background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699));
+    background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%);
+}
+
+.contact-section {
+    padding: 60px 0;
+    color: #fff;
+    background-attachment: fixed;
+}
+
+.contact-section .card{
+    text-align: center;
+    width: 350px;
+    margin: 0 auto;
+    background: #fff;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    padding-bottom: 40px;
+    border-radius: 7px;
+    color: #4c4444;
+    box-sizing: border-box;
+    padding: 45px;
+    margin-top: -115px;
+}
+.contact-section .card .social a{
+    color: #29427A;
+    font-size: 45px;
+}
+.contact-section .card .subtitle h3{
+    font-size: 30px;
+    margin-bottom: 23px;
+    font-family: 'Montserrat-Medium';
+}
+.contact-section .card .social a:hover{
+    text-decoration: none;
+}
+.contact-section .title {
+    margin-right: auto;
+    width: 80%;
+    max-width: 468px;
+}
+.contact-section .title h2{
+    font-family: 'Montserrat-Bold';
+    font-size: 65px;
+    margin: 0;
+    color: #fff;
+    padding-bottom: 25px;
+    position: relative;
+    text-align: right;
+}
+.contact-section .title h2::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #fff;
+    height: 7px;
+    width: 70px;
+    right: 0;
+}
+
+
+@media(max-width:990px) {
+    .pricing-section .text {
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    .navbar-transparent .navbar-nav>li>a {
+        font-size: 14px;
+    }
+}
+
+@media(max-width:768px) {
     .intro-message {
         padding-bottom: 15%;
     }
@@ -103,6 +505,81 @@ h6 {
     .intro-divider {
         width: 100%;
     }
+    .navbar-transparent {
+        background: #fff;
+        border: none;
+        padding: 5px;
+    }
+    .navbar-transparent #logoBlack{
+        display: block;
+    }
+    .navbar-transparent #logoWhite{
+        display: none;
+    }
+    .navbar-transparent .navbar-nav>li>a {
+        font-size: 15px;
+        color: #777;
+    }
+    .split-section {
+        padding: 10px 0;
+    }
+    .split-section .icon-section i{
+        font-size: 120px;
+    }
+    .split-section .split-text .split-title h2{
+        font-size: 35px;
+        line-height: 35px;
+    }
+    .pricing-section .text .section-heading{
+        font-size: 35px;
+        line-height: 35px;
+    }
+    .pricing-section .text .section-heading::before {
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+    .request-section .title h2 {
+        font-size: 35px;
+        line-height: 35px;
+        text-align: center;
+        margin-bottom: 55px;
+    }
+    .request-section .title h2::before{
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+    .contact-section .title {
+        width: 300px;
+        margin: 0 auto;
+    }
+    .contact-section .title h2{
+        font-size: 35px;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 35px;
+    }
+    .contact-section .title h2::before{
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+
+}
+
+@media(max-width:540px) {
+    .pricing-section .card {
+        width: 90%;
+    }
+    .contact-section .card {
+        width: 90%;
+    }
+    .form-beta {
+        width: 90%;
+        padding: 25px 10px;
+    }
+    .intro-message > h1 {
+        font-size: 2em;
+    }
+
 }
 
 .network-name {
@@ -119,12 +596,11 @@ h6 {
 
 .content-section-b {
     padding: 50px 0;
-    border-top: 1px solid #e7e7e7;
-    border-bottom: 1px solid #e7e7e7;
 }
 
 .section-heading {
     margin-bottom: 30px;
+    font-family: 'Montserrat-Medium';
 }
 
 .section-heading-spacer {
@@ -133,27 +609,8 @@ h6 {
     border-top: 3px solid #e7e7e7;
 }
 
-.banner {
-    padding: 100px 0;
-    color: #f8f8f8;
-    background: url(../img/banner-bg.jpg) no-repeat center center;
-    background-size: cover;
-}
 
-.banner h2 {
-    margin: 0;
-	font-weight: 400;
-    font-size: 3em;
-}
 
-.banner ul {
-    margin-bottom: 0;
-}
-
-.banner-social-buttons {
-    float: right;
-    margin-top: 0;
-}
 
 .btn-buynow {
     background-color: #607D8B;
@@ -167,27 +624,8 @@ h6 {
     }
 }
 
-@media(max-width:767px) {
-    .banner h2 {
-        margin: 0;
-        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
-        font-size: 3em;
-    }
 
-    ul.banner-social-buttons > li {
-        display: block;
-        margin-bottom: 20px;
-        padding: 0;
-    }
 
-    ul.banner-social-buttons > li:last-child {
-        margin-bottom: 0;
-    }
-    .row {
-        margin-right: 0px;
-        margin-left: 0px;
-    }
-}
 
 footer {
     padding: 50px 0;

datacenterlight/static/datacenterlight/fonts/Montserrat/OFL.txt

@@ -0,0 +1,92 @@
+Copyright 2011 The Montserrat Project Authors (julieta.ulanovsky@gmail.com)
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

datacenterlight/static/datacenterlight/js/beta.js

@@ -0,0 +1,55 @@
+(function($){
+    'use strict'; // Start of use strict
+
+   
+
+    $(document).ready(function(){
+        verifiedUrl();
+        init_options_interested();
+        init_nav();
+        change_values();
+    });
+
+    function verifiedUrl(){
+        if(window.location.href.indexOf('#success') > -1){
+            form_success();
+        }
+    }
+
+    function init_options_interested(){
+        $('.row-vms').click(function(){
+            $('.row-vms').removeClass('row-vms__active');
+            $(this).addClass('row-vms__active');
+            var number = $('.row-vms__active input').val();
+            var price = $('.row-vms__active input').data('price');
+            _calculate(number, price);
+        });
+    }
+
+    function init_nav(){
+
+        $('.nav-local').click(function(){
+            $('html, body').animate({
+                 scrollTop: $('#'+$(this).data('href')).offset().top
+             });
+        });
+        
+    }
+
+    function change_values(){
+        $('.number-vms').keyup(function () {
+            var number = $(this).val();
+            var price =  $(this).data('price');
+            _calculate(number, price);
+        });
+
+    }
+    function form_success(){
+        $('#sucessModal').modal('show');
+    }
+    function _calculate(numbers, price){
+        $('#valueTotal').text(numbers*price*31);
+    }
+    
+    
+})(jQuery); // End of use strict

datacenterlight/static/datacenterlight/js/main.js

@@ -1,49 +1,70 @@
 (function($){
-    'use strict'; // Start of use strict
+    "use strict"; // Start of use strict
     
     
+    /* ---------------------------------------------
+     Scripts initialization
+     --------------------------------------------- */
+    
+    $(window).load(function(){
+    
+  
+    });
     
     $(document).ready(function(){
         verifiedUrl();
-        init_options_interested();
+       _navScroll();
-        init_nav();
+       _initScroll();
-        change_values();
+       _initNavUrl();
+       
     });
     
+    $(window).resize(function(){
+        
+        
+        
+    });
+    
+
+
+    /* ---------------------------------------------
+     Nav panel classic
+     --------------------------------------------- */
+    
+    
+    function _initScroll(){
+        $(window).scroll(function(){     
+          _navScroll();
+        });
+
+    }
+
+    function _navScroll(){
+       	if($(window).scrollTop() > 10 ){
+       		console.log($(window).scrollTop());
+            $(".navbar").removeClass("navbar-transparent");
+            $(".navbar-default .btn-link").css("color", "#777");
+        }else{
+            $(".navbar").addClass("navbar-transparent");
+            $(".navbar-default .btn-link").css("color", "#fff");
+        }
+    }
+	function _initNavUrl(){
+        $('.url').click(function(){
+             var href = $(this).attr('data-url');
+             console.log(href);
+             $('html, body').animate({
+                scrollTop: $(href).offset().top
+            }, 1000);
+        });
+    }
     function verifiedUrl(){
         if(window.location.href.indexOf('#success') > -1){
             form_success();
+            console.log('epa');
         }
     }
 
-    function init_options_interested(){
-        $('.row-vms').click(function(){
-            $('.row-vms').removeClass('row-vms__active');
-            $(this).addClass('row-vms__active');
-            var number = $('.row-vms__active input').val();
-            var price = $('.row-vms__active input').data('price');
-            _calculate(number, price);
-        });
-    }
-
-    function init_nav(){
-
-        $('.nav-local').click(function(){
-            $('html, body').animate({
-                 scrollTop: $('#'+$(this).data('href')).offset().top
-             });
-        });
-        
-    }
-
-    function change_values(){
-        $('.number-vms').keyup(function () {
-            var number = $(this).val();
-            var price =  $(this).data('price');
-            _calculate(number, price);
-        });
-
-    }
     function form_success(){
         $('#sucessModal').modal('show');
     }
@@ -52,4 +73,61 @@
     }
     
   
-})(jQuery); // End of use strict
+    
+})(jQuery); 
+// (function($){
+//     'use strict'; // Start of use strict
+
+   
+
+//     $(document).ready(function(){
+//         verifiedUrl();
+//         init_options_interested();
+//         init_nav();
+//         change_values();
+//     });
+
+//     function verifiedUrl(){
+//         if(window.location.href.indexOf('#success') > -1){
+//             form_success();
+//         }
+//     }
+
+//     function init_options_interested(){
+//         $('.row-vms').click(function(){
+//             $('.row-vms').removeClass('row-vms__active');
+//             $(this).addClass('row-vms__active');
+//             var number = $('.row-vms__active input').val();
+//             var price = $('.row-vms__active input').data('price');
+//             _calculate(number, price);
+//         });
+//     }
+
+//     function init_nav(){
+
+//         $('.nav-local').click(function(){
+//             $('html, body').animate({
+//                  scrollTop: $('#'+$(this).data('href')).offset().top
+//              });
+//         });
+        
+//     }
+
+//     function change_values(){
+//         $('.number-vms').keyup(function () {
+//             var number = $(this).val();
+//             var price =  $(this).data('price');
+//             _calculate(number, price);
+//         });
+
+//     }
+//     function form_success(){
+//         $('#sucessModal').modal('show');
+//     }
+//     function _calculate(numbers, price){
+//         $('#valueTotal').text(numbers*price*31);
+//     }
+    
+    
+// })(jQuery); // End of use strict
+

datacenterlight/templates/datacenterlight/beta.html

@@ -101,7 +101,7 @@
     </script>
     <script src="{% static 'datacenterlight/js/vendor.js' %}"></script>
     <script src="{% static 'datacenterlight/js/plugin.js' %}"></script>
-    <script src="{% static 'datacenterlight/js/main.js' %}"></script>
+    <script src="{% static 'datacenterlight/js/beta.js' %}"></script>
 </body>
 
 </html>

datacenterlight/templates/datacenterlight/index.html

@@ -20,7 +20,8 @@
     
 
     <!-- Custom Fonts -->
-      <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+    <!--Import Google Icon Font-->
+     <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="{% static 'datacenterlight/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
     <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
@@ -51,27 +52,28 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand topnav" href="#"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+                <a id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+                <a id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.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">{% trans "What is it" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#how" >{% trans "What is it" %}</a>
                     </li>
                     <li>
-                        <a href="#your">{% trans "Scale out" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#your"  >{% trans "Scale out" %}</a>
                     </li>
                    <li>
-                        <a href="#our">{% trans "Reliable and light" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a>
                     </li>
                     <li>
-                        <a href="#price">{% trans "Buy VM" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Buy VM" %}</a>
                     </li>
                     <li>
-                        <a href="#contact">{% trans "Contact" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
                      </li>
-                    <li>
+
                     <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
                         {% if LANGUAGE_CODE == 'en-us'%} 
                             <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
@@ -85,7 +87,6 @@
                         {% endif %}         
                         
                       </select> 
-                    </li>
                 </ul>
 
 
@@ -97,23 +98,22 @@
 
 
     <!-- Header -->
-    <a name="about"></a>
+    <div class="intro-header" id="home">
-    <div class="intro-header">
         <div class="container">
 
             <div class="row">
                 <div class="col-lg-12">
     
                     <div class="intro-message">
-                      <h1>datacenterlight.ch</h1>
+                      <h1>DataCenterLight</h1>
                         <h3>{% trans "Finally, an affordable VM hosting in Switzerland!" %}</h3>
                         <hr class="intro-divider">
                         <ul class="list-inline intro-social-buttons">
                             <li>
-                                <a href="#how" class="btn btn-default btn-lg"><i class="#Services"></i> <span class="network-name">{% trans "What is it?" %}</span></a>
+                                <a href="#how" class="btn btn-default btn-lg btn-transparent"><i class="#Services"></i> <span class="network-name">{% trans "What is it?" %}</span></a>
                             </li>
                             <li>
-                                <a href="#requestform" class="btn btn-default btn-lg page-scroll"><span class="network-name">{% trans "I want it!" %}</span></a>
+                                <a href="#requestform" class="btn btn-primary btn-lg page-scroll"><span class="network-name">{% trans "I want it!" %}</span></a>
                             </li>
                         </ul>
                     </div>
@@ -121,22 +121,28 @@
             </div>
 
         </div>
+        <div class="triangle-left"></div>
+        <div class="triangle-right"></div>
         <!-- /.container -->
 
     </div>
     <!-- /.intro-header -->
 
     <!-- Page Content -->
-    <a name="how"></a>
+    <div class="split-section right" id="how">
-	<div class="content-section-b">
 
         <div class="container">
-
             <div class="row">
-              <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
+                <div class="col-xs-12 col-sm-6 col-md-6 icon-section">
-                    <hr class="section-heading-spacer">
+                    <i class="fa fa-cogs" aria-hidden="true"></i>
-                    <div class="clearfix"></div>
+                </div>
-                <h2 class="section-heading">{% trans "How it works :" %}</h2> <ul class="fa-ul">
+                <div class="col-xs-12 col-sm-6 col-md-6">
+                    <div class="split-text">
+                        <div class="split-title">
+                            <h2>{% trans "How it works" %}</h2>
+                        </div>
+                        <div class="split-description">
+                            <ul class="fa-ul">
                               <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
                               <p class="lead">{% trans "Reuse existing factory halls intead of building an expensive building." %}</p>
                               </li>
@@ -145,135 +151,137 @@
                               <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
                               <p class="lead">{% trans "Being open : Using FOSS exclusively, we can save money for licenses." %}</p></li> 
                              </ul>
-              </div>
-                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
-                    <img class="img-responsive" src="{% static 'datacenterlight/img/how3.png' %}" alt="">
-                </div>
-            </div>
                             
                         </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- /.container -->
         <!-- /.option 1 -->
     </div>
-    <a name="your"></a>
+
-    <div class="content-section-a" id="own">
+    <div class="split-section left" id="your">
+
         <div class="container">
             <div class="row">
-                <div class="col-lg-5 col-sm-6">
+                <div class="col-xs-12 col-sm-6 col-md-6">
-                    <hr class="section-heading-spacer">
+                    <div class="split-text">
-                    <div class="clearfix"></div>
+                        <div class="split-title">
-                    <h2 class="section-heading">{% trans "Scale out" %}</h2>
+                            <h2>{% trans "Scale out" %}</h2>
+                        </div>
+                        <div class="split-description">
                             <p class="lead">{% trans "We don't use special hardware. We use commodity hardware: we buy computers that you buy. Just many more and put them in a cozy home for computers called data center." %}</p>
-                </div>
-                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
-                    <img class="img-responsive" src="{% static 'datacenterlight/img/home.png' %}" alt="">
-                </div>
-            </div>
                             
                         </div>
-        <!-- /.container -->
                     </div>
-    <!-- /.option 2 -->
+                </div>
-    <!-- /.content-section-a -->
+                <div class="col-xs-12 col-sm-6 col-md-6 icon-section">
-    <!-- / pricing -->
+                    <i class="fa fa-rocket" aria-hidden="true"></i>
-    <a name="our"></a>
+                </div>
-    <div class="content-section-b">
+            </div>
+        </div>
+        <!-- /.container -->
+        <!-- /.option 1 -->
+    </div>
+    <div class="split-section right" id="our">
 
         <div class="container">
-
             <div class="row">
-                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
+                <div class="col-xs-12 col-sm-6 col-md-6 icon-section">
-                    <hr class="section-heading-spacer">
+                    <i class="fa fa-handshake-o" aria-hidden="true"></i>
-                    <div class="clearfix"></div>
+                </div>
-                    <h2 class="section-heading">{% trans "Reliable and light" %}</h2>
+                <div class="col-xs-12 col-sm-6 col-md-6">
+                    <div class="split-text">
+                        <div class="split-title">
+                            <h2>{% trans "Reliable and light" %}</h2>
+                        </div>
+                        <div class="split-description">
                          <p class="lead">{% trans "Our VMs are located in Switzerland, with reliable power supply and fast internet connection. Our VM costs less thanks to our featherlight infrastructure." %}</p>
-                </div>
-                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
-                    <img class="img-responsive" src="{% static 'datacenterlight/img/dog.png' %}" alt="">
-                </div>
-            </div>
                             
                         </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- /.container -->
-
+        <!-- /.option 1 -->
     </div>
     
     <!-- /.content-section-b -->
-    <a name="price"></a>
+    <div class="content-section-a pricing-section" id="price">
-    <div class="content-section-a">
 
         <div class="container">
-   <div class="col-xs-12 col-lg-4 col-sm-3"></div>
-            <div class="row">
-                <div class="col-xs-12 col-lg-4 col-sm-3">
-                    <hr class="section-heading-spacer">
-                    <div class="clearfix"></div>
-                  <h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
-                    <p class="lead">{% trans "Affordable VM hosting based in Switzerland" %}</p>
-                </div>
-                <div class="col-xs-12 col-lg-4 col-sm-3"></div>
-                  <!-- Title -->
-        <div class="row">
-            <div class="col-lg-12"></div>
-        </div>
-        <!-- /.row -->
-
         <!-- Page Features -->
             <div class="row text-center">
-<div class="col-xs-12 col-sm-3 col-lg-4 hero-feature"></div>
+                <div class="col-xs-12 col-md-6 text">
-            <div class="col-xs-12 col-sm-3 col-lg-4 hero-feature">
+                    <h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
-                <div class="thumbnail">
+                    <p class="lead">{% trans "Affordable VM hosting based in Switzerland" %}</p>
-                    <img class="relsonsive" src="{% static 'datacenterlight/img/economy.jpg' %}" alt="">
+                     <a href="#" class="btn btn-info btn-lg">{% trans "More Info" %}</a> 
+                </div>
+                <div class="col-xs-12 col-md-6 hero-feature">
+                    <div class="card">
                         <div class="caption">
+                            <div class="title">
                                <h3>{% trans "VM hosting" %} </h3> 
+                            </div>
+                          <div class="price">
+                              <span>$ 50</span>
+                          </div>
+                          <div class="descriptions">
+                              <div class="description">
                                 <p>{% trans "Based in Switzerland" %}</p>
+                              </div>
+                              <div class="description">
                                 <p>1 core, </p>
+                              </div>
+                              <div class="description">
                                 <p>2 GiB RAM, </p>
+                              </div>
+                              <div class="description">
                                 <p>{% trans "15 GiB storage(SSD)" %}</p>
-                        <p>
+                              </div>
-                        <a href="#" class="btn btn-primary btn-buynow">{% trans "Buy Now!" %}</a> <a href="#" class="btn btn-default">{% trans "More Info" %}</a> </p>
+                          </div>
+                          <a href="#" class="btn btn-primary">{% trans "Buy Now!" %}</a>
                       </div>
                     </div>
                 </div>
-            <div class="col-xs-12 col-sm-3 col-lg-4 hero-feature"></div>
             </div>
-        <!-- /.row -->
          </div>
 
-        </div>
-        <!-- /.container -->
-
     </div>
         <!-- Configure -->
-    <a name="about"></a>
+    <div class="request-section" >
-    <div class="intro-header-1">
         <div class="container">
-            <a href="" id="requestform"></a>
             <div class="row">
-                <div class="col-lg-12">
+                <div class="col-sm-6 col-md-6">
-    
+                    <div class="title">
-                    <div class="intro-message">
+                        <h2>{% trans "I want to try!" %}</h2>
-                        <h1>{% trans "I want to try!" %}</h1>
+                    </div>
-                        <p>&nbsp;</p>
+                </div>
-                        <p>&nbsp;</p>
+                <div class="col-sm-6 col-md-6">
-                       
+                    <div class="form">
-
+                        <form class="form-beta" method="POST" action="">
-
-
-                        <form class="form-inline" method="POST" action="">
                           {% csrf_token %}
                           {{ form.non_field_errors }}
                           {{ form.email.errors|striptags}}
-
+                          <div>
-                          <div class="form-group">
+                            {% for message in messages %}
-                            <label class="sr-only" for="exampleInputEmail3">{% trans "Email address" %}</label>
+                                <strong>{{ message }}</strong>
-                            <input type="email" name="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
+                            {% endfor %}                  
                           </div>
-                          <button type="submit" class="btn btn-default">{% trans "Request Beta Access" %}</button>
+                         <div class="inputs">
+                             <div class="form-group">
+                                <input type="text" name="name" class="form-control" id="name" placeholder="Enter name">
+                              </div>
+                              <div class="form-group">
+                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
+                              </div>
+                         </div>
+                          <button type="submit" class="btn btn-default btn-transparent btn-lg">{% trans "Request Beta Access" %}</button>
                         </form>
-
+                    </div>
-
+                     <div class="modal fade bs-example-modal-sm" style="color:black;"  id="sucessModal" tabindex="-1" role="dialog">
-                        <div class="modal fade bs-example-modal-sm" style="color:black;"  id="reques-success-message" tabindex="-1" role="dialog">
                           <div class="modal-dialog" role="document">
                             <div class="modal-content">
                               <div class="modal-header">
@@ -289,47 +297,47 @@
                             </div><!-- /.modal-content -->
                           </div><!-- /.modal-dialog -->
                         </div><!-- /.modal -->
-
-
-                          
-                    </ul>
-                  </div>
                 </div>
             </div>
 
         </div>
-        <!-- /.container -->
-
     </div>
     <!-- /.content-section-a -->
       <!-- / contact section -->
-	<a  name="contact"></a>
+    <div class="full-contact-section">
-    <div class="banner">
+        <div class="intro-header-2 contact-section" id="contact">
-
             <div class="container">
-
                 <div class="row">
-            <div class="col-lg-6"></div>
+                  
-                <div class="col-lg-6">
+                    <div class="col-sm-6 col-md-6">
-                    <h2>{% trans "QUESTIONS?" %} </h2>
+                        <div class="card">
-                    <h2>{% trans "CONTACT US!" %}                </h2>
+                            <div class="subtitle">
                                 <h3>ungleich GmbH </h3>
+                            </div>
+                            <div class="description">
                                 <p><i class="fa fa-envelope-o"></i>  info@datacenterlight.ch</p>
                                 <p>In der Au 7, Schwanden 8762</p>
                                 <p>{% trans "Switzerland " %}</p>
-                     
+                            </div>
-                    <button type="button" class="btn btn-default">
+                            <div class="social">
-                    <a href="https://twitter.com/ungleich">
+                                <a  class="" href="https://twitter.com/ungleich">
-                         <i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span></a>
+                                     <i class="fa fa-twitter fa-fw"></i>
-                    </button>
+                                </a>
-                      <button type="button" class="btn btn-default"> 
+                                <a  class=""  href="https://github.com/ungleich">
-                      <a href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i><span class="network-name">Github</span></a></button>
+                                     <i class="fa fa-github fa-fw"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-6 col-md-6">
+                       <div class="title">
+                            <h2>{% trans "QUESTIONS?" %} {% trans "CONTACT US!" %}</h2>
+                        </div>
+                    </div>
                 </div>
 
             </div>
-
         </div>
-        <!-- /.container -->
         
     </div>
     <!-- /.banner -->
@@ -390,6 +398,7 @@
 
     <!-- Bootstrap Core JavaScript -->
     <script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script>
+    <script src="{% static 'datacenterlight/js/main.js' %}"></script>
 
 </body>