diff --git a/src/pages/hotels/resorts/OceanParadise.js b/src/pages/hotels/resorts/OceanParadise.js
diff --git a/src/pages/hotels/resorts/SandiesNeptune.js b/src/pages/hotels/resorts/SandiesNeptune.js
diff --git a/src/pages/hotels/resorts/ZanzibarRetreat.js b/src/pages/hotels/resorts/ZanzibarRetreat.js
diff --git a/src/pages/package-tours/northern-package/Hakuna.js b/src/pages/package-tours/northern-package/Hakuna.js
diff --git a/src/pages/package-tours/northern-package/Karibu.js b/src/pages/package-tours/northern-package/Karibu.js
diff --git a/src/pages/package-tours/southern-package/Jambo.js b/src/pages/package-tours/southern-package/Jambo.js
diff --git a/src/pages/package-tours/southern-package/Short.js b/src/pages/package-tours/southern-package/Short.js
diff --git a/src/pages/package-tours/southern-package/Spice.js b/src/pages/package-tours/southern-package/Spice.js
diff --git a/src/pages/safaris/coast/Mafia.js b/src/pages/safaris/coast/Mafia.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Mafia extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Mafia Archipelago</h1>
+            <img className='banner-image' src={require('../../../img/safaris/coast/0.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Mafia;
diff --git a/src/pages/safaris/coast/Pemba.js b/src/pages/safaris/coast/Pemba.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Pemba extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Pemba Island</h1>
+            <img className='banner-image' src={require('../../../img/safaris/coast/1.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Pemba;
diff --git a/src/pages/safaris/coast/Ras.js b/src/pages/safaris/coast/Ras.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Ras extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Ras Kutani Area</h1>
+            <img className='banner-image' src={require('../../../img/safaris/coast/2.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Ras;
diff --git a/src/pages/safaris/cultural/Hadza.js b/src/pages/safaris/cultural/Hadza.js
diff --git a/src/pages/safaris/cultural/Maasai.js b/src/pages/safaris/cultural/Maasai.js
diff --git a/src/pages/safaris/northern/Arusha.js b/src/pages/safaris/northern/Arusha.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import arushaMD from '../../../content/Safaris/NorthernCircuit/ArushaNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Arusha extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Arusha National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/northern/0.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+            <div className='markdown' dangerouslySetInnerHTML={{__html: arushaMD}}>
+            </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Arusha;
diff --git a/src/pages/safaris/northern/Manyara.js b/src/pages/safaris/northern/Manyara.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import manyaraMD from '../../../content/Safaris/NorthernCircuit/LakeManyaraNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Manyara extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Lake Manyara National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/northern/3.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: manyaraMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Manyara;
diff --git a/src/pages/safaris/northern/Ngorongo.js b/src/pages/safaris/northern/Ngorongo.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import ngorongoMD from '../../../content/Safaris/NorthernCircuit/NgorongoroConservationArea.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Ngorongo extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Ngorongo Conservation Area</h1>
+            <img className='banner-image' src={require('../../../img/safaris/northern/1.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: ngorongoMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Ngorongo;
diff --git a/src/pages/safaris/northern/Serengeti.js b/src/pages/safaris/northern/Serengeti.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import serengetiMD from '../../../content/Safaris/NorthernCircuit/SerengetiNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Serengeti extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Serengeti National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/northern/2.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: serengetiMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Serengeti;
diff --git a/src/pages/safaris/northern/Tarangire.js b/src/pages/safaris/northern/Tarangire.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import tarangireMD from '../../../content/Safaris/NorthernCircuit/TarangireNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Tarangire extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Tarangire National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/northern/4.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: tarangireMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Tarangire;
diff --git a/src/pages/safaris/southern/Mikumi.js b/src/pages/safaris/southern/Mikumi.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import mikumiMD from '../../../content/Safaris/SouthernCircuit/MikumiUdzungwa.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Mikumi extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Mikumi and Udzungwa National Parks</h1>
+            <img className='banner-image' src={require('../../../img/safaris/southern/2.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: mikumiMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Mikumi;
diff --git a/src/pages/safaris/southern/Ruaha.js b/src/pages/safaris/southern/Ruaha.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import ruahaMD from '../../../content/Safaris/SouthernCircuit/RuahaNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Ruaha extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Ruaha National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/southern/1.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: ruahaMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Ruaha;
diff --git a/src/pages/safaris/southern/Selous.js b/src/pages/safaris/southern/Selous.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import selousMD from '../../../content/Safaris/SouthernCircuit/SelousGameReserve.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Selous extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Selous Game Refuge</h1>
+            <img className='banner-image' src={require('../../../img/safaris/southern/0.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: selousMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Selous;
diff --git a/src/pages/safaris/threetoseven/3day.js b/src/pages/safaris/threetoseven/3day.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import threeMD from '../../../content/Safaris/3to7DaySafaris/3DaySafari.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Threeday extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>3 Days</h1>
+            <img className='banner-image' src={require('../../../img/safaris/long/0.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: threeMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Threeday;
diff --git a/src/pages/safaris/threetoseven/4day.js b/src/pages/safaris/threetoseven/4day.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import fourMD from '../../../content/Safaris/3to7DaySafaris/4DaySafari.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Fourday extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>4 Days</h1>
+            <img className='banner-image' src={require('../../../img/safaris/long/1.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: fourMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Fourday;
diff --git a/src/pages/safaris/threetoseven/5day.js b/src/pages/safaris/threetoseven/5day.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import fiveMD from '../../../content/Safaris/3to7DaySafaris/5DaySafari.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Fiveday extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>5 Days</h1>
+            <img className='banner-image' src={require('../../../img/safaris/long/2.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: fiveMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Fiveday;
diff --git a/src/pages/safaris/threetoseven/7day.js b/src/pages/safaris/threetoseven/7day.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import sevenMD from '../../../content/Safaris/3to7DaySafaris/7DaySafari.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Sevenday extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>7 Days</h1>
+            <img className='banner-image' src={require('../../../img/safaris/long/3.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: sevenMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Sevenday;
diff --git a/src/pages/safaris/threetoseven/daysinfo.js b/src/pages/safaris/threetoseven/daysinfo.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import daysMD from '../../../content/Safaris/3to7DaySafaris/3to7GeneralInfo.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Daysinfo extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>General Information</h1>
+            <img className='banner-image' src={require('../../../img/safaris/long/4.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: daysMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Daysinfo;
diff --git a/src/pages/safaris/western/Katavi.js b/src/pages/safaris/western/Katavi.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import kataviMD from '../../../content/Safaris/WesternCircuit/KataviNationalPark.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Katavi extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Katavi National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/western/0.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: kataviMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Katavi;
diff --git a/src/pages/safaris/western/Mahale.js b/src/pages/safaris/western/Mahale.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import mahaleMD from '../../../content/Safaris/WesternCircuit/MahaleMountains.md';
+import HorizontalTextSection from '../../../components/HorizontalTextSection.js';
+
+
+class Mahale extends Component {
+  render() {
+    return (
+      <div className="page">
+          <div className="banner">
+            <h1>Mahale Mountains National Park</h1>
+            <img className='banner-image' src={require('../../../img/safaris/western/1.jpg')} />
+          </div>
+          <div className="info">
+           <HorizontalTextSection>
+           <div className='markdown' dangerouslySetInnerHTML={{__html: mahaleMD}}>
+           </div>
+            </HorizontalTextSection>
+          </div>
+      </div>
+    );
+  }
+}
+
+export default Mahale;
diff --git a/src/scss/_Home.scss b/src/scss/_Home.scss
@@ -0,0 +1,22 @@
+.home {
+  .image {
+    width: 100%;
+    height: 80vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .home-image {
+      width: 100%;
+      height: 80vh;
+      object-fit: cover;
+      object-position: 0% 100%;
+    }
+
+    h1 {
+      position: absolute;
+      color: white;
+    }
+  }
+
+}
diff --git a/src/scss/components/_Footer.scss b/src/scss/components/_Footer.scss
@@ -0,0 +1,26 @@
+.footer {
+  background: $nav-bar-color;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  h3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    height: 10vh;
+    color: grey;
+  }
+  .fb-logo{
+    position:absolute;
+    margin-left:30vw;
+    margin-top:-1vw;
+  }
+  .ta-logo{
+    position:absolute;
+    margin-left:15vw;
+    margin-top:-1vw;
+  }
+}
diff --git a/src/scss/components/_Gallery.scss b/src/scss/components/_Gallery.scss
@@ -0,0 +1,36 @@
+.image-row {
+  @include transition(margin, 0.5s, ease);
+  display: flex;
+  height: 33.33vh;
+  overflow: hidden;
+  cursor: pointer;
+
+  .image {
+    width: 50%;
+    height: 33.33vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-align-content: center;
+  align-content: center;
+
+
+    .gallery-image {
+      width: 100%;
+      height: 33.33vh;
+      object-fit: cover;
+    }
+    h1 {
+      color: white;
+      position: absolute;
+      z-index: 99;
+      text-align: -webkit-center;
+      justify-content: center;
+      width:50%;
+      -webkit-align-content: center;
+    align-content: center;
+    align-items: center;
+
+    }
+  }
+}
diff --git a/src/scss/components/_HorizontalTextSection.scss b/src/scss/components/_HorizontalTextSection.scss
@@ -0,0 +1,21 @@
+.horizontal-text-section {
+  background: #f1f1f1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 10vh 0px;
+
+  h1 {
+    text-align: center;
+    color: $nav-bar-color;
+  }
+
+  .horizontal-text-section-content {
+    width: 75%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+}
diff --git a/src/scss/components/_HotelsDropdown.scss b/src/scss/components/_HotelsDropdown.scss
@@ -0,0 +1,28 @@
+.hotels-dropdown-container {
+  width: 100%;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  z-index: 9;
+
+  .nav-bar {
+    position: relative;
+    display: block;
+  }
+
+  .hotels-dropdown {
+    z-index: 9;
+    width: 15%;
+    text-align: center;
+
+    .nav-bar-button {
+        width: 100%;
+
+        .dropdown-options {
+          width: 100%;
+        }
+    }
+  }
+}
diff --git a/src/scss/components/_Image.scss b/src/scss/components/_Image.scss
@@ -0,0 +1,34 @@
+.image-row {
+  @include transition(margin, 0.5s, ease);
+  display: flex;
+  height: 33.33vh;
+  overflow: hidden;
+  cursor: pointer;
+
+  .image {
+    width: 50%;
+    height: 33.33vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-align-content: center;
+  align-content: center;
+
+
+    .gallery-image {
+      width: 100%;
+      height: 33.33vh;
+      object-fit: cover;
+    }
+    h1 {
+      color: white;
+      position: absolute;
+      z-index: 99;
+      text-align:center;
+      justify-content: center;
+      width:50%;
+      -webkit-align-content: center;
+    align-content: center;
+    }
+  }
+}
diff --git a/src/scss/components/_NavBar.scss b/src/scss/components/_NavBar.scss
@@ -0,0 +1,107 @@
+$nav-bar-option-color: #656068;
+
+.nav-bar {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  background: $nav-bar-color;
+  font-weight: 100;
+  align-items: center;
+  position: fixed;
+  height: $nav-bar-height;
+  box-shadow: 0px 0px 5px 1px rgba(33, 34, 33, 0.5);
+  z-index: 99;
+
+  h3, a {
+    cursor: pointer;
+    padding: 5px 10px;
+    color: #656068;
+    margin: 0;
+  }
+
+.logo{
+  height:3vw;
+
+}
+
+
+  .nav-bar-button {
+
+    .nav-bar-button-title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: $nav-bar-height;
+      z-index: 9999;
+      background: $nav-bar-color;
+
+      h3, a {
+        @include transition(all, 0.2s, ease-out);
+        color: grey;
+      }
+
+      a {
+        color: grey;
+
+      }
+    }
+
+
+    .dropdown-options {
+      position: absolute;
+      z-index: -10;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      overflow: hidden;
+    }
+
+    .dropdown-option {
+      background: #1f1f22;
+      border-bottom: 0.5px solid #2c2a2e;
+      width: 100%;
+      font-weight: 100;
+      transform: translateY(-120px);
+      @include transition(all, 0.2s, ease);
+    }
+
+    .dropdown-option:hover > a {
+      color: #f1f1f1;
+    }
+
+
+    .dropdown-options:hover {
+        display: block;
+
+
+        .dropdown-option:hover {
+          h3 {
+            a {
+                color: #f1f1f1;
+                cursor: pointer;
+            }
+          }
+        }
+    }
+  }
+
+  .nav-bar-button:hover > .dropdown-options {
+  }
+
+  .nav-bar-button:hover .dropdown-option {
+    transform: translateY(0px);
+  }
+
+
+
+
+  .nav-bar-button:hover {
+    .nav-bar-button-title {
+      h3 {
+        a {
+            color: #f1f1f1;
+        }
+
+      }
+    }
+  }
+}
diff --git a/src/scss/components/_TextSection.scss b/src/scss/components/_TextSection.scss
@@ -0,0 +1,17 @@
+.text-section {
+  background: #f1f1f1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+
+  h1 {
+    text-align: center;
+    color: $nav-bar-color;
+  }
+
+  .text-section-content {
+    width: 50%;
+  }
+}
diff --git a/src/scss/helpers/_animation_mixins.scss b/src/scss/helpers/_animation_mixins.scss
@@ -0,0 +1,301 @@
+@mixin fadein($t) {
+-webkit-animation: fadein $t; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: fadein $t; /* Firefox < 16 */
+    -ms-animation: fadein $t; /* Internet Explorer */
+     -o-animation: fadein $t; /* Opera < 12.1 */
+        animation: fadein $t;
+}
+
+
+@keyframes fadein {
+    from {
+    opacity: 0;
+    }
+    to   {
+    opacity: 1;
+    }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+
+
+
+
+
+
+
+
+@mixin dropin($t) {
+-webkit-animation: dropin $t; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: dropin $t; /* Firefox < 16 */
+    -ms-animation: dropin $t; /* Internet Explorer */
+     -o-animation: dropin $t; /* Opera < 12.1 */
+        animation: dropin $t;
+}
+
+
+@keyframes dropin {
+    from {
+      opacity: 0.5;
+      transform: scale(2.8);
+    }
+    to   {
+      opacity: 1.0;
+      transform: scale(1);
+    }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes dropin {
+    from {
+      transform: scale(1.2);
+    }
+    to   {
+      transform: scale(1);
+    }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes dropin {
+    from {
+      transform: scale(1.2);
+    }
+    to   {
+      transform: scale(1);
+    }
+}
+
+/* Internet Explorer */
+@-ms-keyframes dropin {
+    from {
+      transform: scale(1.2);
+    }
+    to   {
+      transform: scale(1);
+    }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes dropin {
+    from {
+      transform: scale(1.2);
+    }
+    to   {
+      transform: scale(1);
+    }
+}
+
+
+
+
+@mixin dropout($t) {
+-webkit-animation: dropout $t; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: dropout $t; /* Firefox < 16 */
+    -ms-animation: dropout $t; /* Internet Explorer */
+     -o-animation: dropout $t; /* Opera < 12.1 */
+        animation: dropout $t;
+}
+
+
+@keyframes dropout {
+    from {
+      transform: scale(1);
+    }
+    to   {
+      transform: scale(1.2);
+    }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes dropout {
+    from {
+      transform: scale(1);
+    }
+    to   {
+      transform: scale(1.2);
+    }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes dropout {
+    from {
+      transform: scale(1);
+    }
+    to   {
+      transform: scale(1.2);
+    }
+}
+
+/* Internet Explorer */
+@-ms-keyframes dropout {
+    from {
+      transform: scale(1);
+    }
+    to   {
+      transform: scale(1.2);
+    }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes dropout {
+    from {
+      transform: scale(1);
+     }
+    to   {
+      transform: scale(1.2);
+     }
+}
+
+
+
+
+
+@mixin slidein($t) {
+-webkit-animation: slidein $t; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: slidein $t; /* Firefox < 16 */
+    -ms-animation: slidein $t; /* Internet Explorer */
+     -o-animation: slidein $t; /* Opera < 12.1 */
+        animation: slidein $t;
+}
+
+
+@keyframes slidein {
+    from {
+      transform: translate3d(0, -120vh, 0);
+    }
+    to   {
+      transform: translate3d(0, 0, 0);
+    }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes slidein {
+    from {
+      transform: translate3d(0, -120vh, 0);
+    }
+    to   {
+      transform: translate3d(0, 0, 0);
+    }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slidein {
+    from {
+      transform: translate3d(0, -120vh, 0);
+    }
+    to   {
+      transform: translate3d(0, 0, 0);
+    }
+}
+
+/* Internet Explorer */
+@-ms-keyframes slidein {
+    from {
+      transform: translate3d(0, -120vh, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes slidein {
+    from {
+     transform: translate3d(0, -120vh, 0);
+    }
+    to {
+     transform: translate3d(0, 0, 0);
+    }
+}
+
+
+
+
+
+
+
+
+@mixin slideout($t) {
+-webkit-animation: slideout $t; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: slideout $t; /* Firefox < 16 */
+    -ms-animation: slideout $t; /* Internet Explorer */
+     -o-animation: slideout $t; /* Opera < 12.1 */
+        animation: slideout $t;
+}
+
+
+@keyframes slideout {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to   {
+      transform: translate3d(0, -120vh, 0);
+    }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes slideout {
+    from {
+     transform: translate3d(0, 0, 0);
+    }
+    to {
+     transform: translate3d(0, -120vh, 0);
+    }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideout {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to   {
+      transform: translate3d(0, -120vh, 0);
+    }
+}
+
+/* Internet Explorer */
+@-ms-keyframes slideout {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -120vh, 0);
+    }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes slideout {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -120vh, 0);
+    }
+}
diff --git a/src/scss/helpers/_flexbox.scss b/src/scss/helpers/_flexbox.scss
@@ -0,0 +1,7 @@
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
diff --git a/src/scss/helpers/_mixins.scss b/src/scss/helpers/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin transition($prop, $time, $easing) {
+  -webkit-transition: $prop $time $easing;
+  -webkit-transition: $prop, $time, $easing;
+  -webkit-transition: -webkit-transform $time $easing;
+  -moz-transition: $prop $time $easing;
+  -ms-transition: $prop $time $easing;
+  -o-transition: $prop $time $easing;
+  transition: $prop $time $easing;
+}
+
+@mixin transform($prop) {
+  -webkit-transition: $prop;
+  -webkit-transition: $prop;
+  -moz-transition: $prop;
+  -ms-transition: $prop;
+  -o-transition: $prop;
+  transition: $prop;
+}
+
+@mixin user-select($v) {
+-webkit-user-select: $v;
+-moz-user-select: $v;
+-ms-user-select: $v;
+-o-user-select: $v;
+user-select: $v;
+}
diff --git a/src/scss/helpers/_variables.scss b/src/scss/helpers/_variables.scss
@@ -0,0 +1,4 @@
+$background-bg-color: white;
+$nav-bar-color: #1f1f22;
+$nav-bar-height: 40px;
+$section-color: #f1f1f1;
diff --git a/src/scss/layout/_Banner.scss b/src/scss/layout/_Banner.scss
@@ -0,0 +1,62 @@
+.banner {
+  @include transition(margin, 0.5s, ease);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9;
+  cursor: pointer;
+  align-items: center;
+    h1{
+
+    }
+
+
+
+  .section-title {
+    position: absolute;
+    margin: 0;
+    z-index: 9;
+    color: white;
+    display: flex;
+    @include user-select(none);
+    justify-content: center;
+    align-items: center;
+    cursor:pointer;
+    width: 100%;
+    height:100vh;
+    h1 {
+
+      a {
+        color: white;
+
+      }
+      @include transition($hover-prop, $hover-duration, $hover-easing);
+      transform: translateY(-10px);
+    }
+    opacity: 0;
+    @include transition($hover-prop, $hover-duration, $hover-easing);
+  }
+  .section-image {
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+    object-position: 50% 20%;
+    filter: brightness(70%) saturate(90%) sepia(10%) blur(0px);
+  }
+}
+
+.banner:hover > .section-title {
+  background: $hover-color;
+  h1 {
+    transform: translateY(0px);
+  }
+  opacity: 1;
+}
+
+.menu:hover ~ .-banner .section-title {
+  background: $hover-color;
+  transform: translateY(0px);
+  opacity: 1;
+}
diff --git a/src/scss/layout/_Layout.scss b/src/scss/layout/_Layout.scss
@@ -0,0 +1,3 @@
+.layout {
+
+}
diff --git a/src/scss/layout/_Menu.scss b/src/scss/layout/_Menu.scss
@@ -0,0 +1,31 @@
+.menu {
+  @include transition(all, 0.5s, ease-in-out);
+  background: rgba(0, 255, 255, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  transform: translate3d(0,0,0);
+  z-index: 99;
+  width: 100vw;
+  -webkit-backface-visibility: hidden;
+}
+
+.open {
+  transform: translate3d(-100vw,0,0);
+}
+
+.closed {
+  transform: translate3d(0,0,0);
+}
+
+
+.back-button {
+  padding: 15px;
+  cursor: pointer;
+  @include transition(all, 0.25s, ease);
+}
+
+.back-button:hover {
+  transform: translateX(-10px);
+}
diff --git a/src/scss/layout/_PageLayout.scss b/src/scss/layout/_PageLayout.scss
@@ -0,0 +1,66 @@
+.page-layout {
+  .page {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    position:relative;
+    width:100%;
+
+    .banner {
+      width:100%;
+      margin:0 auto;
+      z-index: 1;
+      text-align: center;
+      @include transition(margin, 0.5s, ease);
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+
+      h1 {
+        z-index: 1;
+        color: $section-color;
+
+      }
+
+      .home-image {
+        height: 100vh;
+        object-fit: cover;
+        object-position: 50% 20%;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+      }
+
+
+      .banner-image {
+        filter: brightness(40%) saturate(120%) sepia(40%) blur(0px);
+        height: 100vh;
+        object-fit: cover;
+        object-position: 50% 20%;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+      }
+    }
+    .info {
+      width:100%;
+      z-index: 8;
+      -webkit-backface-visibility: hidden;
+      .markdown {
+        padding: 20px;
+        border-radius: 2px;
+        background: #ffffff;
+        box-shadow: 0px 0px 1px 1px #c1c1c1;
+        h2 {
+          padding: 20px 0px;
+          color: grey;
+          cursor: default;
+        }
+        p {
+          cursor: default;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/layout/_Stack.scss b/src/scss/layout/_Stack.scss
@@ -0,0 +1,77 @@
+$slide-duration: 0.5s;
+$hover-color: rgba(50, 44, 49, 0.75);
+$hover-prop: all;
+$hover-duration: 0.25s;
+$hover-easing: ease-in-out;
+$block-height: 160px;
+
+
+.section {
+  display: inline-flex;
+
+  .featured-tours {
+    display: flex;
+    flex-direction: column;
+
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 15px 0px;
+
+
+      .block {
+        height: $block-height;
+        width: 250px;
+        padding: 0px 15px;
+
+        .title {
+          position: absolute;
+          height: $block-height;
+          width: 250px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          @include transition(all, 0.2s, ease);
+          opacity: 0;
+          @include user-select(none);
+
+          h3 {
+            text-align: center;
+            a {
+              color: white;
+              text-align: center;
+            }
+            @include transition(all, 0.2s, ease);
+            transform: translateY(-10px);
+            color: white;
+            font-family: 'Oswald', Helvetica, sans-serif;
+            font-size: 1.5em;
+          }
+        }
+
+
+        .title:hover > h3 {
+          transform: translateY(0px);
+        }
+
+        .title:hover {
+          background: $hover-color;
+          opacity: 1;
+          cursor: pointer;
+        }
+
+        .image {
+          width: 250px;
+          height: $block-height;
+          object-fit: cover;
+          object-position: 50% 100%;
+          @include user-select(none);
+          pointer-events: none;
+          position: absolute;
+
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/layout/_StaticBanner.scss b/src/scss/layout/_StaticBanner.scss
@@ -0,0 +1,49 @@
+.static-banner {
+  @include transition(margin, 0.5s, ease);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 80vh;
+  z-index: 9;
+  cursor: pointer;
+  align-items: center;
+
+
+  .banner-title {
+    background: $hover-color;
+    position: absolute;
+    margin: 0;
+    z-index: 9;
+    color: white;
+    display: flex;
+    @include user-select(none);
+    justify-content: center;
+    align-items: center;
+    cursor:pointer;
+    width: 100%;
+    height:80vh;
+    h1 {
+      a {
+        color: white;
+      }
+      @include transition($hover-prop, $hover-duration, $hover-easing);
+      transform: translateY(0px);
+    }
+    opacity: 1;
+    @include transition($hover-prop, $hover-duration, $hover-easing);
+  }
+  .banner-image {
+    width: 100%;
+    height: 80vh;
+    object-fit: cover;
+    object-position: 50% 20%;
+    filter: brightness(70%) saturate(90%) sepia(10%) blur(0px);
+  }
+}
+
+.menu:hover ~ .-banner .banner-title {
+  background: $hover-color;
+  transform: translateY(0px);
+  opacity: 1;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -0,0 +1,76 @@
+@import './helpers/mixins.scss';
+@import './helpers/_animation_mixins.scss';
+@import './helpers/variables.scss';
+
+@import './Home.scss';
+
+@import './layout/layout.scss';
+@import './layout/Stack.scss';
+@import './layout/Menu.scss';
+@import './layout/Banner.scss';
+@import './layout/StaticBanner.scss';
+@import './layout/PageLayout.scss';
+
+
+@import './components/NavBar.scss';
+@import './components/HotelsDropdown.scss';
+@import './pages/Home.scss';
+@import './components/Gallery.scss';
+@import './components/TextSection.scss';
+@import './components/Footer.scss';
+@import './components/HorizontalTextSection.scss';
+
+@import './pages/transportation/CarRental.scss';
+@import './pages/transportation/FlightInfo.scss';
+
+@import './pages/NotFound.scss';
+@import './pages/Home.scss';
+@import './pages/Booking.scss';
+
+@import './pages/History.scss';
+@import './pages/Hotels.scss';
+@import './pages/DayTours.scss';
+@import './pages/PackageTours.scss';
+@import './pages/Safaris.scss';
+@import './pages/Transportation.scss';
+
+
+
+body {
+  margin: 0;
+  padding: 0;
+  background: $nav-bar-color;
+  font-family: sans-serif;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  overflow-x:hidden;
+
+  p, h1, h2, h3, h4, h5, h6, li {
+    margin: 0;
+    padding: 0;
+    @include user-select(none);
+  }
+
+  p {
+    font-family: 'Cambay', Helvetica, sans-serif;
+  }
+
+  h1 {
+    font-family: 'Oswald', Helvetica, sans-serif;
+  }
+
+  h2, h3 {
+    font-family: 'Raleway', Helvetica, sans-serif;
+  }
+
+  h2 {
+    font-weight: 900;
+  }
+
+  h3 {
+    font-size: 0.9em;
+    font-weight: 100;
+  }
+  a{
+    text-decoration:none;
+  }
+}
diff --git a/src/scss/pages/_Booking.scss b/src/scss/pages/_Booking.scss
diff --git a/src/scss/pages/_DayTours.scss b/src/scss/pages/_DayTours.scss
@@ -0,0 +1,3 @@
+.day-tours {
+
+}
diff --git a/src/scss/pages/_History.scss b/src/scss/pages/_History.scss
@@ -0,0 +1,3 @@
+.history {
+
+}
diff --git a/src/scss/pages/_Home.scss b/src/scss/pages/_Home.scss
@@ -0,0 +1,10 @@
+.home {
+  @include fadein(3s);
+
+  .home-markdown {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+}
diff --git a/src/scss/pages/_Hotels.scss b/src/scss/pages/_Hotels.scss
@@ -0,0 +1,26 @@
+.hotels {
+
+  .smooth-scroll {
+    h3 {
+      @include transition(all, 0.1s, ease-in-out);
+    }
+    h3:hover {
+      color: #f1f1f1;
+    }
+  }
+
+  .hotels-section {
+    width: 100%;
+    height: 100vh;
+
+    .hotels-image {
+      width: 100%;
+      position: absolute;
+      height: 100vh;
+    }
+
+    select::-ms-expand {
+      display: none;
+    }
+  }
+}
diff --git a/src/scss/pages/_NotFound.scss b/src/scss/pages/_NotFound.scss
@@ -0,0 +1,7 @@
+.not-found {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/scss/pages/_PackageTours.scss b/src/scss/pages/_PackageTours.scss
@@ -0,0 +1,2 @@
+.package-tours {
+}
diff --git a/src/scss/pages/_Safaris.scss b/src/scss/pages/_Safaris.scss
@@ -0,0 +1,2 @@
+.safaris {
+}
diff --git a/src/scss/pages/_Tours.scss b/src/scss/pages/_Tours.scss
@@ -0,0 +1,5 @@
+.tours {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
diff --git a/src/scss/pages/_Transportation.scss b/src/scss/pages/_Transportation.scss
diff --git a/src/scss/pages/transportation/_CarRental.scss b/src/scss/pages/transportation/_CarRental.scss
@@ -0,0 +1,23 @@
+.car-rental{
+
+  .car-wrapper {
+    background-color: white;
+    margin: 20px;
+    overflow: hidden;
+    padding: 10px;
+
+    .car-img {
+      display: block;
+      float: left;
+      margin-right: 20px;
+    }
+
+    .car-markdown {
+      float: left;
+
+      h2 {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
diff --git a/src/scss/pages/transportation/_FlightInfo.scss b/src/scss/pages/transportation/_FlightInfo.scss
@@ -0,0 +1,2 @@
+.flight-info {
+}