Adding Clients Section

nwmn · Aug 11, 2014 · 2821d52 · 2821d52
1 parent c88bc2e
commit 2821d52
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -48,6 +48,11 @@ _A big thank you to these creators for contributing sample projects for the "wor
 
 ![The Design](/assets/img/the_design.jpg)
 
+
+_Artist Thmemes in the wild:_
+- [limestudios](http://limestudios.net/)
+
+
 ---
 
 This is a free Jekyll Theme that is currently being developed in weekly episodes on the [DevTips YouTube channel](http://youtube.com/devtipsfordesigners). 

diff --git a/_includes/clients.html b/_includes/clients.html
@@ -0,0 +1,42 @@
+<section class="section-clients">
+
+  <h3 id="clients">Clients</h3>
+
+  <div class="client-controls">
+    <div class="client-control-next">{% include icons/icon-next.html %}</div>
+    <div class="client-control-prev">{% include icons/icon-prev.html %}</div>
+  </div>
+
+  <div class="clients-belt">
+
+    <div class="client-unit">
+
+      <div class="client-face">
+        <img src="assets/img/clients/face-aaroni.jpg" alt="client-face">
+        <strong class="client-name">Scott Summers</strong>
+        <em class="client-title">Director of Design, Quebec Int.</em>
+      </div>
+
+      <div class="client-content">
+        <div class="client-quote-mark">{% include icons/icon-quote-mark.html %}</div>
+        <p><strong>In pellentesque faucibus vestibulum.</strong> Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo</p>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div class="clients-logos">
+
+    <div class="client-logo active-client"></div>
+
+    <div class="client-logo"></div>
+
+    <div class="client-logo"></div>
+
+    <div class="client-logo"></div>
+
+  </div>
+
+
+</section>
diff --git a/_includes/icons/icon-next.html b/_includes/icons/icon-next.html
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ enable-background="new 0 0 40 40" xml:space="preserve">
+<path d="M12.576,35.954c-0.253,0-0.507-0.097-0.7-0.292c-0.387-0.389-0.387-1.021,0-1.41L26.024,20L11.876,5.748
+	c-0.387-0.389-0.387-1.02,0-1.41c0.387-0.39,1.013-0.39,1.4,0l14.847,14.957c0.387,0.389,0.387,1.021,0,1.41L13.276,35.662
+	C13.083,35.857,12.83,35.954,12.576,35.954z"/>
+</svg>
diff --git a/_includes/icons/icon-prev.html b/_includes/icons/icon-prev.html
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ enable-background="new 0 0 40 40" xml:space="preserve">
+<path d="M26.724,35.662L11.876,20.705c-0.387-0.389-0.387-1.02,0-1.41L26.724,4.338c0.387-0.39,1.013-0.39,1.4,0
+	c0.387,0.389,0.387,1.02,0,1.41L13.976,20l14.148,14.252c0.387,0.39,0.387,1.021,0,1.41c-0.193,0.195-0.447,0.292-0.7,0.292
+	C27.17,35.954,26.917,35.857,26.724,35.662z"/>
+</svg>
diff --git a/_includes/icons/icon-quote-mark.html b/_includes/icons/icon-quote-mark.html
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ enable-background="new 0 0 55 55" xml:space="preserve">
+<path d="M50.692,9.732c-12.207,6.16-18.309,14.697-18.309,25.615c0,3.64,1.147,6.733,3.443,9.28c2.295,2.548,5.01,3.821,8.146,3.821
+	c2.799,0,5.123-0.979,6.971-2.939c1.848-1.959,2.771-4.367,2.771-7.223c0-2.688-0.953-5.052-2.855-7.097
+	c-1.904-2.043-4.312-3.233-7.223-3.569c0-4.535,3.415-8.482,10.246-11.842L50.692,9.732z M19.87,9.732
+	C7.72,15.891,1.645,24.429,1.645,35.347c0,3.64,1.134,6.733,3.401,9.28c2.268,2.548,4.968,3.821,8.104,3.821
+	c2.799,0,5.136-0.979,7.013-2.939c1.875-1.959,2.813-4.367,2.813-7.223c0-2.688-0.953-5.052-2.856-7.097
+	c-1.904-2.043-4.34-3.233-7.307-3.569c0-4.535,3.443-8.482,10.33-11.842L19.87,9.732z"/>
+</svg>
diff --git a/assets/css/3-sections/_-sections-dir.sass b/assets/css/3-sections/_-sections-dir.sass
@@ -1,4 +1,5 @@
 @import 'header'
 @import 'footer'
 @import 'about'
-@import 'work'
+@import 'work'
+@import 'clients'
diff --git a/assets/css/3-sections/clients.sass b/assets/css/3-sections/clients.sass
@@ -0,0 +1,100 @@
+.section-clients
+  position: relative
+
+.clients-belt
+  width: 100%
+  position: relative
+
+  .client-unit
+    max-width: 750px
+    margin: 0 auto 50px
+    +display(flex)
+
+    .client-face
+      min-width: 300px
+      text-align: center
+
+      img
+        max-width: 100px
+        border-radius: 50%  
+
+      .client-name
+        display: block
+        text-transform: uppercase
+        font-weight: 400
+        letter-spacing: 1px
+
+      .client-title
+        font-style: normal
+        font-size: 12px
+        color: #999
+
+    .client-content
+      font-size: 18px
+      line-height: 36px
+      font-weight: 300
+      margin-top: -10px
+      position: relative
+
+.clients-logos
+  position: relative
+  max-width: 750px
+  margin: 0 auto 100px
+  +display(flex)
+  +align-items(space-around)
+  +justify-content(center)
+
+
+  .client-logo
+    height: 80px
+    min-width: 200px
+    background:
+      image: url(/assets/img/clients/logo1.png)
+      size: contain
+      position: center
+      repeat: no-repeat
+    cursor: pointer
+    margin: 0 20px
+
+    &.active-client
+      box-shadow: 0px 4px 0px $accent
+
+
+.client-quote-mark
+  +position(absolute, -18px null null -15px)
+  +size(60px)
+  z-index: -1
+  opacity: 0.3
+
+  path
+    fill: $accent
+
+.client-controls
+  +position(absolute, 0px 0px 0px 0px) 
+
+  > div
+    +size(40px)
+    margin-top: -20px
+    cursor: pointer
+
+    path
+      fill: $accent
+
+  .client-control-next
+    +position(absolute, 50% 10px null null)
+
+  .client-control-prev
+    +position(absolute, 50% null null 10px)
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/clients/face-aaroni.jpg b/assets/img/clients/face-aaroni.jpg
diff --git a/assets/img/clients/face-atariboy.jpg b/assets/img/clients/face-atariboy.jpg
diff --git a/assets/img/clients/face-jackiesaik.jpg b/assets/img/clients/face-jackiesaik.jpg
diff --git a/assets/img/clients/face-teleject.jpg b/assets/img/clients/face-teleject.jpg
diff --git a/assets/img/clients/logo1.png b/assets/img/clients/logo1.png
diff --git a/assets/img/clients/logo2.png b/assets/img/clients/logo2.png
diff --git a/assets/img/clients/logo3.png b/assets/img/clients/logo3.png
diff --git a/assets/img/clients/logo4.png b/assets/img/clients/logo4.png
diff --git a/index.html b/index.html
@@ -22,6 +22,8 @@
 
 {% include work.html %}
 
+{% include clients.html %}
+
 
 {% include footer.html %}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,6 +22,8 @@

		{% include work.html %}

		{% include clients.html %}


		{% include footer.html %}

Expand Down