From fc7dd88986f5ab1f50c6328c169333994f783be1 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Tue, 16 Oct 2018 11:15:58 -0500
Subject: [PATCH 1/3] copy content from z-index exercise

---
 src/009-fonts-icons/example/example.css | 125 +++++++++++++++++++++++-
 src/009-fonts-icons/example/index.html  |  60 +++++++++++-
 2 files changed, 183 insertions(+), 2 deletions(-)

diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css
index 969fe64..757ca39 100644
--- a/src/009-fonts-icons/example/example.css
+++ b/src/009-fonts-icons/example/example.css
@@ -1,5 +1,128 @@
 /*
  * Practice : Fonts, Icons and Sizes
  * Version: 1
- * By: xxx
+ * By: Laura Alvarez
  */
+
+ body {
+ 	background: rgb(211, 234, 224);
+ }
+  .black-square {
+ 	position: absolute;
+ 	width: 30%;
+ 	right: 0;
+ 	height: 100%;
+ 	top: 0;
+ 	background: black;
+ 	opacity: 0.75;
+ 	z-index: 3;
+ }
+  .p-white {
+ 	color: white;
+ 	padding: 20px 0 0 40px;
+ }
+  .p-white h1{
+ 	font-weight: bold;
+ 	font-size: 3rem;
+ }
+  .p-white p {
+ 	text-transform: uppercase;
+ 	width: 100%;
+ }
+  .content {
+ 	width: 60%;
+ }
+  .second-content {
+ 	background-color: rgb(226, 243, 245);
+ 	z-index: 4;
+ 	position: relative;
+ 	padding: 20px 15px 20px 0;
+ }
+  .second-content p, .title{
+ 	padding: 0px 0 0 40px;
+ }
+  .title-list, .title {
+ 	font-size: 2rem;
+ }
+  hr {
+ 	background-color: indianred;
+ }
+  ul {
+ 	list-style: none;
+ 	margin: 0;
+ 	padding: 0;
+ }
+  @media only screen and (max-width: 992px) {
+ 	.last-content {
+ 		width: 18%;
+ 	}
+ }
+
+  @media only screen and (max-width: 1023px) and (min-width: 768px){
+ 	.last-content {
+ 		background-color: rgb(222,225,141);
+ 		z-index: 4;
+ 		position: absolute;
+ 		width: 20%;
+ 		top: 130px;
+ 		right: 71px;
+ 		padding: 30px;
+ 	}
+  	.blue-square {
+ 		background: rgb(107,195,198);
+ 		margin: 50px;
+ 		padding-bottom: 80px;
+ 	}	
+ }
+
+  @media only screen and (min-width: 1024px) {
+ 	.last-content {
+ 		background-color: rgb(222,225,141);
+ 		z-index: 4;
+ 		position: absolute;
+ 		width: 20%;
+ 		top: 130px;
+ 		right: 71px;
+ 		padding: 50px;
+ 	}
+  	.blue-square {
+ 		background: rgb(107,195,198);
+ 		margin: 50px;
+ 		padding-bottom: 80px;
+ 	}	
+ }
+
+  @media only screen and (max-width: 767px) {
+ 	.black-square {
+ 		display: none !important;
+ 	}
+  	.content {
+ 		width: 90%;
+ 		margin: auto;
+ 		background: rgb(107,195,198);
+ 		padding-bottom: 30px;
+ 	}
+  	.second-content {
+ 		background-color: rgb(226, 243, 245);
+ 		padding: 20px 15px 20px 0;
+ 		width: 90%;
+ 		position: relative;
+ 	}
+  	.last-content {
+ 		background-color: rgb(222,225,141);
+ 		width: 100%;
+ 	}
+  	.last-content ul,
+ 	.title-list {
+ 		padding: 20px 20px 0 20px;
+ 		margin-bottom: 0px;
+ 	}
+  	.last-content ul{
+ 		padding-bottom: 20px;
+ 	}
+  	.p-white,
+ 	.second-content p, 
+ 	.title  {
+ 		padding: 10px 20px 0 20px;
+ 	}
+ } 
\ No newline at end of file
diff --git a/src/009-fonts-icons/example/index.html b/src/009-fonts-icons/example/index.html
index d90d669..28fce7d 100644
--- a/src/009-fonts-icons/example/index.html
+++ b/src/009-fonts-icons/example/index.html
@@ -31,8 +31,66 @@
       </header>
       <main class="mdl-layout__content">
         <div class="page-content">
