Redesign DCL Page
This commit is contained in:
Henry Bravo
parent
4a4ca3ff15
commit
767e95895a
32 changed files with 3589 additions and 2438 deletions
|
|
@ -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! */
|
||||
padding-bottom: 50px;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
color: #f8f8f8;
|
||||
background: url(../img/intro-bg.jpg) no-repeat center center;
|
||||
color: #fff;
|
||||
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%;
|
||||
padding-bottom: 20%;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
.intro-signup {
|
||||
position: relative;
|
||||
|
|
@ -67,8 +202,9 @@ h6 {
|
|||
|
||||
.intro-message > h1 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 5em;
|
||||
font-weight: 400;
|
||||
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;
|
||||
|
|
@ -200,8 +638,8 @@ p.copyright {
|
|||
|
||||
|
||||
a#forgotpassword {
|
||||
color: #ffffff;
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
4
datacenterlight/static/datacenterlight/font-awesome/css/font-awesome.min.css
vendored
Executable file → Normal file
4
datacenterlight/static/datacenterlight/font-awesome/css/font-awesome.min.css
vendored
Executable file → Normal file
File diff suppressed because one or more lines are too long
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/FontAwesome.otf
Executable file → Normal file
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/FontAwesome.otf
Executable file → Normal file
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.eot
Executable file → Normal file
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.eot
Executable file → Normal file
Binary file not shown.
3185
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.svg
Executable file → Normal file
3185
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.svg
Executable file → Normal file
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 434 KiB |
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.ttf
Executable file → Normal file
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.ttf
Executable file → Normal file
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.woff
Executable file → Normal file
BIN
datacenterlight/static/datacenterlight/font-awesome/fonts/fontawesome-webfont.woff
Executable file → Normal file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Black.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Black.ttf
Executable file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Bold.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Bold.ttf
Executable file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-ExtraBold.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-ExtraBold.ttf
Executable file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Italic.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Italic.ttf
Executable file
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Light.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Light.ttf
Executable file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Medium.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Medium.ttf
Executable file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Regular.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Regular.ttf
Executable file
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-SemiBold.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-SemiBold.ttf
Executable file
Binary file not shown.
Binary file not shown.
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Thin.ttf
Executable file
BIN
datacenterlight/static/datacenterlight/fonts/Montserrat/Montserrat-Thin.ttf
Executable file
Binary file not shown.
Binary file not shown.
92
datacenterlight/static/datacenterlight/fonts/Montserrat/OFL.txt
Executable file
92
datacenterlight/static/datacenterlight/fonts/Montserrat/OFL.txt
Executable file
|
|
@ -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.
|
||||
55
datacenterlight/static/datacenterlight/js/beta.js
Normal file
55
datacenterlight/static/datacenterlight/js/beta.js
Normal file
|
|
@ -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
|
||||
|
|
@ -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();
|
||||
init_nav();
|
||||
change_values();
|
||||
_navScroll();
|
||||
_initScroll();
|
||||
_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');
|
||||
}
|
||||
|
|
@ -51,5 +72,62 @@
|
|||
$('#valueTotal').text(numbers*price*31);
|
||||
}
|
||||
|
||||
|
||||
|
||||
})(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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,28 +52,29 @@
|
|||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
|
||||
<a class="url" href="javascript:void(0)" data-url="#contact" >{% trans "Contact" %}</a>
|
||||
</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>
|
||||
{% else %}
|
||||
|
|
@ -84,8 +86,7 @@
|
|||
<option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
|
||||
{% endif %}
|
||||
|
||||
</select>
|
||||
</li>
|
||||
</select>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
@ -97,23 +98,22 @@
|
|||
|
||||
|
||||
<!-- Header -->
|
||||
<a name="about"></a>
|
||||
<div class="intro-header">
|
||||
<div class="intro-header" id="home">
|
||||
<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,159 +121,167 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="triangle-left"></div>
|
||||
<div class="triangle-right"></div>
|
||||
<!-- /.container -->
|
||||
|
||||
</div>
|
||||
<!-- /.intro-header -->
|
||||
|
||||
<!-- Page Content -->
|
||||
<a name="how"></a>
|
||||
<div class="content-section-b">
|
||||
<div class="split-section right" id="how">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
|
||||
<hr class="section-heading-spacer">
|
||||
<div class="clearfix"></div>
|
||||
<h2 class="section-heading">{% trans "How it works :" %}</h2> <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>
|
||||
<li><i class="fa-li fa fa-check-square-o fa-lg"></i>
|
||||
<p class="lead">{% trans "Being creative, using modern and alternative design for a datacenter." %} </p></li>
|
||||
<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 class="col-xs-12 col-sm-6 col-md-6 icon-section">
|
||||
<i class="fa fa-cogs" aria-hidden="true"></i>
|
||||
</div>
|
||||
<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>
|
||||
<li><i class="fa-li fa fa-check-square-o fa-lg"></i>
|
||||
<p class="lead">{% trans "Being creative, using modern and alternative design for a datacenter." %}</p></li>
|
||||
<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>
|
||||
</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">
|
||||
<hr class="section-heading-spacer">
|
||||
<div class="clearfix"></div>
|
||||
<h2 class="section-heading">{% trans "Scale out" %}</h2>
|
||||
<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 class="col-xs-12 col-sm-6 col-md-6">
|
||||
<div class="split-text">
|
||||
<div class="split-title">
|
||||
<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>
|
||||
</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 class="col-xs-12 col-sm-6 col-md-6 icon-section">
|
||||
<i class="fa fa-rocket" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<!-- /.option 1 -->
|
||||
</div>
|
||||
<!-- /.option 2 -->
|
||||
<!-- /.content-section-a -->
|
||||
<!-- / pricing -->
|
||||
<a name="our"></a>
|
||||
<div class="content-section-b">
|
||||
<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">
|
||||
<hr class="section-heading-spacer">
|
||||
<div class="clearfix"></div>
|
||||
<h2 class="section-heading">{% trans "Reliable and light" %}</h2>
|
||||
<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 class="col-xs-12 col-sm-6 col-md-6 icon-section">
|
||||
<i class="fa fa-handshake-o" aria-hidden="true"></i>
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
|
||||
<!-- /.option 1 -->
|
||||
</div>
|
||||
|
||||
<!-- /.content-section-b -->
|
||||
<a name="price"></a>
|
||||
<div class="content-section-a">
|
||||
<div class="content-section-a pricing-section" id="price">
|
||||
|
||||
<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-sm-3 col-lg-4 hero-feature">
|
||||
<div class="thumbnail">
|
||||
<img class="relsonsive" src="{% static 'datacenterlight/img/economy.jpg' %}" alt="">
|
||||
<div class="caption">
|
||||
<h3>{% trans "VM hosting" %} </h3>
|
||||
<p>{% trans "Based in Switzerland" %}</p>
|
||||
<p>1 core, </p>
|
||||
<p>2 GiB RAM, </p>
|
||||
<p>{% trans "15 GiB storage(SSD)" %}</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary btn-buynow">{% trans "Buy Now!" %}</a> <a href="#" class="btn btn-default">{% trans "More Info" %}</a> </p>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-xs-12 col-md-6 text">
|
||||
<h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
|
||||
<p class="lead">{% trans "Affordable VM hosting based in Switzerland" %}</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">{% trans "Buy Now!" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-lg-4 hero-feature"></div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Configure -->
|
||||
<a name="about"></a>
|
||||
<div class="intro-header-1">
|
||||
<div class="request-section" >
|
||||
<div class="container">
|
||||
<a href="" id="requestform"></a>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
|
||||
<div class="intro-message">
|
||||
<h1>{% trans "I want to try!" %}</h1>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
|
||||
|
||||
|
||||
<form class="form-inline" method="POST" action="">
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="title">
|
||||
<h2>{% trans "I want to try!" %}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="form">
|
||||
<form class="form-beta" method="POST" action="">
|
||||
{% csrf_token %}
|
||||
{{ form.non_field_errors }}
|
||||
{{ form.email.errors|striptags}}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputEmail3">{% trans "Email address" %}</label>
|
||||
<input type="email" name="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
|
||||
<div>
|
||||
{% for message in messages %}
|
||||
<strong>{{ message }}</strong>
|
||||
{% 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 class="modal fade bs-example-modal-sm" style="color:black;" id="reques-success-message" tabindex="-1" role="dialog">
|
||||
</div>
|
||||
<div class="modal fade bs-example-modal-sm" style="color:black;" id="sucessModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -289,48 +297,48 @@
|
|||
</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="banner">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6"></div>
|
||||
<div class="col-lg-6">
|
||||
<h2>{% trans "QUESTIONS?" %} </h2>
|
||||
<h2>{% trans "CONTACT US!" %} </h2>
|
||||
<h3>ungleich GmbH </h3>
|
||||
<p><i class="fa fa-envelope-o"></i> info@datacenterlight.ch</p>
|
||||
<p>In der Au 7, Schwanden 8762</p>
|
||||
<p>{% trans "Switzerland " %}</p>
|
||||
|
||||
<button type="button" class="btn btn-default">
|
||||
<a href="https://twitter.com/ungleich">
|
||||
<i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span></a>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default">
|
||||
<a href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i><span class="network-name">Github</span></a></button>
|
||||
<div class="full-contact-section">
|
||||
<div class="intro-header-2 contact-section" id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="card">
|
||||
<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>
|
||||
<div class="social">
|
||||
<a class="" href="https://twitter.com/ungleich">
|
||||
<i class="fa fa-twitter fa-fw"></i>
|
||||
</a>
|
||||
<a class="" href="https://github.com/ungleich">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue