aatish/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'feature/new_digitalglarus' of github.com:ungleich/dynamicweb into feature/new_digitalglarus

Browse source
This commit is contained in:
Levi 2017-02-26 16:51:36 -05:00
commit 116f99a2a3
15 changed files with 467 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
alplora/static/alplora/css/alplora.css
View file

@ -56,8 +56,7 @@ h6 {
color: #f8f8f8;
width: 100%;
height: 70vh;
max-height: 620px;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
@ -76,11 +75,36 @@ h6 {
z-index: 0;
display: none;
}
.intro-header:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(49, 49, 49, 0.15);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.intro-header .arrow-down{
position: absolute;
color: #fff;
bottom: 20px;
z-index: 1000;
}
.intro-header .arrow-down a{
color: #fff;
font-size: 32px;
z-index: 100;
}
.intro-header .background:nth-child(1){
display: block;
}
#about{
padding-top: 70px;
}
.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! */
@ -113,11 +137,54 @@ h6 {
}
.intro-login {
background: url(../img/login-bg.jpg) no-repeat center center;
background: url(../img/banner-4.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
.section-login{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.section-login .box-login{
background: #fff;
padding: 60px;
text-align: center;
border-radius: 4px;
}
.section-login .box-login img{
width: 200px;
}
.section-login .title h1{
font-size: 41px;
}
.section-login .description{
font-size: 20px;
border-bottom: 3px solid #737373;
margin-bottom: 44px;
padding-bottom: 9px;
width: 96px;
margin: 0 auto;
margin-bottom: 44px;
}
.section-login .text{
margin: 5px 10px;
color: #797979;
}
.section-login .text a{
color: #0056c1;
}
.btn-red{
background: #980000;
}
.section-login .btn-login{
color: #fff;
font-weight: 700;
padding: 10px 20px;
text-transform: uppercase;
}
.intro-signup {
background: url(../img/signup-bg.png) no-repeat center center;
background-size: cover;
@ -177,6 +244,7 @@ h6 {
.intro-divider {
width: 100%;
}
}
.network-name {
@ -228,13 +296,28 @@ h6 {
margin-top: 0;
}
.pt-70{
padding-top: 70px;
}
@media (max-width: 1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}
footer {
padding: 2%;
background-color: #f8f8f8;
#position: absolute;
right: 0;
bottom: 0;
left: 0;
}
footer .footer-links{
text-align: right;
padding-top: 50px;
}
@media (max-width: 767px) {
.banner h2 {
margin: 0;
@ -251,16 +334,11 @@ h6 {
ul.banner-social-buttons > li:last-child {
margin-bottom: 0;
}
footer .footer-links{
text-align: left;
}
}
footer {
padding: 2%;
background-color: #f8f8f8;
#position: absolute;
right: 0;
bottom: 0;
left: 0;
}
p.copyright {
margin: 15px 0 0;
@ -472,3 +550,5 @@ img::selection {
#portfolio .portfolio-item {
overflow: hidden;
}
//utils

BIN
alplora/static/alplora/img/banner-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
alplora/static/alplora/img/banner-2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
alplora/static/alplora/img/banner-3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
alplora/static/alplora/img/banner-4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

12
alplora/static/alplora/js/main.js
View file

@ -14,7 +14,7 @@
$( document ).ready(function() {
init_nav();
initBackgroundsHeader();
});
@ -35,4 +35,14 @@
_changeBg(0, arrayElements, 4000);
}
function init_nav(){
$('.nav-local').click(function(){
$('html, body').animate({
scrollTop: $('#'+$(this).data('href')).offset().top
});
});
}
})(jQuery);

76
alplora/templates/alplora/index.html
View file

@ -79,28 +79,28 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="/en-us/"><img src="{% static 'alplora/img/logo_black.svg'%}"></a>
<a class="navbar-brand topnav nav-local" href="javascript:void(0)" data-href="home"><img src="{% static 'alplora/img/logo_black.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 'About' %}</a>
</li>
<li>
<a href="#your">{% trans 'Usecase' %}</a>
<a class="nav-local" href="javascript:void(0)" data-href="about">{% trans 'About' %}</a>
</li>
<li>
<a href="#our">{% trans 'Why Alplora?' %}</a>
<a class="nav-local" href="javascript:void(0)" data-href="why" >{% trans 'Why Alplora?' %}</a>
</li>
<li>
<a href="#price">{% trans 'Testimonials' %}</a>
<a class="nav-local" href="javascript:void(0)" data-href="usecase" >{% trans 'Usecase' %}</a>
</li>
<li>
<a href="#contact">{% trans 'Contact' %}</a>
<a class="nav-local" href="javascript:void(0)" data-href="testimonial" >{% trans 'Testimonials' %}</a>
</li>
<li>
<a href="/hosting/login?next=">{% trans 'Login' %}</a>
<a class="nav-local" href="javascript:void(0)" data-href="contact" >{% trans 'Contact' %}</a>
</li>
<li>
<a href="{% url 'alplora:login' %}">{% trans 'Login' %}</a>
</li>
</ul>
</div>
@ -113,12 +113,13 @@
<a name="about"></a>
<section class="intro-header">
<section class="intro-header" id="home">
<!-- Add images backgrounds url(url-image); -->
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/intro-bg.png' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/configure.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/django-intro-bg.png' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/rails-intro-bg.png' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-1.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-2.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-3.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-4.jpg' %});"></div>
<div class="intro-message">
<img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}">
@ -136,10 +137,15 @@
</div>
<div class="arrow-down">
<a class="nav-local" href="javascript:void(0)" data-href="about">
<i class="glyphicon glyphicon-menu-down"></i>
</a>
</div>
<div class="background backcground-cover" ></div>
</section>
<!-- /.intro-header -->
<section id="whatis">
<section id="about" class="pt-70">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
@ -221,7 +227,7 @@
</div>
</div>
</div></section>
<section id="portfolio" class="bg-light-gray">
<section id="why" class="bg-light-gray pt-70">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
@ -258,8 +264,7 @@
</section>
<!-- Page Content -->
<a name="how"></a>
<div class="content-section-b">
<div class="content-section-b" id="usecase">
<div class="container">
<div class="row">
<div class="col-lg-12 wow text-center fadeInDown">
@ -273,8 +278,6 @@
<!-- Your Infrastructure -->
<a name="your"></a>
<div class="content-section-a" id="own">
<div class="container">
<div class="row">
@ -333,7 +336,7 @@
<!-- /.container -->
</div>
<section id="team" class="bg-light-gray">
<section id="testimonial" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-sm-16 text-center center-block wow fadeInDown">
@ -343,9 +346,9 @@
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 wow fadeInDown">
<div class="col-sm-10 col-sm-offset-1 wow fadeInDown ">
<!-- start:recommendationSlider -->
<div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="3000">
<div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-recommendation-ungleich" data-slide-to="0" class="active"></li>
@ -390,8 +393,7 @@
</div>
</div>
</section>
<a name="about"></a>
<div class="intro-header-1">
<div class="intro-header-1" id="contact">
<div class="container">
<div class="row">
@ -421,18 +423,14 @@
<footer>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6">
<h3>Alplora </h3>
<p><i class="fa fa-envelope-o"></i> info@alplora.ch</p>
<p>In der Au 7 Schwanden 8762</p>
<p>Switzerland</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<ul class="list-inline">
<li>
@ -456,16 +454,16 @@
<a href="#contact">{% trans 'Contact' %}</a>
</li>
</ul>
<div class="col-xs-6 col-lg-4"></div>
<div class="col-xs-6 col-lg-8 text-right">
<a href="www.ungleich.ch">
<img src="{% static 'alplora/img/ungleich_logo.svg'%}">
<img src="{% static 'alplora/img/digitalglarus_logo.svg'%}">
<img src="{% static 'alplora/img/adnexo_logo.svg'%}">
</div>
<p class="copyright text-muted small">Copyright © Alplora 2017. All Rights Reserved</p>
<div class="col-md-6 footer-links">
<a href="http://www.ungleich.ch" target="_blank"><img src="{% static 'alplora/img/ungleich_logo.svg'%}"></a>
<a href="http://www.digitalglarus.ch" target="_blank"> <img src="{% static 'alplora/img/digitalglarus_logo.svg'%}"></a>
<a href="https://www.adnexo.ch" target="_blank"> <img src="{% static 'alplora/img/adnexo_logo.svg'%}"></a>
</div>
</div>
<p class="copyright text-muted small">Copyright © Alplora 2017. All Rights Reserved</p>
</div>
</footer>

216
alplora/templates/alplora/login.html Normal file
View file

@ -0,0 +1,216 @@
{% load staticfiles i18n%}
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Alplora.ch - Find your animal anywhere, anytime</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'alplora/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'alplora/css/pricing.css' %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static 'alplora/css/alplora.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="{% static 'alplora/font-awesome/css/font-awesome.min.css' %}">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="{% static 'alplora/img/favicon.ico' %}" type="image/x-icon">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-feedly-mini="yes">
<script async src="//www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62285904-5', 'auto');
ga('send', 'pageview');
</script>
<!-- Navigation -->
<div class="page-loader">
<div class="loader">
<div class="circle circle-1"></div>
<div class="line line-1"></div>
<div class="circle circle-2"></div>
<div class="line line-2"></div>
<div class="circle circle-3"></div>
<div class="line line-3"></div>
<div class="circle circle-4"></div>
<div class="line line-4"></div>
<div class="circle circle-5"></div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="{% url 'alplora:index' %}"><img src="{% static 'alplora/img/logo_black.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="/alplora#about" data>About</a>
</li>
<li>
<a href="/alplora#usecase">Usecase</a>
</li>
<li>
<a href="/alplora#why">Why Alplora?</a>
</li>
<li>
<a href="/alplora#testimonials">Testimonials</a>
</li>
<li>
<a href="/alplora#contact">Contact</a>
</li>
<li>
<a href="/alplora#login">Login</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="section-login intro-login">
<div class="box-login">
<img src="{% static 'alplora/img/logo_black.svg'%}">
<div class="title">
<h1>Login</h1>
</div>
<div class="description">
Welcome
</div>
<div class="form">
<form action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
</div>
<div class="text"><span>By loggin in you agree to our <a href="#">Terms of Service</a></span></div>
<div class="btn-login">
<button class="submit btn btn-red btn-login btn-round" type="submit">
<span>Login</span>
</button>
</div>
<div class="text"><span>Forgot Password <a href="#">Find ID/Password</a></span></div>
<div class="text"><span>Not a member yet? <a href="#">Sign up</a> now</span></div>
</div>
</section>
<!-- Header -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Alplora </h3>
<p><i class="fa fa-envelope-o"></i> info@alplora.ch</p>
<p>In der Au 7 Schwanden 8762</p>
<p>Switzerland</p>
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about">About</a></li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about">Usecase</a></li>
<li>⋅</li>
<li>
<a href="#about">Why Alplora?</a></li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#services">Testimonials</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="col-md-6 footer-links">
<a href="http://www.ungleich.ch" target="_blank"><img src="{% static 'alplora/img/ungleich_logo.svg'%}"></a>
<a href="http://www.digitalglarus.ch" target="_blank"> <img src="{% static 'alplora/img/digitalglarus_logo.svg'%}"></a>
<a href="https://www.adnexo.ch" target="_blank"> <img src="{% static 'alplora/img/adnexo_logo.svg'%}"></a>
</div>
</div>
<p class="copyright text-muted small">Copyright © Alplora 2017. All Rights Reserved</p>
</div>
</footer>
<!-- Lodash -->
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.min.js"></script>
<!-- jQuery -->
<script src="{% static 'alplora/js/jquery.js' %}"></script>
<!-- Pricing -->
<script src="{% static 'alplora/js/pricing.js' %}"></script>
<!-- Images loaded -->
<script type="text/javascript" src="{% static 'alplora/js/imagesloaded.pkgd.min.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'alplora/js/bootstrap.min.js' %}"></script>
<script src="{% static 'alplora/js/main.js' %}"></script>
</body>
</html>

3
alplora/urls.py
View file

@ -1,10 +1,11 @@
from django.conf.urls import url
from .views import IndexView
from .views import IndexView, LoginView
urlpatterns = [
url(r'^/?$', IndexView.as_view(), name='index'),
url(r'/login/', LoginView.as_view(), name='login'),
# url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
# url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
]

3
alplora/views.py
View file

@ -3,3 +3,6 @@ from django.views.generic import TemplateView
class IndexView(TemplateView):
template_name = "alplora/index.html"
class LoginView(TemplateView):
template_name = "alplora/login.html"

2
datacenterlight/static/datacenterlight/css/main.css
View file

File diff suppressed because one or more lines are too long

64
datacenterlight/static/datacenterlight/js/main.js
View file

@ -1,55 +1,55 @@
(function($){
'use strict'; // Start of use strict
$(document).ready(function(){
init_options_interested();
init_nav();
change_values();
form_submit();
$(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);
});
$('.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({
$('.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);
});
$('.number-vms').keyup(function () {
var number = $(this).val();
var price = $(this).data('price');
_calculate(number, price);
});
}
function form_submit(){
// $('#submit').click(function(){
// $('.contain-form').fadeOut();
// $('.loading').fadeIn();
// setTimeout(function(){
// $('.loading').fadeOut();
// $('.succes-message').fadeIn();
// }, 3000);
// });
}
function form_success(){
$('#sucessModal').modal('show');
}
function _calculate(numbers, price){
$('#valueTotal').text(numbers*price*31);
}
$('#valueTotal').text(numbers*price*31);
}
})(jQuery); // End of use strict