-         <!-- Practice Content Goes Here -->
+      <!-- Practice Content Goes Here -->
+      <div class="blue-square">
+        <div class="content">
+          <div>
+            <div class="p-white">
+              <h1>Lorem ipsum dolor sit amet</h1>
+            </div>
+
+            <div class="p-white">
+              <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
+                scelerisque neque id velit varius, quis consequat mauris semper.</p>
+            </div>
+
+            <div class="second-content">
+              <h2 class="title">Lorem ipsum dolor sit amet</h2>
+              <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>
+            </div>
+          </div>
+        </div>
+
+        <div class="black-square"></div>
+
+        <div class="last-content">
+          <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
+          <ul>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+          </ul>
+
+
         </div>
+      </div>
+    </div>
       </main>
     </div>
 

From 587af92a948480159d631073ddb9b6f92c15dc23 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Tue, 16 Oct 2018 16:11:41 -0500
Subject: [PATCH 2/3] html /css updated for font-icons exercise (the three
 icons are aligned to the left)

---
 src/009-fonts-icons/example/example.css | 172 ++++++++++++++++++++----
 src/009-fonts-icons/example/index.html  | 154 +++++++++++----------
 2 files changed, 225 insertions(+), 101 deletions(-)

diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css
index 757ca39..0b6f869 100644
--- a/src/009-fonts-icons/example/example.css
+++ b/src/009-fonts-icons/example/example.css
@@ -7,7 +7,12 @@
  body {
  	background: rgb(211, 234, 224);
  }
