Merge pull request #370 from ungleich/geethamondi-task/3488/create_whydcl_page
Geethamondi task/3488/create whydcl page
This commit is contained in:
Pcoder
GitHub
commit
dafd11c592
15 changed files with 582 additions and 68 deletions
|
|
@ -20,7 +20,7 @@ h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: 'Lato-Regular', sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
/*blue light #5A74AF*/
|
/*blue light #5A74AF*/
|
||||||
|
|
@ -108,10 +108,12 @@ h6 {
|
||||||
}
|
}
|
||||||
.navbar-default .navbar-nav>li>a {
|
.navbar-default .navbar-nav>li>a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.navbar-transparent .navbar-nav>li>a {
|
.navbar-transparent .navbar-nav>li>a {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.navbar-transparent .navbar-nav>li>a:hover {
|
.navbar-transparent .navbar-nav>li>a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -145,11 +147,13 @@ h6 {
|
||||||
}
|
}
|
||||||
.navbar-transparent .nav-language .select-language{
|
.navbar-transparent .nav-language .select-language{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-language .select-language span{
|
.nav-language .select-language span{
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
|
|
||||||
}
|
}
|
||||||
.nav-language .drop-language{
|
.nav-language .drop-language{
|
||||||
|
|
@ -171,6 +175,7 @@ h6 {
|
||||||
}
|
}
|
||||||
.nav-language .drop-language a{
|
.nav-language .drop-language a{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.navbar-transparent .nav-language .drop-language{
|
.navbar-transparent .nav-language .drop-language{
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
@ -178,6 +183,7 @@ h6 {
|
||||||
}
|
}
|
||||||
.navbar-transparent .nav-language .drop-language a{
|
.navbar-transparent .nav-language .drop-language a{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.nav-language:hover .drop-language{
|
.nav-language:hover .drop-language{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -444,7 +450,8 @@ h6 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.pricing-section .text .section-heading{
|
.pricing-section .text .section-heading{
|
||||||
font-size: 50px;
|
/*font-size: 50px;*/
|
||||||
|
font-size: 48px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
padding-bottom: 25px;
|
padding-bottom: 25px;
|
||||||
color: #3a3a3a;
|
color: #3a3a3a;
|
||||||
|
|
@ -570,6 +577,138 @@ h6 {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
right: 0;
|
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%);
|
||||||
|
}
|
||||||
|
.whydcl-header {
|
||||||
|
padding: 150px 0 150px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #f8f8f8;
|
||||||
|
background: url(../img/pattern.jpg) no-repeat center center;
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.whydcl-header::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(90, 116, 175,0.85);
|
||||||
|
/*background: rgba(45,70,122,0.8);*/
|
||||||
|
}
|
||||||
|
.single-heading h2 {
|
||||||
|
font-size: 65px;
|
||||||
|
margin: 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;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
color: #3a3a3a;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.logo-wrap {
|
||||||
|
text-align: center;
|
||||||
|
min-height: 140px;
|
||||||
|
padding: 20px 40px 30px 40px;
|
||||||
|
}
|
||||||
|
.btm-space{
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.percent-text {
|
||||||
|
font-size: 50px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.tech-sub-sec h2 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 55px;
|
||||||
|
}
|
||||||
|
.space-middle{
|
||||||
|
padding: 45px 0;
|
||||||
|
}
|
||||||
|
.padding-vertical{
|
||||||
|
padding: 35px 0;
|
||||||
|
}
|
||||||
|
.percent-text img {
|
||||||
|
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);
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
padding: 5px !important;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
padding: 1px 10px !important;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.dropdown-menu > li > a {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
|
}
|
||||||
|
.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*/
|
/*Pricing page*/
|
||||||
|
|
||||||
|
|
@ -578,6 +717,7 @@ h6 {
|
||||||
background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
|
background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
|
||||||
background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
|
background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.price-calc-section .text{
|
.price-calc-section .text{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
@ -633,6 +773,7 @@ h6 {
|
||||||
padding: 15px 40px;
|
padding: 15px 40px;
|
||||||
}
|
}
|
||||||
.price-calc-section .card .title h3{
|
.price-calc-section .card .title h3{
|
||||||
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
}
|
}
|
||||||
.price-calc-section .card .price{
|
.price-calc-section .card .price{
|
||||||
background: #5A74AF;
|
background: #5A74AF;
|
||||||
|
|
@ -737,7 +878,62 @@ color: #eb4d5c;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@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 !importantx;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@media(max-width:990px) {
|
@media(max-width:990px) {
|
||||||
.pricing-section .text {
|
.pricing-section .text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -753,6 +949,22 @@ color: #eb4d5c;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:768px) {
|
@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;
|
||||||
|
}
|
||||||
|
.logo-wrap {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.navbar-transparent li a {
|
||||||
|
color: #777 !important;
|
||||||
|
}
|
||||||
.intro-message {
|
.intro-message {
|
||||||
padding-bottom: 15%;
|
padding-bottom: 15%;
|
||||||
}
|
}
|
||||||
|
|
@ -794,7 +1006,7 @@ color: #eb4d5c;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.navbar-transparent .navbar-nav>li>a {
|
.navbar-transparent .navbar-nav>li>a {
|
||||||
font-size: 15px;
|
font-size: 14px;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
.nav-language:hover{
|
.nav-language:hover{
|
||||||
|
|
@ -931,6 +1143,12 @@ color: #eb4d5c;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:540px) {
|
@media(max-width:540px) {
|
||||||
|
.logo-wrap {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.percent-text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
.pricing-section .card {
|
.pricing-section .card {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
@ -952,6 +1170,14 @@ color: #eb4d5c;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
.pull-left.space-middle {
|
||||||
|
width: 67%;
|
||||||
|
padding: 20px 0px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.pull-left.ssdimg {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -995,9 +1221,11 @@ color: #eb4d5c;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media(min-width:1200px) {
|
||||||
|
.container-small{
|
||||||
|
width:980px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
|
|
|
||||||
BIN
datacenterlight/static/datacenterlight/img/Ceph_Logo.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/Ceph_Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
datacenterlight/static/datacenterlight/img/cdistbyungleich.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/cdistbyungleich.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
datacenterlight/static/datacenterlight/img/devuan.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/devuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
datacenterlight/static/datacenterlight/img/django.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/django.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
datacenterlight/static/datacenterlight/img/opennebula.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/opennebula.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
datacenterlight/static/datacenterlight/img/prometheus.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/prometheus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
datacenterlight/static/datacenterlight/img/python-logo.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/python-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
datacenterlight/static/datacenterlight/img/ssd.jpg
Normal file
BIN
datacenterlight/static/datacenterlight/img/ssd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
datacenterlight/static/datacenterlight/img/tayga.png
Normal file
BIN
datacenterlight/static/datacenterlight/img/tayga.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -53,6 +53,16 @@
|
||||||
/* ---------------------------------------------
|
/* ---------------------------------------------
|
||||||
Nav panel classic
|
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(){
|
function _initScroll(){
|
||||||
|
|
@ -66,9 +76,13 @@
|
||||||
if($(window).scrollTop() > 10 ){
|
if($(window).scrollTop() > 10 ){
|
||||||
$(".navbar").removeClass("navbar-transparent");
|
$(".navbar").removeClass("navbar-transparent");
|
||||||
$(".navbar-default .btn-link").css("color", "#777");
|
$(".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").addClass("navbar-transparent");
|
||||||
$(".navbar-default .btn-link").css("color", "#fff");
|
$(".navbar-default .btn-link").css("color", "#fff");
|
||||||
|
$(".dropdown-menu").addClass("navbar-transparent");
|
||||||
|
$(".dropdown-menu > li > a").css("color", "#fff");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function _initNavUrl(){
|
function _initNavUrl(){
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
{% load staticfiles i18n%}
|
{% load staticfiles i18n%}
|
||||||
{% get_current_language as LANGUAGE_CODE %}
|
{% get_current_language as LANGUAGE_CODE %}
|
||||||
{% load custom_tags %}
|
{% load custom_tags %}
|
||||||
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
|
<nav class="navbar navbar-default navbar-fixed-top topnav">
|
||||||
<div class="topnav">
|
<div class="topnav">
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||||
|
|
@ -11,32 +11,32 @@
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
</button>
|
</button>
|
||||||
{% if request.resolver_match.url_name == "index" %}
|
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
|
||||||
<a id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
|
<a href="{% url 'datacenterlight:index' %}" 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>
|
<a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a id="logoBlack" class="navbar-brand topnav url" href="/datacenterlight"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
|
<a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
|
||||||
<a id="logoWhite" class="navbar-brand topnav url" href="/datacenterlight"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
|
<a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
{% if request.resolver_match.url_name == "index" %}
|
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
|
||||||
<li>
|
<li class="dropdown">
|
||||||
<a class="url" href="javascript:void(0)" data-url="#how" >{% trans "Highlights" %}</a>
|
<a class="dropdown-toggle visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
|
||||||
|
<a class="dropdown-toggle url disabled visible-desktop" href="{% url 'datacenterlight:index' %}#how" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li>
|
||||||
|
<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
|
||||||
|
<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="url" href="javascript:void(0)" data-url="#your" >{% trans "Scale out" %}</a>
|
<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a>
|
<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact" >{% trans "Contact" %}</a>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Order VM" %}</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="url" href="javascript:void(0)" data-url="#contact" >{% trans "Contact" %}</a>
|
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="nav-language">
|
<li class="nav-language">
|
||||||
|
|
@ -58,10 +58,7 @@
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.navbar-collapse -->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container -->
|
</nav>
|
||||||
</nav>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,254 @@
|
||||||
|
{% extends "datacenterlight/base.html" %}
|
||||||
|
{% load staticfiles i18n%}
|
||||||
|
{% get_current_language as LANGUAGE_CODE %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Why Data Center Light? -->
|
||||||
|
<div class="full-whydcl-sec">
|
||||||
|
<div class="whydcl-header whydcl-section" id="why_dcl">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-12">
|
||||||
|
<div class="single-heading">
|
||||||
|
<h2>{% trans "Why Data Center Light?" %}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="split-section left" id="tech_stack">
|
||||||
|
<div class="space">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<div class="split-text">
|
||||||
|
<div class="split-title">
|
||||||
|
<h2>{% trans "Tech Stack" %}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="split-description">
|
||||||
|
<h3>{% trans "We are seriously open source." %}</h3>
|
||||||
|
<p class="lead">{% blocktrans %} Our full software stack is open source – We don't use anything that isn't open source. <br>Yes, we are that cool. {% endblocktrans %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan">
|
||||||
|
<span class="logo-caption">{% trans "Our services run on" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
|
||||||
|
<span class="logo-caption">{% trans "Our monitoring" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
|
||||||
|
<span class="logo-caption">{% trans "Our storage layer" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django">
|
||||||
|
<span class="logo-caption">{% trans "Our web frontend" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
|
||||||
|
<span class="logo-caption">{% trans "Our cloud" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist by ungleich">
|
||||||
|
<span class="logo-caption">{% trans "Our configuration management system" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python">
|
||||||
|
<span class="logo-caption">{% trans "Our awesome juice" %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
|
||||||
|
<span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /.container -->
|
||||||
|
<hr class="thick-divider"/><!-- Divider -->
|
||||||
|
<div class=" space">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-5 ">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
|
||||||
|
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-8 col-md-7 text-right">
|
||||||
|
<div class="tech-sub-sec">
|
||||||
|
<h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
|
||||||
|
<p class="lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS). <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /.container -->
|
||||||
|
<hr class="thick-divider"/><!-- Divider -->
|
||||||
|
<div class="space">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec">
|
||||||
|
<h2>{% trans "We bring the future to you." %}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6">
|
||||||
|
<p class="lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
|
||||||
|
Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
|
||||||
|
{% endblocktrans %}</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right landscape-xs-6">
|
||||||
|
100% <strong>IPv6</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-12 space-block"></div>
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||||
|
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8">
|
||||||
|
<span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-right tech-sub-sec padding-vertical landscape-xs-4">
|
||||||
|
<div>
|
||||||
|
<p class="lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /.container -->
|
||||||
|
</div>
|
||||||
|
<!-- /.content-section-b -->
|
||||||
|
<div class="content-section-a pricing-section" id="price">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<!-- Page Features -->
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-xs-12 col-md-6 text">
|
||||||
|
<h2 class="section-heading">{% trans "Starting from only 15CHF per month. Try now." %}</h2>
|
||||||
|
<p class="lead">{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-md-6 hero-feature">
|
||||||
|
<div class="price-calc-section no-padding">
|
||||||
|
<div class="landing card">
|
||||||
|
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
||||||
|
<div class="caption">
|
||||||
|
<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
|
||||||
|
{% csrf_token %}
|
||||||
|
<div class="title">
|
||||||
|
<h3>{% trans "VM hosting" %} </h3>
|
||||||
|
</div>
|
||||||
|
<div class="price">
|
||||||
|
<span id="total">15</span>
|
||||||
|
<span>CHF/{% trans "month" %}</span>
|
||||||
|
<div class="price-text">
|
||||||
|
<p>{% trans "VAT included" %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="descriptions">
|
||||||
|
<div class="description form-group">
|
||||||
|
<p>{% trans "Hosted in Switzerland" %}</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
||||||
|
<input class="input-price select-number" type="number" min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
|
||||||
|
<span> Core</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
||||||
|
<input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
|
||||||
|
<span> GB RAM</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
||||||
|
<input id="storageValue" class="input-price select-number" type="number" min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
|
||||||
|
<span>{% trans "GB Storage (SSD)" %}</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="description select-configuration input form-group justify-center">
|
||||||
|
<label for="config">OS</label>
|
||||||
|
<select name="config" id="">
|
||||||
|
{% for template in templates %}
|
||||||
|
<option value="{{template.id}}">{{template.name}} </option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="total">
|
||||||
|
<!--<div class="description check-ip">
|
||||||
|
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
||||||
|
</div>-->
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input justify-center">
|
||||||
|
<label for="name" class="control-label">{% trans "Name"%}</label>
|
||||||
|
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors">
|
||||||
|
{% for message in messages %}
|
||||||
|
{% if 'name' in message.tags %}
|
||||||
|
<ul class="list-unstyled"><li>
|
||||||
|
{{ message|safe }}
|
||||||
|
</li></ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input justify-center">
|
||||||
|
<label for="email" class="control-label">{% trans "Email"%}</label>
|
||||||
|
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors">
|
||||||
|
{% for message in messages %}
|
||||||
|
{% if 'email' in message.tags %}
|
||||||
|
<ul class="list-unstyled"><li>
|
||||||
|
{{ message|safe }}
|
||||||
|
</li></ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- End Why Data Center Light? -->
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
from django.conf.urls import url
|
from django.conf.urls import url
|
||||||
|
|
||||||
from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView, SuccessView, PaymentOrderView, OrderConfirmationView
|
from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView, SuccessView, PaymentOrderView, OrderConfirmationView, WhyDataCenterLightView
|
||||||
|
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
url(r'^/?$', IndexView.as_view(), name='index'),
|
url(r'^/?$', IndexView.as_view(), name='index'),
|
||||||
|
url(r'^/whydatacenterlight/?$', WhyDataCenterLightView.as_view(), name='whydatacenterlight'),
|
||||||
url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
|
url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
|
||||||
url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
|
url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
|
||||||
url(r'^/pricing/?$', PricingView.as_view(), name='pricing'),
|
url(r'^/pricing/?$', PricingView.as_view(), name='pricing'),
|
||||||
|
|
|
||||||
|
|
@ -185,7 +185,6 @@ class BetaProgramView(CreateView):
|
||||||
messages.add_message(self.request, messages.SUCCESS, self.success_message)
|
messages.add_message(self.request, messages.SUCCESS, self.success_message)
|
||||||
return HttpResponseRedirect(self.get_success_url())
|
return HttpResponseRedirect(self.get_success_url())
|
||||||
|
|
||||||
|
|
||||||
class IndexView(CreateView):
|
class IndexView(CreateView):
|
||||||
template_name = "datacenterlight/index.html"
|
template_name = "datacenterlight/index.html"
|
||||||
model = BetaAccess
|
model = BetaAccess
|
||||||
|
|
@ -307,6 +306,27 @@ class IndexView(CreateView):
|
||||||
messages.add_message(self.request, messages.SUCCESS, self.success_message)
|
messages.add_message(self.request, messages.SUCCESS, self.success_message)
|
||||||
return super(IndexView, self).form_valid(form)
|
return super(IndexView, self).form_valid(form)
|
||||||
|
|
||||||
|
class WhyDataCenterLightView(IndexView):
|
||||||
|
template_name = "datacenterlight/whydatacenterlight.html"
|
||||||
|
model = BetaAccess
|
||||||
|
|
||||||
|
@cache_control(no_cache=True, must_revalidate=True, no_store=True)
|
||||||
|
def get(self, request, *args, **kwargs):
|
||||||
|
try:
|
||||||
|
manager = OpenNebulaManager()
|
||||||
|
templates = manager.get_templates()
|
||||||
|
context = {
|
||||||
|
'templates': VirtualMachineTemplateSerializer(templates, many=True).data,
|
||||||
|
}
|
||||||
|
except:
|
||||||
|
messages.error( request,
|
||||||
|
'We have a temporary problem to connect to our backend. \
|
||||||
|
Please try again in a few minutes'
|
||||||
|
)
|
||||||
|
context = {
|
||||||
|
'error' : 'connection'
|
||||||
|
}
|
||||||
|
return render(request, self.template_name, context)
|
||||||
|
|
||||||
class PaymentOrderView(FormView):
|
class PaymentOrderView(FormView):
|
||||||
template_name = 'hosting/payment.html'
|
template_name = 'hosting/payment.html'
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue