bloominstituteoftechnology · didi-codes · Apr 28, 2020
diff --git a/css/index.css b/css/index.css
@@ -1 +1,266 @@
-/* LESS needs to be processed */
+/* 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;
+}
+.nav-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+  padding-left: 20%;
+  padding-right: 12%;
+}
+.nav-bar a {
+  display: inline-block;
+  text-decoration: none;
+  color: #212529;
+  font-size: 1.9rem;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+header {
+  height: 200%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+  padding-left: 20%;
+  padding-right: 12%;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.main-content {
+  width: 60%;
+  margin-left: 20%;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.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;
+}
+.home .content-pick .btn {
+  background-color: #17A2B8;
+  font-size: 1.6rem;
+  color: #FFFFFF;
+  text-align: center;
+  border-radius: 35%;
+  width: 75%;
+  height: 15%;
+  padding: 3.5%;
+}
diff --git a/index.html b/index.html
@@ -15,10 +15,24 @@
 </head>
 
 <body>
+  <header>
+    <h1>Fun Bus</h1>
+      <div class="nav-bar">
+        <nav>
+          <a href="home">Home</a>
+          <a href="about">About Us</a>
+          <a href="blog">Blog</a>
+          <a href="contact">Contact</a>
 
-
-
-  <div class="container home">
+        </nav>
+      </div>
+  </header>
+  <section class="main-content">
+    <img src="https://i.postimg.cc/TYZGSPV1/fun-bus.jpg">
+    <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>
+    <div class="container home">
 
     <section class="content-section">
       <div class="text-content">

diff --git a/less/home-page.less b/less/home-page.less
@@ -1,11 +1,27 @@
-.home {
+header {
+  height: 200%;
+  .flex-container();
+  .border-bottom();
+
+}
+.main-content {
+  width: 60%;
+  margin-left: 20%;
+  .border-bottom();
+}
+
+
+
+
 
+
+.home {
+
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
 
 
     .text-content {
@@ -57,5 +73,8 @@
       width: 30%;
       margin-bottom: 30px;
     }
+    .btn {
+      .button-container();
+    }
   }
-}// home
+}// home
diff --git a/less/index.less b/less/index.less
@@ -1 +1,11 @@
 // Follow the order in the readme
+@import "variables.less";
+@import "mixins.less";
+
+@import "reset.less";
+@import "global.less";
+
+@import "navigation.less";
+@import "footer.less";
+@import "home-page.less";
+
diff --git a/less/mixins.less b/less/mixins.less
@@ -1 +1,37 @@
-// Mixins in here
+// Mixins in here
+.flex-container() {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 1%;
+    padding-left: 20%;
+    padding-right: 12%;
+}
+
+.border-bottom() {
+    border-bottom: 2px dashed @silver;
+}
+
+.button-container(){
+    background-color: @eastern-blue;
+    font-size: 1.6rem;
+    color:@white;
+    text-align: center;
+    border-radius: 35%;
+    width: 75%;
+    height:15%;
+    padding:3.5%
+
+}
+
+@media @mobile {
+
+}
+
+
+
+
+
+
+
+