-  .black-square {
+
+ .page-content {
+ 	font-family: "Verdana","Arial",sans-serif;
+ }
+
+ .black-square {
  	position: absolute;
  	width: 30%;
  	right: 0;
@@ -17,48 +22,154 @@
  	opacity: 0.75;
  	z-index: 3;
  }
-  .p-white {
+
+ .main-icons {
+ 	font-size: 30px;
+ }
+
+ button, .p-white, .main-icons {
  	color: white;
  	padding: 20px 0 0 40px;
  }
-  .p-white h1{
+
+ .p-white h1{
  	font-weight: bold;
  	font-size: 3rem;
  }
-  .p-white p {
+
+ .p-white p {
  	text-transform: uppercase;
  	width: 100%;
  }
-  .content {
- 	width: 60%;
+
+ .content {
+ 	width: 55%;
  }
-  .second-content {
+
+ .second-content {
  	background-color: rgb(226, 243, 245);
  	z-index: 4;
  	position: relative;
  	padding: 20px 15px 20px 0;
  }
-  .second-content p, .title{
- 	padding: 0px 0 0 40px;
+
+ .second-content p, .title{
+ 	padding: 0 0 0 40px;
+ }
+
+ .finger button {
+ 	background-color: rgb(253, 59, 130);
+ 	display: inline-block;
+ 	margin: 0 0 0 40px;
+ 	border-radius: 5px;
+ 	padding: 10px;
+ 	border: 0;
+ 	transition-duration: 0.6s;
+ }
+
+ button:hover {
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
+ .finger i {
+ 	padding-right: 10px;
  }
-  .title-list, .title {
+
+ .title-list {
+ 	font-size: 1.8rem;
+ 	margin: 0;
+ 	padding-bottom: 10px;
+ }
+
+ .last-content ul li{
+ 	line-height: 20px;
+ 	margin: 5px;
+ }
+
+ .title {
  	font-size: 2rem;
+ 	line-height: 60px;
+ 	margin-top: 0;
+ }
+
+ h1 em {
+ 	text-decoration: underline;
+ 	text-decoration-style:dashed;
+ 	font-style: normal;
  }
-  hr {
+
+ hr {
  	background-color: indianred;
  }
-  ul {
+
+ p::first-letter {
+ 	font-weight: bold;
+ }
+
+ ul {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  }
-  @media only screen and (max-width: 992px) {
+
+ ul li .material-icons {
+ 	font-size: 14px;
+ }
+
+ ul li:first-child {
+ 	font-size: 15px;
+ }
+
+ ul li:nth-child(2),
+ ul li:nth-child(4),
+ ul li:nth-child(6), 
+ ul li:nth-child(8),
+ ul li:nth-child(10),
+ ul li:nth-child(12),
+ ul li:nth-child(14) {
+ 	font-size: 11pt;
+ }
+
+ ul li:nth-child(3),
+ ul li:nth-child(5),
+ ul li:nth-child(7), 
+ ul li:nth-child(9),
+ ul li:nth-child(11),
+ ul li:nth-child(13) {
+ 	font-size: 1.05em;
+ }
+
+ .search-icon {
+ 	background-color: black;
+ 	border-radius: 0 10px 0 0;
+ 	margin: 5px;
+ }
+
+ .search {
+ 	background-color: white;
+ 	margin-bottom: 20px;
+ 	display: inline-block;
+ 	padding-right: 30px;
+ 	border-radius: 5px;
+ }
+
+ .search span {
+ 	vertical-align: middle;
+ 	display: inline-block;
+ }
+
+ input {
+ 	border: 0;
+ 	vertical-align: middle;
+ }
+
+ @media only screen and (max-width: 992px) {
  	.last-content {
  		width: 18%;
  	}
  }
 
-  @media only screen and (max-width: 1023px) and (min-width: 768px){
+ @media only screen and (max-width: 1023px) and (min-width: 768px){
  	.last-content {
  		background-color: rgb(222,225,141);
  		z-index: 4;
@@ -68,59 +179,64 @@
  		right: 71px;
  		padding: 30px;
  	}
-  	.blue-square {
+ 	.blue-square {
  		background: rgb(107,195,198);
  		margin: 50px;
  		padding-bottom: 80px;
  	}	
+
+ 	.last-content ul li {
+ 		line-height: 15px;
+ 	}
  }
 
-  @media only screen and (min-width: 1024px) {
+ @media only screen and (min-width: 1024px) {
  	.last-content {
  		background-color: rgb(222,225,141);
  		z-index: 4;
  		position: absolute;
- 		width: 20%;
- 		top: 130px;
+ 		width: 25%;
+ 		top: 120px;
  		right: 71px;
- 		padding: 50px;
+ 		padding: 40px;
  	}
-  	.blue-square {
+ 	.blue-square {
  		background: rgb(107,195,198);
  		margin: 50px;
  		padding-bottom: 80px;
  	}	
  }
 
-  @media only screen and (max-width: 767px) {
+ @media only screen and (max-width: 767px) {
  	.black-square {
  		display: none !important;
  	}
-  	.content {
+ 	.content {
  		width: 90%;
  		margin: auto;
  		background: rgb(107,195,198);
  		padding-bottom: 30px;
  	}
-  	.second-content {
+ 	.second-content {
  		background-color: rgb(226, 243, 245);
  		padding: 20px 15px 20px 0;
  		width: 90%;
  		position: relative;
  	}
-  	.last-content {
+ 	.last-content {
  		background-color: rgb(222,225,141);
  		width: 100%;
+ 		margin-top: 20px;
  	}
-  	.last-content ul,
+ 	.last-content ul,
  	.title-list {
  		padding: 20px 20px 0 20px;
- 		margin-bottom: 0px;
+ 		margin-bottom: 0;
  	}
-  	.last-content ul{
+ 	.last-content ul{
  		padding-bottom: 20px;
  	}
-  	.p-white,
+ 	.p-white,
  	.second-content p, 
  	.title  {
  		padding: 10px 20px 0 20px;
diff --git a/src/009-fonts-icons/example/index.html b/src/009-fonts-icons/example/index.html
index 28fce7d..6584ef6 100644
--- a/src/009-fonts-icons/example/index.html
+++ b/src/009-fonts-icons/example/index.html
@@ -1,98 +1,106 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>009 - Fonts, Icons and Sizes</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width">
+<head>
+  <meta charset="utf-8">
+  <title>009 - Fonts, Icons and Sizes</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width">
 
-    <!-- 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">
+  <!-- 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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+  <link href="../../app.css" rel="stylesheet" type="text/css">
 
-    <!-- Import App Css file -->
-    <link href="./example.css" rel="stylesheet" type="text/css">
-    
-  </head>
-  <body>
-  	<!-- Always shows a header, even in smaller screens. -->
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-      <header class="mdl-layout__header">
-        <a aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button" href="/">
-          <i class="material-icons">home</i>
-        </a>
-        <div class="mdl-layout__header-row">
-          <!-- Title -->
-          <span class="mdl-layout-title">009 - Fonts, Icons and Sizes</span>
-          <!-- Add spacer, to align navigation to the right -->
-          <div class="mdl-layout-spacer"></div>
-        </div>
-      </header>
-      <main class="mdl-layout__content">
-        <div class="page-content">
+  <!-- Import App Css file -->
+  <link href="./example.css" rel="stylesheet" type="text/css">
+
+</head>
+<body>
+ <!-- Always shows a header, even in smaller screens. -->
+ <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+  <header class="mdl-layout__header">
+    <a aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button" href="/">
+      <i class="material-icons">home</i>
+    </a>
+    <div class="mdl-layout__header-row">
+      <!-- Title -->
+      <span class="mdl-layout-title">009 - Fonts, Icons and Sizes</span>
+      <!-- Add spacer, to align navigation to the right -->
+      <div class="mdl-layout-spacer"></div>
+    </div>
+  </header>
+  <main class="mdl-layout__content">
+    <div class="page-content">
       <!-- Practice Content Goes Here -->
       <div class="blue-square">
         <div class="content">
           <div>
             <div class="p-white">
-              <h1>Lorem ipsum dolor sit amet</h1>
+              <h1>Lorem ipsum dolor <em>SIT</em> amet</h1>
             </div>
 
+            <span class="main-icons">
+              <i class="fas fa-trash-alt"></i>
+              <i class="fas fa-plus-square"></i>
+              <i class="far fa-edit"></i>
+            </span>
+
             <div class="p-white">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
-                scelerisque neque id velit varius, quis consequat mauris semper.</p>
+              scelerisque neque id velit varius, quis consequat mauris semper.</p>
               <hr>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
-                scelerisque neque id velit varius, quis consequat mauris semper.</p>
-            </div>
+              <div class="search">
+               <span><i class="material-icons search-icon">search</i></span>
+               <input placeholder="Search term">
+             </div>
+           </div>
 
-            <div class="second-content">
-              <h2 class="title">Lorem ipsum dolor sit amet</h2>
-              <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>
-            </div>
+           <div class="second-content">
+            <h2 class="title">Lorem ipsum dolor sit amet</h2>
+            <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.
+
+              <div class="finger">
+               <button><span><i class="fas fa-fingerprint"></i></span>LOREM IPSUM DOLOR SIT AMET</button>
+             </div>
+            </p>
           </div>
         </div>
+      </div>
 
-        <div class="black-square"></div>
+      <div class="black-square"></div>
 
-        <div class="last-content">
-          <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
-          <ul>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-          </ul>
+      <div class="last-content">
+        <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
+        <ul>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor 1</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - using "em"</li>
+          <li><i class="material-icons">done</i>Lorem ipsum dolor sit amet - <strong>using "pt"</strong></li>
+        </ul>
 
 
-        </div>
       </div>
     </div>
-      </main>
-    </div>
+  </div>
+</main>
+</div>
 
-  </body>
+</body>
 </html>
\ No newline at end of file

From b8c11dd85edb7a551294efd195964ee0d628e933 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Tue, 16 Oct 2018 16:17:16 -0500
Subject: [PATCH 3/3] margin left to finger button

---
 src/009-fonts-icons/example/example.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css
index 0b6f869..d72b80b 100644
--- a/src/009-fonts-icons/example/example.css
+++ b/src/009-fonts-icons/example/example.css
@@ -241,4 +241,7 @@
  	.title  {
  		padding: 10px 20px 0 20px;
  	}
+ 	.finger button {
+ 		margin: 0 0 0 20px;
+ 	}
  } 
\ No newline at end of file