make pages#getting_started4 pretty again

app/views/pages/getting_started4.html.erb

@@ -1,5 +1,5 @@
 <% content_for :page_title, t('.menu_title') %>
-<% content_for :wrapper_class, "index_page" %>
+<% content_for :wrapper_class, 'index-page' %>
 
 <div id="masthead" class="hero">
   <div class="container">
@@ -9,89 +9,82 @@
 </div>
 
 <div class="container">
-  <div class="row top-spacing">
-    <div class="span2">&nbsp;
+  <div class="row minor-top-spacing">
+    <div class="col-md-12">
+      <p class="more-info"><%= t '.aspects1' %></p>
+      <h3><%= t '.sharing' %></h3>
+      <p><%= t '.sharing_ex' %></p>
+      <p><%= t '.relationships' %></p>
+
+      <h5><%= t '.followers' %></h5>
+      <p><%= t '.followers_ex1' %></p>
+      <p><%= t '.followers_ex2' %></p>
+      <p class="more-info"><%= t '.followers_ex3' %></p>
+
+      <h5><%= t '.following' %></h5>
+      <p><%= t '.following_ex1' %></p>
+      <p><%= t '.following_ex2' %></p>
+
+      <h5><%= t '.mutual' %></h5>
+      <p><%= t '.mutual_ex1' %></p>
+      <p><%= t '.mutual_ex2' %></p>
+      <ul>
+        <li><%= t '.mutual_ls1' %></li>
+        <li><%= t '.mutual_ls2' %></li>
+        <li><%= t '.mutual_ls3' %></li>
+        <li><%= t '.mutual_ls4' %></li>
+      </ul>
+      <p><%= t('.mutual_ex3').html_safe %></p>
+
+      <h3><%= t '.finding' %></h3>
+      <p><%= t '.finding_ex1' %></p>
+      <p><%= t '.finding_ex2' %></p>
     </div>
-    <div class="span12">       
-		<p class="more-info"><%= t '.aspects1' %></p>
-        <h3><%= t '.sharing' %></h3>
-        <p><%= t '.sharing_ex' %></p> 
-        <p><%= t '.relationships' %></p> 
-
-        <h5><%= t '.followers' %></h5>
-        <p><%= t '.followers_ex1' %></p>
-        <p><%= t '.followers_ex2' %></p>
-        <p class="more-info"><%= t '.followers_ex3' %></p>
-
-        <h5><%= t '.following' %></h5>
-        <p><%= t '.following_ex1' %></p>
-        <p><%= t '.following_ex2' %></p>
-
-        <h5><%= t '.mutual' %></h5>
-        <p><%= t '.mutual_ex1' %></p>
-        <p><%= t '.mutual_ex2' %></p>
-        	<ul>
-            	<li><%= t '.mutual_ls1' %></li>
-                <li><%= t '.mutual_ls2' %></li>
-                <li><%= t '.mutual_ls3' %></li>
-                <li><%= t '.mutual_ls4' %></li>
-            </ul>
-        <p><%= t('.mutual_ex3').html_safe %></p>
-
-        <h3><%= t '.finding' %></h3>
-        <p><%= t '.finding_ex1' %></p>
-        <p><%= t '.finding_ex2' %></p>
-        </div>
-        <div class="span2">&nbsp;</div>
-        </div>
+  </div>
 
-        <div class="row">
-        <div class="span2">&nbsp;</div>
-        <div class="span10">
-        <h5><%= t '.search' %></h5>
-        <p><%= t '.search_ex' %></p>
-        <ul>
-        	<li><%= t '.search_ls1' %></li>
-            <li><%= t '.search_ls2' %></li>
-            <li><%= t('.search_ls3').html_safe %></li>
-            <li><%= t('.search_ls4').html_safe %></li>
-            <li><%= t('.search_ls5').html_safe%></li>
-            <li><%= t '.search_ls6' %></li>
-        </ul>
-
-        <h5><%= t '.invite' %></h5>
-        <p><%= t('.invite_ex').html_safe %></p>
-        </div>
-        <div class="span4"><%= image_tag "add-contact.png" %></div>
-        <div align="center"><%= image_tag "invite.png" %></div>
-        </div>
-
-        <div class="row">
-        <div class="span2">&nbsp;</div>
-        <div class="span12">
-        <h5><%= t '.profile' %></h5>
-        <p><%= t '.profile_ex1' %></p>
-        <p><%= t '.profile_ex2' %></p>
-
-        <h5><%= t '.tags' %></h5>
-        <p><%= t '.tags_ex' %></p>
-
-        <h3><%= t '.removing' %></h3>
-        <p><%= t '.removing_ex1' %>
-        	<ol>
-        		<li><%= t '.removing_ex2' %></li>
-        		<li><%= t '.removing_ex3' %></li>
-        	</ol>
-        <%= t '.removing_ex4' %></p>
-        <p><%= t('.removing_ex5', part3_link: link_to(t('pages.tutorials.part3'), aspects_path)).html_safe %></p>
-        <p>&nbsp;</p>
-        <p class="more-info"><%= t('.finish').html_safe %></p>
+  <div class="row">
+    <div class="col-md-8">
+      <h5><%= t '.search' %></h5>
+      <p><%= t '.search_ex' %></p>
+      <ul>
+        <li><%= t '.search_ls1' %></li>
+        <li><%= t '.search_ls2' %></li>
+        <li><%= t('.search_ls3').html_safe %></li>
+        <li><%= t('.search_ls4').html_safe %></li>
+        <li><%= t('.search_ls5').html_safe%></li>
+        <li><%= t '.search_ls6' %></li>
+      </ul>
 
-        <p>&nbsp;</p>
-
-            <p align="center"><%= link_to t('pages.getting_started3.byline'), aspects_url %> | <%= link_to t('pages.getting_started5.byline'), sharing_url %></p>
-
-    <div class="span2">
+      <h5><%= t '.invite' %></h5>
+      <p><%= t('.invite_ex').html_safe %></p>
+    </div>
+    <div class="col-md-4">
+      <p class="text-center">
+        <%= image_tag 'pages/getting_started/connecting/add-contact.png' %>
+        <%= image_tag 'pages/getting_started/connecting/invite.png' %>
+      </p>
     </div>
   </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <h5><%= t '.profile' %></h5>
+      <p><%= t '.profile_ex1' %></p>
+      <p><%= t '.profile_ex2' %></p>
+
+      <h5><%= t '.tags' %></h5>
+      <p><%= t '.tags_ex' %></p>
+
+      <h3><%= t '.removing' %></h3>
+      <p><%= t '.removing_ex1' %></p>
+      <ol>
+        <li><%= t '.removing_ex2' %></li>
+        <li><%= t '.removing_ex3' %></li>
+      </ol>
+      <%= t '.removing_ex4' %></p>
+      <p><%= t('.removing_ex5', part3_link: link_to(t('pages.tutorials.part3'), aspects_path)).html_safe %></p>
+      <p class="more-info"><%= t('.finish').html_safe %></p>
+
+      <p class="text-center minor-top-spacing"><%= link_to t('pages.getting_started3.byline'), aspects_url %> | <%= link_to t('pages.getting_started5.byline'), sharing_url %></p>
+  </div>
 </div>