diff --git a/css/index.css b/css/index.css
index e764f2b01f..064ce814c0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,354 @@
-/* LESS needs to be processed */
\ No newline at end of file
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h1 {
+  font-size: 4rem;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+  font-size: 1.6rem;
+  padding-bottom: 10px;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+header {
+  width: 100%;
+  margin-top: 15px;
+  border-bottom: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-bottom: 20px;
+}
+@media (max-width:500px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-direction: column;
+    padding-bottom: 10px;
+  }
+}
+header h1 {
+  margin-left: 35px;
+}
+@media (max-width:500px) {
+  header h1 {
+    text-align: center;
+    margin: 15px;
+  }
+}
+header .main-nav ul {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  header .main-nav ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+}
+header .main-nav ul li {
+  margin: 20px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+@media (max-width:500px) {
+  header .main-nav ul li {
+    margin: 10px;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home .head {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-direction: column;
+  border-bottom: 2px dashed #C0C0C0;
+  margin: 15px;
+}
+.home .head h2 {
+  margin-top: 15px;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+@media (max-width:500px) {
+  .home .content-section {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.home .text-content {
+  box-sizing: border-box;
+  width: 48%;
+  padding-right: 1%;
+}
+@media (max-width:500px) {
+  .home .text-content {
+    width: 90%;
+    margin: 15px;
+  }
+}
+.home .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+@media (max-width:500px) {
+  .home .img-content {
+    width: 90%;
+    margin-left: 35px;
+    padding: 0;
+  }
+}
+.home .img-content img {
+  border-radius: 10px;
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+@media (max-width:500px) {
+  .home .inverse-content {
+    flex-direction: column-reverse;
+  }
+}
+.home .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.home .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+@media (max-width:500px) {
+  .home .content-pick {
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    margin: 15px;
+  }
+}
+.home .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+.home .destination .btn {
+  border-radius: 12px;
+  font-size: 16px;
+  background-color: #008CBA;
+  color: white;
+  padding: 12px 28px;
+}
+@media (max-width:500px) {
+  .home .destination .btn {
+    background-color: green;
+  }
+}
+.home .destination .btn:hover {
+  transition: ease 3s;
+  -moz-transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+  transform: rotate(360deg);
+}
+@media (max-width:500px) {
+  .home .destination .btn {
+    text-align: center;
+  }
+}
+@media (max-width:500px) {
+  .home .destination {
+    width: 90%;
+  }
+}
+p {
+  font-weight: light-bold;
+}
diff --git a/index.css b/index.css
new file mode 100644
index 0000000000..ef05075eb3
--- /dev/null
+++ b/index.css
@@ -0,0 +1,262 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h1 {
+  font-size: 4rem;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+  font-size: 1.6rem;
+  padding-bottom: 10px;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+header {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+@media (max-width:500px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+  }
+}
+@media (max-width:500px) {
+  header h1 {
+    margin: 15px;
+  }
+}
+header .main-nav ul {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  header .main-nav ul {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: flex-end;
+  }
+}
+header .main-nav ul li {
+  margin-left: 15px;
+  font-size: 1.2rem;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.home .content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+.home .content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+.home .content-section .img-content img {
+  border-radius: 10px;
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.home .inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.home .inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+.home .content-pick .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
diff --git a/index.html b/index.html
index bb8663b768..ab9f8f4ef6 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <title>Fun Bus Travel Agency - Solution</title>
 
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
-  <link href="css/index.css" rel="stylesheet">
+  <link href="./css/index.css" rel="stylesheet">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -15,11 +15,26 @@
 </head>
 
 <body>
-
-  
-     
+	<header class ="main-header">
+		<h1>
+			Fun Bus
+		</h1>
+			<nav class = "main-nav">
+				<ul>
+					<li>Home
+					<li>About Us
+					<li>Blog
+					<li>Contact
+					
+				</ul>
+			</nav>
+	</header>
   <div class="container home">
-   
+   <section class = "head">
+  	<img src ="C:\Users\Daniel\Preprocessing-II\img\fun-bus.jpg" alt = "bus" width ="auto">
+   	<h2>Welcome To Fun Bus!</h2>
+  	<p>Traveling expedition modern,clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.</p>
+   </section>
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..24f4f28f65 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,31 +1,59 @@
 .home {
-
+	.head{
+		.displayFlex(space-between,stretch);
+		flex-direction:column;
+		border-bottom: 2px dashed @navigation-border;
+		margin:15px;
+		h2{
+			margin-top:15px;
+		}
+	}
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
+    @media @mobile{
+    	flex-direction:column;
+    	align-items:center;
+    }
+    }
+	
    
     
     .text-content {
+    	box-sizing:border-box;
       width: 48%;
       padding-right: 1%;
+      @media @mobile{
+      	width:90%;
+      	margin:15px;
+      }
     }
 
     .img-content {
       width: 48%;
       padding-left: 1%;
+   	   @media @mobile {
+      	width:90%;
+      	margin-left:35px;
+      	padding:0;
+      }
 
       img {
         border-radius: 10px;
       }
     }
-  }
+  
 
   .inverse-content {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
+    @media @mobile{
+    	flex-direction:column-reverse;
+    }
+    
+    }
 
     .text-content {
       padding-left: 1%;
@@ -36,7 +64,7 @@
       padding-right: 1%;
       padding-left: 0;
     }
-  }
+  
 
   .content-destination {
     width: 75%;
@@ -52,10 +80,27 @@
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
+    @media @mobile{
+    	flex-direction:column;
+    	align-items:center;
+    	width:90%;
+    	margin:15px;
+    }
+  	 }
+    
 
     .destination {
       width: 30%;
       margin-bottom: 30px;
+      .btn{
+      	.button(12px,360deg);
+      	@media @mobile {
+      		text-align:center;
+      	}
+      }
+      @media @mobile{
+      width:90%;
     }
   }
-}// home
\ No newline at end of file
+}
+// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..6700bd55f5 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,11 @@
 // Follow the order in the readme
+@import "variables";
+@import "mixins";
+@import "reset";
+@import "global";
+@import "navigation";
+@import "footer";
+@import "home-page";
+p{
+	font-weight:light-bold;
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..04b68125f1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,26 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+//flex
+.displayFlex(@justify,@align){
+	display:flex;
+	justify-content:@justify;
+	align-items:@align;
+	}
+//button
+.button(@radius,@rotate){
+	border-radius:@radius;
+	font-size:16px;
+	background-color: #008CBA;
+	color:white;
+	padding: 12px 28px;
+	@media @mobile{
+		background-color:green;
+	}
+	&:hover{
+	transition:ease 3s;
+	-moz-transform:rotate(@rotate);
+	-webkit-transform:rotate(@rotate);
+	-o-transform:rotate(@rotate);
+	transform:rotate(@rotate);
+	
+	}
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..74661fa5b8 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,42 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+
+header{
+	width:100%;
+	margin-top:15px;
+	border-bottom: 2px dashed @navigation-border;
+	.displayFlex(space-evenly,center);
+	padding-bottom:20px;
+		@media@mobile{
+			.displayFlex(space-between,stretch);
+			flex-direction:column;
+			padding-bottom:10px;
+		}
+	h1{  
+		margin-left:35px;
+		@media @mobile{
+		text-align:center;
+		margin:15px;
+		}
+	}
+.main-nav
+{	
+			ul{
+				.displayFlex(space-evenly,stretch);
+				flex-wrap:wrap;
+				@media @mobile{
+					width:100%;
+					.displayFlex(space-between,stretch);
+				}
+				li{
+				margin:20px;
+				font-size:1.5rem;
+				font-weight:bold;
+				@media @mobile{
+				margin:10px;
+				}
+
+				}
+			 
+			}
+	}
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..4d8bda629e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,8 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+//media
+@mobile: ~"(max-width:500px)";
+@tablet: ~"(max-width:800px)";