From b9a1882080c61190e91ffee93275d5c95e71e31c Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 01:52:54 +0530
Subject: [PATCH 1/7] fix style issues for dcl plugins

---
 .../datacenterlight/css/landing-page.css      |  73 ++-----
 .../datacenterlight/cms/banner_list.html      |   8 +-
 .../datacenterlight/cms/calculator.html       |  18 +-
 .../datacenterlight/cms/contact.html          |  28 ++-
 .../datacenterlight/cms/navbar_dropdown.html  |   2 +-
 .../datacenterlight/cms/section.html          |  51 +++--
 .../datacenterlight/whydatacenterlight.html   | 190 +++++++++---------
 7 files changed, 176 insertions(+), 194 deletions(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 61128e69..05b2f075 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -501,10 +501,15 @@ textarea {
   .split-section-plain .split-figure {
     width: 41.66666667%;
   }
-
+  .split-section-plain .split-figure.col-sm-push-6 {
+    left: 58.33333333%;
+  }
   .split-section-plain .split-text {
     width: 58.33333333%;
   }
+  .split-section-plain .split-text.col-sm-pull-6 {
+    right: 41.66666667%;
+  }
 }
 
 .section-image img {
@@ -726,34 +731,10 @@ textarea {
   width: 70%;
 }
 
-hr.thick-divider {
-  border-top: 3px solid #eee !important;
-}
-
 .space {
   padding: 50px 0;
-}
-
-tech-sub-sec h2 {
-  font-size: 45px;
-  line-height: 60px;
-  padding-bottom: 25px;
-  color: #3a3a3a;
-  letter-spacing: 1px;
-}
-
-.logo-wrap {
-  text-align: center;
-  min-height: 140px;
-  padding: 20px 40px 30px 40px;
-}
-
-.btm-space {
-  padding-bottom: 8px;
-}
-
-.btm-space-tayga {
-  padding-bottom: 12px;
+  max-width: 660px;
+  margin: auto;
 }
 
 .percent-text {
@@ -761,11 +742,6 @@ tech-sub-sec h2 {
   color: #999;
 }
 
-.tech-sub-sec h2 {
-  font-size: 40px;
-  line-height: 55px;
-}
-
 .space-middle {
   /* padding: 45px 0; */
   display: inline-block;
@@ -791,16 +767,6 @@ tech-sub-sec h2 {
   padding: 30px 2px 20px;
 }
 
-.logo-wrap .logo-caption {
-  padding-top: 20px;
-  display: inline-block;
-  color: #999 !important;
-}
-
-.logo-wrap-1 {
-  padding-top: 50px;
-}
-
 
 /*Pricing page*/
 
@@ -966,13 +932,6 @@ tech-sub-sec h2 {
   }
 }
 
-@media (min-width: 576px) and (max-width: 767px) {
-  .logo-wrap, .logo-wrap-1 {
-    width: 50%;
-    padding: 15px 30px !important;
-    min-height: 179px;
-  }
-}
 
 @media(max-width:991px) {
   .section-sm-center .split-text {
@@ -989,9 +948,6 @@ tech-sub-sec h2 {
 }
 
 @media(max-width:767px) {
-  .logo-wrap {
-    padding: 10px;
-  }
   .navbar-transparent li a {
     color: #777 !important;
   }
@@ -1138,9 +1094,6 @@ tech-sub-sec h2 {
 }
 
 @media(max-width:575px) {
-  .logo-wrap {
-    padding: 30px;
-  }
   .percent-text {
     font-weight: normal;
     font-size: 37px;
@@ -1210,12 +1163,16 @@ footer {
     flex-shrink: 0;
     padding: 0 15px;
   }
+  .flex-row .desc-text {
+    text-align: right;
+  }
   .flex-row .desc-text,
   .flex-row .percent-text {
-    max-width: 380px;
+    max-width: 430px;
   }
   .flex-row-rev .desc-text {
     max-width: 710px;
+    text-align: left;
   }
   .flex-row-rev .percent-text {
     order: 2;
@@ -1225,10 +1182,6 @@ footer {
   }
 }
 
-.w380 {
-  max-width: 380px !important;
-}
-
 .checkmark {
   display: inline-block;
 }
diff --git a/datacenterlight/templates/datacenterlight/cms/banner_list.html b/datacenterlight/templates/datacenterlight/cms/banner_list.html
index 7ef1c1c5..92c5c059 100644
--- a/datacenterlight/templates/datacenterlight/cms/banner_list.html
+++ b/datacenterlight/templates/datacenterlight/cms/banner_list.html
@@ -2,9 +2,11 @@
 
 <div class="banner-list" id="{{ instance.html_id }}">
   <div class="container">
-    <div class="banner-list-heading">
-      <h2>{{ instance.heading }}</h2>
-    </div>
+    {% if instance.heading %}
+      <div class="banner-list-heading">
+        <h2>{{ instance.heading }}</h2>
+      </div>
+    {% endif %}
     {% for plugin in instance.child_plugin_instances %}
       {% render_plugin plugin %}
     {% endfor %}
diff --git a/datacenterlight/templates/datacenterlight/cms/calculator.html b/datacenterlight/templates/datacenterlight/cms/calculator.html
index c2580fc7..5ea97e84 100644
--- a/datacenterlight/templates/datacenterlight/cms/calculator.html
+++ b/datacenterlight/templates/datacenterlight/cms/calculator.html
@@ -3,14 +3,18 @@
     <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 }}
+          {% if instance.heading %}
+            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+              <h2>{{ instance.heading }}</h2>
             </div>
-          </div>
+          {% endif %}
+          {% if instance.content %}
+            <div class="split-description">
+              <div class="lead">
+                {{ instance.content }}
+              </div>
+            </div>
+          {% endif %}
         </div>
       </div>
       <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">
diff --git a/datacenterlight/templates/datacenterlight/cms/contact.html b/datacenterlight/templates/datacenterlight/cms/contact.html
index b340a911..63455dd0 100644
--- a/datacenterlight/templates/datacenterlight/cms/contact.html
+++ b/datacenterlight/templates/datacenterlight/cms/contact.html
@@ -3,17 +3,27 @@
     <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>
+          {% if instance.contact_text %}
+            <div class="title">
+              <h2>{{ instance.contact_text }}</h2>
             </div>
+          {% endif %}
+          <div class="contact-details">
+            {% if instance.organization_name %}
+              <div class="subtitle">
+                <h3>{{ instance.organization_name }}</h3>
+              </div>
+            {% endif %}
             <div class="description">
-              <p>{{ instance.email }}</p>
-              <p>{{ instance.address }}</p>
-              <p>{{ instance.country }}</p>
+              {% if instance.email %}
+                <p>{{ instance.email }}</p>
+              {% endif %}
+              {% if instance.address %}
+                <p>{{ instance.address }}</p>
+              {% endif %}
+              {% if instance.country %}
+                <p>{{ instance.country }}</p>
+              {% endif %}
             </div>
           </div>
           <div class="social">
diff --git a/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html
index 814e6be1..051e8914 100644
--- a/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html
+++ b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html
@@ -1,7 +1,7 @@
 {% 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>
+  <a class="dropdown-toggle url-init dcl-link" href="{{ instance.url|default:'#' }}" 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 %}
diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html
index ed399ebc..5a464b10 100644
--- a/datacenterlight/templates/datacenterlight/cms/section.html
+++ b/datacenterlight/templates/datacenterlight/cms/section.html
@@ -2,24 +2,43 @@
 
 <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 }}
+    {% if instance.child_plugin_instances|length %}
+      <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">
+          {% if instance.heading %}
+            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+              <h2>{{ instance.heading }}</h2>
+            </div>
+          {% endif %}
+          {% if instance.content %}
+            <div class="split-description">
+              <div class="lead">
+                {{ instance.content }}
+              </div>
+            </div>
+          {% endif %}
+        </div>
       </div>
-    </div>
+    {% else %}
+      <div class="space">
+        {% if instance.heading %}
+          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+            <h2>{{ instance.heading }}</h2>
+          </div>
+        {% endif %}
+        {% if instance.content %}
+          <div class="split-description">
+            {{ instance.content }}
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
   </div>
 </div>
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
index 19d11a73..49083101 100644
--- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html
+++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
@@ -10,126 +10,120 @@
     </div>
 
     <div class="split-section left" id="tech_stack">
-        <div class="space">
-            <div class="container">
-                <div class="row">
-                    <div class="col-sm-6">
-                        <div class="split-text">
-                            <div class="split-title">
-                                <h2>{% trans "Tech Stack" %}</h2>
-                            </div>
-                            <div class="split-description">
-                                <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>
-                            </div>
-                        </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-6 split-text">
+                    <div class="split-title">
+                        <h2>{% trans "Tech Stack" %}</h2>
                     </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 class="split-description">
+                        <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>
+                    </div>
+                </div>
+                <div class="col-sm-6 split-figure">
+                    <div class="section-figure">
+                        <div class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan">
+                            <div class="section-image-caption">{% trans "Our services run on" %}</div>
                         </div>
-                        <div class="col-sm-6 logo-wrap">
+                        <div class="section-image">
                             <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
-                            <span class="logo-caption">{% trans "Our monitoring" %}</span>
+                            <div class="section-image-caption">{% trans "Our monitoring" %}</div>
                         </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 class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
+                            <div class="section-image-caption">{% trans "Our storage layer" %}</div>
                         </div>
-                        <div class="col-sm-6 logo-wrap">
+                        <div class="section-image">
                             <img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django">
-                            <span class="logo-caption">{% trans "Our web frontend" %}</span>
+                            <div class="section-image-caption">{% trans "Our web frontend" %}</div>
                         </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 class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
+                            <div class="section-image-caption">{% trans "Our cloud" %}</div>
                         </div>
-                        <div class="col-sm-6 logo-wrap">
+                        <div class="section-image">
                             <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 class="section-image-caption">{% trans "Our configuration management system" %}</div>
                         </div>
-                        <div class="col-sm-6 logo-wrap">
+                        <div class="section-image">
                             <img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python">
-                            <span class="logo-caption">{% trans "Our awesome juice" %}</span>
+                            <div class="section-image-caption">{% trans "Our awesome juice" %}</div>
                         </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 class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
+                            <div class="section-image-caption">{% trans "Our NAT64 gateway" %}</div>
                         </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 section-gradient" id="price">
+    <div class="split-section right split-section-plain">
         <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 class="col-sm-4 col-md-5 split-figure">
+                    <div class="section-figure">
+                        <div class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
+                        </div>
+                        <div class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
+                        </div>
+                        <div class="section-image">
+                            <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-8 col-md-7 split-text">
+                    <div>
+                        <h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
+                    </div>
+                    <div class="split-description">
+                        <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>
+
+    <div class="banner-list">
+        <div class="container">
+            <div class="banner-list-heading">
+                <h2>{% 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">
+                    <p class="lead">{% 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 class="split-section section-gradient left" id="price">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 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">

From a29a1514535faa1cace3446cdca87d29c445720f Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 02:34:39 +0530
Subject: [PATCH 2/7] change font size

---
 .../datacenterlight/cms/section.html          | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html
index 5a464b10..46eac673 100644
--- a/datacenterlight/templates/datacenterlight/cms/section.html
+++ b/datacenterlight/templates/datacenterlight/cms/section.html
@@ -28,16 +28,20 @@
       </div>
     {% else %}
       <div class="space">
-        {% if instance.heading %}
-          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
-            <h2>{{ instance.heading }}</h2>
-          </div>
-        {% endif %}
-        {% if instance.content %}
-          <div class="split-description">
-            {{ instance.content }}
-          </div>
-        {% endif %}
+        <div class="split-text">
+          {% if instance.heading %}
+            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+              <h2>{{ instance.heading }}</h2>
+            </div>
+          {% endif %}
+          {% if instance.content %}
+            <div class="split-description">
+              <div class="lead">
+                {{ instance.content }}
+              </div>
+            </div>
+          {% endif %}
+        </div>
       </div>
     {% endif %}
   </div>

From 6b67cb815cff91d4362abaf5631aa269d6636d34 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 02:55:55 +0530
Subject: [PATCH 3/7] reduce split-titlestyle speciicity

---
 .../datacenterlight/css/landing-page.css      | 44 ++++++++++++-------
 .../datacenterlight/cms/section.html          | 26 +++++------
 .../datacenterlight/whydatacenterlight.html   |  2 +-
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 05b2f075..17ec907e 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -394,24 +394,22 @@ textarea {
   color: #5A74AF;
 }
 
-.split-section .split-text .lead {
-  font-size: 21px;
-  color: #3a3a3a;
-  font-weight: 300 !important;
+.split-section h2 {
+  font-size: 34px;
 }
 
-.split-section .split-text h2 {
+.split-section .split-title-plain h2 {
   font-size: 40px;
   line-height: 50px;
   color: #3a3a3a;
 }
 
-.split-section .split-text .split-title {
+.split-section .split-title {
   position: relative;
   margin-bottom: 25px;
 }
 
-.split-section .split-text .split-title h2 {
+.split-section .split-title h2 {
   font-size: 50px;
   padding-bottom: 25px;
   letter-spacing: 2px;
@@ -428,6 +426,14 @@ textarea {
   margin-right: auto;
 }
 
+.split-section .split-description .lead {
+  color: #3a3a3a;
+}
+
+.split-section .space .split-description .lead {
+  font-size: 20px;
+}
+
 .split-section.right .split-description {
   width: 90%;
   margin-left: auto;
@@ -440,15 +446,17 @@ textarea {
 }
 
 .split-section.right .split-text ul,
-.split-section.left .split-text {
+.split-section.left .split-text,
+.split-section.left .space {
   text-align: left;
 }
 
-.split-section.right .split-text {
+.split-section.right .split-text,
+.split-section.right .space {
   text-align: right;
 }
 
-.split-section .split-text .split-title::before {
+.split-section .split-title::before {
   content: "";
   position: absolute;
   bottom: 0;
@@ -458,11 +466,11 @@ textarea {
   left: auto;
 }
 
-.split-section.right .split-text .split-title::before {
+.split-section.right .split-title::before {
   right: 0;
 }
 
-.split-section.left .split-text .split-title::before {
+.split-section.left .split-title::before {
   left: 0;
 }
 
@@ -934,11 +942,12 @@ textarea {
 
 
 @media(max-width:991px) {
-  .section-sm-center .split-text {
+  .section-sm-center .split-text,
+  .section-sm-center .space {
     text-align: center !important;
     margin-bottom: 40px;
   }
-  .section-sm-center .split-text .split-title::before {
+  .section-sm-center .split-title::before {
     left: 50% !important;
     transform: translate(-50%, 0);
   }
@@ -1032,11 +1041,14 @@ textarea {
   .split-section .icon-section i {
     font-size: 120px;
   }
-  .split-section .split-text h2 {
+  .split-section h2 {
+    font-size: 28px;
+  }
+  .split-section .split-title-plain h2 {
     font-size: 30px;
     line-height: 35px;
   }
-  .split-section .split-text .split-title h2 {
+  .split-section .split-title h2 {
     font-size: 35px;
     line-height: 35px;
   }
diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html
index 46eac673..8e7b5bf0 100644
--- a/datacenterlight/templates/datacenterlight/cms/section.html
+++ b/datacenterlight/templates/datacenterlight/cms/section.html
@@ -13,7 +13,7 @@
         </div>
         <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text">
           {% if instance.heading %}
-            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+            <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
               <h2>{{ instance.heading }}</h2>
             </div>
           {% endif %}
@@ -28,20 +28,18 @@
       </div>
     {% else %}
       <div class="space">
-        <div class="split-text">
-          {% if instance.heading %}
-            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
-              <h2>{{ instance.heading }}</h2>
+        {% if instance.heading %}
+          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+            <h2>{{ instance.heading }}</h2>
+          </div>
+        {% endif %}
+        {% if instance.content %}
+          <div class="split-description">
+            <div class="lead">
+              {{ instance.content }}
             </div>
-          {% endif %}
-          {% if instance.content %}
-            <div class="split-description">
-              <div class="lead">
-                {{ instance.content }}
-              </div>
-            </div>
-          {% endif %}
-        </div>
+          </div>
+        {% endif %}
       </div>
     {% endif %}
   </div>
diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
index 49083101..2e2402ed 100644
--- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html
+++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
@@ -78,7 +78,7 @@
                     </div>
                 </div>
                 <div class="col-sm-8 col-md-7 split-text">
-                    <div>
+                    <div class="split-title-plain">
                         <h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
                     </div>
                     <div class="split-description">

From db3703bedca299c10d07c7b7d234cbfc8250780d Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 02:57:29 +0530
Subject: [PATCH 4/7] ehading fix

---
 datacenterlight/templates/datacenterlight/cms/section.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html
index 8e7b5bf0..0266e6a3 100644
--- a/datacenterlight/templates/datacenterlight/cms/section.html
+++ b/datacenterlight/templates/datacenterlight/cms/section.html
@@ -29,7 +29,7 @@
     {% else %}
       <div class="space">
         {% if instance.heading %}
-          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
+          <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
             <h2>{{ instance.heading }}</h2>
           </div>
         {% endif %}

From b7af6ad4e6911446a4a68a672a6bf1fc7d1181a5 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 03:03:28 +0530
Subject: [PATCH 5/7] headning font weight change

---
 datacenterlight/static/datacenterlight/css/landing-page.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 17ec907e..7c5736e0 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -395,7 +395,8 @@ textarea {
 }
 
 .split-section h2 {
-  font-size: 34px;
+  font-size: 38px;
+  font-weight: 400;
 }
 
 .split-section .split-title-plain h2 {

From 776cd35172dd8e76edbc8af8c096a27fdf6107ac Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 19:17:04 +0530
Subject: [PATCH 6/7] heading font weight

---
 datacenterlight/static/datacenterlight/css/landing-page.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 7c5736e0..1aa260ac 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -395,12 +395,13 @@ textarea {
 }
 
 .split-section h2 {
-  font-size: 38px;
+  font-size: 36px;
   font-weight: 400;
 }
 
 .split-section .split-title-plain h2 {
   font-size: 40px;
+  font-weight: 300;
   line-height: 50px;
   color: #3a3a3a;
 }
@@ -412,6 +413,7 @@ textarea {
 
 .split-section .split-title h2 {
   font-size: 50px;
+  font-weight: 300;
   padding-bottom: 25px;
   letter-spacing: 2px;
 }

From 4431ddf5ec47d2c429c4b866ca7f53c75c270c38 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 13 Mar 2018 22:38:55 +0530
Subject: [PATCH 7/7] plugins change image and text order on mobile

---
 .../static/datacenterlight/css/landing-page.css  |  2 +-
 .../templates/datacenterlight/cms/section.html   | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 1aa260ac..2f44613b 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -431,6 +431,7 @@ textarea {
 
 .split-section .split-description .lead {
   color: #3a3a3a;
+  font-size: 21px;
 }
 
 .split-section .space .split-description .lead {
@@ -743,7 +744,6 @@ textarea {
 }
 
 .space {
-  padding: 50px 0;
   max-width: 660px;
   margin: auto;
 }
diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html
index 0266e6a3..bdef3196 100644
--- a/datacenterlight/templates/datacenterlight/cms/section.html
+++ b/datacenterlight/templates/datacenterlight/cms/section.html
@@ -4,14 +4,7 @@
   <div class="container">
     {% if instance.child_plugin_instances|length %}
       <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="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text">
           {% if instance.heading %}
             <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
               <h2>{{ instance.heading }}</h2>
@@ -25,6 +18,13 @@
             </div>
           {% endif %}
         </div>
+        <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %} split-figure">
+          <div class="section-figure">
+            {% for plugin in instance.child_plugin_instances %}
+              {% render_plugin plugin %}
+            {% endfor %}
+          </div>
+        </div>
       </div>
     {% else %}
       <div class="space">