first iteration

This commit is contained in:
Arvind Tiwari 2017-10-10 00:04:19 +05:30
commit 695a8687fd
11 changed files with 652 additions and 131 deletions

View file

@ -0,0 +1,160 @@
.topnav img {
height: 100%;
}
.navbar-default {
border-bottom: 1px solid #e7e7e7;
}
.navbar-transparent {
border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
/* font-family: 'Montserrat'; */
color: #777;
}
.navbar-transparent .navbar-nav>li>a {
color: #fff;
}
.navbar-transparent .navbar-nav>li>a:hover,
.navbar-transparent .navbar-nav>li>a:focus,
.navbar-transparent .navbar-nav>li>a:focus:active {
color: #fed136;
}
.navbar-transparent {
background: rgba(0,0,0,0.05);
box-shadow: 0 0 55px rgba(0,0,0,0.09);
}
.intro-header {
background: url(../img/header-nico-sans.jpg) no-repeat center center;
background-size: cover;
background-position: left;
background-color: rgb(118, 140, 163);
background-attachment: fixed;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-toP: 70px;
}
.intro-header:before {
background: transparent;
background: rgba(0,0,0,0.2);
}
.price-tag-container {
flex-grow: 1;
display: flex;
flex-direction: column;
margin-right: 8%;
margin-left: 10px;
justify-content: center;
position: relative;
}
.price-tag {
background: url(../img/header-pricetag.png) no-repeat center center;
height: 225px;
width: 225px;
background-size: cover;
}
.high-speed {
width: 100%;
text-align: right;
margin-bottom: 25px;
position: relative;
/* background: rgba(0,0,0,0.2);
box-shadow: 0 0 150px rgba(0,0,0,0.41); */
}
.high-speed h1 {
font-size: 32px;
font-weight: 700;
font-family: 'Open Sans Condensed';
padding: 10px 15px 10px 0;
text-shadow: 0px 2px 2px rgba(0,0,0,0.52);
color: #fff;
}
.high-speed-border {
background: #fff;
height: 3px;
position: absolute;
right: 0;
left: 20px;
}
.high-speed-border:first-of-type {
width: 40%;
right: 0;
left: initial;
}
.high-speed-border:before {
content: ' ';
display: inline-block;
height: 23px;
width: 23px;
border-radius: 100%;
background: #fff;
position: absolute;
left: -5px;
top: -10px;
}
.contact-section h2,
.contact-section h3,
.contact-section p {
color: rgba(255,255,255,0.9);
text-transform: initial;
font-weight: 300;
font-family: 'Lato';
}
.contact-section p {
font-size: 20px;
}
footer {
padding: 20px;
}
@media(min-width: 768px) {
section {
padding: 100px 0;
}
}
@media (min-width: 768px) {
.intro-header {
align-items: flex-end;
}
.high-speed h1 {
font-size: 88px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.intro-header {
background-position: -100px;
background-size: auto 110%;
}
.price-tag {
height: 240px;
width: 240px;
}
}
@media (min-width: 992px) {
.price-tag {
min-height: 320px;
width: 320px;
}
}

View file

@ -276,7 +276,7 @@ button, input, optgroup, select, textarea {
display: block;
} */
.intro-header {
height: 100vh;
min-height: 100vh;
text-align: center;
color: #fff;
background: url(../img/configure.jpg) no-repeat center center;
@ -715,9 +715,10 @@ button, input, optgroup, select, textarea {
font-size: 65px;
margin: 0;
position: relative;
/* color: #eee;
/* color: #eee;
padding-bottom: 25px;
text-align: right; */
/* color: #fff; */
}
.contact-form .form-group {

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View file

@ -18,7 +18,7 @@
<!-- Custom Fonts -->
<!--Import Google Icon Font-->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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" />
@ -26,6 +26,8 @@
<!-- Custom CSS -->
<link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
{% block css_extra %}
{% endblock css_extra %}
<!-- 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:// -->
@ -42,7 +44,9 @@
<body>
<!-- Navigation -->
{% include "datacenterlight/includes/_navbar.html" %}
{% block navbar %}
{% include "datacenterlight/includes/_navbar.html" %}
{% endblock navbar %}
{% block content %}

View file

@ -0,0 +1,240 @@
{% load static bootstrap3 i18n %}
<!DOCTYPE html>
<html lang="{{LANGUAGE_CODE}}">
<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>ungleich GmbH</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'ungleich_page/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'ungleich_page/css/lib/animate.min.css' %}" rel="stylesheet">
<!-- 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]-->
<link href="//fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="{% static 'ungleich_page/css/agency.css' %}" rel="stylesheet">
<link href="{% static 'ungleich_page/css/ungleich.css' %}" rel="stylesheet">
<link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
<link href="{% static 'datacenterlight/css/glasfaser.css' %}" rel="stylesheet">
<!-- Google analytics -->
{% include "google_analytics.html" %}
<!-- End Google Analytics -->
<link rel="shortcut icon" href="{% static 'ungleich_page/img/favicon.ico' %}" type="image/x-icon">
<style id="igtranslator-color" type="text/css"></style>
</head>
<body id="page-top" class="index">
{% include "datacenterlight/includes/_navbar_glasfaser.html" %}
<!-- Header -->
<div class="intro-header" id="home">
<div class="price-tag-container">
<div class="price-tag"></div>
</div>
<div class="high-speed">
<div class="high-speed-border"></div>
<h1>{% trans "HIGH SPEED INTERNET" %}</h1>
<div class="high-speed-border"></div>
</div>
</div>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">Technische Details</h2>
<h3 class="section-subheading text-muted">
Im Angebot enthalten sind
</h3>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="0.5s">
<img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Title</h4>
<p>&nbsp;</p>
<p><span class="text-muted">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</span></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1s">
<img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Title</h4>
<p>&nbsp;</p>
<p><span class="text-muted">1 öffentliche IPv4-Adresse</span></p>
<p class="text-muted">&nbsp;</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<h4 class="portfolio-caption">Title</h4>
<p class="text-muted">&nbsp;</p>
<div class="team-member-caption inline-block">
<p class="text-muted">1 öffentliches IPv6-Netzwerk (/64)</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<h4 class="portfolio-caption">Title</h4>
<p class="text-muted">&nbsp;</p>
<div class="team-member-caption inline-block">
<p class="text-muted">2 vorkonfigurierte Endgeräte (benötigt zwei Steckdosen auf Ihrer Seite)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">Wie funktioniert es?</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/1.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>Title</h4>
</div>
<div class="timeline-body">
<p>Senden Sie uns via E-Mail Ihren Firmennamen und Ihre Anschrift zu. Wir prüfen dann die Entfernung zum nächsten Anschlusspunkt und schicken Ihnen eine Offerte zu. Sollten Sie dem Angebot zustimmen, wird die Glasfaser zu Ihrem Standort verlegt und ein Endgerät installiert.</p>
</div>
</div></li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4>Title</h4>
</div>
<div class="timeline-body">
<p>Sie müssen dann nur noch Ihre Geräte anschliessen und schon surfen sie bllitzschnell im Internet!</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- / contact section -->
<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">
<div class="title">
<h2>{% trans "Contact us" %}</h2>
</div>
<div class="contact-details">
<div class="subtitle">
<h3>ungleich GmbH</h3>
</div>
<div class="description">
<p>info@ungleich.ch</p>
<p>In der Au 7, Schwanden 8762</p>
<p>{% trans "Switzerland " %}</p>
</div>
</div>
<div class="social">
<a target="_blank" class="" href="https://twitter.com/datacenterlight"><i class="fa fa-twitter fa-fw"></i></a>
<a target="_blank" class="" href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i></a>
<a target="_blank" class="" href="https://www.facebook.com/ungleich.ch/"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="col-sm-6">
<div id="contact-form" class="contact-form">
{% include "datacenterlight/contact_form.html" %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.banner -->
<!-- Footer -->
{% include "ungleich_page/includes/_footer.html" %}
<!-- jQuery -->
<script src="{% static 'ungleich_page/js/jquery.js' %}" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($(".has-error").length != 0) {
window.location = window.location.pathname + "#contact"
}
});
</script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'ungleich_page/js/bootstrap.min.js' %}" type="text/javascript"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
type="text/javascript"></script>
<script src="{% static 'ungleich_page/js/classie.js' %}" type="text/javascript"></script>
<!-- Contact Form JavaScript -->
<script src="{% static 'ungleich_page/js/jqBootstrapValidation.js' %}" type="text/javascript"></script>
<!-- <script src="{% static 'ungleich_page/js/contact_me.js' %}" type="text/javascript"></script> -->
<script src="{% static 'ungleich_page/js/lib/wow.min.js' %}" type="text/javascript"></script>
<!-- Custom Theme JavaScript -->
<script src="{% static 'ungleich_page/js/ungleich.js' %}" type="text/javascript"></script>
<!-- Custom Fonts -->
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
<!-- Load form js -->
<script src="{% static 'datacenterlight/js/form.js' %}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="{% static 'ungleich_page/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet"
type="text/css">
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet"
type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
</body>
</html>

View file

@ -0,0 +1,40 @@
{% load staticfiles i18n%}
{% load custom_tags %}
{% get_current_language as LANGUAGE_CODE %}
<nav class="navbar navbar-default navbar-fixed-top topnav">
<div class="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">{% trans "Toggle navigation" %}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav"><img src="{% static 'ungleich_page/img/logo_black.svg' %}"></a>
<a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'ungleich_page/img/logo_white.svg' %}"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Start Navbar collapse-->
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#services">{% trans "Services"%}</a></li>
<li>
<a class="page-scroll" href="#portfolio">{% trans "products"%}</a></li>
<li></li>
<li>
<a class="page-scroll" href="#about">{% trans "About"%}</a>
</li>
<li>
<a class="page-scroll" href="#team">{% trans "WHY UNGLEICH?"%}</a>
</li>
<li>
<a class="page-scroll" href="http://blog.ungleich.ch">{% trans "BLOG"%}</a>
</li>
<li>
<a class="page-scroll" href="#contact">{% trans "CONTACT"%} </a>
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</nav>

View file

@ -5,7 +5,14 @@ from .views import IndexView, BetaProgramView, LandingProgramView, \
PaymentOrderView, OrderConfirmationView, \
WhyDataCenterLightView, ContactUsView
from django.views.generic import TemplateView
urlpatterns = [
url(r'test/?$',
TemplateView.as_view(template_name='datacenterlight/glasfaser.html'),
name='test'
),
url(r'^$', IndexView.as_view(), name='index'),
url(r'^t/$', IndexView.as_view(), name='index_t'),
url(r'^g/$', IndexView.as_view(), name='index_g'),