diff --git a/package.json b/package.json
new file mode 100644
index 0000000..037334a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "u-css",
+  "version": "1.0.0",
+  "description": "Css training command handler",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "http-server ./src -p 3000"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrisarts/u-css.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/chrisarts/u-css/issues"
+  },
+  "homepage": "https://github.com/chrisarts/u-css#readme"
+}
diff --git a/src/001-float-property/example/css/example.css b/src/001-float-property/example/css/example.css
new file mode 100644
index 0000000..1c61e1f
--- /dev/null
+++ b/src/001-float-property/example/css/example.css
@@ -0,0 +1,133 @@
+/*
+ * Practice : Float Property
+ * Version: 1
+ * By: xxx
+ */
+
+.page-content{
+  color: #787878;
+}
+.bg-dark{
+  background-color: #C8C8C8;
+}
+.bg-light{
+  background-color: #f4f5f7;
+}
+.box-shadow{
+  box-shadow: inset 0 20px 30px -5px rgba(50, 50, 50, 0.18);
+}
+span.capitalize{
+  display: block;
+  font-size: 53px;
+  float: left;
+  height: 32px;
+  padding-top: 16px;
+  margin-right: 2%;
+  margin-bottom: 1%;
+}
+
+.main-container{
+  display: flex;
+  position: relative;
+  top: -5px;
+}
+.aside-nav{
+  width: 33%;
+  padding: 2%;
+}
+.aside-nav label{
+  width: 100%;
+  display: block;
+  font-size: 20px;
+}
+.aside-nav input{
+  width: 90%;
+  border-radius: 3px;
+  border: 1px solid;
+  height: 30px;
+  margin: 2% 0;
+}
+aside p{
+  margin: 2% 0;
+}
+aside ul.aside-menu{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+article.article-content{
+  width: 63%;
+  padding: 2%;
+}
+article.article-content h2{
+  color: #787878;
+}
+
+
+nav.main-menu{
+  display: inline-block;
+  width: 96%;
+  padding: 1% 2%;
+  background: #DCDCDC;
+}
+nav.main-menu ul{
+  padding: 0;
+  margin: 0;
+  display: block;
+  min-height: 1em;
+}
+nav.main-menu ul li{
+  list-style: none;
+  float: left;
+  margin-left: 1%;
+}
+nav.main-menu a{
+  padding: 10px 15px;
+  transition: background .5s, color .3s;
+}
+nav.main-menu a:hover{
+  background: rgba(0,0,0,.3);
+  color: #FFFFFF;
+}
+
+article img{
+  float: right;
+  margin: 0 15px;
+}
+
+ul.gallery-list{
+  margin: 2% 1%;
+  padding: 0;
+  display: inline-block;
+}
+
+ul.gallery-list li{
+  list-style: none;
+  float: left;
+  padding: 1%;
+  width: 18%;
+}
+ul.gallery-list li img{
+  max-width: 250px;
+  width: 100%;
+}
+
+section.text-container{
+  display: inline-block;
+  width: 100%;
+  padding: 2% 0;
+}
+section.text-container img{
+  float: left;
+  margin: 0 15px;
+  max-width: 100px;
+  width: 100%;
+}
+section.text-container p{
+  margin: 1%;
+  padding: 0;
+}
+
+section.border{
+  border: 2px solid #27ae60;
+}
diff --git a/src/001-float-property/example/css/reset.css b/src/001-float-property/example/css/reset.css
new file mode 100644
index 0000000..ec68b85
--- /dev/null
+++ b/src/001-float-property/example/css/reset.css
@@ -0,0 +1,366 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+a{
+  text-decoration: none;
+}
+p{
+  margin: 0;
+}
+p.full-paragraph{
+  width: 100%;
+  display: inline-block;
+  margin-left: 1%;
+}
+.stick-element{
+  position: relative;
+  top: -5px;
+}
+header h1{
+  padding: 1% 2%;
+  margin: 0;
+}
+h2{
+  margin: 0;
+}
+section.img-right img{
+  float: right !important;
+}
diff --git a/src/001-float-property/example/example.css b/src/001-float-property/example/example.css
deleted file mode 100644
index 8a3130e..0000000
--- a/src/001-float-property/example/example.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * Practice : Float Property
- * Version: 1
- * By: xxx
- */
diff --git a/src/001-float-property/example/index.html b/src/001-float-property/example/index.html
index 0d47109..48d955e 100644
--- a/src/001-float-property/example/index.html
+++ b/src/001-float-property/example/index.html
@@ -35,9 +35,11 @@
       <!-- Practice Content Goes Here -->
 
       <div>
-        <header><h1>This is an example of Float CSS property</h1></header>
+        <header class="bg-dark box-shadow">
+          <h1>This is an example of Float CSS property</h1>
+        </header>
 
-        <nav>
+        <nav class="main-menu box-shadow">
           <ul>
             <li><a href="">Link 1</a></li>
             <li><a href="">Link 2</a></li>
@@ -45,81 +47,85 @@
             <li><a href="">Link 4</a></li>
           </ul>
         </nav>
-
-        <article>
-          <h2>Article Title</h2>
-          <img src="../resources/no-image.jpg" alt="image">
-          <p><span>L</span>orem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin
-            consectetuer lectus
-            eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum
-            orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris
-            aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque.
-            Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor
-            porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna,
-            ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.</p>
-          <p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
-            justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
-            turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
-            wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
-            ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
-            nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
-          <p>Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi
-            auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam
-            enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum
-            ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et
-            pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae
-            etiam turpis libero, nunc diam et eros amet augue curabitur.</p>
-        </article>
-
-        <aside>
-          <label>
-            Search for
+        <div class="main-container">
+          <aside class="aside-nav bg-light box-shadow">
+            <label>
+              Search for
+            </label>
             <input type="text">
-          </label>
-          <p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
-            justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
-            turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
-            wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
-            ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
-            nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
+            <p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
+              justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
+              turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
+              wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
+              ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
+              nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
 
-          <ul>
-            <li><a href="">Something 1</a></li>
-            <li><a href="">Something 2</a></li>
-            <li><a href="">Something 3</a></li>
-            <li><a href="">Something 4</a></li>
-          </ul>
-        </aside>
+            <ul class="aside-menu">
+              <li><a href="">Something 1</a></li>
+              <li><a href="">Something 2</a></li>
+              <li><a href="">Something 3</a></li>
+              <li><a href="">Something 4</a></li>
+            </ul>
+          </aside>
 
-        <section>
+          <article class="bg-dark box-shadow article-content">
+            <h2>Article Title</h2>
+            <img src="../resources/no-image.jpg" alt="image">
+            <p><span class="capitalize">L</span>orem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin
+              consectetuer lectus
+              eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum
+              orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris
+              aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque.
+              Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor
+              porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna,
+              ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.</p>
+            <p>lass sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
+              justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
+              turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
+              wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
+              ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
+              nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
+            <p>Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi
+              auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam
+              enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum
+              ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et
+              pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae
+              etiam turpis libero, nunc diam et eros amet augue curabitur.</p>
+          </article>
+        </div>
+
+        <section class="bg-light stick-element box-shadow">
           <h2>Gallery</h2>
-          <ul>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
-            <li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
+          <ul class="gallery-list">
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
+            <li><img src="../resources/no-image.jpg" alt="image"></li>
           </ul>
         </section>
 
-        <section>
-          <img src="../resources/no-image.jpg" width="95" height="84">
-          <p><span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text.
+        <section class="text-container bg-light stick-element box-shadow">
+          <img src="../resources/no-image.jpg">
+          <p><span class="capitalize">T</span>his is some text. This is some text. This is some text. This is some text. This is some text.
             This is some
             text.</p>
-          <p><span>T</span>his is also some text. This is also some text. This is also some text. This
+          <p class="full-paragraph"><span class="capitalize">T</span>his is also some text. This is also some text. This is also some text. This
             is also some
             text. This is also some text. This is also some text.</p>
         </section>
 
-        <div><img src="../resources/no-image.jpg" width="100" height="140">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
-        </div>
+        <section class="text-container bg-light stick-element img-right border box-shadow">
+          <img src="../resources/no-image.jpg">
+          <p>
+            <span class="capitalize">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
+          </p>
+        </section>
       </div>
     </div>
   </main>
diff --git a/src/002-negative-margins/example/example.css b/src/002-negative-margins/example/example.css
index 1d7fd60..8485677 100644
--- a/src/002-negative-margins/example/example.css
+++ b/src/002-negative-margins/example/example.css
@@ -3,3 +3,87 @@
  * Version: 1
  * By: xxx
  */
+.bg-light{
+  background: #F5F5F5;
+  padding: 15px 10px;
+}
+.nm-example h3{
+  border-bottom: 1px solid #D05036;
+  padding-bottom: 10px;
+}
+.nm-content{
+  margin-top: 1%;
+}
+.nm-container .nm-example{
+  line-height: 1.9em;
+}
+.nm-example .nm-content{
+  width: 75%;
+}
+.nm-example .nm-menu-list{
+  margin-top: -11em;
+  height: 11em;
+  width: 25%;
+  float: right;
+  display: flex;
+  justify-content: center;
+}
+ul.mdl-list{
+  list-style: none;
+  display: flex;
+  margin: 1% 0;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+
+ul.mdl-list-text{list-style: none}
+ul.mdl-list-text li {
+  line-height:1.8em;
+  width: 10%;
+  border-bottom: 1px solid #DDDDDD;
+  text-align: center;
+  padding: 5px 0;
+}
+ul.mdl-list-text li.top {margin-top:-108px;}
+ul.mdl-list-text li.col2 {margin-left:10%;}
+ul.mdl-list-text li.col3 {margin-left:20%;}
+
+
+footer.nm-site-footer{
+  position: relative;
+  left: 0;
+  bottom: 0;
+  height: 70px;
+  width: 100%;
+  background: #D24F2E;
+}
+ul.nm-footer-list{
+  list-style: none;
+  padding: 22px 0;
+  margin: 0 5%;
+}
+ul.nm-footer-list li {line-height:1.8em;}
+ul.nm-footer-list li.top {margin-top:-1.8em;}
+ul.nm-footer-list li.col2 {margin-left: 10%}
+ul.nm-footer-list li.col3 {margin-left: 20%}
+ul.nm-footer-list li a{
+  color: #FFFFFF;
+  padding: 26px 12px;
+  transition: background, color;
+}
+ul.nm-footer-list li a:hover{
+  background: rgba(149, 165, 166,.3);
+  color: rgba(189, 195, 199,1.0);
+}
+
+a{
+  text-decoration: none;
+  font-size: 15px;
+}
+a > i.icon{
+  position: relative;
+  top: 0.2em;
+  color: #757575;
+  margin-right: 10px;
+}
diff --git a/src/002-negative-margins/example/index.html b/src/002-negative-margins/example/index.html
index b3e7465..9fef342 100644
--- a/src/002-negative-margins/example/index.html
+++ b/src/002-negative-margins/example/index.html
@@ -12,6 +12,7 @@
   <link href="../../app.css" rel="stylesheet" type="text/css">
 
   <!-- Import App Css file -->
+  <link href="reset.css" rel="stylesheet" type="text/css">
   <link href="example.css" rel="stylesheet" type="text/css">
 
 </head>
@@ -35,7 +36,7 @@
 
       <div class="nm-container">
 
-        <div class="nm-example">
+        <div class="nm-example bg-light">
           <h3>Negative margin on content to allow right sidebar </h3>
 
           <div class="nm-content">
@@ -46,23 +47,23 @@ <h5>Lorem Ipsum dolor sit amet, consectetur adipiscing elit</h5>
               tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus
               lobortis sollicitudin eu sit amet odio.</p>
           </div>
-          <div>
+          <div class="nm-menu-list">
             <ul class="mdl-list">
-              <li class="mdl-list__item">
+              <li class="col1 top">
                 <a class="mdl-list__item-primary-content">
-                  <i class="material-icons mdl-list__item-icon">home</i>
+                  <i class="material-icons icon">home</i>
                   Home
                 </a>
               </li>
-              <li class="mdl-list__item">
+              <li class="col2 top">
                 <a class="mdl-list__item-primary-content">
-                  <i class="material-icons mdl-list__item-icon">description</i>
+                  <i class="material-icons icon">description</i>
                   About
                 </a>
               </li>
-              <li class="mdl-list__item">
+              <li class="col3 top">
                 <a class="mdl-list__item-primary-content">
-                  <i class="material-icons mdl-list__item-icon">email</i>
+                  <i class="material-icons icon">email</i>
                   Contact US
                 </a>
               </li>
@@ -70,24 +71,24 @@ <h5>Lorem Ipsum dolor sit amet, consectetur adipiscing elit</h5>
           </div>
         </div>
 
-        <div>
+        <div class="nm-content bg-light">
           <h3>Negative margin on top to align < li > </h3>
 
-          <ul>
-            <li>Milk</li>
-            <li>Eggs</li>
-            <li>Cheese</li>
-            <li>Tutty Frutti</li>
-            <li>Bread</li>
-            <li>Mango</li>
-            <li>Coke</li>
-            <li>Apple</li>
-            <li>Orange</li>
+          <ul class="mdl-list-text">
+            <li class="col1">Milk</li>
+            <li class="col1">Eggs</li>
+            <li class="col1">Cheese</li>
+            <li class="col2 top">Tutty Frutti</li>
+            <li class="col2">Bread</li>
+            <li class="col2">Mango</li>
+            <li class="col3 top">Coke</li>
+            <li class="col3">Apple</li>
+            <li class="col3">Orange</li>
           </ul>
 
         </div>
 
-        <div>
+        <div class="nm-content bg-light">
           <h3>Negative margin to create a Sticky Footer using fixed footer height</h3>
 
           <div>
@@ -116,22 +117,19 @@ <h5>Lorem Ipsum</h5>
 
             <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Click Me</button>
           </div>
-
-          <footer class="nm-site-footer">
-            <div>
-              <ul class="nm-footer-list">
-                <li>home</li>
-                <li>about</li>
-                <li>contact us</li>
-              </ul>
-            </div>
-          </footer>
         </div>
-
       </div>
-
     </div>
   </main>
 </div>
+<footer class="nm-site-footer">
+  <div>
+    <ul class="nm-footer-list">
+      <li class="col1"><a href="#">Home</a></li>
+      <li class="col2 top"><a href="#">About</a></li>
+      <li class="col3 top"><a href="#">Contact us</a></li>
+    </ul>
+  </div>
+</footer>
 </body>
 </html>
diff --git a/src/002-negative-margins/example/reset.css b/src/002-negative-margins/example/reset.css
new file mode 100644
index 0000000..3a63f39
--- /dev/null
+++ b/src/002-negative-margins/example/reset.css
@@ -0,0 +1,348 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+a{
+  text-decoration: none;
+}
+
+html, body{
+  color: #787878;
+}
diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css
index eba1d66..a71ba87 100644
--- a/src/003-box-sizing/example/example.css
+++ b/src/003-box-sizing/example/example.css
@@ -3,3 +3,22 @@
  * Version: 1
  * By: xxx
  */
+.bg-light{
+  background: #F5F5F5;
+  padding: 15px 10px;
+  margin-top: 1%;
+}
+.box-model{
+  margin: 15px;
+  border: 5px solid #D24F2E;
+  padding: 15px;
+}
+.box-model p{
+  margin: 0;
+}
+.box-model.border-box {
+  box-sizing: border-box;
+}
+.box-model.content-box {
+  box-sizing: content-box;
+}
diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html
index 9c2f4a4..50763c3 100644
--- a/src/003-box-sizing/example/index.html
+++ b/src/003-box-sizing/example/index.html
@@ -35,26 +35,26 @@
 
       <div>
 
-        <div>
+        <div class="bg-light">
           <h3> Box Model </h3>
-          <div>
+          <div class="box-model border-box">
             <p>Since the dawn of CSS, the box model has worked like this by default:</p>
             <p>width + padding + border = actual visible/rendered width of an element's box</p>
             <p>height + padding + border = actual visible/rendered height of an element's box</p>
           </div>
         </div>
 
-        <div>
+        <div class="bg-light">
           <h3>Box Sizing : Content Box </h3>
-          <div>
+          <div class="box-model content-box">
             <p>Default. The width and height properties (and min/max properties) includes only the content. Border,
               padding, or margin are not included</p>
           </div>
         </div>
 
-        <div class="bs-example">
+        <div class="bg-light">
           <h3>Box Sizing : border-box </h3>
-          <div>
+          <div class="box-model border-box">
             <p>The width and height properties (and min/max properties) includes content, padding and border, but not
               the margin</p>
           </div>
diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css
index 08fc34e..7730230 100644
--- a/src/004-display/example/example.css
+++ b/src/004-display/example/example.css
@@ -3,3 +3,98 @@
  * Version: 1
  * By: xxx
  */
+body, html{
+  color: #7D7978;
+}
+.bg-dark{
+  background-color: #C8C8C8;
+}
+.bg-light{
+  background-color: #f4f5f7;
+}
+.bg-dark,.bg-light{
+  padding: 10px;
+}
+
+.bg-light h1,
+.bg-dark h1{
+  font-size: 40px;
+  margin: 0;
+}
+.bg-light h1 > small,
+.bg-dark h1 > small{
+  font-size: 25px;
+}
+
+nav.main-menu{
+  display: inline-block;
+  width: 96%;
+  padding: 1% 2%;
+  background: #DCDCDC;
+}
+nav.main-menu ul{
+  padding: 0;
+  margin: 0;
+  display: block;
+  min-height: 1em;
+}
+nav.main-menu ul li{
+  list-style: none;
+  float: left;
+  margin-left: 1%;
+}
+nav.main-menu a{
+  padding: 10px 15px;
+  transition: background .5s, color .3s;
+}
+nav.main-menu a:hover{
+  background: rgba(0,0,0,.3);
+  color: #FFFFFF;
+}
+
+.row-section{
+  display: flex;
+  flex-direction: row;
+}
+.row-section > div{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 15px;
+}
+
+.table{
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 1px 2px;
+}
+.table > .table-header{
+  display: table-row;
+  font-weight: bold;
+  font-size: 18px;
+}
+.table > .table-body{
+  display: table-row;
+}
+.table > .table-header > div,
+.table > .table-body > div{
+  display: table-cell;
+  padding: 15px 2px;
+  text-align: center;
+  background-color: #C8C8C8;
+}
+.flexbox{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.flexbox > div{
+  padding: 10px;
+  width: 30%;
+  min-width: 30%;
+  box-sizing: content-box;
+  border: 2px solid #FD0A1A;
+  margin: 2px;
+}
diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html
index 3db9b5e..44720b6 100644
--- a/src/004-display/example/index.html
+++ b/src/004-display/example/index.html
@@ -12,6 +12,7 @@
   <link href="../../app.css" rel="stylesheet" type="text/css">
 
   <!-- Import App Css file -->
+  <link href="./reset.css" rel="stylesheet" type="text/css">
   <link href="./example.css" rel="stylesheet" type="text/css">
 
 </head>
@@ -30,27 +31,27 @@
     </div>
   </header>
   <main class="mdl-layout__content">
-    <div class="page-content">
+    <div class="page-content bg-light">
       <!-- Practice Content Goes Here -->
 
       <div>
 
-        <header>
+        <header class="bg-dark">
           <h1>Lorem ipsum
             <small>dolor sit amet</small>
           </h1>
         </header>
 
-        <div>
+        <nav class="bg-light main-menu">
           <ul>
             <li><a href="">Link 1</a></li>
             <li><a href="">Link 2</a></li>
             <li><a href="">Link 3</a></li>
             <li><a href="">Link 4</a></li>
           </ul>
-        </div>
+        </nav>
 
-        <div>
+        <div class="bg-light row-section stick-element">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
@@ -63,25 +64,25 @@ <h1>Lorem ipsum
           </div>
         </div>
 
-        <div>
-          <div>
+        <div class="table">
+          <div class="table-header">
             <div>Table Header</div>
             <div>Table Header</div>
             <div>Table Header</div>
           </div>
-          <div>
+          <div class="table-body">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
-          <div>
+          <div class="table-body">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
         </div>
 
-        <div>
+        <div class="flexbox">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
diff --git a/src/004-display/example/reset.css b/src/004-display/example/reset.css
new file mode 100644
index 0000000..29eae56
--- /dev/null
+++ b/src/004-display/example/reset.css
@@ -0,0 +1,352 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+a{
+  text-decoration: none;
+}
+
+html, body{
+  color: #787878;
+}
+.stick-element{
+  position: relative;
+  top: -5px;
+}
diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css
index 4dba466..cef5b77 100644
--- a/src/005-centering/example/example.css
+++ b/src/005-centering/example/example.css
@@ -3,3 +3,129 @@
  * Version: 1
  * By: xxx
  */
+.bg-light{
+  background-color: #E8E8E8;
+}
+.bg-deep-dark{
+  background-color: #A9A9A9;
+  color: whitesmoke;
+}
+.bg-dark{
+  background-color: #D3D3D3;
+}
+
+.full-title{
+  text-align: center;
+  padding: 10px 0;
+}
+
+.main-menu{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.main-menu > div{
+  width: 10%;
+}
+.main-menu > div a{
+  display: block;
+  padding: 10px 0;
+  text-align: center;
+  transition: background-color .5s, border-radius .5s;
+}
+.main-menu > div a:hover{
+  background-color: #6a191f;
+  border-radius: 3px;
+}
+
+.text-blocks{
+  display: flex;
+  justify-content: center;
+  margin: 3% 0;
+  align-items: flex-end;
+  padding: 20px;
+}
+.text-blocks > .block{
+  max-width: 20%;
+  margin: 0 1%;
+  display: flex;
+  align-items: center;
+  padding: 5px 20px;
+  background-color: #D3D3D3;
+}
+.text-blocks > .big-block{
+  height: 200px;
+}
+.text-blocks > .middle-block{
+  height: 150px;
+}
+.text-blocks > .small-block{
+  height: 100px;
+}
+
+.centered-line{
+  display: flex;
+  align-items: center;
+  width: 40%;
+  height: 80px;
+  padding-left: 15px;
+  margin: 10px;
+}
+.centered-middle-line{
+  display: flex;
+  align-items: center;
+  width: 200px;
+  height: 200px;
+  padding: 15px;
+  justify-content: center;
+  margin: 10px;
+}
+.spaced-paragraph{
+  padding: 30px 0;
+}
+.section-blocks{
+  display: flex;
+  height: 200px;
+  align-items: center;
+  justify-content: center;
+  margin: 1% 0;
+}
+.section-blocks .block{
+  width: 95%;
+  padding: 10px 5px;
+  height: 40%;
+}
+
+.square-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 200px;
+  background-color: #79A5A3;
+}
+
+.big-square{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #B95755;
+  width: 150px;
+  height: 150px;
+}
+.middle-square{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #3D4351;
+  width: 90px;
+  height: 90px;
+}
+.small-square{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #C89E66;
+  width: 60px;
+  height: 60px;
+}
diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html
index b6d2e1e..e429797 100644
--- a/src/005-centering/example/index.html
+++ b/src/005-centering/example/index.html
@@ -13,6 +13,7 @@
 
   <!-- Import App Css file -->
   <link href="./example.css" rel="stylesheet" type="text/css">
+  <link href="./reset.css" rel="stylesheet" type="text/css">
 
 </head>
 <body>
@@ -30,13 +31,13 @@
     </div>
   </header>
   <main class="mdl-layout__content">
-    <div class="page-content">
+    <div class="page-content bg-light">
       <!-- Practice Content Goes Here -->
       <div>
-        <h4>This text is centered.</h4>
+        <h4 class="bg-dark full-title">This text is centered.</h4>
 
-        <div>
-          <div>
+        <div class="bg-dark">
+          <div class="main-menu">
             <div><a href="">Link 1</a></div>
             <div><a href="">Link 2</a></div>
             <div><a href="">Link 3</a></div>
@@ -44,34 +45,34 @@ <h4>This text is centered.</h4>
           </div>
         </div>
 
-        <div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
+        <div class="text-blocks">
+          <div class="block big-block">I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
             block-like with my siblings and we're centered in a row.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
+          <div class="block middle-block">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
             than my siblings do.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="block small-block">I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
-          <div> I'm an element that is block-like with my siblings and we're centered in a row.</div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
+        <div class="text-blocks">
+          <div class="block big-block"> I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="block big-block">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
             than my siblings do.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="block big-block">I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
+        <div class="centered-line bg-dark">
           I'm a centered line.
         </div>
 
-        <div>
+        <div class="centered-middle-line bg-dark">
           <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
         </div>
 
-        <div>
-          <p>I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra
+        <div class="text-blocks bg-dark">
+          <p class="spaced-paragraph">I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra
             vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci
             pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed.
             Augue rutrum quam eros auctor venenatis adipisci, elementum etiam felis nec conubia ac, non pede pede proin
@@ -83,21 +84,22 @@ <h4>This text is centered.</h4>
             elementum aliquam vitae.</p>
         </div>
 
-        <div>
-          <div>I'm a block-level element with a fixed height, centered vertically within my parent.</div>
+        <div class="section-blocks bg-dark">
+          <div class="block bg-deep-dark">I'm a block-level element with a fixed height, centered vertically within my parent.</div>
         </div>
 
-        <div>
-          <div>I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
+        <div class="section-blocks bg-dark">
+          <div class="block bg-deep-dark">I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
             element with an unknown height, centered vertically within my parent. I'm a block-level element with an
             unknown height, centered vertically within my parent.
           </div>
         </div>
 
-        <div>
-          <div>
-            <div></div>
-            <div></div>
+        <div class="square-container">
+          <div class="big-square">
+            <div class="middle-square">
+              <div class="small-square"></div>
+            </div>
           </div>
         </div>
 
diff --git a/src/005-centering/example/reset.css b/src/005-centering/example/reset.css
new file mode 100644
index 0000000..29eae56
--- /dev/null
+++ b/src/005-centering/example/reset.css
@@ -0,0 +1,352 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+a{
+  text-decoration: none;
+}
+
+html, body{
+  color: #787878;
+}
+.stick-element{
+  position: relative;
+  top: -5px;
+}
diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css
index bdfd29e..c929efa 100644
--- a/src/006-basic-layout/example/example.css
+++ b/src/006-basic-layout/example/example.css
@@ -3,3 +3,92 @@
  * Version: 1
  * By: xxx
  */
+.bg-light-blue{
+  background-color: #8DD0D1;
+}
+ul.mdl-list-text{
+  list-style: none;
+  background-color: #CF5036;
+  margin: 0;
+  padding: 0;
+}
+ul.mdl-list-text li {
+  line-height:1.8em;
+  width: 10%;
+  text-align: center;
+  padding: 5px 0;
+}
+ul.mdl-list-text li span{
+  display: block;
+  cursor: pointer;
+  padding: 10px 5px;
+  color: whitesmoke;
+  font-size: 16px;
+}
+ul.mdl-list-text li span:hover{
+  color: navajowhite;
+}
+ul.mdl-list-text li.top {margin-top:-55px;}
+ul.mdl-list-text li.col2 {margin-left:8%;}
+ul.mdl-list-text li.col3 {margin-left:16%;}
+
+.mdl-list{
+  float: left;
+  width: 250px;
+  height: 700px;
+  margin: 0;
+}
+.main{
+  border-left: 330px solid #FFD0C5;
+  background-color: #FFD0C5;
+  height: 716px;
+}
+.blocks-container{
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.blocks-container > div{
+  width: 190px;
+  height: 200px;
+  border: 1px solid #CF5036;
+}
+
+.flex-layout{
+  display: flex;
+  flex-direction: column;
+}
+
+ul.flex-menu{
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  background-color: #CF5036;
+  margin: 0;
+}
+ul.flex-menu li{
+  width: 8%;
+}
+ul.flex-menu li span{
+  padding: 15px 5px;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  color: whitesmoke;
+  font-size: 16px;
+}
+ul.flex-menu li span:hover{
+  color: navajowhite;
+}
+.flex-main{
+  display: flex;
+  flex-direction: row;
+}
+.flex-main .aside-menu{
+  width: 25%;
+}
+.flex-main-content{
+  background-color: #FFD0C5;
+  width: 75%;
+  border-left: 40px solid #FFD0C5;
+}
diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html
index d21e25f..52e4af1 100644
--- a/src/006-basic-layout/example/index.html
+++ b/src/006-basic-layout/example/index.html
@@ -37,21 +37,21 @@
         <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
         <div>
           <div>
-            <ul>
-              <li>
+            <ul class="mdl-list-text">
+              <li class="col1">
                 <span> Home </span>
               </li>
-              <li>
+              <li class="col2 top">
                 <span> About </span>
               </li>
-              <li>
+              <li class="col3 top">
                 <span> Contact Us </span>
               </li>
             </ul>
           </div>
 
           <div>
-            <ul class="mdl-list">
+            <ul class="mdl-list bg-light-blue">
               <li class="mdl-list__item">
               <span class="mdl-list__item-primary-content">
                 <i class="material-icons mdl-list__item-icon">home</i>
@@ -81,17 +81,24 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
             <p>Lorem ipsum...</p>
             <p>Lorem ipsum...</p>
             <p>Lorem ipsum...</p>
-            <div>
-
+            <div class="blocks-container">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
             </div>
           </div>
 
           <div>
-            <ul>
-              <li>
+            <ul class="mdl-list-text">
+              <li class="col1">
                 <span> Talos Digital </span>
               </li>
-              <li>
+              <li class="col2 top">
                 <span> Contact Us </span>
               </li>
             </ul>
@@ -101,8 +108,8 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
         <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
 
         <div>
-          <div>
-            <ul>
+          <div class="flex-layout">
+            <ul class="flex-menu">
               <li>
                 <span> Home </span>
               </li>
@@ -115,9 +122,9 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
             </ul>
           </div>
 
-          <div>
-            <div>
-              <ul class="mdl-list">
+          <div class="flex-main">
+            <div class="aside-menu bg-light-blue">
+              <ul class="flex-mdl-list">
                 <li class="mdl-list__item">
                 <span class="mdl-list__item-primary-content">
                   <i class="material-icons mdl-list__item-icon">home</i>
@@ -139,7 +146,7 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
               </ul>
             </div>
 
-            <div>
+            <div class="flex-main-content">
               <p>Lorem ipsum...</p>
               <p>Lorem ipsum...</p>
               <p>Lorem ipsum...</p>
@@ -148,13 +155,21 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
               <p>Lorem ipsum...</p>
               <p>Lorem ipsum...</p>
 
-              <div>
+              <div class="blocks-container">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
               </div>
             </div>
           </div>
 
-          <div>
-            <ul>
+          <div class="flex-layout">
+            <ul class="flex-menu">
               <li>
                 <span> Talos Digital </span>
               </li>
diff --git a/src/006-basic-layout/example/reset.css b/src/006-basic-layout/example/reset.css
new file mode 100644
index 0000000..29eae56
--- /dev/null
+++ b/src/006-basic-layout/example/reset.css
@@ -0,0 +1,352 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+a{
+  text-decoration: none;
+}
+
+html, body{
+  color: #787878;
+}
+.stick-element{
+  position: relative;
+  top: -5px;
+}
diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css
index 5b008b9..164c466 100644
--- a/src/007-z-index/example/example.css
+++ b/src/007-z-index/example/example.css
@@ -3,3 +3,100 @@
  * Version: 1
  * By: xxx
  */
+html, body{
+  font-size: 15px;
+  color: white;
+}
+.page-content{
+  background: linear-gradient(90deg, #D5EADF 60%, #555E59 60%);
+}
+.main-container{
+  background-color: rgba(120, 196, 207, .4);
+  position: relative;
+}
+h1{
+  color: white;
+  margin-bottom: 20px;
+  font-weight: bold;
+  font-size: 40px;
+}
+hr{
+  border-color: #E22A43;
+}
+
+.left-block{
+  width: 55%;
+}
+
+.inner-block{
+  background-color: rgba(255,255,255,.9);
+  color: black;
+  padding: 25px;
+}
+.text-block{
+  padding: 15px;
+}
+.right-block{
+  position: absolute;
+  top: 5%;
+  right: 0;
+  background-color: #DFE189;
+  height: 100%;
+  width: 35%;
+  padding: 15px;
+  color: #3D4351;
+  border-left: 60px solid #DFE189;
+}
+.right-block ul{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.right-block h1{
+  font-size: 40px;
+  color: #3D4351;
+  font-weight: normal;
+}
+.square{
+  width: 100px;
+  height: 100px;
+  transform: rotate(45deg);
+}
+.square-margin1{
+  margin-left: 10px;
+}
+.square-margin2{
+  margin-left: 50px;
+}
+.square-margin3{
+  margin-left: 90px;
+}
+.up-square{
+  margin-top: -70px;
+}
+
+
+.bg-color1{
+  background-color: #E52A44;
+}
+.bg-color2{
+  background-color: #E6772B;
+}
+.bg-color3{
+  background-color: #BEE773;
+}
+.bg-color4{
+  background-color: #63E7C5;
+}
+.bg-color5{
+  background-color: #3D79E2;
+}
+.bg-color6{
+  background-color: #E52CCD;
+}
+.bg-color7{
+  background-color: #D8E2E7;
+}
+.bg-color8{
+  background-color: #E5151F;
+}
diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html
index c82d66a..b9b7799 100644
--- a/src/007-z-index/example/index.html
+++ b/src/007-z-index/example/index.html
@@ -32,14 +32,14 @@
   <main class="mdl-layout__content">
     <div class="page-content">
       <!-- Practice Content Goes Here -->
-      <div>
-        <div>
+      <div class="main-container">
+        <div class="left-block">
           <div>
-            <div>
+            <div class="text-block">
               <h1>Lorem ipsum dolor sit amet</h1>
             </div>
 
-            <div>
+            <div class="text-block">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
                 scelerisque neque id velit varius, quis consequat mauris semper.</p>
               <hr>
@@ -47,7 +47,7 @@ <h1>Lorem ipsum dolor sit amet</h1>
                 scelerisque neque id velit varius, quis consequat mauris semper.</p>
             </div>
 
-            <div>
+            <div class="inner-block">
               <h2 class="title">Lorem ipsum dolor sit amet</h2>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
@@ -68,7 +68,7 @@ <h2 class="title">Lorem ipsum dolor sit amet</h2>
 
         <div></div>
 
-        <div>
+        <div class="right-block">
           <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
           <ul>
             <li>Lorem ipsum dolor sit amet</li>
@@ -80,6 +80,17 @@ <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
             <li>Lorem ipsum dolor sit amet</li>
           </ul>
 
+          <div>
+            <div class="square square-margin1 bg-color1"></div>
+            <div class="square square-margin2 bg-color2 up-square"></div>
+            <div class="square square-margin3 bg-color3 up-square"></div>
+            <div class="square square-margin3 bg-color4 up-square"></div>
+
+            <div class="square square-margin3 bg-color5 up-square"></div>
+            <div class="square square-margin3 bg-color6 up-square"></div>
+            <div class="square square-margin2 bg-color7 up-square"></div>
+            <div class="square square-margin1 bg-color8 up-square"></div>
+          </div>
 
         </div>
       </div>
diff --git a/src/008-advanced-selectors/example/example.css b/src/008-advanced-selectors/example/example.css
index 218d5ec..3d276c5 100644
--- a/src/008-advanced-selectors/example/example.css
+++ b/src/008-advanced-selectors/example/example.css
@@ -111,6 +111,7 @@ footer div {
   display: flex;
   flex-wrap: wrap;
   padding: 20px;
+  justify-content: center;
 }
 
 .as-card {
@@ -133,6 +134,11 @@ footer div {
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  cursor: pointer;
+}
+.as-card-img img:hover{
+  transform: scale(1.2);
+  filter: opacity(.5);
 }
 
 
@@ -150,4 +156,15 @@ footer div {
   width: 90px;
 }
 
+.category-nav ul{
+  list-style: none;
+}
+.category-nav ul li a{
+  color: #787878;
+  text-decoration: none;
+  transition: color .3s;
+}
+.category-nav ul li a:hover{
+  color: rgb(255,64,129);
+}
 
diff --git a/src/008-advanced-selectors/example/index.html b/src/008-advanced-selectors/example/index.html
index 98f729f..b704f5c 100644
--- a/src/008-advanced-selectors/example/index.html
+++ b/src/008-advanced-selectors/example/index.html
@@ -37,7 +37,7 @@ <h1>Clothes</h1>
       </header>
 
       <section class="as-container">
-        <aside>
+        <aside class="category-nav">
           <h2>Categories</h2>
           <ul>
             <li><a href="">Blouses and tops</a></li>
diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css
index 969fe64..6007997 100644
--- a/src/009-fonts-icons/example/example.css
+++ b/src/009-fonts-icons/example/example.css
@@ -3,3 +3,113 @@
  * Version: 1
  * By: xxx
  */
+@font-face {
+  font-family: raleway;
+  src: url(../resources/fonts/raleway/raleway-bold-webfont.svg);
+}
+html, body{
+  font-size: 15px;
+  color: white;
+}
+.page-content{
+  background: linear-gradient(90deg, #D5EADF 60%, #555E59 60%);
+}
+.main-container{
+  background-color: rgba(120, 196, 207, .4);
+  position: relative;
+}
+h1{
+  color: white;
+  margin-bottom: 20px;
+  font-weight: bold;
+  font-size: 40px;
+}
+hr{
+  border-color: #E22A43;
+}
+
+.left-block{
+  width: 55%;
+}
+
+.inner-block{
+  background-color: rgba(255,255,255,.9);
+  color: black;
+  padding: 25px;
+}
+.text-block{
+  padding: 15px;
+  font-size: 16px;
+}
+.big-text{
+  font-size: 18px;
+}
+.right-block{
+  position: absolute;
+  top: 15%;
+  right: 0;
+  background-color: #DFE189;
+  height: 70%;
+  width: 34%;
+  padding: 15px;
+  color: #3D4351;
+  border-left: 60px solid #DFE189;
+  font-family: raleway, sans-serif;
+}
+.right-block ul{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.right-block ul li{
+  height: 35px;
+  font-size: 18px;
+}
+.right-block ul li i{
+  margin-right: 10px;
+  font-size: 17px;
+}
+.right-block h1{
+  font-size: 40px;
+  color: #3D4351;
+  font-weight: normal;
+}
+.icon-text-container{
+  width: 100%;
+  text-align: right;
+  font-size: 20px;
+  margin: 1% 0;
+}
+.button-large{
+  width: 350px;
+  height: 40px;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FF4382;
+  color: whitesmoke;
+  padding: 5px 0;
+  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.75);
+}
+.button-large i{
+  margin: 0 4%;
+}
+.search-container{
+  width: 200px;
+  height: 30px;
+  position: relative;
+}
+.search-container i{
+  color: #787878;
+  position: absolute;
+  left: 9px;
+  top: 30%;
+}
+.search-container input{
+  padding-left: 30px;
+  height: 100%;
+  border: none;
+  border-radius: 5px;
+  width: 100%;
+}
diff --git a/src/009-fonts-icons/example/index.html b/src/009-fonts-icons/example/index.html
index d90d669..d6472a4 100644
--- a/src/009-fonts-icons/example/index.html
+++ b/src/009-fonts-icons/example/index.html
@@ -6,14 +6,15 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
 
-    <!-- Ignore this, it's for the header --> 
+    <!-- Ignore this, it's for the header -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
     <link href="../../app.css" rel="stylesheet" type="text/css">
 
     <!-- Import App Css file -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="./example.css" rel="stylesheet" type="text/css">
-    
   </head>
   <body>
   	<!-- Always shows a header, even in smaller screens. -->
@@ -31,10 +32,76 @@
       </header>
       <main class="mdl-layout__content">
         <div class="page-content">
-         <!-- Practice Content Goes Here -->
+          <!-- Practice Content Goes Here -->
+          <div class="main-container">
+            <div class="left-block">
+              <div>
+                <div class="text-block">
+                  <h1>Lorem ipsum dolor sit amet</h1>
+                </div>
+
+                <div class="text-block">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius, quis consequat mauris semper.</p>
+                  <hr>
+                  <p class="big-text">
+                    MOLESTIE CONDIMENTUM VEHICULA <i class="fas fa-motorcycle"></i> consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius.
+                  </p>
+                  <div class="search-container">
+                    <i class="fas fa-search"></i>
+                    <input type="text" placeholder="Search by term..." />
+                  </div>
+                </div>
+
+                <div class="inner-block">
+                  <h2 class="title">Lorem ipsum dolor sit amet</h2>
+                  <div class="icon-text-container">
+                    <i class="fas fa-align-center"></i>
+                    <i class="fas fa-align-justify"></i>
+                    <i class="fas fa-align-left"></i>
+                  </div>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius, quis consequat mauris semper.
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius, quis consequat mauris semper.
+                  </p>
+                  <p>
+                    TLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                    scelerisque neque id velit varius, quis consequat mauris semper. Fusce facilisis facilisis quam, in
+                    interdum nulla consequat id.
+                  </p>
+                  <button class="button-large">
+                    <i class="material-icons">fingerprint</i>
+                    Lorem ipsum dolor sit amet
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div></div>
+
+            <div class="right-block">
+              <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
+              <ul>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+                <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet</li>
+              </ul>
+
+            </div>
+          </div>
         </div>
       </main>
     </div>
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css
index 8c1053d..7872633 100644
--- a/src/010-background/example/example.css
+++ b/src/010-background/example/example.css
@@ -3,3 +3,91 @@
  * Version: 1
  * By: xxx
  */
+.container{
+  background: #ec925d; /* Old browsers */
+  background: radial-gradient(ellipse at center, #ec925d 0%,#c74720 70%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec925d', endColorstr='#c74720',GradientType=1 );
+  min-height: 900px;
+}
+.header-persons{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: whitesmoke;
+  padding: 25px 0;
+}
+.header-persons span{
+  width: 90%;
+  height: 2px;
+  display: block;
+  background: #c74720;
+  background: -moz-linear-gradient(left, #c74720 0%, #ec925d 50%, #c74720 99%);
+  background: -webkit-linear-gradient(left, #c74720 0%,#ec925d 50%,#c74720 99%);
+  background: linear-gradient(to right, #c74720 0%,#ec925d 50%,#c74720 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74720', endColorstr='#c74720',GradientType=1 );
+}
+.header-persons h2{
+  margin: 0;
+  text-shadow: 3px -1px 2px rgba(150, 150, 150, 1);
+}
+.header-persons h3{
+  margin: 0;
+  text-shadow: 3px -1px 2px rgba(150, 150, 150, 1);
+}
+.persons-container{
+  display: flex;
+  width: 90%;
+  margin: 20px auto;
+  justify-content: space-between;
+  align-items: center;
+}
+.person{
+  display: flex;
+  align-items: center;
+  width: 35%;
+  color: white;
+  padding: 10px 15px;
+  background-color: #ED935F;
+  border-top: solid 1px whitesmoke;
+  border-left: solid 1px whitesmoke;
+  border-bottom-left-radius: 42% 100%;
+  border-bottom-right-radius: 42% 100%;
+  border-top-left-radius: 42% 100%;
+  border-top-right-radius: 42% 100%;
+  box-shadow: 9px 9px 5px -6px #C94B24;
+  cursor: pointer;
+}
+.person:hover{
+  filter: opacity(.6);
+}
+.person img{
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  border: 3px solid white;
+}
+.person-text{
+  padding: 15px;
+}
+.person h2{
+  font-size: 20px;
+  margin: 0;
+  text-shadow: 3px 1px 3px rgba(150, 150, 150, 1);
+  line-height: normal;
+}
+.person p{
+  font-size: 18px;
+  margin: 0;
+}
+@media only screen and (max-width: 800px) {
+  .persons-container{
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .person{
+    width: 80%;
+    margin: 20px 0;
+  }
+}
diff --git a/src/010-background/example/index.html b/src/010-background/example/index.html
index 7689647..d3ff908 100644
--- a/src/010-background/example/index.html
+++ b/src/010-background/example/index.html
@@ -35,22 +35,22 @@
     <div class="page-content">
       <!-- Practice Content Goes Here -->
       <div class="container">
-        <div>
+        <div class="header-persons">
           <h2>Lorem ipsum dolor sit amet</h2>
           <h3> Fusce pharetra ac nibh vitae viverra</h3>
           <span></span>
         </div>
-        <div>
-          <div>
+        <div class="persons-container">
+          <div class="person">
             <img src="./../resources/doctor-img-square.png">
-            <div>
+            <div class="person-text">
               <h2>Lorem ipsum dolor sit amet </h2>
               <p>Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus</p>
             </div>
           </div>
-          <div href="program.html">
+          <div class="person">
             <img src="./../resources/doctora.png">
-            <div>
+            <div class="person-text">
               <h2>Lorem ipsum dolor sit amet</h2>
               <p>Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus</p>
             </div>
diff --git a/src/011-styling/example/example.css b/src/011-styling/example/example.css
index 4bdd9e2..419cea4 100644
--- a/src/011-styling/example/example.css
+++ b/src/011-styling/example/example.css
@@ -3,3 +3,113 @@
  * Version: 1
  * By: xxx
  */
+.bg-pink{
+  background-color: #fcbacf;
+}
+h1{
+  margin: 0;
+}
+p{
+  font-size: 20px
+}
+.page-content{
+  background: url("../resources/background.jpg") fixed;
+  background-position-x: center;
+  padding: 0;
+  color: #e0dede;
+}
+
+.page-header{
+  width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0,0,0,.4);
+}
+.page-header h1{
+  color: whitesmoke;
+}
+.main-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  background-color: whitesmoke;
+}
+.form-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 3%;
+}
+.form-container input,
+.form-container textarea{
+  width: 50%;
+  background-color: #C8C8C8;
+  color: whitesmoke;
+}
+
+.form-container input{
+  height: 40px;
+  border: 0;
+  margin: 10px 0;
+  padding: 0 10px;
+}
+.form-container textarea{
+  padding: 10px;
+  border: 0;
+}
+.form-container button{
+  width: 30%;
+  height: 40px;
+  text-align: center;
+  border: 0;
+  font-size: 20px;
+  color: whitesmoke;
+  margin: 10px 0;
+}
+.form-container button:hover{
+  background-color: whitesmoke;
+  color: #fcbacf;
+}
+.footer{
+  display: flex;
+  justify-content: space-between;
+  color: whitesmoke;
+  padding-top: 50px;
+  width: 80%;
+  margin: 0 auto;
+}
+.footer p{
+  border-bottom: 2px solid whitesmoke;
+  font-size: 20px;
+  margin: 10px 5px;
+  padding-bottom: 20px;
+  text-align: left;
+}
+.footer ul{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.footer ul li{
+  text-align: left;
+}
+.footer ul li a{
+  width: 100%;
+  color: whitesmoke;
+  text-decoration: none;
+  padding: 5px;
+  font-size: 18px;
+  display: block;
+}
+.footer ul li a:hover{
+  color: #7D7978;
+}
+.footer > div{
+  width: 300px;
+  text-align: center;
+  max-width: 500px;
+}
diff --git a/src/011-styling/example/index.html b/src/011-styling/example/index.html
index eb3ed5f..58307ba 100644
--- a/src/011-styling/example/index.html
+++ b/src/011-styling/example/index.html
@@ -34,24 +34,24 @@
     <div class="page-content">
       <!-- Practice Content Goes Here -->
       <div class="page-wrap">
-        <div>
+        <div class="page-header">
           <h1>contact us</h1>
         </div>
 
-        <div>
-          <form name="form" novalidate autocomplete="off">
+        <div class="main-container">
+          <form name="form" novalidate autocomplete="off" class="form-container">
             <input type="text" name="name" placeholder="Name">
             <input type="email" name="email" placeholder="Email">
             <input type="text" name="subject" placeholder="Subject">
             <textarea name="message" class="input" id="" cols="30" rows="10" placeholder="Message"></textarea>
-            <button>send</button>
+            <button class="bg-pink">send</button>
             <p>CONTACT US AND WE WILL RESPOND YOU AS SOON AS POSSIBLE.</p>
           </form>
         </div>
       </div>
 
-      <footer>
-        <div>
+      <footer class="bg-pink">
+        <div class="footer">
           <div>
             <p>Products</p>
             <ul>
diff --git a/src/012-checkbox/example/example.css b/src/012-checkbox/example/example.css
index 8f18b26..48ea976 100644
--- a/src/012-checkbox/example/example.css
+++ b/src/012-checkbox/example/example.css
@@ -70,6 +70,12 @@ html {
   box-sizing: border-box;
   width: 100%;
 }
+.panel.show{
+  display: block;
+}
+.panel.hide{
+  display: none;
+}
 
 @media (min-width: 600px) {
   .panel {
@@ -132,6 +138,15 @@ html {
   content: '';
 }
 
+.control input[type=radio]:checked ~ .control__indicator,
+.control input[type=checkbox]:checked ~ .control__indicator{
+  background: #155b72;
+}
+.control input[type=radio]:checked ~ .control__indicator:after,
+.control input[type=checkbox]:checked ~ .control__indicator:after{
+  display: block;
+}
+
 
 .control--checkbox .control__indicator:after {
   top: 4px;
diff --git a/src/012-checkbox/example/index.html b/src/012-checkbox/example/index.html
index 19b6642..124a113 100644
--- a/src/012-checkbox/example/index.html
+++ b/src/012-checkbox/example/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>012 - Checkboxes and Radio Buttons</title>
+  <script src="tabs.js" type="application/javascript"></script>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width">
 
@@ -37,9 +38,9 @@
       <section class="container">
 
         <div class="tabs">
-          <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+          <input name="tabs" type="radio" id="tab-1" checked="checked" class="input" onclick="tabAction('tab-1')"/>
           <label for="tab-1" class="label">Checkboxes</label>
-          <div class="panel">
+          <div class="panel hide" id="tab1">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu
@@ -70,9 +71,9 @@ <h3>Checkboxes</h3>
             </div>
           </div>
 
-          <input name="tabs" type="radio" id="tab-2" class="input"/>
+          <input name="tabs" type="radio" id="tab-2" class="input" onclick="tabAction('tab-2')"/>
           <label for="tab-2" class="label">Radio Buttons</label>
-          <div class="panel">
+          <div class="panel hide" id="tab2">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu
@@ -84,8 +85,8 @@ <h3>Lorem ipsum dolor sit amet</h3>
             <div class="control-group">
               <h3>Radio Buttons</h3>
               <label class="control control--radio">First radio
-                <input type="radio" name="radio" checked="checked"/>
-                <div class="control__indicator"></div>
+                <input type="radio" name="radio"/>
+                <div class="control__indicator checked"></div>
               </label>
               <label class="control control--radio">Second radio
                 <input type="radio" name="radio"/>
@@ -102,9 +103,9 @@ <h3>Radio Buttons</h3>
             </div>
           </div>
 
-          <input name="tabs" type="radio" id="tab-3" class="input"/>
+          <input name="tabs" type="radio" id="tab-3" class="input" onclick="tabAction('tab-3')"/>
           <label for="tab-3" class="label">Cards</label>
-          <div class="panel">
+          <div class="panel hide" id="tab3">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu
@@ -115,7 +116,7 @@ <h3>Lorem ipsum dolor sit amet</h3>
             <div class="list-checks">
               <ul>
                 <li>
-                  <img src="./images/user.png"/>
+                  <img src="../resources/user.png"/>
                   <div>
                     <h3>Headline</h3>
                     <p>Lorem ipsum dolor sit amet...</p>
@@ -127,7 +128,7 @@ <h3>Headline</h3>
                 </li>
 
                 <li>
-                  <img src="./images/user.png"/>
+                  <img src="../resources/user.png"/>
                   <div>
                     <h3>Headline</h3>
                     <p>Lorem ipsum dolor sit amet...</p>
@@ -139,7 +140,7 @@ <h3>Headline</h3>
                 </li>
 
                 <li>
-                  <img src="./images/user.png"/>
+                  <img src="../resources/user.png"/>
                   <div>
                     <h3>Headline</h3>
                     <p>Lorem ipsum dolor sit amet...</p>
@@ -151,7 +152,7 @@ <h3>Headline</h3>
                 </li>
 
                 <li>
-                  <img src="./images/user.png"/>
+                  <img src="../resources/user.png"/>
                   <div>
                     <h3>Headline</h3>
                     <p>Lorem ipsum dolor sit amet...</p>
diff --git a/src/012-checkbox/example/tabs.js b/src/012-checkbox/example/tabs.js
new file mode 100644
index 0000000..1f00202
--- /dev/null
+++ b/src/012-checkbox/example/tabs.js
@@ -0,0 +1,33 @@
+function tabAction(tab){
+  switch (tab){
+    case "tab-1":
+      showTab("tab1");
+      hideTab("tab2");
+      hideTab("tab3");
+      break;
+    case "tab-2":
+      hideTab("tab1");
+      showTab("tab2");
+      hideTab("tab3");
+      break;
+    case "tab-3":
+      hideTab("tab1");
+      hideTab("tab2");
+      showTab("tab3");
+      break;
+    default:
+      return false;
+  }
+}
+
+
+function showTab(tab){
+  let tabNode = document.getElementById(tab);
+  tabNode.classList.remove("hide");
+  tabNode.classList.add("show");
+}
+function hideTab(tab){
+  let tabNode = document.getElementById(tab);
+  tabNode.classList.remove("show");
+  tabNode.classList.add("hide");
+}
diff --git a/src/013-animations/example/example.css b/src/013-animations/example/example.css
index 6b38b9f..46cfeaa 100644
--- a/src/013-animations/example/example.css
+++ b/src/013-animations/example/example.css
@@ -63,6 +63,23 @@ html {
   -webkit-perspective: 500;
 }
 
+.rotate-Y-axis{
+  transform: rotateY(30deg);
+  transition: transform .3s;
+}
+li.animal:hover .rotate-Y-axis{
+  transform: rotateY(0);
+}
+li.animal:hover img.rotate-Y-axis{
+  left: -15px;
+}
+li.animal:hover .transform-layout-spread{
+  left: 20px;
+}
+.transform-layout-spread{
+  left: 45px;
+}
+
 .article li img {
   border: 10px solid #fcfafa;
   -moz-box-shadow: 0 3px 10px #888;
@@ -75,10 +92,10 @@ html {
 .animal-info {
   border: 10px solid #fcfafa;
   padding: 20px;
-  width: 200px;
+  width: 225px;
   height: 120px;
   background-color: #deddcd;
-  margin: -195px 0 0 55px;
+  margin: -195px 0 0 0;
   position: absolute;
   bottom: 0;
   -moz-box-shadow: 0 20px 40px #888;
@@ -95,10 +112,12 @@ html {
   font-family: Georgia, serif, Times;
   text-align: center;
   padding-bottom: 15px;
+  margin: 0;
 }
 
 .animal-info p {
   padding-bottom: 15px;
+  margin: 0;
 }
 
 .animal-info a {
@@ -181,6 +200,12 @@ html {
   -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
   -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
   box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
+  transform: rotateZ(-10deg);
+  transition: transform .3s;
+}
+.notes ul li div:hover{
+  transform: rotateZ(0) scale(1.2);
+  z-index: 9;
 }
 
 .notes ul li {
@@ -202,6 +227,11 @@ html {
   position: relative;
   top: 5px;
   background: #cfc;
+  transform: rotateZ(10deg);
+}
+.notes ul li:nth-child(even) div:hover{
+  transform: rotateZ(0) scale(1.2);
+  z-index: 9;
 }
 
 /** sidebar  **/
@@ -225,8 +255,33 @@ html {
   font-size: 20px;
   font-weight: bold;
   padding: 13px 32px;
-  text-shadow: 2px 1px 0px #275873;
+  text-shadow: 2px 1px 0 #275873;
   margin: 10px;
+  -webkit-animation-duration: .5s;
+  animation-duration: .5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+  animation-play-state: paused;
+}
+.sidebar button:hover{
+  animation-play-state: running;
+  animation-iteration-count: infinite;
+}
+@keyframes bounceIn {
+  0% {
+    transform: scale(1.05);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 @media (max-width: 1024px) {
diff --git a/src/013-animations/example/index.html b/src/013-animations/example/index.html
index f79d5cd..76c4c15 100644
--- a/src/013-animations/example/index.html
+++ b/src/013-animations/example/index.html
@@ -41,25 +41,25 @@ <h1 class="title flash"> Lorem ipsum dolor sit amet </h1>
 
           <section class="article">
             <ul>
-              <li>
-                <img src="../resources/wolf.jpg" alt="Wolf"/>
-                <div class="animal-info">
+              <li class="animal">
+                <img src="../resources/wolf.jpg" alt="Wolf" class="rotate-Y-axis"/>
+                <div class="animal-info rotate-Y-axis transform-layout-spread">
                   <h3>Wolf</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                   <a href="" title="Wolf">More info</a>
                 </div>
               </li>
-              <li>
-                <img src="../resources/tiger.jpg" alt="Tiger"/>
-                <div class="animal-info">
+              <li class="animal">
+                <img src="../resources/tiger.jpg" alt="Tiger" class="rotate-Y-axis"/>
+                <div class="animal-info rotate-Y-axis transform-layout-spread">
                   <h3>Tiger</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                   <a href="" title="Tiger">More info</a>
                 </div>
               </li>
-              <li>
-                <img src="../resources/eagle.jpg" alt="Eagle"/>
-                <div class="animal-info">
+              <li class="animal">
+                <img src="../resources/eagle.jpg" alt="Eagle" class="rotate-Y-axis"/>
+                <div class="animal-info rotate-Y-axis transform-layout-spread">
                   <h3>Eagle</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                   <a href="" title="Eagle">More info</a>
@@ -88,55 +88,55 @@ <h3>Eagle</h3>
           <article class="notes">
             <ul>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #1</h2>
                   <p>Text Content #1</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #2</h2>
                   <p>Text Content #2</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #3</h2>
                   <p>Text Content #3</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #4</h2>
                   <p>Text Content #4</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #5</h2>
                   <p>Text Content #5</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #6</h2>
                   <p>Text Content #6</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #2</h2>
                   <p>Text Content #2</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #7</h2>
                   <p>Text Content #7</p>
                 </div>
               </li>
               <li>
-                <div>
+                <div class="box1-type1">
                   <h2>Title #8</h2>
                   <p>Text Content #8</p>
                 </div>
diff --git a/src/014-responsive-design/example/css/discount.css b/src/014-responsive-design/example/css/discount.css
index 8df9bad..0487468 100755
--- a/src/014-responsive-design/example/css/discount.css
+++ b/src/014-responsive-design/example/css/discount.css
@@ -73,6 +73,9 @@
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+  .discount{
+    height: 400px;
+  }
 }
 
 /* Large devices (desktops, 992px and up) */
diff --git a/src/014-responsive-design/example/css/footer.css b/src/014-responsive-design/example/css/footer.css
index ae8fdb0..7149402 100755
--- a/src/014-responsive-design/example/css/footer.css
+++ b/src/014-responsive-design/example/css/footer.css
@@ -114,10 +114,33 @@
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
+  .footer{
+    flex-direction: row;
+  }
+  .footer .dropdown-container{
+    flex-direction: row;
+  }
+  .footer .dropdown-container .dropdown-footer{
+    width: 25%;
+  }
+  .content-down{
+    display: block;
+  }
+  .footer ul.links-footer{
+    flex-direction: column;
+  }
+  .dropdown-footer .heading::after{
+    display: none;
+  }
+  .discount-content{
+    align-items: flex-end;
+    padding-right: 5%;
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
diff --git a/src/014-responsive-design/example/css/header.css b/src/014-responsive-design/example/css/header.css
index 5e89805..66c950a 100755
--- a/src/014-responsive-design/example/css/header.css
+++ b/src/014-responsive-design/example/css/header.css
@@ -6,77 +6,76 @@
 
 /* General */
 nav.navbar-scroll {
-  background-color: #e91e63;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
-  top: 0;
+    background-color: #e91e63;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    top: 0;
 }
 
 nav.navbar-no-scroll {
-  background-color: transparent;
-  box-shadow: none;
-  top: 64px;
+    background-color: transparent;
+    box-shadow: none;
+    top: 64px;
 }
 
 .bg-effect {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, transparent 100%);
-  position: absolute;
-  width: 100%;
-  height: 216px;
-  left: 0;
-  top: 0;
-  z-index: 3;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, transparent 100%);
+    position: absolute;
+    width: 100%;
+    height: 216px;
+    left: 0;
+    top: 0;
+    z-index: 3;
 }
 
 .bg-section {
-  background-image: url(../../resources/images/backgrounds/bg1.jpg);
-  background-size: cover;
-  background-position: center center;
-  background-attachment: fixed;
-  height: 216px;
-  text-align: center;
-  width: 100%;
-  position: relative;
-  filter: blur(3px);
+    background-image: url(../../resources/images/backgrounds/bg1.jpg);
+    background-size: cover;
+    background-position: center center;
+    background-attachment: fixed;
+    height: 216px;
+    text-align: center;
+    width: 100%;
+    position: relative;
+    filter: blur(3px);
 }
 
 /* Navbar */
 .navbar {
-  background-color: transparent;
-  box-sizing: border-box;
-  color: #fff;
-  display: flex;
-  position: fixed;
-  transition-duration: .2s;
-  width: 100%;
-  z-index: 4;
+    background-color: transparent;
+    box-sizing: border-box;
+    color: #fff;
+    display: flex;
+    position: fixed;
+    transition-duration: .2s;
+    width: 100%;
+    z-index: 4;
 }
 
 .navbar .logo i,
 .navbar .responsive-icon i {
-  cursor: pointer;
-  font-size: 3em;
-  padding: 10px 20px;
+    cursor: pointer;
+    font-size: 3em;
+    padding: 10px 20px;
 }
 
 .navbar a {
-  color: #fff;
-  text-decoration: none;
-  text-transform: uppercase;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
 }
 
 .navbar #menu a::after {
-  content: '';
-  display: block;
-  width: 0;
-  height: 2px;
-  background-color: #fff;
-  transition: width .3s;
+    content: '';
+    display: block;
+    width: 0;
+    height: 2px;
+    background-color: #fff;
+    transition: width .3s;
 }
 
 .navbar #menu a:hover::after {
-  width: 100%;
+    width: 100%;
 }
-
 .navbar #responsive-menu {
   background-color: #fafafa;
   box-sizing: border-box;
@@ -127,18 +126,118 @@ nav.navbar-no-scroll {
   padding-top: 60px;
 }
 
+
 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {
+
 }
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
+  /* Navbar */
+  .navbar {
+    background-color: transparent;
+    box-sizing: border-box;
+    color: #fff;
+    display: flex;
+    transition-duration: .2s;
+    width: 100%;
+    height: 216px;
+    z-index: 4;
+    align-items: center;
+  }
+  nav.navbar-no-scroll{
+    position: absolute;
+    top: 0;
+  }
+  nav.navbar-scroll{
+    height: 100px;
+  }
+
+  .navbar .responsive-icon i {
+    display: none;
+  }
+  .navbar a.logo{
+    margin-left: 5%;
+  }
+
+  .navbar a {
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  .navbar #menu a::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 2px;
+    background-color: #fff;
+    transition: width .3s;
+  }
+
+  .navbar #menu a:hover::after {
+    width: 100%;
+  }
+  .navbar #responsive-menu {
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    height: auto;
+    width: 60%;
+    z-index: 5;
+    top: unset;
+    left: unset;
+    right: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .navbar #responsive-menu a {
+    color: whitesmoke;
+  }
+
+  .navbar #responsive-menu li {
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-direction: row;
+    padding: 0 20px;
+  }
+  .navbar #responsive-menu li hr{
+    width: 0;
+    transition: width .3s;
+  }
+  .navbar #responsive-menu li a:hover ~ hr{
+    width: 100%;
+    height: 2px;
+  }
+
+  .navbar #responsive-menu li:first-child i {
+    display: none;
+  }
+
+  .navbar #responsive-menu li:not(:first-child):hover {
+    background-color: transparent;
+  }
+
+  .navbar #responsive-menu-toggle,
+  .navbar #menu {
+    display: none;
+  }
+
+  .navbar #responsive-menu-toggle:checked + #responsive-menu {
+    width: 240px;
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
 @media (min-width: 1200px) {
+
 }
diff --git a/src/014-responsive-design/example/css/product.css b/src/014-responsive-design/example/css/product.css
index 7b84a05..73b3e0e 100755
--- a/src/014-responsive-design/example/css/product.css
+++ b/src/014-responsive-design/example/css/product.css
@@ -77,6 +77,22 @@
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
+  .product {
+    display: flex;
+    flex-direction: row;
+  }
+  .product-thumbs {
+    flex-direction: column;
+    order: 1;
+  }
+  .product-slider{
+    order: 2;
+    width: 40%;
+  }
+  .product-description{
+    width: 50%;
+    padding-left: 5%;
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
diff --git a/src/014-responsive-design/example/index.html b/src/014-responsive-design/example/index.html
index f4bd827..f87fcf5 100644
--- a/src/014-responsive-design/example/index.html
+++ b/src/014-responsive-design/example/index.html
@@ -52,11 +52,11 @@
               </label>
               <input type="checkbox" id="responsive-menu-toggle"/>
             </li>
-            <li><a href="">Shop</a></li>
-            <li><a href="">News!</a></li>
-            <li><a href="">Customize</a></li>
-            <li><a href="">Cart</a></li>
-            <li><a href="">Checkout</a></li>
+            <li><a href="">Shop</a><hr/></li>
+            <li><a href="">News!</a><hr/></li>
+            <li><a href="">Customize</a><hr/></li>
+            <li><a href="">Cart</a><hr/></li>
+            <li><a href="">Checkout</a><hr/></li>
           </ul>
 
           <a href="" class="logo"><i class="material-icons">gesture</i></a>
diff --git a/src/015-flex/example/example.css b/src/015-flex/example/example.css
index c1e6824..94a3c60 100644
--- a/src/015-flex/example/example.css
+++ b/src/015-flex/example/example.css
@@ -3,3 +3,92 @@
  * Version: 1
  * By: xxx
  */
+.header{
+  height: 250px;
+  background: url("../resources/images/image.jpg");
+}
+.box-container{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  position: relative;
+  top: -70px;
+}
+.box-container > .box{
+  display: flex;
+  flex-direction: column;
+  max-width: 45%;
+  margin: 15px;
+  border: 1px solid #AEAEAE;
+}
+.box .box-description .box-text{
+  padding: 15px 10px;
+}
+.box .box-image img{
+  width: 100%;
+}
+.box .box-footer{
+  display: flex;
+  flex-direction: row;
+  border-top: 1px solid #AEAEAE;
+  padding: 10px;
+}
+.box .box-footer .box-footer-links{
+  flex: 1;
+}
+.box .box-footer .box-footer-links a{
+  color: #AEAEAE;
+  font-size: 22px;
+}
+.box .box-footer .box-footer-button{
+  display: flex;
+}
+.box .box-footer .box-footer-button a{
+  display: flex;
+  justify-content: flex-end;
+}
+
+footer .footer{
+  display: flex;
+  flex-direction: column;
+  background: #8A6CD6;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white;
+}
+.footer h1{
+  font-size: 25px;
+}
+.footer ul{
+  list-style: none;
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  footer .footer{
+    flex-direction: row;
+  }
+  footer .footer > div{
+    max-width: 25%;
+  }
+  .box-container > .box{
+    width: 30%;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) {
+
+}
diff --git a/src/015-flex/example/index.html b/src/015-flex/example/index.html
index 107af79..1882ffd 100644
--- a/src/015-flex/example/index.html
+++ b/src/015-flex/example/index.html
@@ -36,171 +36,171 @@
 
       <div>
         <main>
-          <div></div>
-          <div>
-            <div>
-              <div>
+          <div class="header"></div>
+          <div class="box-container">
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/animals">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/people">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/arch">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/nature">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/animals">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/people">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/nature">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>
+            <div class="box">
+              <div class="box-image">
                 <img src="https://placeimg.com/350/250/arch">
               </div>
-              <div>
-                <div>
+              <div class="box-description">
+                <div class="box-text">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo
                   tincidunt. Etiam volutpat tellus vitae vestibulum pretium.
                 </div>
-                <div>
-                  <div>
+                <div class="box-footer">
+                  <div class="box-footer-links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
                   </div>
-                  <div>
+                  <div class="box-footer-button">
                     <a>Lorem</a>
                   </div>
                 </div>
@@ -209,7 +209,7 @@
           </div>
         </main>
         <footer>
-          <div>
+          <div class="footer">
             <div>
               <h1>Lorem ipsum dolor sit amet</h1>
               <div>
diff --git a/src/016-bootstrap/example/example.css b/src/016-bootstrap/example/example.css
index 44f6d8d..e8281fd 100644
--- a/src/016-bootstrap/example/example.css
+++ b/src/016-bootstrap/example/example.css
@@ -3,3 +3,42 @@
  * Version: 1
  * By: xxx
  */
+body, html, p{
+  font-size: 16px;
+}
+h3{
+  font-size: 1.1em;
+}
+a{
+  color: #F0AD4E;
+  font-size: 16px;
+}
+a:hover{
+  color: #f09e24;
+}
+.header{
+  color: rgba(0,0,0,.5);
+}
+button{
+  background-color: #F0AD4E;
+  cursor: pointer;
+  color: whitesmoke;
+}
+button:hover{
+  background-color: #f09e24;
+}
+
+.list-group-item .float-left.block{
+  margin-left: 3%;
+}
+.list-group-item .float-left.block p{
+  margin: 0;
+}
+.list-options button{
+  width: 100%;
+  border: none;
+  text-align: left;
+}
+.card-group .card{
+  margin: 2%;
+}
diff --git a/src/016-bootstrap/example/index.html b/src/016-bootstrap/example/index.html
index aef5148..10d5744 100644
--- a/src/016-bootstrap/example/index.html
+++ b/src/016-bootstrap/example/index.html
@@ -40,7 +40,7 @@
       <!-- Practice Content Goes Here -->
       <section class="container">
         <div class="jumbotron jumbotron-fluid">
-          <div class="container">
+          <div class="container header">
             <h1 class="display-3">Talos Travel</h1>
             <p class="lead">Travel is the only thing you by <span> that makes you richer </span></p>
           </div>
@@ -72,7 +72,7 @@ <h1 class="display-3">Talos Travel</h1>
           </div>
         </nav>
         <div class="row">
-          <div>
+          <div class="col col-md-4">
             <div class="card">
               <div class="card-block">
                 <h3 class="card-title">What are you looking?</h3>
@@ -140,7 +140,7 @@ <h3 class="card-header">Searching for something in particular?</h3>
           </div>
 
 
-          <div>
+          <div class="col col-md-8">
             <div class="card-group">
               <div class="card margin-left">
                 <img class="card-img-top" src="https://placeimg.com/250/350/arch" alt="Card image cap">