op text sections added, from email fixed

datacenterlight/static/datacenterlight/css/glasfaser.css

@@ -97,7 +97,6 @@
 
 .high-speed-border:first-of-type {
     width: 40%;
-/*     right: 0; */
     left: initial;
 }
 
@@ -113,6 +112,31 @@
     top: -10px;
 }
 
+
+.split-section .container {
+    width: 1120px;
+}
+.split-section {
+    padding: 90px 0;
+}
+.split-section.right {
+    padding: 100px 0;
+    background: rgba(0,0,0,0.03);
+}
+.split-section.right .split-description {
+    width: 100%;
+}
+.split-section .split-text .split-title h2,
+.split-section.left .split-text .split-title h2 {
+    font-size: 40px;
+    letter-spacing: 0.5px;
+}
+.split-section.left .split-text .split-title::before,
+.split-section.right .split-text .split-title::before {
+    width: 90%;
+    max-width: 420px;
+}
+
 .team-member h4 {
     font-family: 'Raleway', Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-weight: 700;
@@ -121,8 +145,9 @@
 
 .timeline>li .timeline-panel {
     display: flex;
-    min-height: 100px;
+    min-height: 80px;
     align-items: center;
+    padding-bottom: 15px;
 }
 
 .timeline>li.timeline-inverted>.timeline-panel {
@@ -172,6 +197,9 @@ footer {
         height: 240px;
         width: 240px;
     }
+    .timeline>li .timeline-panel {
+        min-height: 100px;
+    }
 }
 
 @media (min-width: 992px) {
@@ -179,4 +207,7 @@ footer {
         min-height: 320px;
         width: 320px;
     }
+    .timeline>li .timeline-panel {
+        min-height: 170px;
+    }
 }

datacenterlight/urls.py

@@ -1,18 +1,15 @@
 from django.conf.urls import url
 
-from .views import IndexView, BetaProgramView, LandingProgramView, \
+from .views import (
-    BetaAccessView, SuccessView, \
+    IndexView, BetaProgramView, LandingProgramView, BetaAccessView,
-    PaymentOrderView, OrderConfirmationView, \
+    SuccessView, 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'),
@@ -28,4 +25,8 @@ urlpatterns = [
     url(r'^order-success/?$', SuccessView.as_view(), name='order_success'),
     url(r'^beta_access?$', BetaAccessView.as_view(), name='beta_access'),
     url(r'^contact/?$', ContactUsView.as_view(), name='contact_us'),
+
+    url(r'glasfaser/?$',
+        TemplateView.as_view(template_name='ungleich_page/glasfaser.html'),
+        name='glasfaser'),
 ]

datacenterlight/views.py

@@ -55,7 +55,9 @@ class ContactUsView(FormView):
                 sender=form.cleaned_data.get('email')
             ),
             'from_email': settings.DCL_SUPPORT_FROM_ADDRESS,
-            'to': ['info@ungleich.ch'],
+            'to': '{}@ungleich.ch'.format(
+                self.request.POST.get('from_page', 'info')
+            ),
             'body': "\n".join(
                 ["%s=%s" % (k, v) for (k, v) in form.cleaned_data.items()]),
             'reply_to': [form.cleaned_data.get('email')],

ungleich_page/templates/ungleich_page/glasfaser.html

@@ -23,8 +23,7 @@
     <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=Open+Sans+Condensed:700|Lato:300,400,700,300italic,400italic,700italic|Montserrat:400,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">
@@ -37,11 +36,40 @@
     <!-- 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" %}
+    {% 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">Technische Details</a>
+            </li>
+            <li>
+              <a class="page-scroll" href="#about">Wie funktioniert es?</a>
+            </li>
+            <li>
+              <a class="page-scroll" href="#contact">{% trans "CONTACT" %}</a>
+            </li>
+          </ul>
+          <!-- /.navbar-collapse -->
+        </div>
+      </div>
+    </nav>
 
     <!-- Header -->
     <div class="intro-header" id="home">
@@ -55,6 +83,35 @@
       </div>
     </div>
 
+    <div class="split-section left" id="your">
+      <div class="container">
+        <div class="split-text">
+          <div class="split-title wow fadeInDown">
+            <h2>Unser Glasfaser-Angebot für Glarus Nord, Glarus und Glarus Süd</h2>
+          </div>
+          <div class="split-description wow fadeInUp">
+            <p class="lead"><strong>Surfen Sie mit 100 Mbit/s im Internet!</strong></p>
+            <p class="lead">Mit dem neuen Glasfaser-Angebot der ungleich macht das Arbeiten im Internet richtig Spass. Das beste daran: die Geschwindigkeit symmetrisch in beide Richtungen verfügbar. Damit kann ihr Firmennetzwerk auch Dienste bereitstellen.</p>
+            <p class="lead">Dieses Angebot ist im Moment ausschliesslich für Firmenkunden verfügbar. Die Aufschaltkosten der Glasfaserleitung sind von der Entfernung zum nächsten Anschlusspunkt abhängig. Fragen Sie noch heute nach einem individuellem Angebot.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <section class="split-section right" id="our">
+      <div class="container">
+        <div class="split-text text-center">
+          <div class="wow fadeInDown">
+            <h2 class="section-heading text-center">Was ist es?</h2>
+            <h3 class="section-subheading text-muted"></h3>
+          </div>
+          <div class="split-description text-center wow fadeInUp">
+            <p class="lead">Bei diesem Angebot handelt es sich um einen Internetzugang für Firmenkunden.</p>
+            <p class="lead">Sie erhalten in Zusammenarbeit mit unseren Partnern einen Glasfaseranschluss und eine Internetverbindung.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <section id="services">
       <div class="container">
         <div class="text-center wow fadeInDown">
@@ -64,7 +121,7 @@
         <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/glasfaser/business.png' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
+              <img src="{% static 'ungleich_page/img/glasfaser/business.png' %}" class="img-responsive img-circle" alt="">
               <div class="team-member-caption inline-block">
                 <h4 class="portfolio-caption">Business-Internet</h4>
                 <p class="text-muted">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</p>
@@ -74,7 +131,7 @@
           </div>
           <div class="col-sm-4">
             <div class="team-member wow fadeInDown" data-wow-delay="1s">
-              <img src="{% static 'ungleich_page/img/glasfaser/ip.png' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
+              <img src="{% static 'ungleich_page/img/glasfaser/ip.png' %}" class="img-responsive img-circle" alt="">
               <div class="team-member-caption inline-block">
                 <h4 class="portfolio-caption">Erreichbarkeit im Internet</h4>
                 <p class="text-muted">1 öffentliches IPv6-Netzwerk (/64)</p>
@@ -84,7 +141,7 @@
           </div>
           <div class="col-sm-4">
             <div class="team-member wow fadeInDown" data-wow-delay="1.5s">
-              <img src="{% static 'ungleich_page/img/glasfaser/switch.png' %}"  data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
+              <img src="{% static 'ungleich_page/img/glasfaser/switch.png' %}" class="img-responsive img-circle" alt="">
               <div class="team-member-caption inline-block">
                 <h4 class="portfolio-caption">Einfach zu nutzen</h4>
                 <p class="text-muted">2 vorkonfigurierte Endgeräte (benötigt zwei Steckdosen auf Ihrer Seite)</p>
@@ -168,7 +225,7 @@
                 <div class="description">
                   <p>glasfaser@ungleich.ch</p>
                   <p>In der Au 7, Schwanden 8762</p>
-                  <p>{% trans "Switzerland " %}</p>
+                  <p>Switzerland</p>
                 </div>
               </div>
               <div class="social">
@@ -198,6 +255,7 @@
                     </div>
                     <form class="form-horizontal ajax-form" method="POST" action="{% url 'datacenterlight:contact_us' %}" data-toggle="validator" data-response="#contact-form">
                         {% csrf_token %}
+                        <input type="hidden" value="glasfaser" name="from_page">
                         <div class="form-group">
                             <label class="control-label col-sm-2" for="name">{% trans "Name" %}</label>
                             <div class="col-sm-10">
@@ -252,13 +310,8 @@
     <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"
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
-            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 -->
@@ -269,16 +322,9 @@
     <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"
+    <link href="{% static  'ungleich_page/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
-          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>