Initial commit

src/scripts/template.js

@@ -0,0 +1,5 @@
+(function ($) {
+
+    console.log('Ready!', $);
+
+})(window.jQuery);

src/styles/template.css

@@ -0,0 +1,14 @@
+/**
+ * Use "rem" instead of pixels. 1rem = 16pixels
+ *    No need to use rem in situations of "1px". (usually used for borders width).
+ *
+ * Use BEM naming system for class names: http://getbem.com/naming/
+ *
+ * Use Mobile First approach.
+ *
+ */
+.clients {
+  background-color: red;
+}
+
+/*# sourceMappingURL=template.css.map */

src/styles/template.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.css"}

src/styles/template.scss

@@ -0,0 +1,42 @@
+/**
+ * Use "rem" instead of pixels. 1rem = 16pixels
+ *    No need to use rem in situations of "1px". (usually used for borders width).
+ *
+ * Use BEM naming system for class names: http://getbem.com/naming/
+ *
+ * Use Mobile First approach.
+ *
+ */
+
+.clients {
+  background-color: red;
+
+  &__sub_level {
+    // EXAMPLE OF BREAKPOINTS
+
+    @media (min-width: 600px) {
+      // Tablet
+    }
+
+    @media (min-width: 980px) {
+      // Large Tablet
+    }
+
+    @media (min-width: 1024px) {
+      // Laptop & Tablet
+    }
+
+    @media (min-width: 1336px) {
+      // Laptop
+    }
+
+    @media (min-width: 1680px) {
+      // Desktop
+    }
+
+  }
+
+  &__sub_level_two {
+    //
+  }
+}

src/template.hbs

@@ -0,0 +1,13 @@
+<section class="template clients">
+    <div class="clients__intro"><h2 class="clients__title title">{{title}}</h2></div>
+
+    <div class="clients__content">
+        <div class="clients__content-text"><p>{{phrase}}</p></div>
+    </div>
+
+    <footer class="clients__actions actions">
+        <a href="{{ url }}" target="_self" class="btn btn--secondary">{{ cta_text }}</a>
+    </footer>
+</section>
+
+<img src="images/demo.jpeg" alt="">