diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 163ffd0e..07ecc3b6 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -3,14 +3,12 @@
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
-@font-face {
- font-family: 'Lato-Regular';
- src: url('../fonts/Lato/Lato-Regular.ttf');
-}
+
@font-face {
font-family: 'Lato-Light';
src: url('../fonts/Lato/Lato-Light.ttf');
}
+
body,
html {
width: 100%;
@@ -27,140 +25,179 @@ h6 {
font-family: 'Lato-Light', sans-serif;
font-weight: 300;
}
+
+
/*blue light #5A74AF*/
+
+
/*blue dark #29427A*/
+
.topnav {
font-size: 14px;
}
+.menu-url {
+ cursor: pointer;
+}
+
.lead {
font-size: 18px;
font-weight: 400;
}
-.btn{
+
+.btn {
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
+
.fa-li.fa-lg {
color: #29427A;
margin-top: 6px;
}
-.btn-transparent{
+
+.btn-transparent {
background: transparent;
border: 2px solid #fff;
color: #fff;
transition: all .2s ease-in;
}
-.btn-primary{
- background: #465882;
- border-color: transparent;
+
+.btn-primary {
+ background: #29427A;
+ border-color: #29427A;
color: #fff;
width: auto;
}
-.btn-primary:hover{
+
+.btn-primary:hover {
background: rgba(41, 66, 122, 0.8);
border-color: #29427A;
}
-.btn-transparent:hover{
+
+.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-info:focus {
color: #fff;
background-color: rgba(90, 116, 175, 0.8);
border-color: #5A74AF;
}
-.btn-lg{
+
+.btn-lg {
min-width: 180px;
}
-#logoWhite{
+
+#logoWhite {
display: none;
}
-#logoBlack{
+
+#logoBlack {
display: block;
}
-.navbar{
+
+.navbar {
transition: all .3s ease-in;
}
-.navbar-default{
+
+.navbar-default {
background: #fff;
border: none;
padding: 5px;
}
-.navbar-transparent{
+
+.navbar-transparent {
background: transparent;
border: none;
padding: 20px;
}
-.navbar-transparent #logoBlack{
+
+.navbar-transparent #logoBlack {
display: none;
}
-.navbar-transparent #logoWhite{
+
+.navbar-transparent #logoWhite {
display: block;
width: 220px;
}
+
.navbar-default .navbar-nav>li>a {
cursor: pointer;
font-family: 'Lato-Light', sans-serif;
}
+
.navbar-transparent .navbar-nav>li>a {
color: #fff;
cursor: pointer;
font-family: 'Lato-Light', sans-serif;
}
+
.navbar-transparent .navbar-nav>li>a:hover {
color: #fff;
}
-.navbar-transparent .navbar-nav>li>a:focus, .navbar-transparent .navbar-nav>li>a:hover {
+
+.navbar-transparent .navbar-nav>li>a:focus,
+.navbar-transparent .navbar-nav>li>a:hover {
color: #fff;
background-color: transparent;
}
+
.navbar-default .btn-link {
box-shadow: none;
}
+
.navbar-brand {
padding: 10px 15px;
cursor: pointer;
}
+
.navbar-right {
margin-right: 10px;
}
+
.navbar-default .btn-link {
color: #fff;
}
+
.navbar-default .btn-link:hover {
color: #fff !important;
}
-.nav-language{
+
+.nav-language {
position: relative;
}
-.nav-language .select-language{
+
+.nav-language .select-language {
padding: 15px 10px;
color: #777;
}
-.navbar-transparent .nav-language .select-language{
+
+.navbar-transparent .nav-language .select-language {
color: #fff;
font-family: 'Lato-Light', sans-serif;
}
-.nav-language .select-language span{
+.nav-language .select-language span {
margin-left: 5px;
margin-right: 5px;
- font-family: 'Lato-Light', sans-serif;
-
+ font-family: 'Lato', sans-serif;
}
-.nav-language .drop-language{
+
+.nav-language .drop-language {
position: absolute;
top: 45px;
left: -8px;
@@ -168,30 +205,35 @@ h6 {
width: 100px;
height: 40px;
padding: 9px 10px;
- -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
- -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
- box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+ -webkit-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
+ -moz-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
+ box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
display: none;
z-index: 100;
/* margin-left: 10px; */
text-align: center;
border-radius: 4px;
}
-.nav-language .drop-language a{
- cursor: pointer;
- font-family: 'Lato-Light', sans-serif;
+
+.nav-language .drop-language a {
+ cursor: pointer;
+ font-family: 'Lato', sans-serif;
}
-.navbar-transparent .nav-language .drop-language{
+
+.navbar-transparent .nav-language .drop-language {
background: transparent;
border: 1px solid #fff;
}
-.navbar-transparent .nav-language .drop-language a{
+
+.navbar-transparent .nav-language .drop-language a {
color: #fff;
font-family: 'Lato-Light', sans-serif;
}
-.nav-language:hover .drop-language{
+
+.nav-language:hover .drop-language {
display: block;
}
+
.intro-header {
height: 100vh;
text-align: center;
@@ -204,7 +246,7 @@ h6 {
align-items: center;
}
-.intro-header::before{
+.intro-header::before {
content: "";
position: absolute;
top: 0;
@@ -213,8 +255,10 @@ h6 {
right: 0;
background: rgba(38, 59, 107, 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-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: #fff;
@@ -222,7 +266,8 @@ h6 {
background-size: cover;
position: relative;
}
-.intro-header-1::before{
+
+.intro-header-1::before {
content: "";
position: absolute;
top: 0;
@@ -231,8 +276,10 @@ h6 {
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-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;
@@ -240,7 +287,8 @@ h6 {
background-size: cover;
position: relative;
}
-.intro-header-2::before{
+
+.intro-header-2::before {
content: "";
position: absolute;
top: 0;
@@ -249,19 +297,20 @@ h6 {
right: 0;
background: rgba(41, 66, 122, 0.59);
}
+
.intro-message {
position: relative;
- width: 80%;
+ width: 80%;
margin: 0 auto;
-
}
+
.intro-signup {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
-.intro-message > h1 {
+.intro-message>h1 {
margin: 0;
font-weight: 400;
font-size: 6em;
@@ -270,15 +319,14 @@ h6 {
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
- border-bottom: 1px solid rgba(0,0,0,0.2);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
-.intro-message > h3 {
+.intro-message>h3 {
font-weight: 300;
-
}
-.intro-pricing{
+.intro-pricing {
text-align: center;
color: #fff;
background: url(../img/pattern.jpg) no-repeat center center;
@@ -290,11 +338,13 @@ h6 {
align-items: center;
position: relative;
}
-.intro-pricing.success-pricing{
+
+.intro-pricing.success-pricing {
height: 100vh;
max-height: 100vh;
}
-.intro-pricing::before{
+
+.intro-pricing::before {
content: "";
position: absolute;
top: 0;
@@ -303,19 +353,23 @@ h6 {
right: 0;
background: rgba(90, 116, 175, 0.7);
}
-.intro-pricing .intro-message .section-heading{
+
+.intro-pricing .intro-message .section-heading {
font-size: 45px;
width: 80%;
margin: 0 auto;
}
+
.split-section {
padding: 70px 0;
}
-.split-section .icon-section{
+
+.split-section .icon-section {
position: relative;
min-height: 330px;
}
-.split-section .icon-section i{
+
+.split-section .icon-section i {
position: absolute;
left: 50%;
top: 50%;
@@ -323,7 +377,8 @@ h6 {
font-size: 216px;
color: #5A74AF;
}
-.split-section .split-text .lead{
+
+.split-section .split-text .lead {
font-size: 21px;
color: #3a3a3a;
font-weight: 300 !important;
@@ -338,50 +393,58 @@ h6 {
position: relative;
margin-bottom: 25px;
}
-.split-section .split-text .split-title h2{
+
+.split-section .split-text .split-title h2 {
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;
+
+.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;
}
-.split-section.left .split-description{
+.split-section.left .split-description {
width: 90%;
margin-right: auto;
}
-.split-section.right .split-description{
+
+.split-section.right .split-description {
width: 90%;
margin-left: auto;
}
-.split-section.right .split-description.title p{
+
+.split-section.right .split-description.title p {
font-size: 27px;
margin-bottom: 10px;
text-align: left;
-
}
+
.split-section.right .split-text {
text-align: right;
}
-.split-section.right .split-text ul{
+
+.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{
+.split-section.right .split-text .split-title h2 {
text-align: right;
}
-.split-section.left .split-text .split-title h2{
+
+.split-section.left .split-text .split-title h2 {
text-align: left;
}
-.split-section.right .split-text .split-title::before{
+
+.split-section.right .split-text .split-title::before {
content: "";
position: absolute;
bottom: 0;
@@ -390,7 +453,8 @@ h6 {
width: 70px;
right: 0;
}
-.split-section.left .split-text .split-title::before{
+
+.split-section.left .split-text .split-title::before {
content: "";
position: absolute;
bottom: 0;
@@ -400,67 +464,79 @@ h6 {
left: 0;
}
-.split-section.what .icon-section{
+.split-section.what .icon-section {
position: relative;
min-height: 500px;
}
+
.split-section.what .split-text .lead {
font-size: 19px;
color: #3a3a3a;
margin-bottom: 5px;
line-height: 29px;
}
-.split-section.what .fa-li.fa-lg{
+
+.split-section.what .fa-li.fa-lg {
font-size: 17px;
}
-.pricing-section{
+
+.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{
+.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);
+ 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;
position: relative;
}
-.pricing-section .card .img-beta{
+
+.pricing-section .card .img-beta {
position: absolute;
top: 5px;
width: 60px;
left: 3px;
}
-.pricing-section .card .title{
+
+.pricing-section .card .title {
padding: 15px 40px;
}
-.pricing-section .card .title h3{
-}
-.pricing-section .card .price{
+
+.pricing-section .card .title h3 {}
+
+.pricing-section .card .price {
background: #5A74AF;
padding: 22px;
color: #fff;
font-size: 32px;
}
-.pricing-section .card .description{
+
+.pricing-section .card .description {
padding: 12px;
}
-.pricing-section .card .descriptions{
+
+.pricing-section .card .descriptions {
padding: 10px 30px;
}
-.pricing-section .card .description p{
+
+.pricing-section .card .description p {
margin: 0;
}
-.pricing-section .card .btn{
+
+.pricing-section .card .btn {
margin-top: 20px;
}
-.pricing-section .text{
+
+.pricing-section .text {
text-align: left;
}
-.pricing-section .text .section-heading{
+
+.pricing-section .text .section-heading {
/*font-size: 50px;*/
font-size: 48px;
line-height: 50px;
@@ -469,7 +545,8 @@ h6 {
letter-spacing: 1px;
position: relative;
}
-.pricing-section .text .section-heading::before{
+
+.pricing-section .text .section-heading::before {
content: "";
position: absolute;
bottom: 0;
@@ -478,7 +555,8 @@ h6 {
width: 70px;
left: 0;
}
-.request-section{
+
+.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%);
@@ -487,14 +565,16 @@ h6 {
background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%);
padding: 70px 0;
}
-.request-section .title h2{
+
+.request-section .title h2 {
font-size: 45px;
margin: 0;
color: #fff;
padding-bottom: 25px;
position: relative;
}
-.request-section .title h2::before{
+
+.request-section .title h2::before {
content: "";
position: absolute;
bottom: 0;
@@ -503,23 +583,27 @@ h6 {
width: 70px;
left: 0;
}
-.request-section .form-beta{
+
+.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 input {
+ height: 50px;
}
-.request-section .form-beta input{
- height: 50px;
-}
-.request-section .form-beta .btn-lg{
+
+.request-section .form-beta .btn-lg {
width: 100%;
font-size: 16px;
}
+
.banner {
padding: 100px 0;
color: #fff;
@@ -527,7 +611,8 @@ h6 {
background-size: cover;
position: relative;
}
-.full-contact-section{
+
+.full-contact-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%);
@@ -542,12 +627,12 @@ h6 {
background-attachment: fixed;
}
-.contact-section .card{
+.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);
+ 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;
@@ -555,23 +640,28 @@ h6 {
padding: 45px;
margin-top: -115px;
}
-.contact-section .card .social a{
+
+.contact-section .card .social a {
color: #29427A;
font-size: 45px;
}
-.contact-section .card .subtitle h3{
+
+.contact-section .card .subtitle h3 {
font-size: 30px;
margin-bottom: 23px;
}
-.contact-section .card .social a:hover{
+
+.contact-section .card .social a:hover {
text-decoration: none;
}
+
.contact-section .title {
margin-right: auto;
width: 80%;
max-width: 468px;
}
-.contact-section .title h2{
+
+.contact-section .title h2 {
font-size: 65px;
margin: 0;
color: #fff;
@@ -579,7 +669,8 @@ h6 {
position: relative;
text-align: right;
}
-.contact-section .title h2::before{
+
+.contact-section .title h2::before {
content: "";
position: absolute;
bottom: 0;
@@ -588,19 +679,23 @@ h6 {
width: 70px;
right: 0;
}
+
+
/*Why DCL*/
+
.full-whydcl-sec {
color: #fff;
text-align: center;
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%);
+ 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%);
}
+
.whydcl-header {
- padding: 150px 0 150px 0;
+ padding: 150px 0 150px 0;
text-align: center;
color: #f8f8f8;
background: url(../img/pattern.jpg) no-repeat center center;
@@ -608,6 +703,7 @@ h6 {
position: relative;
background-attachment: fixed;
}
+
.whydcl-header::before {
content: "";
position: absolute;
@@ -615,27 +711,33 @@ h6 {
bottom: 0;
left: 0;
right: 0;
- background: rgba(90, 116, 175,0.85);
+ background: rgba(90, 116, 175, 0.85);
/*background: rgba(45,70,122,0.8);*/
}
+
.single-heading h2 {
font-size: 65px;
margin: 0;
- padding: 0;
+ padding: 0;
}
+
#tech_stack {
background: #fff;
}
+
#tech_stack h3 {
font-size: 42px;
width: 70%;
}
+
hr.thick-divider {
border-top: 3px solid #eee !important;
}
+
.space {
padding: 50px 0;
}
+
tech-sub-sec h2 {
font-size: 45px;
line-height: 60px;
@@ -643,100 +745,127 @@ tech-sub-sec h2 {
color: #3a3a3a;
letter-spacing: 1px;
}
+
.logo-wrap {
text-align: center;
min-height: 140px;
padding: 20px 40px 30px 40px;
}
-.btm-space{
- padding-bottom: 8px;
+
+.btm-space {
+ padding-bottom: 8px;
}
-.btm-space-tayga{
- padding-bottom: 12px;
+
+.btm-space-tayga {
+ padding-bottom: 12px;
}
+
.percent-text {
font-size: 50px;
color: #999;
}
+
.tech-sub-sec h2 {
font-size: 40px;
line-height: 55px;
}
-.space-middle{
- padding: 45px 0;
+
+.space-middle {
+ padding: 45px 0;
}
-.padding-vertical{
- padding: 35px 0;
+
+.padding-vertical {
+ padding: 35px 0;
}
+
.percent-text img {
- margin-left:20px;
+ margin-left: 20px;
}
+
.space-block {
padding: 30px 0;
}
+
.dropdown-menu {
border: 1px solid #fff;
- -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
- -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
- box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+ -webkit-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
+ -moz-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
+ box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
display: none;
text-align: center;
border-radius: 4px !important;
padding: 5px !important;
}
-.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
+
+.dropdown-menu>li>a:focus,
+.dropdown-menu>li>a:hover {
background: transparent;
text-decoration: underline !important;
}
+
.logo-wrap .logo-caption {
padding-top: 20px;
display: inline-block;
color: #999 !important;
}
+
.lead-light {
color: #999 !important;
line-height: 32px !important;
}
+
.logo-wrap-1 {
padding-top: 50px;
}
-.dropdown-menu > li > a {
+
+.dropdown-menu>li>a {
padding: 1px 10px !important;
}
-.dropdown-menu{
- left: 0 !important;
- min-width: 155px;
- text-align: left;
- margin-left: 15px;
+
+.dropdown-menu {
+ left: 0 !important;
+ min-width: 155px;
+ text-align: left;
+ margin-left: 15px;
}
-.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
+
+.navbar-default .navbar-nav>.open>a,
+.navbar-default .navbar-nav>.open>a:focus,
+.navbar-default .navbar-nav>.open>a:hover {
background: transparent;
color: #fff;
}
-.dropdown-menu > li > a {
+
+.dropdown-menu>li>a {
font-size: 13px;
font-weight: 300;
font-family: 'Lato-Light', sans-serif;
}
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
+
+.navbar-default .navbar-nav>.active>a,
+.navbar-default .navbar-nav>.active>a:focus,
+.navbar-default .navbar-nav>.active>a:hover {
background: #2D457A;
color: #fff;
border-radius: 6px;
}
+
/*Pricing page*/
-.price-calc-section{
+.price-calc-section {
padding: 80px 40px !important;
background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
display: flex;
- font-family: 'Lato-Regular', sans-serif;
+ font-family: 'Lato', sans-serif;
}
-.price-calc-section .text{
- width: 50%;
+
+.price-calc-section .text {
+ width: 50%;
}
-.price-calc-section .text .section-heading{
+
+.price-calc-section .text .section-heading {
font-size: 48px;
line-height: 48px;
padding-bottom: 27px;
@@ -745,12 +874,13 @@ tech-sub-sec h2 {
position: relative;
text-align: right;
}
-.price-calc-section .text .description{
+
+.price-calc-section .text .description {
font-size: 20px;
text-align: right;
}
-.price-calc-section .text .section-heading::before{
+.price-calc-section .text .section-heading::before {
content: "";
position: absolute;
bottom: 0;
@@ -759,11 +889,12 @@ tech-sub-sec h2 {
width: 70px;
right: 0;
}
-.price-calc-section .card{
+
+.price-calc-section .card {
width: 50%;
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);
+ 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;
text-align: center;
@@ -771,34 +902,42 @@ tech-sub-sec h2 {
max-width: 400px;
position: relative;
}
+
.price-calc-section .landing {
width: 100% !important;
}
-.no-padding{
- padding:0 !important;
+
+.no-padding {
+ padding: 0 !important;
}
-.price-calc-section .card .img-beta{
+
+.price-calc-section .card .img-beta {
position: absolute;
top: 5px;
width: 60px;
left: 3px;
}
-.price-calc-section .card .title{
+
+.price-calc-section .card .title {
padding: 15px 40px;
}
-.price-calc-section .card .title h3{
- font-family: 'Lato-Regular', sans-serif;
+
+.price-calc-section .card .title h3 {
+ font-family: 'Lato', sans-serif;
}
-.price-calc-section .card .price{
+
+.price-calc-section .card .price {
background: #5A74AF;
padding: 22px;
color: #fff;
font-size: 32px;
}
-.price-calc-section .card .price .price-text{
+
+.price-calc-section .card .price .price-text {
font-size: 14px;
}
-.price-calc-section .card .description{
+
+.price-calc-section .card .description {
padding: 12px;
position: relative;
display: flex;
@@ -814,35 +953,43 @@ tech-sub-sec h2 {
width: 30%;
text-align: left;
}
+
.price-calc-section .card .description .select-number{
- font-size: 20px;
- text-align: center;
- width: 85px;
+ font-size: 20px;
+ text-align: center;
+ width: 85px;
}
-.price-calc-section .card .description i{
+
+.price-calc-section .card .description i {
color: #29427A;
cursor: pointer;
font-size: 24px;
}
-.price-calc-section .card .description .left{
- margin-right: 7px;
+
+.price-calc-section .card .description .left {
+ margin-right: 7px;
}
-.price-calc-section .card .description .right{
- margin-left: 7px;
+
+.price-calc-section .card .description .right {
+ margin-left: 7px;
}
-.price-calc-section .card .descriptions{
+
+.price-calc-section .card .descriptions {
padding: 10px 30px;
}
-.price-calc-section .card .description p{
+
+.price-calc-section .card .description p {
margin: 0;
}
-.price-calc-section .card .btn{
+
+.price-calc-section .card .btn {
margin-top: 20px;
font-size: 20px;
width: 200px;
border: none;
}
-.price-calc-section .card .select-configuration select{
+
+.price-calc-section .card .select-configuration select {
outline: none;
background: #fff;
border-color: #d0d0d0;
@@ -852,24 +999,30 @@ tech-sub-sec h2 {
font-size: 16px;
margin-left: 10px;
}
-.price-calc-section .card .check-ip{
+
+.price-calc-section .card .check-ip {
font-size: 18px;
}
-.price-calc-section .card .justify-center{
+
+.price-calc-section .card .justify-center {
justify-content: center !important;
}
-.price-calc-section .card .description.input label{
+
+.price-calc-section .card .description.input label {
font-size: 15px;
font-weight: 800;
- font-family: 'Lato-Regular';
+ font-family: 'Lato';
margin-bottom: 0;
width: 40px;
}
+
+
/*Changed class****.price-calc-section .card .description.input input*/
-.price-calc-section .card .description input{
- width: 200px;
- font-size: 14px;
- text-align: left;
+
+.price-calc-section .card .description input {
+ width: 200px;
+ font-size: 14px;
+ text-align: left;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #d0d0d0;
@@ -877,78 +1030,93 @@ tech-sub-sec h2 {
margin-left: 10px;
}
-.price-calc-section .card .check-ip input[type=checkbox]{
+.price-calc-section .card .check-ip input[type=checkbox] {
font-size: 17px;
margin: 0 8px;
}
+
.help-block.with-errors {
text-align: center;
margin: 0;
padding: 0;
}
-.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label{
-color: #eb4d5c;
+
+.has-error .checkbox,
+.has-error .checkbox-inline,
+.has-error .control-label,
+.has-error .help-block,
+.has-error .radio,
+.has-error .radio-inline,
+.has-error.checkbox label,
+.has-error.checkbox-inline label,
+.has-error.radio label,
+.has-error.radio-inline label {
+ color: #eb4d5c;
}
+
.form-group {
margin: 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}
+
@media(max-width:767px) {
- .percent-text {
- font-size: 50px;
- }
- #tech_stack h3 {
- font-size: 30px;
- line-height: 40px;
- width: 100%;
- }
- .navbar-nav .open .dropdown-menu {
- text-align: left;
- font-size: 12px;
- }
- .visible-mobile {
- display:block;
- }
- .visible-desktop {
- display:none !important;
- }
- .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
- background: transparent;
- color: #777 !important;
+ .percent-text {
+ font-size: 50px;
+ }
+ #tech_stack h3 {
+ font-size: 30px;
+ line-height: 40px;
+ width: 100%;
+ }
+ .navbar-nav .open .dropdown-menu {
+ text-align: left;
+ font-size: 12px;
+ }
+ .visible-mobile {
+ display: block;
+ }
+ .visible-desktop {
+ display: none !important;
+ }
+ .navbar-default .navbar-nav>.open>a,
+ .navbar-default .navbar-nav>.open>a:focus,
+ .navbar-default .navbar-nav>.open>a:hover {
+ background: transparent;
+ color: #777 !important;
+ }
}
-}
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
-.logo-wrap {
- width: 50%;
- padding: 15px 30px !important;
- min-height: 179px;
-}
-.logo-wrap-1 {
- width: 50%;
- padding: 15px 30px !important;
- min-height: 179px;
-}
-.landscape-xs-6{
- width: 50%;
-}
-.landscape-xs-8{
- width: 66.66666667%;
-}
-.landscape-xs-4{
- width: 33.33333333%;
+ .logo-wrap {
+ width: 50%;
+ padding: 15px 30px !important;
+ min-height: 179px;
+ }
+ .logo-wrap-1 {
+ width: 50%;
+ padding: 15px 30px !important;
+ min-height: 179px;
+ }
+ .landscape-xs-6 {
+ width: 50%;
+ }
+ .landscape-xs-8 {
+ width: 66.66666667%;
+ }
+ .landscape-xs-4 {
+ width: 33.33333333%;
+ }
}
-}
@media(min-width:768px) {
- .visible-mobile {
- display:none !important;
- }
- .visible-desktop {
- display:block;
- }
-
+ .visible-mobile {
+ display: none !important;
+ }
+ .visible-desktop {
+ display: block;
+ }
}
+
@media(max-width:990px) {
.pricing-section .text {
text-align: center;
@@ -964,31 +1132,29 @@ color: #eb4d5c;
}
@media(max-width:768px) {
-.percent-text {
- font-size: 43px;
-}
- .tech-sub-sec h2 {
- font-size: 30px;
-line-height: 40px;
-}
-.single-heading h2 {
- font-size: 50px;
+ .percent-text {
+ font-size: 43px;
+ }
+ .tech-sub-sec h2 {
+ font-size: 30px;
+ line-height: 40px;
+ }
+ .single-heading h2 {
+ font-size: 50px;
+ }
+ .logo-wrap {
+ padding: 10px;
+ }
+ .navbar-transparent li a {
+ color: #777 !important;
}
-.logo-wrap {
- padding: 10px;
-}
-.navbar-transparent li a {
- color: #777 !important;
-}
.intro-message {
padding-bottom: 15%;
}
-
- .intro-message > h1 {
+ .intro-message>h1 {
font-size: 3em;
}
-
- ul.intro-social-buttons > li {
+ ul.intro-social-buttons>li {
display: block;
margin-bottom: 20px;
padding: 0;
@@ -1001,11 +1167,9 @@ line-height: 40px;
.intro-pricing .intro-message {
padding-bottom: 0;
}
-
- ul.intro-social-buttons > li:last-child {
+ ul.intro-social-buttons>li:last-child {
margin-bottom: 0;
}
-
.intro-divider {
width: 100%;
}
@@ -1014,17 +1178,17 @@ line-height: 40px;
border: none;
padding: 5px;
}
- .navbar-transparent #logoBlack{
+ .navbar-transparent #logoBlack {
display: block;
}
- .navbar-transparent #logoWhite{
+ .navbar-transparent #logoWhite {
display: none;
}
.navbar-transparent .navbar-nav>li>a {
font-size: 14px;
color: #777;
}
- .nav-language:hover{
+ .nav-language:hover {
height: 80px;
}
.navbar-transparent .nav-language .select-language {
@@ -1041,7 +1205,6 @@ line-height: 40px;
border: 1px solid rgba(119, 119, 119, 0.4);
box-shadow: none;
}
-
.navbar-default .nav-language .drop-language {
background: #fff;
/* border: 1px solid #fff; */
@@ -1056,11 +1219,13 @@ line-height: 40px;
.navbar-default .nav-language .drop-language a {
color: #777;
}
- .navbar-transparent .navbar-nav>li>a:focus, .navbar-transparent .navbar-nav>li>a:hover {
+ .navbar-transparent .navbar-nav>li>a:focus,
+ .navbar-transparent .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
- .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
+ .navbar-default .navbar-nav>li>a:focus,
+ .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
@@ -1070,17 +1235,17 @@ line-height: 40px;
.split-section .icon-section {
min-height: 160px;
}
- .split-section.what .icon-section{
+ .split-section.what .icon-section {
min-height: 160px;
}
- .split-section .icon-section i{
+ .split-section .icon-section i {
font-size: 120px;
}
- .split-section .split-text .split-title h2{
+ .split-section .split-text .split-title h2 {
font-size: 35px;
line-height: 35px;
}
- .pricing-section .text .section-heading{
+ .pricing-section .text .section-heading {
font-size: 35px;
line-height: 35px;
}
@@ -1094,7 +1259,7 @@ line-height: 40px;
text-align: center;
margin-bottom: 55px;
}
- .request-section .title h2::before{
+ .request-section .title h2::before {
left: 50%;
transform: translate(-50%, 0);
}
@@ -1102,13 +1267,13 @@ line-height: 40px;
width: 300px;
margin: 0 auto;
}
- .contact-section .title h2{
+ .contact-section .title h2 {
font-size: 35px;
line-height: 40px;
text-align: center;
margin-top: 35px;
}
- .contact-section .title h2::before{
+ .contact-section .title h2::before {
left: 50%;
transform: translate(-50%, 0);
}
@@ -1116,12 +1281,10 @@ line-height: 40px;
color: #29427A;
font-size: 30px;
}
-
.intro-pricing .intro-message .section-heading {
font-size: 30px;
}
-
- .price-calc-section{
+ .price-calc-section {
flex-direction: column;
padding: 60px 10px !important;
}
@@ -1135,7 +1298,7 @@ line-height: 40px;
margin-top: 20px;
}
.price-calc-section .text .section-heading {
- font-size: 35px;
+ font-size: 35px;
line-height: 35px;
padding-bottom: 15px;
text-align: center;
@@ -1148,23 +1311,20 @@ line-height: 40px;
font-size: 18px;
text-align: center;
}
-
- .price-calc-section .card .description .select-number{
+ .price-calc-section .card .description .select-number {
font-size: 17px;
text-align: center;
- width: 65px;
- margin-right: 10px;
+ width: 60px;
}
-
}
@media(max-width:540px) {
-.logo-wrap {
- padding: 30px;
-}
-.percent-text {
- text-align: center;
-}
+ .logo-wrap {
+ padding: 30px;
+ }
+ .percent-text {
+ text-align: center;
+ }
.pricing-section .card {
width: 90%;
}
@@ -1175,10 +1335,10 @@ line-height: 40px;
width: 90%;
padding: 25px 10px;
}
- .intro-message > h1 {
+ .intro-message>h1 {
font-size: 2em;
}
- .price-calc-section .text .section-heading {
+ .price-calc-section .text .section-heading {
font-size: 24px;
line-height: 25px;
}
@@ -1187,14 +1347,13 @@ line-height: 40px;
margin-left: 0px;
}
.pull-left.space-middle {
- width: 67%;
- padding: 20px 0px;
- text-align: left;
-}
-.pull-left.ssdimg {
- width: 30%;
-}
-
+ width: 67%;
+ padding: 20px 0px;
+ text-align: left;
+ }
+ .pull-left.ssdimg {
+ width: 30%;
+ }
}
.network-name {
@@ -1223,9 +1382,6 @@ line-height: 40px;
border-top: 3px solid #e7e7e7;
}
-
-
-
.btn-buynow {
background-color: #607D8B;
border-color: #607D8B;
@@ -1237,10 +1393,11 @@ line-height: 40px;
margin-top: 15px;
}
}
+
@media(min-width:1200px) {
-.container-small{
- width:980px;
-}
+ .container-small {
+ width: 980px;
+ }
}
footer {
@@ -1252,13 +1409,10 @@ p.copyright {
margin: 15px 0 0;
}
-
a#forgotpassword {
color: #ffffff;
-
}
-
.topnav a:focus {
outline: none;
outline-offset: 0;
@@ -1274,22 +1428,22 @@ a#forgotpassword {
}
.content-404 h1 {
- margin: 0 0 15px;
- font-size: 200px;
- line-height: 1;
- font-weight: 700;
- color: #6db97c;
-
+ margin: 0 0 15px;
+ font-size: 200px;
+ line-height: 1;
+ font-weight: 700;
+ color: #6db97c;
}
.btn-buynow {
background-color: #607D8B;
border-color: #607D8B;
}
-.form-300{
+
+.form-300 {
width: 300px;
}
-.error-message-box{
+.error-message-box {
margin-top: 20px;
}
diff --git a/datacenterlight/static/datacenterlight/js/main.js b/datacenterlight/static/datacenterlight/js/main.js
index be9f1103..44b92a0c 100644
--- a/datacenterlight/static/datacenterlight/js/main.js
+++ b/datacenterlight/static/datacenterlight/js/main.js
@@ -1,22 +1,22 @@
-(function($){
+(function($) {
"use strict"; // Start of use strict
/* ---------------------------------------------
Scripts initialization
--------------------------------------------- */
- var cardPricing ={
+ var cardPricing = {
'cpu': {
'id': 'coreValue',
'value': 1,
- 'min':1,
+ 'min': 1,
'max': 48,
'interval': 1
},
'ram': {
'id': 'ramValue',
'value': 2,
- 'min':2,
+ 'min': 2,
'max': 200,
'interval': 1
},
@@ -28,21 +28,21 @@
'interval': 10
}
};
- $(window).load(function(){
+ $(window).load(function() {
});
- $(document).ready(function(){
+ $(document).ready(function() {
verifiedUrl();
- _navScroll();
- _initScroll();
- _initNavUrl();
- _initPricing();
+ _navScroll();
+ _initScroll();
+ _initNavUrl();
+ _initPricing();
});
- $(window).resize(function(){
+ $(window).resize(function() {
@@ -53,102 +53,112 @@
/* ---------------------------------------------
Nav panel classic
--------------------------------------------- */
- if (window.matchMedia("(min-width: 767px)").matches) {
- $('ul.nav li.dropdown').hover(function() {
- $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
- }, function() {
- $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
- });
-} else {
- /* the viewport is less than 400 pixels wide */
-}
-
-
-
- function _initScroll(){
- $(window).scroll(function(){
- _navScroll();
+ if (window.matchMedia("(min-width: 767px)").matches) {
+ $('ul.nav li.dropdown').hover(function() {
+ $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
+ }, function() {
+ $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
-
+ } else {
+ /* the viewport is less than 400 pixels wide */
}
- function _navScroll(){
- if($(window).scrollTop() > 10 ){
+
+
+ function _initScroll() {
+ $(window).scroll(function() {
+ _navScroll();
+ });
+ }
+
+ function _navScroll() {
+ if ($(window).scrollTop() > 10) {
$(".navbar").removeClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#777");
$(".dropdown-menu").removeClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#777");
- }else{
+ } else {
$(".navbar").addClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#fff");
$(".dropdown-menu").addClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#fff");
}
}
- function _initNavUrl(){
- $('.url').click(function(){
- var href = $(this).attr('data-url');
- $('.navbar-collapse').removeClass('in');
- $('.navbar-collapse').addClass('collapsing');
- $('html, body').animate({
- scrollTop: $(href).offset().top
- }, 1000);
+
+ function _initNavUrl() {
+ $('.url').click(function(event) {
+ event.preventDefault();
+ var href = $(this).attr('data-url');
+ $('.navbar-collapse').removeClass('in');
+ $('.navbar-collapse').addClass('collapsing');
+ var url = window.location.pathname;
+ var urlSplit = url.split('/');
+ if (urlSplit.length === 3 && urlSplit[2] === 'datacenterlight') {
+ $('html, body').animate({
+ scrollTop: $(href).offset().top
+ }, 1000);
+ } else {
+ var allUrl = window.location.href;
+ var redirect = allUrl.split('whydatacenterlight')
+ window.location.href = '/en-us/datacenterlight' + href;
+ }
});
}
- function verifiedUrl(){
- if(window.location.href.indexOf('#success') > -1){
+
+ function verifiedUrl() {
+ if (window.location.href.indexOf('#success') > -1) {
form_success();
- console.log('epa');
}
}
- function _initPricing(){
+ function _initPricing() {
_fetchPricing();
- $('.fa-minus-circle.left').click(function(event){
+ $('.fa-minus-circle.left').click(function(event) {
var data = $(this).data('minus');
- if(cardPricing[data].value > cardPricing[data].min){
+ if (cardPricing[data].value > cardPricing[data].min) {
cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
}
_fetchPricing();
});
- $('.fa-plus-circle.right').click(function(event){
+ $('.fa-plus-circle.right').click(function(event) {
var data = $(this).data('plus');
- if(cardPricing[data].value < cardPricing[data].max){
+ if (cardPricing[data].value < cardPricing[data].max) {
cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
}
_fetchPricing();
});
- $('.input-price').change(function(){
+ $('.input-price').change(function() {
var data = $(this).attr("name");
- cardPricing[data].value = $('input[name='+data+']').val();
+ cardPricing[data].value = $('input[name=' + data + ']').val();
_fetchPricing();
});
}
- function _fetchPricing(){
- Object.keys(cardPricing).map(function(element){
+
+ function _fetchPricing() {
+ Object.keys(cardPricing).map(function(element) {
//$('#'+cardPricing[element].id).val(cardPricing[element].value);
- $('input[name='+element+']').val(cardPricing[element].value);
+ $('input[name=' + element + ']').val(cardPricing[element].value);
});
_calcPricing();
}
- function _calcPricing(){
- var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value);
+ function _calcPricing() {
+ var total = (cardPricing['cpu'].value * 5) + (2 * cardPricing['ram'].value) + (0.6 * cardPricing['storage'].value);
total = parseFloat(total.toFixed(2));
$("#total").text(total);
$('input[name=total]').val(total);
}
- function form_success(){
+
+ function form_success() {
$('#sucessModal').modal('show');
}
- function _calculate(numbers, price){
- $('#valueTotal').text(numbers*price*31);
+
+ function _calculate(numbers, price) {
+ $('#valueTotal').text(numbers * price * 31);
}
-
-
})(jQuery);
diff --git a/datacenterlight/templates/datacenterlight/includes/_navbar.html b/datacenterlight/templates/datacenterlight/includes/_navbar.html
index b5cfacfe..84358b4d 100644
--- a/datacenterlight/templates/datacenterlight/includes/_navbar.html
+++ b/datacenterlight/templates/datacenterlight/includes/_navbar.html
@@ -12,28 +12,28 @@
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
-
-
+
+
{% else %}
-
-
+
+
{% endif %}
-
+