Update services.html

services.html

@@ -3,43 +3,34 @@ layout: default
 section_id: pages
 services:
 - title: Branding
-  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
-    expedita obcaecati, commodi distinctio accusamus mollitia ratione ipsam cupiditate
-    odio ea.
-  image: images/@stock/service-3.jpg
-  image_position: left
-- title: Website
-  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
-    expedita obcaecati, commodi distinctio accusamus mollitia ratione ipsam cupiditate
-    odio ea.
-  image: images/@stock/service-1.jpg
-  image_position: right
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-bolt
+- title: Development
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-laptop
+- title: Web Design
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-mouse
+- title: Marketing
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-signs
 - title: Print
-  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
-    expedita obcaecati, commodi distinctio accusamus mollitia ratione ipsam cupiditate
-    odio ea.
-  image: images/@stock/service-2.jpg
-  image_position: left
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-printer
 - title: Packaging
-  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
-    expedita obcaecati, commodi distinctio accusamus mollitia ratione ipsam cupiditate
-    odio ea.
-  image: images/@stock/service-4.jpg
-  image_position: right
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  icon: icon-basic-book
 
-principles:
-- title: Work with passion
-  desc: Lorem ipsum dolor sit amet adipisicing elit. Maxime eos facilis
-    veniam obcaecati, fugiat illo soluta accusantium?
-  icon: icon-basic-heart
-- title: Fail and Learn
-  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum,
-    nihil accusamus sint et repudiandae.
-  icon: icon-basic-flag2
-- title: Repeat and Success
-  desc: Dolor sit amet, consectetur adipisicing elit. Maxime eos facilis
-    veniam obcaecati, fugiat illo soluta accusantium?
-  icon: icon-basic-paperplane
+steps:
+- title: Research
+  desc: Lorem ipsum dolor sit amet adipisicing elit. Maxime eos facilis veniam obcaecati,
+    fugiat illo soluta accusantium?
+- title: Design
+  desc: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, nihil
+    accusamus sint et repudiandae ea sapiente voluptatibus fuga.
+- title: Management
+  desc: Dolor sit amet, consectetur adipisicing elit. Maxime eos facilis veniam obcaecati,
+    fugiat illo soluta accusantium?
 ---
 
 <div class="full centered-text light-cyan lamp">
@@ -60,57 +51,39 @@ principles:
   </div>
   <div class="two spacing"></div>
 </div>
-<div class="four spacing"></div>
-<div class="two spacing"></div>
-{% for service in page.services %}
-  <div class="full no-padding">
-    <div class="row">
-      {% if service.image_position == 'left' %}
-        <div class="medium-6 columns">
-          <img src="{{site.url}}/{{service.image}}" alt="">
-        </div>
-        <div class="medium-6 columns">
-          <div class="service-info right-text">
-            <h2>{{service.title}}</h2>
-            <p>{{service.desc}}</p>
-            <div class="two spacing"></div>
-            <a href="#" class="button brown">Case study</a>
-          </div>
-        </div>
-      {% else %}
-        <div class="medium-6 columns">
-          <div class="service-info right-text">
-            <h2>{{service.title}}</h2>
-            <p>{{service.desc}}</p>
-            <div class="two spacing"></div>
-            <a href="#" class="button brown">Case study</a>
+<div class="full">
+  <div class="row">
+    <div class="large-12 columns">
+      <div class="services">
+        {% for service in page.services %}
+          <div class="large-4 columns">
+            <a href="#" class="icon-text">
+              <i class="{{service.icon}}"></i>
+              <h3>{{service.title}}</h3>
+              <p>{{service.desc}}</p>
+            </a>
           </div>
-        </div>
-        <div class="medium-6 columns">
-          <img src="{{site.url}}/{{service.image}}" alt="">
-        </div>
-      {% endif %}
+        {% endfor %}
+      </div>
     </div>
-    <div class="four spacing"></div>
-    <div class="two spacing"></div>
   </div>
-{% endfor %}
-<div class="full light-grey centered-text">
+</div>
+
+<div class="full light-grey">
   <div class="section-title">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <h2>Our values</h2>
-        <p>We have principles to do things</p>
+        <h2>Our process</h2>
+        <p>We do things step by step</p>
       </div>
     </div>
   </div>
   <div class="row">
-    {% for principle in page.principles %}
+    {% for step in page.steps %}
       <div class="large-4 columns">
-        <div class="principle">
-          <i class="{{principle.icon}}"></i>
-          <h4>{{principle.title}}</h4>
-          <p>{{principle.desc}}</p>
+        <div class="process">
+          <h3><span>0{{forloop.index}}.</span>{{step.title}}</h3>
+          <p>{{step.desc}}</p>
         </div>
       </div>
     {% endfor %}
@@ -126,4 +99,4 @@ principles:
     </div>
   </div>
   <div class="two spacing"></div>
-</div>
+</div>