diff --git a/src/015-flex/example/example.css b/src/015-flex/example/example.css
index c1e6824..e3c69df 100644
--- a/src/015-flex/example/example.css
+++ b/src/015-flex/example/example.css
@@ -1,5 +1,167 @@
 /*
  * Practice : Flex
  * Version: 1
- * By: xxx
+ * By: Laura Alvarez
  */
+
+ .page-content {
+ 	padding: 0;
+ }
+
+ .header-image {
+ 	background-image: url('../resources/images/image.jpg');
+ 	background-attachment: fixed;
+ 	width: 100%;
+ 	height: 300px;
+ }
+
+ .content-box {
+ 	display: flex;
+ 	flex-wrap: wrap;
+ 	justify-content: center;
+ 	top: -80px;
+ 	position: relative;
+ }
+
+ .boxes {
+ 	margin: 20px;
+ 	border: 1px solid darkgray;
+ }
+
+ .boxes > div {
+ 	border-bottom: 1px solid transparent;
+ 	overflow: hidden;
+ } 
+
+ img {
+ 	max-width: 100%;
+ 	transition: all 0.3s;
+ }
+
+ .boxes div:first-child:hover img {
+ 	transform: scale(1.1); 
+ }
+
+ .paragraphs {
+ 	padding: 10px;
+ }
+
+ .nav-box {
+ 	border-top: 1px solid darkgray;
+ 	padding: 5px 0 5px 10px;
+ 	display: flex;
+ 	justify-content: space-between;
+ }
+
+ .nav-box div:nth-child(2) a {
+ 	padding-right: 5px;
+ }
+
+ .nav-box div:nth-child(2) a:hover{
+ 	background-color: lightgray;
+ 	padding: 5px;
+ 	margin-right: 3px;
+ }
+
+ .links a{
+ 	color: dimgray;
+ 	padding: 5px;
+ }
+
+ .links a:hover{
+ 	color: darkgray;
+ }
+
+ .footer-content {
+ 	display: flex;
+ 	padding: 0 0 20px 20px;
+ }
+
+ footer {
+ 	background-color: rgb(149, 112, 213);
+ 	color: white;
+ 	margin-top: -80px;
+ }
+
+ footer h1 {
+ 	font-size: 16px;
+ 	margin: 20px 0;
+ }
+
+ .fcontent {
+ 	width: 25%;
+ 	padding-right: 20px;
+ }
+
+ .fcontent ul {
+ 	list-style: none;
+ 	padding-left: 0;
+ }
+
+ .fcontent p {
+ 	margin: 0;
+ }
+
+ ul li {
+ 	margin-bottom: 5px;
+ 	border-bottom: 1px solid rgba(255, 255, 255, .1);
+ }
+
+ ul li span {
+ 	float: right;
+ }
+
+ .img-box.small-sc img {
+ 	padding-bottom: 3px
+ }
+
+ @media screen and (max-width: 425px) and (min-width: 390px) {
+ 	.boxes {
+ 		margin: 10px 40px;
+ 	}
+ }
+
+ @media only screen and (min-width: 425px) {
+ 	.boxes {
+ 		width: 350px;
+ 	}
+ }
+
+ @media only screen and (max-width: 1024px) {
+ 	.footer-content {
+ 		flex-wrap: wrap;
+ 		justify-content: space-between;
+ 	}
+
+ 	.fcontent {
+ 		width: 45%;
+ 	}
+
+ 	.img-box.small-sc {
+ 		width: 80%;
+ 	}
+ }
+
+ @media only screen and (max-width: 784px){
+ 	.footer-content {
+ 		flex-direction: column;
+ 		justify-content: center;
+ 		padding: 60px 0;
+ 	}
+
+ 	.fcontent {
+ 		text-align: center;
+ 		width: 100%;
+ 		padding: 10px 0;
+ 	}
+
+ 	.container {
+ 		display: none;
+ 	}
+ }
+
+ @media only screen and (max-width: 784px) and (min-width: 426px) {
+ 	.boxes {
+ 		margin: 15px;
+ 	}
+ }
\ No newline at end of file
diff --git a/src/015-flex/example/index.html b/src/015-flex/example/index.html
index 107af79..0e9b36c 100644
--- a/src/015-flex/example/index.html
+++ b/src/015-flex/example/index.html
@@ -36,19 +36,19 @@
 
       <div>
         <main>
-          <div></div>
-          <div>
-            <div>
+          <div class="header-image"></div>
+          <div class="content-box">
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/animals">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -59,17 +59,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/people">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -80,17 +80,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/arch">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -101,17 +101,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/nature">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -122,17 +122,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/animals">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -143,17 +143,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/people">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -164,17 +164,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/nature">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -185,17 +185,17 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="boxes">
               <div>
                 <img src="https://placeimg.com/350/250/arch">
               </div>
               <div>
-                <div>
+                <div class="paragraphs">
                   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="nav-box">
+                  <div class="links">
                     <a>Lorem</a>
                     <a>Lorem</a>
                     <a>Lorem</a>
@@ -209,10 +209,10 @@
           </div>
         </main>
         <footer>
-          <div>
-            <div>
+          <div class="footer-content">
+            <div class="fcontent">
               <h1>Lorem ipsum dolor sit amet</h1>
-              <div>
+              <div class="container">
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisl ullamcorper, consectetur lectus
                   at, dignissim dolor. Quisque ultrices laoreet lacus non interdum. Donec ut dictum metus.
@@ -220,9 +220,9 @@ <h1>Lorem ipsum dolor sit amet</h1>
               </div>
             </div>
 
-            <div>
+            <div class="fcontent">
               <h1>Lorem ipsum dolor sit amet</h1>
-              <ul>
+              <ul class="container">
                 <li>Lorem <span> 9:00AM - 7:00PM </span></li>
                 <li>Ipsum <span> 9:00AM - 7:00PM </span></li>
                 <li>Dolor <span> 9:00AM - 7:00PM </span></li>
@@ -230,9 +230,9 @@ <h1>Lorem ipsum dolor sit amet</h1>
               </ul>
             </div>
 
-            <div>
+            <div class="fcontent">
               <h1>Lorem ipsum dolor sit amet</h1>
-              <div class="img-box small-sc">
+              <div class="img-box small-sc container">
                 <img src="https://placeimg.com/80/80/nature">
                 <img src="https://placeimg.com/80/80/arch">
                 <img src="https://placeimg.com/80/80/people">
@@ -249,9 +249,9 @@ <h1>Lorem ipsum dolor sit amet</h1>
             </div>
 
 
-            <div>
+            <div class="fcontent">
               <h1>Lorem ipsum dolor sit amet</h1>
-              <div>
+              <div class="container">
                 <p> Consectetur adipiscing elit. </p>
                 <p> Proin ut nisl ullamcorper </p>
                 <p> Consectetur lectus at, dignissim dolor. </p>