Redesign front page to focus on call to action and social proof

Author: JackStouffer

css/style.css

@@ -1356,7 +1356,7 @@ body#Home #content > h1
 
 body#Home #content > .intro
 {
-    padding-bottom: 1em;
+    padding: 2em 0 4em;
     border-bottom: 1px solid #E6E6E6;
 }
 
@@ -1393,13 +1393,48 @@ body#Home #content > .intro .download .btn
 body#Home #content > .intro .download .btn.action
 {
     border-color: #98312A;
+    background-color: #B03931;
+    color: white;
 }
 
 body#Home #content > .intro .download .btn.action:hover
 {
     border-color: #943029;
+    background-color: #742620;
+    color: white;
+}
+
+.org_list_header h3
+{
+    margin: 1em 0 .5em;
+}
+
+.org_list
+{
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    padding: 10px 0;
+}
+
+.org_list a img
+{
+    max-width: 150px;
+    max-height: 60px;
+}
+
+.org_list_footer
+{
+    margin-bottom: 3em;
 }
 
+.org_list_footer a
+{
+    display: inline-block;
+    padding: 0 10px;
+}
 
 body#Home #content > .intro #your-code-here
 {
@@ -1983,6 +2018,16 @@ div.openInEditorButton {
     {
         display: none;
     }
+
+    body#Home #content > .intro
+    {
+        padding: 0 0 1.5em;
+    }
+
+    .org_list a img
+    {
+        padding: 0.5em 2em;
+    }
 }
 
 /* Narrow layout stage 2: hamburger menu, forum/twitter widgets disappear from
@@ -2161,6 +2206,11 @@ the home page, intro pitch and your-code-here layed out vertically */
         content: "\f0c9"; /* bars */
         font-family: FontAwesome;
     }
+
+    .org_list a img
+    {
+        padding: 1em 2em;
+    }
 }
 
 /* Narrow layout stage 3: no more two column boxes */

images/orgs-using-d/netflix_small.png

@@ -304,6 +304,28 @@ $(SCRIPT
     })();
 )
 
+$(DIVC org_list_header,
+    <h3 class="center">
+        Industry Proven
+    </h3>
+)
+
+$(DIVC org_list,
+    <a href="https://www.netflix.com"><img src="$(ROOT_DIR)images/orgs-using-d/netflix_small.png" /></a>
+    <a href="https://ebay.com"><img src="$(ROOT_DIR)images/orgs-using-d/ebay.jpg" /></a>
+    <a href="http://remedygames.com"><img src="$(ROOT_DIR)images/orgs-using-d/remedy.png" /></a>
+    <a href="https://www.sociomantic.com"><img src="$(ROOT_DIR)images/orgs-using-d/sociomantic.png" /></a>
+    <a href="https://www.adroll.com"><img src="$(ROOT_DIR)images/orgs-using-d/da_roll.png" /></a>
+    <a href="http://www.weka.io"><img src="$(ROOT_DIR)images/orgs-using-d/weka.png" /></a>
+)
+
+$(DIVC org_list_footer,
+    <p class="center">
+        $(LINK2 $(ROOT_DIR)orgs-using-d.html, Testimonials And More Organizations)
+        $(LINK2 $(ROOT_DIR)areas-of-d-usage.html, Current D use)
+    </p>
+)
+
 $(DIVC more,
 
 $(DIVID news,
@@ -638,32 +660,6 @@ consistency. $(LINK2 spec/memory-safe-d.html, Read more).)
 
 )))
 
-$(DIVC section, $(DIV, $(SECTION3 $(WHY_D_ICON industry) Industry-proven,
-$(DIVC frontpage-orgs center,
-    $(FRONTPAGE_ORG eBay, https://www.ebay.com, ebay.jpg,
-        One of the world’s largest marketplaces
-    )
-    $(FRONTPAGE_ORG Netflix, https://www.netflix.com, netflix.jpg,
-        Video-on-demand streaming platform
-    )
-    $(FRONTPAGE_ORG Sociomantic, https://www.sociomantic.com, sociomantic.png,
-        Real-time personalized advertising
-    )
-    $(FRONTPAGE_ORG Remedy Games, http://www.remedygames.com, remedy.png,
-        Triple-A game development
-    )
-)
-    <div id="frontpage-orgs-more">
-        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
-        $(LINK2 $(ROOT_DIR)areas-of-d-usage.html, Current D use)
-        $(BR)
-        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
-        $(LINK2 $(ROOT_DIR)orgs-using-d.html, More organizations using D)
-    </div>
-)))
-
-
-
 )) $(COMMENT SECTION2 Why D?, DIVC whyd)
 ) $(COMMENT more)
 ) $(COMMENT SECTION1)