Merge pull request #579 from tiwariav/task/4119/dcl_cms_plugins

task/4119/dcl_cms_plugins

datacenterlight/cms_models.py

@@ -0,0 +1,180 @@
+from djangocms_text_ckeditor.fields import HTMLField
+from cms.models.pluginmodel import CMSPlugin
+from django.db import models
+from django.utils.safestring import mark_safe
+from filer.fields.image import FilerImageField
+
+# Models for CMS Plugins
+
+
+class DCLSectionPluginModel(CMSPlugin):
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional heading for the Section',
+    )
+    content = HTMLField()
+    TEXT_DIRECTIONS = (
+        ('left', 'Left'),
+        ('right', 'Right')
+    )
+    text_direction = models.CharField(
+        choices=TEXT_DIRECTIONS, max_length=10, default=True,
+        help_text='The alignment of text in the section'
+    )
+    html_id = models.SlugField(
+        blank=True, null=True,
+        help_text=(
+            'An optional html id for the Section. Required to set as target '
+            'of a link on page'
+        )
+    )
+    plain_heading = models.BooleanField(
+        default=False,
+        help_text='Select to keep the heading style simpler.'
+    )
+    center_on_mobile = models.BooleanField(
+        default=False,
+        help_text='Select to center align content on small screens.'
+    )
+    background_gradient = models.BooleanField(
+        default=False,
+        help_text='Select to add a gradient background to the section.'
+    )
+
+    def get_extra_classes(self):
+        extra_classes = self.text_direction
+        if self.center_on_mobile:
+            extra_classes += ' section-sm-center'
+        if self.background_gradient:
+            extra_classes += ' section-gradient'
+        if self.plain_heading:
+            extra_classes += ' split-section-plain'
+        return extra_classes
+
+    def __str__(self):
+        return '#' + self.html_id if self.html_id else str(self.pk)
+
+
+class DCLBannerListPluginModel(CMSPlugin):
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional heading for the Section',
+    )
+    html_id = models.SlugField(
+        blank=True, null=True,
+        help_text=(
+            'An optional html id for the Section. Required to set as target '
+            'of a link on page'
+        )
+    )
+
+    def __str__(self):
+        return '#' + self.html_id if self.html_id else str(self.pk)
+
+
+class DCLBannerItemPluginModel(CMSPlugin):
+    content = HTMLField()
+    banner_text = HTMLField(
+        blank=True, null=True, max_length=100,
+        help_text='Optional text to be shown as banner in other half.',
+    )
+    banner_image = FilerImageField(
+        on_delete=models.CASCADE, null=True, blank=True,
+        help_text='Optional image to be used in the banner in other half.'
+    )
+    TEXT_DIRECTIONS = (
+        ('left', 'Left'),
+        ('right', 'Right')
+    )
+    text_direction = models.CharField(
+        choices=TEXT_DIRECTIONS, max_length=10, default=True,
+        help_text='The alignment of text in the section'
+    )
+
+    def get_extra_classes(self):
+        extra_classes = ''
+        if self.text_direction == 'left':
+            extra_classes = 'flex-row-rev'
+        return extra_classes
+
+
+class DCLLinkPluginModel(CMSPlugin):
+    target = models.CharField(
+        max_length=100,
+        help_text='Url or #id to navigate to'
+    )
+    text = models.CharField(
+        max_length=50,
+        help_text='Text for the menu item'
+    )
+    title = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text=(
+            'Optional title text, that will be shown when a user '
+            'hovers over the link'
+        )
+    )
+    separator = models.BooleanField(
+        default=False,
+        help_text='Select to include a separator after the previous link'
+    )
+
+
+class DCLNavbarDropdownPluginModel(CMSPlugin):
+    target = models.CharField(
+        max_length=100, null=True, blank=True,
+        help_text='Optional Url or #id to navigate on click'
+    )
+    text = models.CharField(
+        max_length=50,
+        help_text='Text for the dropdown toggle'
+    )
+
+
+class DCLContactPluginModel(CMSPlugin):
+    heading = models.CharField(max_length=100, default="Contact", blank=True)
+    organization_name = models.CharField(
+        max_length=100, default="ungleich GmbH", blank=True
+    )
+    email = models.EmailField(max_length=200, default="info@ungleich.ch")
+    address = models.CharField(
+        max_length=100, default="In der Au 7, Schwanden 8762", blank=True
+    )
+    country = models.CharField(
+        max_length=100, default="Switzerland", blank=True
+    )
+    form_header = models.CharField(
+        max_length=100, default="Send us a message.", blank=True
+    )
+
+
+class DCLFooterPluginModel(CMSPlugin):
+    copyright_label = models.CharField(
+        max_length=100, default='ungleich GmbH', blank=True,
+        help_text='Name of the company alongside the copyright year'
+    )
+
+
+class DCLSectionIconPluginModel(CMSPlugin):
+    fontawesome_icon_name = models.CharField(
+        max_length=30,
+        help_text=mark_safe(
+            'Name of the fontawesome icon to use. '
+            '<a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">'
+            'Refer docs.</a>'
+        )
+    )
+
+
+class DCLSectionImagePluginModel(CMSPlugin):
+    image = FilerImageField(
+        on_delete=models.CASCADE,
+        help_text=(
+            'Image file to be used in section. Add multiple plugins '
+            'to add more than one image'
+        )
+    )
+    caption = models.CharField(
+        max_length=100, null=True, blank=True,
+        help_text='Optional caption for the image.'
+    )

datacenterlight/cms_plugins.py

@@ -0,0 +1,134 @@
+from cms.plugin_base import CMSPluginBase
+from cms.plugin_pool import plugin_pool
+from cms.models.pluginmodel import CMSPlugin
+
+from .cms_models import (
+    DCLBannerItemPluginModel, DCLBannerListPluginModel, DCLContactPluginModel,
+    DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel,
+    DCLSectionIconPluginModel, DCLSectionImagePluginModel,
+    DCLSectionPluginModel,
+)
+from .models import VMTemplate
+
+
+@plugin_pool.register_plugin
+class DCLSectionPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Plugin"
+    model = DCLSectionPluginModel
+    render_template = "datacenterlight/cms/section.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLSectionIconPlugin', 'DCLSectionImagePlugin']
+
+
+@plugin_pool.register_plugin
+class DCLSectionIconPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Icon Plugin"
+    model = DCLSectionIconPluginModel
+    render_template = "datacenterlight/cms/section_icon.html"
+    cache = False
+    require_parent = True
+
+
+@plugin_pool.register_plugin
+class DCLSectionImagePlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Image Plugin"
+    model = DCLSectionImagePluginModel
+    render_template = "datacenterlight/cms/section_image.html"
+    cache = False
+    require_parent = True
+
+
+@plugin_pool.register_plugin
+class DCLCalculatorPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Calculator Plugin"
+    model = DCLSectionPluginModel
+    render_template = "datacenterlight/cms/calculator.html"
+    cache = False
+
+    def render(self, context, instance, placeholder):
+        context = super(DCLCalculatorPlugin, self).render(
+            context, instance, placeholder
+        )
+        context['templates'] = VMTemplate.objects.all()
+        return context
+
+
+@plugin_pool.register_plugin
+class DCLBannerListPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Banner List Plugin"
+    model = DCLBannerListPluginModel
+    render_template = "datacenterlight/cms/banner_list.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLBannerItemPlugin']
+
+
+@plugin_pool.register_plugin
+class DCLBannerItemPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Banner Item Plugin"
+    model = DCLBannerItemPluginModel
+    render_template = "datacenterlight/cms/banner_item.html"
+    cache = False
+    require_parent = True
+    parent_classes = ['DCLBannerListPlugin']
+
+
+@plugin_pool.register_plugin
+class DCLNavbarPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Navbar Plugin"
+    model = CMSPlugin
+    render_template = "datacenterlight/cms/navbar.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLLinkPlugin', 'DCLNavbarDropdownPlugin']
+
+
+@plugin_pool.register_plugin
+class DCLNavbarDropdownPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Navbar Dropdown Plugin"
+    model = DCLNavbarDropdownPluginModel
+    render_template = "datacenterlight/cms/navbar_dropdown.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLLinkPlugin']
+    require_parent = True
+    parent_classes = ['DCLNavbarPlugin']
+
+
+@plugin_pool.register_plugin
+class DCLLinkPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Link Plugin"
+    model = DCLLinkPluginModel
+    render_template = "datacenterlight/cms/link.html"
+    cache = False
+    require_parent = True
+
+
+@plugin_pool.register_plugin
+class DCLContactPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Contact Plugin"
+    model = DCLContactPluginModel
+    render_template = "datacenterlight/cms/contact.html"
+    cache = False
+
+
+@plugin_pool.register_plugin
+class DCLFooterPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Footer Plugin"
+    model = DCLFooterPluginModel
+    render_template = "datacenterlight/cms/footer.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLLinkPlugin']

