From 33c56b8890add67ad6e677fe890f8e6fe8ec339b Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Thu, 27 Jul 2017 18:35:17 +0530
Subject: [PATCH 1/5] why datacenterlight page, 'we bring the future' section
 layout changed to flex and mobile layout fixed

---
 .../datacenterlight/css/landing-page.css      | 45 ++++++++++++++++---
 .../datacenterlight/whydatacenterlight.html   | 45 +++++++++----------
 2 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 163ffd0e..ac2bd320 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -664,9 +664,14 @@ tech-sub-sec h2 {
 }
 .space-middle{
 	padding: 45px 0;
+	display: inline-block;
+}
+.ssdimg {
+	vertical-align: middle;
+	display: inline-block;
 }
 .padding-vertical{
-	padding: 35px 0;
+	padding: 30px 9px;
 }
 .percent-text img {
 	margin-left:20px;
@@ -895,7 +900,7 @@ color: #eb4d5c;
 }
 @media(max-width:767px) {
 	.percent-text {
-		font-size: 50px;
+		/* font-size: 50px; */
 	}
 	#tech_stack h3 {
 		font-size: 30px;
@@ -965,11 +970,12 @@ color: #eb4d5c;
 
 @media(max-width:768px) {
 .percent-text {
-    font-size: 43px;
+    /* font-size: 43px; */
 }
 	.tech-sub-sec h2 {
-    font-size: 30px;
-line-height: 40px;
+    /* font-size: 30px; */
+    /* line-height: 40px; */
+    /* font-weight: 500; */
 }
 .single-heading h2 {
     font-size: 50px;
@@ -1163,7 +1169,7 @@ line-height: 40px;
     padding: 30px;
 }
 .percent-text {
-    text-align: center;
+    /* text-align: center; */
 }
     .pricing-section .card {
         width: 90%;
@@ -1293,3 +1299,30 @@ a#forgotpassword {
 .error-message-box{
     margin-top: 20px;
 }
+
+.flex-row {
+	margin-top: 25px;
+}
+
+@media (min-width: 768px) {
+	.flex-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.flex-row .percent-text {
+		flex-shrink : 0;
+		padding: 0 15px;
+	}
+	.flex-row .percent-text,
+	.flex-row .desc-text {
+		max-width: 600px;
+	}
+	.flex-row-rev .percent-text {
+		order: 2;
+	}
+}
+
+.w380 {
+	max-width: 380px !important;
+}
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
index 948a51b2..f080963d 100644
--- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html
+++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
@@ -64,7 +64,7 @@
                         <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>
@@ -98,30 +98,25 @@
         <hr class="thick-divider"/><!-- Divider -->
         <div class="space">
         <div class="container">
-            <div class="row">
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec">
-                        <h2>{% trans "We bring the future to you." %}</h2>
-                    </div>
-                    <div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6">
-                            <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 class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right landscape-xs-6">
-                            100% <strong>IPv6</strong>
-                    </div>
+            <div class="tech-sub-sec">
+                <h2>{% trans "We bring the future to you." %}</h2>
+            </div>
+            <div class="flex-row flex-row-rev">
+                <div class="percent-text">
+                    100% <strong>IPv6</strong>
                 </div>
-                <div class="col-lg-12 space-block"></div>
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                    <div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8">
-                            <span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-right tech-sub-sec  padding-vertical landscape-xs-4">
-                        <div>
-                            <p class="lead new-lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
-                        </div>
-                    </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">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
                 </div>
             </div>
         </div>
@@ -154,6 +149,6 @@
          </div>
 
     </div>
-    
+
     <!-- End Why Data Center Light? -->
 {% endblock %}

From 4995604873547ca9208825a1e351d4023da2c31d Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Fri, 28 Jul 2017 17:39:20 +0530
Subject: [PATCH 2/5] minor padding adjustments

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

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index ac2bd320..e02d620a 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -1169,6 +1169,7 @@ color: #eb4d5c;
     padding: 30px;
 }
 .percent-text {
+	font-size: 40px;
     /* text-align: center; */
 }
     .pricing-section .card {
@@ -1300,7 +1301,7 @@ a#forgotpassword {
     margin-top: 20px;
 }
 
-.flex-row {
+.flex-row-rev {
 	margin-top: 25px;
 }
 
@@ -1321,6 +1322,9 @@ a#forgotpassword {
 	.flex-row-rev .percent-text {
 		order: 2;
 	}
+	.flex-row-rev {
+		margin-bottom: 25px;
+	}
 }
 
 .w380 {

From aa4bfbdd31928d75ff923e10f2ae0447d1e5ab58 Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Mon, 31 Jul 2017 17:56:03 +0530
Subject: [PATCH 3/5] font size reduced for mobile

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

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index bfd9e36b..65d9392d 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -782,7 +782,7 @@ tech-sub-sec h2 {
 }
 
 .percent-text img {
-    margin-left: 20px;
+    /* margin-left: 20px; */
 }
 
 .space-block {
@@ -1327,8 +1327,8 @@ tech-sub-sec h2 {
         padding: 30px;
     }
     .percent-text {
-    	font-size: 40px;
-        /* text-align: center; */
+    	font-size: 34px;
+    	/* text-align: center; */
     }
     .pricing-section .card {
         width: 90%;

From e6208ee639aa1b72764bf05e92af54f1113f3ba6 Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Mon, 31 Jul 2017 18:19:09 +0530
Subject: [PATCH 4/5] font size to 32px

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

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 1b5b3949..35f3ea9f 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -1352,7 +1352,7 @@ tech-sub-sec h2 {
         padding: 30px;
     }
     .percent-text {
-    	font-size: 34px;
+    	font-size: 32px;
     	/* text-align: center; */
     }
     .pricing-section .card {

From f4880ae136e8b76eedb797b0b1492729429d0e60 Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Mon, 31 Jul 2017 18:44:13 +0530
Subject: [PATCH 5/5] font weight bold for titles

---
 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 35f3ea9f..66585578 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -1352,7 +1352,8 @@ tech-sub-sec h2 {
         padding: 30px;
     }
     .percent-text {
-    	font-size: 32px;
+        font-family: 'Lato';
+    	font-size: 31px;
     	/* text-align: center; */
     }
     .pricing-section .card {