1
datacenterlight/static/datacenterlight/js/plugin.js Normal file
View file

File diff suppressed because one or more lines are too long

35
datacenterlight/templates/datacenterlight/beta.html
View file

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>landings</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
</head>
@ -61,16 +62,31 @@
</form>
</div>
</div>
<div class="loading"><img src="{% static 'datacenterlight/img/loading.gif' %}" alt=""></div>
<div class="succes-message">
<div class="title">
<h1>Thank You</h1></div>
<div class="container" style="margin-top:3rem">
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
<p>Meanwhile, you can checkout news about it on <a href="#">Twitter</a>, <a href="#">Facebook</a> and <a href="#">Instagram</a></p>
</div>
</div>
</section>
<div class="modal fade" id="sucessModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Thank You</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="success-message">
<div class="title">
<h1>Thank You</h1>
</div>
<div class="container" style="margin-top: 3rem">
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
<p>Meanwhile, you can checkout news about it on <a href="#" >Twitter</a>, <a href="#" >Facebook</a> and <a href="#" >Instagram</a> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
! function(e, t, a, n, c, o) {
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
@ -79,6 +95,7 @@
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
</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>
</body>

58
datacenterlight/templates/datacenterlight/landing.html
View file

@ -9,6 +9,7 @@
<title>landings</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
<link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
</head>
@ -26,30 +27,50 @@
<div class="form-interested">
<h2>Details about the offer..<ul><li><span>2 GB RAM</span></li><li><span>1 CPU</span></li><li><span>10 GB Dus</span></li></ul><h2>I am interested in running</h2>
<form action="">
<div class="row-vms d-flex align-items-center justify-content-between row-vms__active">
<div class="form-group">
<input type="number" class="form-control number-vms" value="1" data-price="0.5">
<div class="text"><span>number of VMs</span></div>
</div>
<div class="submit">
<button type="button" id="submit" class="btn btn-block btn-success">Submit</button>
<div class="row-vms d-flex align-items-center justify-content-between row-vms__active">
<div class="form-group ">
<input type="number" class="form-control number-vms" value='1' data-price="0.5">
</div>
<div class="text text__landing">
<span>number of VMs </span>
</div>
<div class="form-group form-group__email">
<input class="form-control" type="email" placeholder="email" id="example-email-input">
</div>
<div class="submit">
<button type="button" id="submit" class="btn btn-block btn-success">Submit</button>
</div>
</div>
<p>Interested in other offers? <a href="index.html">Checkout our beta program offers!</a></p>
</form>
<p >Interested in other offers? <a href="index.html">Checkout our beta program offers!</a></p>
</form>
</h2>
</div>
</div>
<div class="loading"><img src="{% static 'datacenterlight/img/loading.gif' %}" alt=""></div>
<div class="succes-message">
<div class="title">
<h1>Thank You</h1></div>
<div class="container" style="margin-top:3rem">
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
<p>Meanwhile, you can checkout news about it on <a href="#">Twitter</a>, <a href="#">Facebook</a> and <a href="#">Instagram</a></p>
</div>
</div>
</section>
<div class="modal fade" id="sucessModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Thank You</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="success-message">
<div class="title">
<h1>Thank You</h1>
</div>
<div class="container" style="margin-top: 3rem">
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
<p>Meanwhile, you can checkout news about it on <a href="#" >Twitter</a>, <a href="#" >Facebook</a> and <a href="#" >Instagram</a> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
! function(e, t, a, n, c, o) {
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
@ -58,6 +79,7 @@
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
</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>
</body>