datacenterlight/migrations/0012_dclcalculatorpluginmodel.py

@@ -0,0 +1,138 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2018-03-01 20:41
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import djangocms_text_ckeditor.fields
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0014_auto_20160404_1908'),
+        ('datacenterlight', '0011_auto_20180220_1423'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='DCLSectionPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('heading', models.CharField(blank=True, help_text='An optional heading for the Section', max_length=100, null=True)),
+                ('content', djangocms_text_ckeditor.fields.HTMLField()),
+                ('text_direction', models.CharField(choices=[('left', 'Left'), ('right', 'Right')], default=True, help_text='The alignment of text in the section', max_length=10)),
+                ('html_id', models.SlugField(blank=True, help_text='An optional html id for the Section. Required to set as target of a link on page', null=True)),
+                ('center_on_mobile', models.BooleanField(default=False, help_text='Select to center align content on small screens.')),
+                ('background_gradient', models.BooleanField(default=False, help_text='Select to add a gradient background to the section.')),
+                ('plain_heading', models.BooleanField(default=False, help_text='Select to keep the heading style simpler.')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLNavbarDropdownPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('text', models.CharField(help_text='Text for the dropdown toggle', max_length=50)),
+                ('target', models.CharField(blank=True, help_text='Optional Url or #id to navigate on click', max_length=100, null=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLContactPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('heading', models.CharField(blank=True, default='Contact', max_length=100)),
+                ('organization_name', models.CharField(blank=True, default='ungleich GmbH', max_length=100)),
+                ('email', models.EmailField(default='info@ungleich.ch', max_length=200)),
+                ('address', models.CharField(blank=True, default='In der Au 7, Schwanden 8762', max_length=100)),
+                ('country', models.CharField(blank=True, default='Switzerland', max_length=100)),
+                ('form_header', models.CharField(blank=True, default='Send us a message.', max_length=100)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLFooterPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('copyright_label', models.CharField(blank=True, default='ungleich GmbH', help_text='Name of the company alongside the copyright year', max_length=100)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLLinkPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('target', models.CharField(help_text='Url or #id to navigate to', max_length=100)),
+                ('text', models.CharField(help_text='Text for the menu item', max_length=50)),
+                ('title', models.CharField(blank=True, help_text='Optional title text, that will be shown when a user hovers over the link', max_length=100, null=True)),
+                ('separator', models.BooleanField(default=False, help_text='Select to include a separator after the previous link')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLSectionIconPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('fontawesome_icon_name', models.CharField(help_text='Name of the fontawesome icon to use. <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Refer docs.</a>', max_length=30)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLSectionImagePluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('caption', models.CharField(blank=True, help_text='Optional caption for the image.', max_length=100, null=True)),
+                ('image', filer.fields.image.FilerImageField(help_text='Image file to be used in section. Add multiple plugins to add more than one image', on_delete=django.db.models.deletion.CASCADE, to='filer.Image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLBannerListPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('heading', models.CharField(blank=True, help_text='An optional heading for the Section', max_length=100, null=True)),
+                ('html_id', models.SlugField(blank=True, help_text='An optional html id for the Section. Required to set as target of a link on page', null=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.CreateModel(
+            name='DCLBannerItemPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('content', djangocms_text_ckeditor.fields.HTMLField()),
+                ('banner_text', djangocms_text_ckeditor.fields.HTMLField(blank=True, help_text='Optional text to be shown as banner in other half.', max_length=100, null=True)),
+                ('text_direction', models.CharField(choices=[('left', 'Left'), ('right', 'Right')], default=True, help_text='The alignment of text in the section', max_length=10)),
+                ('banner_image', filer.fields.image.FilerImageField(blank=True, help_text='Optional image to be used in the banner in other half.', null=True, on_delete=django.db.models.deletion.CASCADE, to='filer.Image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

datacenterlight/models.py

@@ -29,3 +29,6 @@ class ContactUs(models.Model):
     email = models.CharField(max_length=250)
     message = models.TextField()
     field = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.name

datacenterlight/static/datacenterlight/css/cms.css

@@ -1,51 +1,15 @@
-.dcl-cms_page-full-width {
+/* only for cms editing mode */
-    color: #fff;
+.section-figure  .cms-plugin {
-    text-align: center;
+    flex-basis: 50%;
-    background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%);
+    flex-grow: 1;
-    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%);
 }
 
-.dcl-cms_page-header {
+.split-section-plain .section-figure  .cms-plugin {
-    padding: 150px 0 150px 0;
+  flex-grow: 0;
-    text-align: center;
-    color: #f8f8f8;
-    background: url(../img/pattern.jpg) no-repeat center center;
-    background-size: cover;
-    position: relative;
-    background-attachment: fixed;
-}
-
-.dcl-cms_page-header::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(90, 116, 175, 0.85);
-}
-
-.dcl-cms_page-header .container {
-    position: relative;
-}
-
-#dcl-cms_page-text {
-    background: #fff;
-}
-
-#dcl-cms_page-text h3 {
-    font-size: 42px;
-    width: 70%;
 }
 
 @media (max-width: 767px) {
-    #dcl-cms_page-text h3 {
+  .section-figure  .cms-plugin {
-        font-size: 30px;
+    flex-basis: 100%;
-        line-height: 40px;
+  }
-        width: 100%;
-    }
 }

datacenterlight/static/datacenterlight/css/header-slider.css

@@ -0,0 +1,179 @@
+.header_slider > .carousel .carousel-inner {
+    min-height: 95vh;
+    display: flex;
+}
+
+.header_slider > .carousel .carousel-inner > .next,
+.header_slider > .carousel .carousel-inner > .prev {
+    bottom: 0;
+}
+
+.header_slider .carousel-indicators {
+    width: 100%;
+    left: 0;
+    margin-left: 0;
+}
+
+.header_slider .carousel-indicators li {
+    margin-right: 25px;
+    width: 16px;
+    height: 16px;
+}
+
+.header_slider .carousel-indicators li.active {
+    background-color: #ffffff;
+}
+
+.header_slider .carousel-control {
+    display: none;
+}
+
+.header_slider .carousel-control .fa {
+    font-size: 2em;
+    position: absolute;
+    top: 50%;
+    margin-top: -50px;
+}
+
+.header_slider > .carousel .item {
+    background: rgba(0,0,0,0.5);
+    flex: 1;
+}
+
+.header_slider > .carousel .item .container {
+    overflow: auto;
+    padding: 50px 20px 60px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    /* background: rgba(0,0,0,0.5); */
+}
+
+.header_slider .intro-cap {
+    margin: 0;
+    text-align: right;
+    line-height: 1.1;
+    font-size: 23px;
+    padding-bottom: 10px;
+    color: #fff;
+}
+
+.header_slider .btn-trans {
+    align-self: flex-end;
+    z-index: 2;
+    position: relative;
+}
+
+@media (max-width: 767px) {
+    .header_slider .intro-cap,
+    .header_slider .intro_lead {
+        font-weight: 400;
+    }
+}
+
+@media (min-width: 768px) {
+    .header_slider .intro-cap {
+        font-size: 2.5em;
+    }
+    .header_slider .carousel-control {
+        width: 50px;
+        display: block;
+    }
+    .header_slider .carousel-control .fa-angle-left {
+        left: 25px;
+    }
+    .header_slider .carousel-control .fa-angle-right {
+        right: 25px;
+    }
+    .header_slider .carousel-control .fa {
+        font-size: 4em;
+    }
+    .header_slider > .carousel .item .container {
+        overflow: auto;
+        padding: 75px 50px;
+    }
+    .header_slider .btn-trans {
+        padding: 8px 15px;
+        min-width: 175px;
+        letter-spacing: 1px;
+        font-size: 1.25em;
+    }
+}
+
+@media (min-width: 992px) {
+    .header_slider .intro-cap {
+        font-size: 3.25em;
+    }
+}
+
+.header_slider .intro_lead {
+    color: #fff;
+    font-size: 1.55em;
+    text-align: right;
+    line-height: 1.4;
+    margin-bottom: 0;
+    padding-bottom: 10px;
+}
+
+@media (max-width: 768px) {
+    .header_slider .intro_lead {
+        font-size: 1.1em;
+        margin-bottom: 15px;
+    }
+
+    .header_slider .carousel-indicators li {
+        margin: 1px 25px;
+        width: 16px;
+        height: 16px;
+    }
+    .header_slider .carousel-indicators li.active {
+        margin: 0 25px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.bg_img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+}
+
+.bg_vid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+}
+
+@media (min-aspect-ratio: 16/9) {
+  .bg_vid > video {
+    width: 100%;
+    height: auto;
+  }
+}
+
+@media (max-aspect-ratio: 16/9) {
+  .bg_vid > video {
+    /* width: auto; */
+    height: 100%;
+  }
+}
+
+.btn-trans {
+    color: #fff;
+    border: 2px solid #fff;
+    padding: 4px 18px;
+    letter-spacing: 0.6px;
+    background: rgba(0,0,0,0.35);
+}

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -19,17 +19,6 @@ textarea {
  * blue dark #29427A
  */
 
-
-.lead {
-  font-size: 18px;
-}
-
-@media (min-width: 768px) {
-  .lead-right {
-    text-align: right;
-  }
-}
-
 .btn {
   box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
 }
@@ -102,14 +91,32 @@ textarea {
   color: #fff;
 }
 
-.navbar-transparent .navbar-nav>li>a {
+.navbar-transparent .navbar-nav>li a {
   color: #fff;
 }
 
-.navbar-transparent .navbar-nav>li>a:focus,
+.navbar-transparent .navbar-nav>li a:focus,
-.navbar-transparent .navbar-nav>li>a:hover {
+.navbar-transparent .navbar-nav>li a:active,
+.navbar-transparent .navbar-nav>li a:hover {
   color: #fff;
   background-color: transparent;
+  text-decoration: none;
+}
+
+.navbar .dcl-link {
+  display: block;
+  padding: 15px;
+  color: #777;
+}
+
+.navbar .dcl-link:focus,
+.navbar .dcl-link:active,
+.navbar .dcl-link:hover {
+  text-decoration: none;
+}
+
+.navbar .dropdown-menu .dcl-link {
+  padding: 1px 10px;
 }
 
 .navbar-transparent .navbar-nav>li>.on-hover-border {
@@ -195,8 +202,8 @@ textarea {
   margin-left: 15px;
 }
 
-.dropdown-menu>li>a:focus,
+.dropdown-menu>li a:focus,
-.dropdown-menu>li>a:hover {
+.dropdown-menu>li a:hover {
   background: transparent;
   text-decoration: underline !important;
 }
@@ -237,6 +244,44 @@ textarea {
   padding: 5px 10px !important;
 }
 
+
+/* dcl header */
+.dcl-header {
+    padding: 150px 0 150px 0;
+    text-align: center;
+    color: #f8f8f8;
+    background: url(../img/pattern.jpg) no-repeat center center;
+    background-size: cover;
+    position: relative;
+    background-attachment: fixed;
+}
+
+.dcl-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(90, 116, 175, 0.85);
+}
+
+.dcl-header .container {
+    position: relative;
+}
+
+.dcl-header h1 {
+  font-size: 65px;
+  margin: 0;
+  padding: 0;
+}
+
+@media(max-width:767px) {
+  .dcl-header h1 {
+    font-size: 50px;
+  }
+}
+
 .intro-header {
   min-height: 100vh;
   text-align: center;
@@ -332,6 +377,7 @@ textarea {
 
 .split-section {
   padding: 70px 0;
+  border-top: 1px solid #f6f7f8;
 }
 
 .split-section .icon-section {
@@ -354,9 +400,10 @@ textarea {
   font-weight: 300 !important;
 }
 
-.new-lead {
+.split-section .split-text h2 {
-  font-weight: 300 !important;
+  font-size: 40px;
-  font-size: 21px !important;
+  line-height: 50px;
+  color: #3a3a3a;
 }
 
 .split-section .split-text .split-title {
@@ -366,13 +413,11 @@ textarea {
 
 .split-section .split-text .split-title h2 {
   font-size: 50px;
-  line-height: 50px;
   padding-bottom: 25px;
-  color: #3a3a3a;
+  letter-spacing: 2px;
-  letter-spacing: 3px;
 }
 
-.split-section.left {
+.section-gradient {
   background: -webkit-linear-gradient(#f0f4f7, #fff) no-repeat;
   background: -o-linear-gradient(#f0f4f7, #fff) no-repeat;
   background: linear-gradient(#f0f4f7, #fff) no-repeat;
@@ -394,53 +439,85 @@ textarea {
   text-align: left;
 }
 
-.split-section.right .split-text {
+.split-section.right .split-text ul,
-  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 {
+.split-section.right .split-text {
   text-align: right;
 }
 
-.split-section.left .split-text .split-title h2 {
+.split-section .split-text .split-title::before {
-  text-align: left;
-}
-
-.split-section.right .split-text .split-title::before {
   content: "";
   position: absolute;
   bottom: 0;
   background: #29427A;
   height: 7px;
   width: 70px;
+  left: auto;
+}
+
+.split-section.right .split-text .split-title::before {
   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 {
+.section-figure {
-  padding: 80px 0 !important;
+  display: flex;
-  background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
+  flex-wrap: wrap;
-  background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
+  justify-content: center;
+  text-align: center;
 }
 
-.pricing-section .card {
+.section-figure  .section-image {
+  padding: 20px 40px 30px;
+  flex-basis: 50%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+@media (max-width: 767px) {
+  .section-figure  .section-image {
+    flex-basis: 100%;
+  }
+}
+
+.split-section-plain .section-figure  .section-image {
+  flex-grow: 0;
+  padding: 50px 15px 0;
+}
+
+.split-section-plain .section-figure {
+  justify-content: flex-start;
+}
+
+@media (min-width: 768px) {
+  .split-section-plain .split-figure {
+    width: 41.66666667%;
+  }
+
+  .split-section-plain .split-text {
+    width: 58.33333333%;
+  }
+}
+
+.section-image img {
+  margin: auto;
+}
+
+.section-image-caption {
+  padding-top: 20px;
+  display: inline-block;
+  color: #999 !important;
+}
+
+.price-calc-section .card {
   width: 350px;
   margin: 0 auto;
   background: #fff;
@@ -450,65 +527,33 @@ textarea {
   position: relative;
 }
 
-.pricing-section .card .img-beta {
+.price-calc-section .card .title {
-  position: absolute;
-  top: 5px;
-  width: 60px;
-  left: 3px;
-}
-
-.pricing-section .card .title {
   padding: 15px 40px;
 }
 
-.pricing-section .card .title h3 {}
+.price-calc-section .card .price {
-
-.pricing-section .card .price {
   background: #5A74AF;
   padding: 22px;
   color: #fff;
   font-size: 32px;
 }
 
-.pricing-section .card .description {
+.price-calc-section .card .description {
   padding: 12px;
 }
 
-.pricing-section .card .descriptions {
+.price-calc-section .card .descriptions {
   padding: 10px 30px;
 }
 
-.pricing-section .card .description p {
+.price-calc-section .card .description p {
   margin: 0;
 }
 
-.pricing-section .card .btn {
+.price-calc-section .card .btn {
   margin-top: 20px;
 }
 
-.pricing-section .text {
-  text-align: left;
-}
-
-.pricing-section .text .section-heading {
-  font-size: 48px;
-  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;
-}
-
 .contact-section {
   padding: 80px 0;
   color: rgba(255, 255, 255, 0.9);
@@ -672,43 +717,6 @@ textarea {
 
 /*Why DCL*/
 
-.full-whydcl-sec {
-  color: #fff;
-  text-align: center;
-  background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%);
-  background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%);
-  background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%);
-  background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699));
-  background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%);
-  background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%);
-}
-
-.whydcl-header {
-  padding: 150px 0 150px 0;
-  text-align: center;
-  color: #f8f8f8;
-  background: url(../img/pattern.jpg) no-repeat center center;
-  background-size: cover;
-  position: relative;
-  background-attachment: fixed;
-}
-
-.whydcl-header::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(90, 116, 175, 0.85);
-}
-
-.single-heading h2 {
-  font-size: 65px;
-  margin: 0;
-  padding: 0;
-}
-
 #tech_stack {
   background: #fff;
 }
@@ -759,13 +767,18 @@ tech-sub-sec h2 {
 }
 
 .space-middle {
-  padding: 45px 0;
+  /* padding: 45px 0; */
   display: inline-block;
 }
 
 .ssdimg {
-  vertical-align: middle;
+  margin: 0 15px;
-  display: inline-block;
+  /* vertical-align: middle; */
+  /* display: inline-block; */
+}
+
+.ssdimg img {
+  max-width: 125px;
 }
 
 @media (max-width: 767px) {
@@ -775,7 +788,7 @@ tech-sub-sec h2 {
 }
 
 .padding-vertical {
-  padding: 30px 2px;
+  padding: 30px 2px 20px;
 }
 
 .logo-wrap .logo-caption {
@@ -792,43 +805,13 @@ tech-sub-sec h2 {
 /*Pricing page*/
 
 .price-calc-section {
-  padding: 80px 40px !important;
-  background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
-  background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
   display: flex;
-}
+  margin-top: 25px;
-
+  margin-bottom: 25px;
-.price-calc-section .text {
-  width: 50%;
-}
-
-.price-calc-section .text .section-heading {
-  font-size: 48px;
-  line-height: 48px;
-  padding-bottom: 27px;
-  color: #3a3a3a;
-  letter-spacing: 1px;
-  position: relative;
-  text-align: right;
-}
-
-.price-calc-section .text .description {
-  font-size: 20px;
-  text-align: right;
-}
-
-.price-calc-section .text .section-heading::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  background: #29427A;
-  height: 7px;
-  width: 70px;
-  right: 0;
 }
 
 .price-calc-section .card {
-  width: 50%;
+  width: 100%;
   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);
@@ -839,21 +822,6 @@ tech-sub-sec h2 {
   position: relative;
 }
 
-.price-calc-section .landing {
-  width: 100% !important;
-}
-
-.no-padding {
-  padding: 0 !important;
-}
-
-.price-calc-section .card .img-beta {
-  position: absolute;
-  top: 5px;
-  width: 60px;
-  left: 3px;
-}
-
 .price-calc-section .card .title {
   padding: 15px 40px;
 }
@@ -950,8 +918,6 @@ tech-sub-sec h2 {
 }
 
 
-
-
 /*Changed class****.price-calc-section .card .description.input input*/
 
 .price-calc-section .card .description input {
@@ -1009,20 +975,20 @@ tech-sub-sec h2 {
 }
 
 @media(max-width:991px) {
-  .pricing-section .text {
+  .section-sm-center .split-text {
-    text-align: center;
+    text-align: center !important;
     margin-bottom: 40px;
   }
-  .pricing-section .text .section-heading::before {
+  .section-sm-center .split-text .split-title::before {
-    left: 50%;
+    left: 50% !important;
     transform: translate(-50%, 0);
   }
+  .section-sm-center .split-description {
+    width: 100% !important;
+  }
 }
 
 @media(max-width:767px) {
-  .single-heading h2 {
-    font-size: 50px;
-  }
   .logo-wrap {
     padding: 10px;
   }
@@ -1102,7 +1068,7 @@ tech-sub-sec h2 {
     background-color: transparent;
   }
   .split-section {
-    padding: 10px 0;
+    padding: 20px 0;
   }
   .split-section .icon-section {
     min-height: 160px;
@@ -1110,11 +1076,11 @@ tech-sub-sec h2 {
   .split-section .icon-section i {
     font-size: 120px;
   }
-  .split-section .split-text .split-title h2 {
+  .split-section .split-text h2 {
-    font-size: 35px;
+    font-size: 30px;
     line-height: 35px;
   }
-  .pricing-section .text .section-heading {
+  .split-section .split-text .split-title h2 {
     font-size: 35px;
     line-height: 35px;
   }
@@ -1139,7 +1105,7 @@ tech-sub-sec h2 {
   }
   .price-calc-section {
     flex-direction: column;
-    padding: 60px 10px !important;
+    /* padding: 60px 10px !important; */
   }
   .price-calc-section .card {
     width: 90%;
@@ -1179,9 +1145,6 @@ tech-sub-sec h2 {
     font-weight: normal;
     font-size: 37px;
   }
-  .pricing-section .card {
-    width: 90%;
-  }
   .contact-section .card {
     width: 90%;
   }
@@ -1210,11 +1173,6 @@ tech-sub-sec h2 {
   display: block;
 }
 
-.content-section-a {
-  padding: 50px 0;
-  background-color: #f8f8f8;
-}
-
 .section-heading {
   margin-bottom: 30px;
 }
@@ -1237,6 +1195,11 @@ footer {
   margin-top: 25px;
 }
 
+.flex-row .percent-text {
+  display: flex;
+  align-items: center;
+}
+
 @media (min-width: 768px) {
   .flex-row {
     display: flex;
@@ -1247,8 +1210,11 @@ footer {
     flex-shrink: 0;
     padding: 0 15px;
   }
-  .flex-row .percent-text,
+  .flex-row .desc-text,
-  .flex-row .desc-text {
+  .flex-row .percent-text {
+    max-width: 380px;
+  }
+  .flex-row-rev .desc-text {
     max-width: 710px;
   }
   .flex-row-rev .percent-text {
@@ -1279,4 +1245,40 @@ footer {
   border-width: 0 3px 3px 0;
   /*Rotate the L 45 degrees to turn it into a checkmark*/
   transform: rotate(45deg);
+}
+
+footer .dcl-link-separator {
+  position: relative;
+  padding-left: 10px;
+}
+
+footer .dcl-link-separator::before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  top: 9px;
+  bottom: 0;
+  left: -2px;
+  right: 0;
+  width: 2px;
+  height: 2px;
+  border-radius: 100%;
+  background: #777;
+}
+
+/* new styles for whydcl section cms plugin (to replace older style) */
+
+.banner-list {
+  border-top: 2px solid #eee;
+  padding: 50px 0;
+}
+
+.banner-list-heading h2 {
+  font-size: 42px;
+}
+
+@media (max-width: 767px) {
+  .banner-list-heading h2 {
+    font-size: 30px;
+  }
 }

datacenterlight/static/datacenterlight/js/main.js

@@ -54,7 +54,7 @@
      Nav panel classic
      --------------------------------------------- */
     if (window.matchMedia("(min-width: 767px)").matches) {
-        $('ul.nav li.dropdown').hover(function() {
+        $('ul.nav .dropdown').hover(function() {
             $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
         }, function() {
             $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);

datacenterlight/templates/datacenterlight/base.html

@@ -1,4 +1,4 @@
-{% load staticfiles i18n cms_tags sekizai_tags %}
+{% load static i18n cms_tags sekizai_tags %}
 {% get_current_language as LANGUAGE_CODE %}
 
 <!DOCTYPE html>
@@ -22,6 +22,8 @@
     <link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
     {% block css_extra %}
     {% endblock css_extra %}
+    {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %}
+    {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %}
 
     <!-- External Fonts -->
     <link href="//fonts.googleapis.com/css?family=Lato:300,400,600,700" rel="stylesheet" type="text/css">

datacenterlight/templates/datacenterlight/cms/banner_item.html

@@ -0,0 +1,17 @@
+<div class="flex-row {{ instance.get_extra_classes }}">
+  <div class="percent-text">
+    {% if instance.banner_text %}
+      <div class="text">{{ instance.banner_text }}</div>
+    {% endif %}
+    {% if instance.banner_image %}
+      <div class="ssdimg">
+        <img class="img-responsive" src="{{ instance.banner_image.url }}" alt="image">
+      </div>
+    {% endif %}
+  </div>
+  <div class="desc-text padding-vertical">
+    <div class="lead">
+      {{ instance.content }}
+    </div>
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/banner_list.html

@@ -0,0 +1,12 @@
+{% load cms_tags %}
+
+<div class="banner-list" id="{{ instance.html_id }}">
+  <div class="container">
+    <div class="banner-list-heading">
+      <h2>{{ instance.heading }}</h2>
+    </div>
+    {% for plugin in instance.child_plugin_instances %}
+      {% render_plugin plugin %}
+    {% endfor %}
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/base.html

@@ -0,0 +1,75 @@
+{% load static i18n cms_tags sekizai_tags %}
+{% get_current_language as LANGUAGE_CODE %}
+
+<!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="Data Center Light by ungleich">
+    <meta name="author" content="ungleich GmbH">
+    <title>{% page_attribute page_title %}</title>
+
+    <!-- Vendor CSS -->
+    <!-- Bootstrap Core CSS -->
+    <link href="{% static 'datacenterlight/css/bootstrap-3.3.7.min.css' %}" rel="stylesheet">
+    <!-- Icon Fonts -->
+    <link href="{% static 'datacenterlight/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
+    <!-- Custom CSS -->
+    <link href="{% static 'datacenterlight/css/common.css' %}" rel="stylesheet">
+    <link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
+    <link href="{% static 'datacenterlight/css/header-slider.css' %}" rel="stylesheet">
+    {% if request.toolbar.edit_mode %}
+        <link href="{% static 'datacenterlight/css/cms.css' %}" rel="stylesheet">
+    {% endif %}
+    {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %}
+    {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %}
+
+    <!-- External Fonts -->
+    <link href="//fonts.googleapis.com/css?family=Lato:300,400,600,700" rel="stylesheet" type="text/css">
+
+    <link rel="shortcut icon" href="{% static 'datacenterlight/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]-->
+
+    <!-- Google analytics -->
+    {% include "google_analytics.html" %}
+    <!-- End Google Analytics -->
+</head>
+
+<body>
+    {% cms_toolbar %}
+
+    {% placeholder 'datacenterlight_navbar' %}
+
+    {% placeholder 'Datacenterlight Header' or %}
+        <div class="dcl-header">
+            <div class="container">
+                <h1>{% page_attribute page_title %}</h1>
+            </div>
+        </div>
+    {% endplaceholder %}
+
+    {% placeholder 'datacenterlight_content' %}
+
+    {% placeholder 'datacenterlight_footer'%}
+
+    <!-- jQuery -->
+    <script src="{% static 'datacenterlight/js/jquery-2.2.4.min.js' %}"></script>
+    <!-- Bootstrap Core JavaScript -->
+    <script src="{% static 'datacenterlight/js/bootstrap-3.3.7.min.js' %}"></script>
+    <!-- Bootstrap Validator -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
+
+    <!-- Custom JS -->
+    <script src="{% static 'datacenterlight/js/main.js' %}"></script>
+
+</body>
+</html>

datacenterlight/templates/datacenterlight/cms/calculator.html

@@ -0,0 +1,25 @@
+<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}">
+        <div class="split-text">
+          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+            <h2>{{ instance.heading }}</h2>
+          </div>
+          <div class="split-description">
+            <div class="lead">
+              {{ instance.content }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">
+        <div class="price-calc-section">
+          <div class="card">
+            {% include "datacenterlight/includes/_calculator_form.html" %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/contact.html

@@ -0,0 +1,33 @@
+<div id="{{ instance.id }}" class="full-contact-section">
+  <div class="intro-header-2 contact-section">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="title">
+            <h2>{{ instance.contact_text }}</h2>
+          </div>
+          <div class="contact-details">
+            <div class="subtitle">
+              <h3>{{ instance.organization_name }}</h3>
+            </div>
+            <div class="description">
+              <p>{{ instance.email }}</p>
+              <p>{{ instance.address }}</p>
+              <p>{{ instance.country }}</p>
+            </div>
+          </div>
+          <div class="social">
+            <a target="_blank" href="https://twitter.com/datacenterlight"><i class="fa fa-twitter fa-fw"></i></a>
+            <a target="_blank" href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i></a>
+            <a target="_blank" 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" with form_header=instance.form_header  %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/footer.html

@@ -0,0 +1,15 @@
+{% load i18n cms_tags %}
+<footer>
+  <div class="container">
+    <ul class="list-inline">
+      {% for plugin in instance.child_plugin_instances %}
+        <li>
+          {% render_plugin plugin %}
+        </li>
+      {% endfor %}
+    </ul>
+    <p class="copyright text-muted small">
+      Copyright &copy; {{ instance.copyright_label }} {% now "Y" %}. {% trans "All Rights Reserved" %}
+    </p>
+  </div>
+</footer>

datacenterlight/templates/datacenterlight/cms/link.html

@@ -0,0 +1,3 @@
+<a class="dcl-link url {% if instance.separator %}dcl-link-separator{% endif %}" href="{{ instance.target }}" {% if instance.title %}title="{{ instance.title }}"{% endif %}>
+  {{ instance.text }}
+</a>

datacenterlight/templates/datacenterlight/cms/navbar.html

@@ -0,0 +1,64 @@
+{% load static i18n custom_tags cms_tags %}
+{% get_current_language as LANGUAGE_CODE %}
+
+<nav class="navbar navbar-default navbar-fixed-top topnav navbar-transparent">
+  <!-- Brand and toggle get grouped for better mobile display -->
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dcl-topnav">
+      <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 'datacenterlight/img/logo_black.svg' %}"></a>
+    <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
+  </div>
+  <div class="collapse navbar-collapse" id="dcl-topnav">
+    <!-- Start Navbar collapse-->
+    <ul class="nav navbar-nav navbar-right">
+      {% for plugin in instance.child_plugin_instances %}
+        <li>
+          {% render_plugin plugin %}
+        </li>
+      {% endfor %}
+      <li>
+        {% if LANGUAGE_CODE == 'en-us'%}
+          <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+        {% else %}
+          <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+        {% endif %}
+      </li>
+      {% if not request.user.is_authenticated %}
+        <li>
+          <a href="{% url 'hosting:login' %}">{% trans "Login" %}&nbsp;&nbsp;<span class="fa fa-sign-in"></span></a>
+        </li>
+      {% else %}
+        <li>
+          <a href="{% url 'hosting:dashboard' %}">{% trans "Dashboard" %}</a>
+        </li>
+      {% endif %}
+      {% comment %}
+      <!-- to be used when more than one option for language -->
+      <li class="nav-language">
+        <div class="dropdown">
+          <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            {% if LANGUAGE_CODE == 'en-us'%}
+              <span>English</span>
+            {% else %}
+              <span>Deutsch</span>
+            {% endif %}
+            <i class="fa fa-globe" aria-hidden="true"></i>
+          </div>
+          <ul class="dropdown-menu drop-language dropdown-menu-right">
+            {% if LANGUAGE_CODE == 'en-us'%}
+              <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
+            {% else %}
+              <li><a class="url" href="{% change_lang 'en-us' %}">English</a></li>
+            {% endif %}
+          </ul>
+        </div>
+      </li>
+      {% endcomment %}
+    </ul>
+  </div>
+</nav>

datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html

@@ -0,0 +1,10 @@
+{% load cms_tags %}
+
+<div class="dropdown highlights-dropdown">
+  <a class="dropdown-toggle url-init dcl-link" href="{{ instance.url }}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ instance.text }}&nbsp;<span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    {% for plugin in instance.child_plugin_instances %}
+        {% render_plugin plugin %}
+    {% endfor %}
+  </ul>
+</div>

datacenterlight/templates/datacenterlight/cms/section.html

@@ -0,0 +1,25 @@
+{% load cms_tags %}
+
+<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-push-6{% endif %} split-figure">
+        <div class="section-figure">
+          {% for plugin in instance.child_plugin_instances %}
+            {% render_plugin plugin %}
+          {% endfor %}
+        </div>
+      </div>
+      <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text">
+        <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+          <h2>{{ instance.heading }}</h2>
+        </div>
+        <div class="split-description">
+          <div class="lead">
+            {{ instance.content }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/section_icon.html

@@ -0,0 +1,3 @@
+<div class="icon-section">
+  <i class="fa fa-{{ instance.fontawesome_icon_name }}" aria-hidden="true"></i>
+</div>

datacenterlight/templates/datacenterlight/cms/section_image.html

@@ -0,0 +1,6 @@
+<div class="section-image">
+  <img class="img-responsive" src="{{ instance.image.url }}" alt="image">
+  {% if instance.caption %}
+    <div class="section-image-caption">{{ instance.caption }}</div>
+  {% endif %}
+</div>

datacenterlight/templates/datacenterlight/cms_page.html

@@ -1,26 +0,0 @@
-{% extends "datacenterlight/base.html" %}
-{% load staticfiles cms_tags sekizai_tags %}
-
-{% block css_extra %}
-    <link href="{% static 'datacenterlight/css/cms.css' %}" media="screen" rel="stylesheet" type="text/css"/>
-{% endblock css_extra %}
-
-{% block title %}
-    {% page_attribute page_title %}
-{% endblock %}
-
-{% block content %}
-    <div class="dcl-cms_page-header">
-        <div class="container">
-            <h1>{% page_attribute page_title %}</h1>
-        </div>
-    </div>
-
-    <div class="split-section left" id="dcl-cms_page-text">
-        <div class="space">
-            <div class="container">
-                {% placeholder 'datacenterlight_cms_page_text' %}
-            </div>
-        </div>
-    </div>
-{% endblock %}

datacenterlight/templates/datacenterlight/contact_form.html

@@ -13,7 +13,11 @@
     <div class="row">
         <div class="col-sm-offset-2 col-sm-10">
             <div class="subtitle">
-                <h3>{% trans "Get in touch with us!" %}</h3>
+                {% if form_header %}
+                    <h3>{{ form_header }}</h3>
+                {% else %}
+                    <h3>{% trans "Get in touch with us!" %}</h3>
+                {% endif %}
             </div>
         </div>
     </div>

datacenterlight/templates/datacenterlight/includes/_calculator_form.html

@@ -1,5 +1,5 @@
 {% load staticfiles i18n%}
-<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
+<form id="order_form" method="POST" action="{% url 'datacenterlight:index' %}" data-toggle="validator" role="form">
     {% csrf_token %}
     <div class="title">
         <h3>{% trans "VM hosting" %} </h3>
@@ -77,9 +77,6 @@
                 {% endfor %}
             </select>
         </div>
-        <!--<div class="description check-ip">
-            <input type="checkbox" name="ipv6"> Ipv6 Only<br>
-        </div>-->
     </div>
     <input type="submit" class="btn btn-primary disabled" value="{% trans 'Continue' %}"></input>
 </form>

datacenterlight/templates/datacenterlight/includes/_footer.html

@@ -1,5 +1,4 @@
-{% load staticfiles i18n%}
+{% load i18n %}
-{% get_current_language as LANGUAGE_CODE %}
 
 <footer>
     <div class="container">

datacenterlight/templates/datacenterlight/index.html

@@ -6,41 +6,31 @@
     <!-- Header -->
     <div class="intro-header" id="home">
         <div class="container">
-
+            <div class="intro-message">
-            <div class="row">
+              <h1>Data Center Light</h1>
-                <div class="col-lg-12">
+                <h3>{% trans "Finally, an affordable VM hosting in Switzerland!" %}</h3>
-
+                <hr class="intro-divider">
-                    <div class="intro-message">
+                <ul class="list-inline intro-social-buttons">
-                      <h1>Data Center Light</h1>
+                    <li>
-                        <h3>{% trans "Finally, an affordable VM hosting in Switzerland!" %}</h3>
+                        <a class="btn btn-default btn-lg btn-transparent url" href="#how"><span class="network-name">{% trans "Highlights" %}</span></a>
-                        <hr class="intro-divider">
+                    </li>
-                        <ul class="list-inline intro-social-buttons">
+                    <li>
-                            <li>
+                        <a class="btn btn-primary btn-lg page-scroll url" href="#price"><span class="network-name">{% trans "I want it!" %}</span></a>
-                                <a class="btn btn-default btn-lg btn-transparent url" href="#how"><span class="network-name">{% trans "Highlights" %}</span></a>
+                    </li>
-                            </li>
+                </ul>
-                            <li>
-                                <a class="btn btn-primary btn-lg page-scroll url" href="#price"><span class="network-name">{% trans "I want it!" %}</span></a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
             </div>
-
         </div>
-        <!-- /.container -->
-
     </div>
     <!-- /.intro-header -->
 
     <!-- Page Content -->
     <div class="split-section right" id="how">
-
         <div class="container">
             <div class="row">
-                <div class="col-xs-12 col-sm-6 col-md-6 icon-section">
+                <div class="col-sm-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="col-sm-6">
                     <div class="split-text">
                         <div class="split-title">
                             <h2>{% trans "Highlights" %}</h2>
@@ -65,90 +55,79 @@
                                 <p class="lead">{% trans "Cuts down the costs for you by using FOSS (Free Open Source Software) exclusively, wherefore we can save money from paying licenses." %}</p>
                               </li>
                              </ul>
-
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- /.container -->
-        <!-- /.option 1 -->
     </div>
 
     <div class="split-section left" id="your">
-
         <div class="container">
             <div class="row">
-                <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="col-sm-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-xs-12 col-sm-6 col-md-6 icon-section">
+                <div class="col-sm-6 icon-section">
                     <i class="fa fa-rocket" aria-hidden="true"></i>
                 </div>
             </div>
         </div>
-        <!-- /.container -->
-        <!-- /.option 1 -->
     </div>
-    <div class="split-section right" id="our">
 
+    <div class="split-section right" id="our">
         <div class="container">
             <div class="row">
-                <div class="col-xs-12 col-sm-6 col-md-6 icon-section">
+                <div class="col-sm-6 icon-section">
                     <i class="fa fa-handshake-o" aria-hidden="true"></i>
                 </div>
-                <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="col-sm-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 -->
+    <div class="split-section pricing-section" id="price">
-    <div class="content-section-a pricing-section" id="price">
-
         <div class="container">
-        <!-- Page Features -->
+            <div class="row">
-            <div class="row text-center">
+                <div class="col-md-6">
-                <div class="col-xs-12 col-md-6 text">
+                    <div class="split-text">
-                    <h2 class="section-heading">{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
+                      <div class="split-title">
-                    <p class="lead new-lead">{% blocktrans %}Ready in 30 seconds.<br/>Experience the unbeatable speed from Data Center Light.{% endblocktrans %}</p>
+                        <h2>{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
+                      </div>
+                      <div class="split-description">
+                        <div class="lead">
+                          <p>{% blocktrans %}Ready in 30 seconds.<br/>Experience the unbeatable speed from Data Center Light.{% endblocktrans %}</p>
+                        </div>
+                      </div>
+                    </div>
                 </div>
-
+                <div class="col-md-6">
-                <div class="col-xs-12 col-md-6 hero-feature">
+                    <div class="price-calc-section">
-                    <div class="price-calc-section no-padding">
+                        <div class="card">
-                        <div class="landing card">
-                            <div class="caption">
                             {% include "datacenterlight/includes/_calculator_form.html" %}
-                            </div>
                         </div>
                     </div>
-
                 </div>
             </div>
          </div>
-
     </div>
 
-    <!-- / contact section -->
     <div class="full-contact-section">
         <div class="intro-header-2 contact-section" id="contact">
             <div class="container">
@@ -179,10 +158,8 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
-
     </div>
     <!-- /.banner -->
 {% endblock %}

datacenterlight/templates/datacenterlight/whydatacenterlight.html

@@ -3,149 +3,144 @@
 
 {% block content %}
     <!-- Why Data Center Light? -->
-    <div class="full-whydcl-sec">
+    <div class="dcl-header">
-        <div class="whydcl-header whydcl-section" id="why_dcl">
         <div class="container">
-            <div class="row">
+            <h1>{% trans "Why Data Center Light?" %}</h1>
-                <div class="col-sm-12 col-md-12">
-                    <div class="single-heading">
-                        <h2>{% trans "Why Data Center Light?" %}</h2>
-                     </div>
-                </div>
-            </div>
         </div>
     </div>
-    </div>
+
     <div class="split-section left" id="tech_stack">
         <div class="space">
-        <div class="container">
+            <div class="container">
-            <div class="row">
+                <div class="row">
-                <div class="col-xs-12 col-sm-6 col-md-6">
+                    <div class="col-sm-6">
-                    <div class="split-text">
+                        <div class="split-text">
-                        <div class="split-title">
+                            <div class="split-title">
-                            <h2>{% trans "Tech Stack" %}</h2>
+                                <h2>{% trans "Tech Stack" %}</h2>
-                        </div>
+                            </div>
-                        <div class="split-description">
+                            <div class="split-description">
-                            <h3>{% trans "We are seriously open source." %}</h3>
+                                <h3>{% trans "We are seriously open source." %}</h3>
-                            <p class="lead">{% blocktrans %} Our full software stack is open source – We don't use anything that isn't open source. <br>Yes, we are that cool. {% endblocktrans %}</p>
+                                <p class="lead">{% blocktrans %} Our full software stack is open source – We don't use anything that isn't open source. <br>Yes, we are that cool. {% endblocktrans %}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-6 col-md-6">
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan">
-                        <span class="logo-caption">{% trans "Our services run on" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
-                        <span class="logo-caption">{% trans "Our monitoring" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
-                        <span class="logo-caption">{% trans "Our storage layer" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django">
-                        <span class="logo-caption">{% trans "Our web frontend" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
-                        <span class="logo-caption">{% trans "Our cloud" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist by ungleich">
-                        <span class="logo-caption">{% trans "Our configuration management system" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python">
-                        <span class="logo-caption">{% trans "Our awesome juice" %}</span>
-                    </div>
-                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
-                        <img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
-                        <span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-        </div>
-        <!-- /.container -->
-        <hr class="thick-divider"/><!-- Divider -->
-        <div class=" space">
-        <div class="container">
-            <div class="row">
-                <div class="col-xs-12 col-sm-4 col-md-5 ">
-                    <div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
-                        <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-8 col-md-7 text-right">
-                        <div class="tech-sub-sec">
-                            <h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
-                            <p class="lead new-lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS) movement. <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p>
-                        </div>
-                </div>
-            </div>
-        </div>
-        </div>
-        <!-- /.container -->
-        <hr class="thick-divider"/><!-- Divider -->
-        <div class="space">
-        <div class="container">
-            <div class="tech-sub-sec">
-                <h3>{% trans "We bring the future to you." %}</h3>
-            </div>
-            <div class="flex-row flex-row-rev">
-                <div class="percent-text">
-                    100% <strong>IPv6</strong>
-                </div>
-                <div class="desc-text padding-vertical">
-                    <p class="lead new-lead">{% blocktrans %}Data Center Light uses the most modern technologies out there.<br>Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.{% endblocktrans %}</p>
-                </div>
-            </div>
-            <div class="flex-row">
-                <div class="percent-text">
-                    <span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
-                </div>
-                <div class="desc-text padding-vertical w380">
-                    <p class="lead new-lead lead-right">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
-                </div>
-            </div>
-        </div>
-        </div>
-        <!-- /.container -->
-    </div>
-    <!-- /.content-section-b -->
-    <div class="content-section-a pricing-section" id="price">
-
-        <div class="container">
-        <!-- Page Features -->
-            <div class="row text-center">
-                <div class="col-xs-12 col-md-6 text">
-                    <h2 class="section-heading">{% trans "Starting from only 15CHF per month. Try now." %}</h2>
-                    <p class="lead new-lead">{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p>
-                </div>
-
-                <div class="col-xs-12 col-md-6 hero-feature">
-                    <div class="price-calc-section no-padding">
-                        <div class="landing card">
-                            <div class="caption">
-                            {% include "datacenterlight/includes/_calculator_form.html" %}
                             </div>
                         </div>
                     </div>
+                    <div class="col-sm-6">
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan">
+                            <span class="logo-caption">{% trans "Our services run on" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
+                            <span class="logo-caption">{% trans "Our monitoring" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
+                            <span class="logo-caption">{% trans "Our storage layer" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django">
+                            <span class="logo-caption">{% trans "Our web frontend" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
+                            <span class="logo-caption">{% trans "Our cloud" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist by ungleich">
+                            <span class="logo-caption">{% trans "Our configuration management system" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python">
+                            <span class="logo-caption">{% trans "Our awesome juice" %}</span>
+                        </div>
+                        <div class="col-sm-6 logo-wrap">
+                            <img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
+                            <span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
+        <hr class="thick-divider"/><!-- Divider -->
+
+        <div class="space">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-4 col-md-5">
+                        <div class="row">
+                            <div class="col-md-6 logo-wrap-1">
+                                <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
+                            </div>
+                            <div class="col-md-6 logo-wrap-1">
+                                <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
+                            </div>
+                            <div class="col-md-6 logo-wrap-1">
+                                <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-8 col-md-7 text-right">
+                        <div class="tech-sub-sec">
+                            <h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
+                            <p class="lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS) movement. <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <hr class="thick-divider"/><!-- Divider -->
+
+        <div class="space">
+            <div class="container">
+                <div class="tech-sub-sec">
+                    <h3>{% trans "We bring the future to you." %}</h3>
+                </div>
+                <div class="flex-row flex-row-rev">
+                    <div class="percent-text">
+                        100% <strong>IPv6</strong>
+                    </div>
+                    <div class="desc-text padding-vertical">
+                        <p class="lead">{% blocktrans %}Data Center Light uses the most modern technologies out there.<br>Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.{% endblocktrans %}</p>
+                    </div>
+                </div>
+                <div class="flex-row">
+                    <div class="percent-text">
+                        <span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
+                    </div>
+                    <div class="desc-text padding-vertical w380">
+                        <p class="lead text-right">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="split-section pricing-section" id="price">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="split-text">
+                      <div class="split-title">
+                        <h2>{% trans "Starting from only 15CHF per month. Try now." %}</h2>
+                      </div>
+                      <div class="split-description">
+                        <div class="lead">
+                          <p>{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="price-calc-section">
+                        <div class="card">
+                            {% include "datacenterlight/includes/_calculator_form.html" %}
+                        </div>
+                    </div>
                 </div>
             </div>
          </div>
-
     </div>
-
     <!-- End Why Data Center Light? -->
 {% endblock %}

datacenterlight/views.py

@@ -112,37 +112,41 @@ class IndexView(CreateView):
         storage_field = forms.IntegerField(validators=[self.validate_storage])
         template_id = int(request.POST.get('config'))
         template = VMTemplate.objects.filter(
-            opennebula_vm_template_id=template_id).first()
+            opennebula_vm_template_id=template_id
+        ).first()
         template_data = VMTemplateSerializer(template).data
+        referer_url = request.META['HTTP_REFERER']
 
         try:
             cores = cores_field.clean(cores)
         except ValidationError as err:
             msg = '{} : {}.'.format(cores, str(err))
-            messages.add_message(self.request, messages.ERROR, msg,
+            messages.add_message(
-                                 extra_tags='cores')
+                self.request, messages.ERROR, msg, extra_tags='cores'
-            return HttpResponseRedirect(
+            )
-                reverse('datacenterlight:index') + "#order_form")
+            return HttpResponseRedirect(referer_url + "#order_form")
 
         try:
             memory = memory_field.clean(memory)
         except ValidationError as err:
             msg = '{} : {}.'.format(memory, str(err))
-            messages.add_message(self.request, messages.ERROR, msg,
+            messages.add_message(
-                                 extra_tags='memory')
+                self.request, messages.ERROR, msg, extra_tags='memory'
-            return HttpResponseRedirect(
+            )
-                reverse('datacenterlight:index') + "#order_form")
+            return HttpResponseRedirect(referer_url + "#order_form")
 
         try:
             storage = storage_field.clean(storage)
         except ValidationError as err:
             msg = '{} : {}.'.format(storage, str(err))
-            messages.add_message(self.request, messages.ERROR, msg,
+            messages.add_message(
-                                 extra_tags='storage')
+                self.request, messages.ERROR, msg, extra_tags='storage'
-            return HttpResponseRedirect(
+            )
-                reverse('datacenterlight:index') + "#order_form")
+            return HttpResponseRedirect(referer_url + "#order_form")
-        amount_to_be_charged = get_vm_price(cpu=cores, memory=memory,
+
-                                            disk_size=storage)
+        amount_to_be_charged = get_vm_price(
+            cpu=cores, memory=memory, disk_size=storage
+        )
         specs = {
             'cpu': cores,
             'memory': memory,
@@ -161,8 +165,9 @@ class IndexView(CreateView):
     def get_context_data(self, **kwargs):
         context = super(IndexView, self).get_context_data(**kwargs)
         context.update({
-            'base_url': "{0}://{1}".format(self.request.scheme,
+            'base_url': "{0}://{1}".format(
-                                           self.request.get_host()),
+                self.request.scheme, self.request.get_host()
+            ),
             'contact_form': ContactForm
         })
         return context
@@ -231,8 +236,9 @@ class PaymentOrderView(FormView):
 
     def post(self, request, *args, **kwargs):
         if 'login_form' in request.POST:
-            login_form = HostingUserLoginForm(data=request.POST,
+            login_form = HostingUserLoginForm(
-                                              prefix='login_form')
+                data=request.POST, prefix='login_form'
+            )
             if login_form.is_valid():
                 email = login_form.cleaned_data.get('email')
                 password = login_form.cleaned_data.get('password')
@@ -490,9 +496,11 @@ class OrderConfirmationView(DetailView):
 
         response = {
             'status': True,
-            'redirect': reverse(
+            'redirect': (
-                'hosting:virtual_machines') if request.user.is_authenticated() else reverse(
+                reverse('hosting:virtual_machines')
-                'datacenterlight:index'),
+                if request.user.is_authenticated()
+                else reverse('datacenterlight:index')
+            ),
             'msg_title': str(_('Thank you for the order.')),
             'msg_body': str(
                 _('Your VM will be up and running in a few moments.'

dynamicweb/settings/base.py

@@ -227,7 +227,7 @@ CMS_TEMPLATES = (
     ('blog_ungleich.html', gettext('Blog')),
     ('page.html', gettext('Page')),
     # dcl
-    ('datacenterlight/cms_page.html', gettext('Data Center Light')),
+    ('datacenterlight/cms/base.html', gettext('Data Center Light')),
     ('ungleich_page/glasfaser_cms_page.html', gettext('Glasfaser')),
     ('ungleich_page/ungleich_cms_page.html', gettext('ungleich')),
 )
@@ -332,9 +332,41 @@ CMS_PLACEHOLDER_CONF = {
             },
         ]
     },
+    'datacenterlight_navbar': {
+        'name': _('Datacenterlight Navbar'),
+        'plugins': ['DCLNavbarPlugin'],
+        'default_plugins': [
+            {
+                'plugin_type': 'DCLNavbarPlugin',
+                'values': {},
+            },
+        ]
+    },
+    'datacenterlight_footer': {
+        'name': _('Datacenterlight Footer'),
+        'plugins': ['DCLFooterPlugin'],
+        'default_plugins': [
+            {
+                'plugin_type': 'DCLFooterPlugin',
+                'values': {},
+            },
+        ]
+    },
+    'datacenterlight_content': {
+        'name': _('Datacenterlight Content'),
+        'default_plugins': [
+            {
+                'plugin_type': 'DCLCalculatorPlugin',
+                'values': {
+                    'heading': 'Heading',
+                    'content': 'Text'
+                },
+            },
+        ]
+    },
 }
 
-CMS_PERMISSION=True
+CMS_PERMISSION = True
 
 CACHES = {
     'default': {
@@ -522,14 +554,14 @@ if UNGLEICH_SITE_CONFIGS == "":
     raise Exception("Please define UNGLEICH_SITE_CONFIGS in your .env")
 else:
     try:
-        configs_dict=json.loads(UNGLEICH_SITE_CONFIGS)
+        configs_dict = json.loads(UNGLEICH_SITE_CONFIGS)
     except ValueError as verr:
         raise Exception("UNGLEICH_SITE_CONFIGS is not a valid JSON: {}".format(
             str(verr)
         ))
     else:
         MULTISITE_CMS_URLS = {
-            k:v['MULTISITE_CMS_URL'] for (k,v) in configs_dict.items()
+            k: v['MULTISITE_CMS_URL'] for (k, v) in configs_dict.items()
         }
 
 MULTISITE_CMS_ALIASES = {
@@ -609,10 +641,9 @@ DCL_ERROR_EMAILS_TO = env('DCL_ERROR_EMAILS_TO')
 
 DCL_ERROR_EMAILS_TO_LIST = []
 if DCL_ERROR_EMAILS_TO is not None:
-    DCL_ERROR_EMAILS_TO_LIST = [x.strip() for x in
+    DCL_ERROR_EMAILS_TO_LIST = [
-                                DCL_ERROR_EMAILS_TO.split(
+        x.strip() for x in DCL_ERROR_EMAILS_TO.split(',')
-                                            ',')] \
+    ] if "," in DCL_ERROR_EMAILS_TO else [DCL_ERROR_EMAILS_TO.strip()]
-        if "," in DCL_ERROR_EMAILS_TO else [DCL_ERROR_EMAILS_TO.strip()]
 
 if 'info@ungleich.ch' not in DCL_ERROR_EMAILS_TO_LIST:
     DCL_ERROR_EMAILS_TO_LIST.append('info@ungleich.ch')

hosting/static/hosting/css/price_calculator.css

@@ -64,13 +64,6 @@
     padding: 0 !important;
 }
 
-.price-calc-section .card .img-beta {
-    position: absolute;
-    top: 5px;
-    width: 60px;
-    left: 3px;
-}
-
 .price-calc-section .card .title {
     padding: 15px 40px;
 }