initial commit

fundzin/settings.py → bcb/settings.py

@@ -1,26 +1,26 @@
 """
-Django settings for fundzin project.
+Django settings for bcb project.
 
-Generated by 'django-admin startproject' using Django 1.8.
+Generated by 'django-admin startproject' using Django 2.0.6.
 
 For more information on this file, see
-https://docs.djangoproject.com/en/1.8/topics/settings/
+https://docs.djangoproject.com/en/2.0/topics/settings/
 
 For the full list of settings and their values, see
-https://docs.djangoproject.com/en/1.8/ref/settings/
+https://docs.djangoproject.com/en/2.0/ref/settings/
 """
 
-# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 import os
 
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
 
 # Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/
+# See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = 'ip%^uxe%85kf$f4pgkf!5+056(l6q5!yuje1fgyw03y*9o079t'
+SECRET_KEY = '6c+@l58@$0nky8p2dm-$9a)!yr=7p!*1#q=ff@g#g*1&gx+@h+'
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
@@ -30,7 +30,7 @@ ALLOWED_HOSTS = []
 
 # Application definition
 
-INSTALLED_APPS = (
+INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -38,20 +38,19 @@ INSTALLED_APPS = (
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'home'
-)
+]
 
-MIDDLEWARE_CLASSES = (
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-    'django.middleware.security.SecurityMiddleware',
-)
+]
 
-ROOT_URLCONF = 'fundzin.urls'
+ROOT_URLCONF = 'bcb.urls'
 
 TEMPLATES = [
     {
@@ -71,11 +70,11 @@ TEMPLATES = [
     },
 ]
 
-WSGI_APPLICATION = 'fundzin.wsgi.application'
+WSGI_APPLICATION = 'bcb.wsgi.application'
 
 
 # Database
-# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
+# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
 
 DATABASES = {
     'default': {
@@ -85,8 +84,27 @@ DATABASES = {
 }
 
 
+# Password validation
+# https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
 # Internationalization
-# https://docs.djangoproject.com/en/1.8/topics/i18n/
+# https://docs.djangoproject.com/en/2.0/topics/i18n/
 
 LANGUAGE_CODE = 'en-us'
 
@@ -98,12 +116,14 @@ USE_L10N = True
 
 USE_TZ = True
 
+
 # Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/1.8/howto/static-files/
+# https://docs.djangoproject.com/en/2.0/howto/static-files/
 
 STATICFILES_DIRS = (
-    os.path.join(BASE_DIR,'static'),
+        os.path.join(BASE_DIR,'static'),
 )
 
 STATIC_URL = '/static/'
-STATIC_ROOT = os.path.join(BASE_DIR, 'all_staticfiles')
+
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

bcb/urls.py

@@ -0,0 +1,23 @@
+"""bcb URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path, include
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('home.urls')),
+]
+

fundzin/wsgi.py → bcb/wsgi.py

@@ -1,16 +1,16 @@
 """
-WSGI config for fundzin project.
+WSGI config for bcb project.
 
 It exposes the WSGI callable as a module-level variable named ``application``.
 
 For more information on this file, see
-https://docs.djangoproject.com/en/1.8/howto/deployment/wsgi/
+https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/
 """
 
 import os
 
 from django.core.wsgi import get_wsgi_application
 
-os.environ.setdefault("DJANGO_SETTINGS_MODULE", "fundzin.settings")
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "bcb.settings")
 
 application = get_wsgi_application()

fundzin/urls.py

@@ -1,7 +0,0 @@
-from django.conf.urls import include, url
-from django.contrib import admin
-
-urlpatterns = [
-    url(r'^admin/', include(admin.site.urls)),
-    url(r'', include('home.urls')),
-]

home/urls.py

@@ -1,6 +1,8 @@
-from django.conf.urls import url
+from django.urls import path
 from home import views
 
 urlpatterns = [
-    url(r'^$', views.home, name='home'),
+    path('', views.home, name='home'),
+    path('about', views.about, name='about'),
+    path('service', views.service, name='service'),
 ]

home/views.py

@@ -2,3 +2,9 @@ from django.shortcuts import render
 
 def home(request):
     return render(request, 'home.html')
+
+def about(request):
+    return render(request, 'about.html')
+
+def service(request):
+    return render(request, 'service.html')

manage.py

@@ -3,8 +3,13 @@ import os
 import sys
 
 if __name__ == "__main__":
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "fundzin.settings")
-
-    from django.core.management import execute_from_command_line
-
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "bcb.settings")
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
     execute_from_command_line(sys.argv)

requirements.txt

@@ -1,2 +1,2 @@
-Django==1.8
+Django==2.0.6
 

static/css/about.css

@@ -0,0 +1,119 @@
+@font-face {
+  src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
+  font-family: archivo-black;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bolder;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bold;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
+  font-family: open-sans;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: normal;
+  font-style: italic;
+}
+.banner {
+  height: 30vh;
+  background-image: url("../images/cover-image.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.banner:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(64, 62, 65, 0.6);
+}
+.banner h3 {
+  text-align: center;
+  align-self: center;
+  font-size: 36px;
+  color: white;
+  z-index: 1;
+}
+
+.about-content {
+  width: 90%;
+  margin: 50px auto;
+}
+.about-content .inner-container {
+  display: flex;
+  justify-content: space-between;
+}
+.about-content .inner-container .description {
+  width: 60%;
+  align-self: center;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+.about-content .inner-container .description .heading {
+  font-weight: bold;
+  font-size: 36px;
+}
+.about-content figure {
+  width: 30%;
+}
+.about-content figure img {
+  width: 100%;
+}
+.about-content p {
+  margin-top: 30px;
+}
+
+#our-team {
+  width: 90%;
+  margin: 30px auto 100px;
+}
+#our-team h3 {
+  font-size: 36px;
+  color: #403e41;
+  text-align: center;
+}
+#our-team .owl-team {
+  margin: 50px 0;
+}
+#our-team .section-container {
+  margin: 0 20px;
+}
+#our-team figure {
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+#our-team figure img {
+  width: 100%;
+}
+#our-team p {
+  text-align: center;
+  margin-top: 10px;
+}
+#our-team .owl-team-btn {
+  margin: 20px auto;
+  text-align: center;
+  padding: 20px 0;
+}
+#our-team .owl-team-btn i {
+  font-size: 16px;
+  padding: 0 10px;
+  color: #28aae2;
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=about.css.map */

static/css/common.css

@@ -0,0 +1,367 @@
+@font-face {
+  src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
+  font-family: archivo-black;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bolder;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bold;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
+  font-family: open-sans;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: normal;
+  font-style: italic;
+}
+*, *:before, *:after {
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+html, body {
+  font-family: open-sans;
+}
+html.non-scrollable, body.non-scrollable {
+  overflow: hidden;
+}
+
+mark {
+  background-color: transparent;
+}
+
+.temp-intro,
+#footer {
+  background-color: #403e41;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0;
+  color: #808285;
+  font-size: 14px;
+}
+.temp-intro .temp-name,
+#footer .temp-name {
+  margin-left: 125px;
+}
+@media screen and (max-width: 1024px) {
+  .temp-intro .temp-name,
+#footer .temp-name {
+    margin-left: 20px;
+  }
+}
+.temp-intro .temp-name mark,
+#footer .temp-name mark {
+  color: white;
+  font-weight: bold;
+  letter-spacing: 0.8px;
+}
+.temp-intro .temp-social,
+#footer .temp-social {
+  display: flex;
+  margin-right: 125px;
+}
+@media screen and (max-width: 1024px) {
+  .temp-intro .temp-social,
+#footer .temp-social {
+    margin-right: 20px;
+  }
+}
+.temp-intro .temp-social li,
+#footer .temp-social li {
+  list-style: none;
+  align-self: center;
+  padding: 0 10px;
+  font-size: 12px;
+}
+.temp-intro small,
+#footer small {
+  font-size: 14px;
+}
+@media screen and (max-width: 1024px) {
+  .temp-intro small,
+#footer small {
+    display: block;
+    text-align: center;
+    padding: 5px 0;
+  }
+}
+.temp-intro small:first-child,
+#footer small:first-child {
+  margin-left: 125px;
+}
+@media screen and (max-width: 1024px) {
+  .temp-intro small:first-child,
+#footer small:first-child {
+    margin: 0;
+  }
+}
+.temp-intro small:last-child,
+#footer small:last-child {
+  margin-right: 125px;
+}
+@media screen and (max-width: 1024px) {
+  .temp-intro small:last-child,
+#footer small:last-child {
+    margin: 0;
+  }
+}
+.temp-intro small mark,
+#footer small mark {
+  color: #d2d4d5;
+}
+
+@media screen and (max-width: 1024px) {
+  #footer {
+    display: block;
+  }
+}
+
+#page-header {
+  height: 20vh;
+  position: sticky;
+  display: flex;
+  top: 0;
+  left: 0;
+  background-color: white;
+  z-index: 5;
+  transition: height 500ms linear;
+}
+@media screen and (max-width: 1024px) {
+  #page-header {
+    height: 10vh;
+  }
+}
+#page-header.minimize {
+  height: 10vh;
+  padding: 10px 0;
+}
+#page-header .inner-header {
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  align-self: center;
+}
+@media screen and (max-width: 1024px) {
+  #page-header .inner-header {
+    width: 100%;
+    justify-content: space-around;
+  }
+}
+#page-header .temp-brand {
+  display: flex;
+  align-self: center;
+  width: 20%;
+  justify-content: center;
+}
+#page-header .temp-brand figure {
+  margin-right: 15px;
+}
+#page-header .temp-brand figure img {
+  width: 100%;
+}
+#page-header .temp-brand h1 {
+  font-size: 36px;
+  align-self: center;
+  letter-spacing: -0.65px;
+  font-family: "Archivo Black", sans-serif;
+}
+#page-header .temp-brand h1 mark {
+  color: #28aae2;
+}
+#page-header #desktop-navigation-menu {
+  width: 55%;
+  align-self: center;
+  font-size: 16px;
+}
+@media screen and (max-width: 1024px) {
+  #page-header #desktop-navigation-menu {
+    display: none;
+  }
+}
+#page-header #desktop-navigation-menu ul {
+  display: flex;
+  justify-content: space-between;
+}
+#page-header #desktop-navigation-menu ul li {
+  list-style: none;
+  color: #808285;
+}
+#page-header #desktop-navigation-menu ul li.active {
+  color: #28aae2;
+}
+#page-header #mobile-hamburger-menu {
+  display: none;
+  position: relative;
+  height: 25px;
+}
+#page-header #mobile-hamburger-menu.active .icon-line {
+  transform: rotate(45deg) translate(2px, 10px);
+}
+#page-header #mobile-hamburger-menu.active .icon-line:after {
+  transform: rotate(-95deg) translate(20px, 2px);
+}
+#page-header #mobile-hamburger-menu.active .icon-line:before {
+  opacity: 0;
+}
+@media screen and (max-width: 1024px) {
+  #page-header #mobile-hamburger-menu {
+    display: block;
+    align-self: center;
+  }
+}
+#page-header #mobile-hamburger-menu .icon-line {
+  display: inline-block;
+  width: 35px;
+  height: 5px;
+  background-color: black;
+  position: absolute;
+  transition: transform 500ms ease;
+}
+#page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after {
+  content: "";
+  display: inline-block;
+  width: 35px;
+  height: 5px;
+  position: absolute;
+}
+#page-header #mobile-hamburger-menu .icon-line:before {
+  top: 200%;
+  background-color: #28aae2;
+  transition: opacity 500ms ease;
+}
+#page-header #mobile-hamburger-menu .icon-line:after {
+  top: 400%;
+  background-color: black;
+  transition: transform 500ms ease;
+}
+
+#mobile-nav-menu {
+  display: none;
+}
+@media screen and (max-width: 1024px) {
+  #mobile-nav-menu {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    position: sticky;
+    top: 10vh;
+    z-index: 5;
+    background-color: white;
+    transition: height 500ms ease;
+  }
+  #mobile-nav-menu.show {
+    height: 90vh;
+  }
+  #mobile-nav-menu.show ul {
+    margin-top: 50px;
+  }
+  #mobile-nav-menu.show li {
+    opacity: 1;
+  }
+  #mobile-nav-menu ul li {
+    list-style: none;
+    font-size: 36px;
+    text-align: center;
+    padding: 10px 0;
+    opacity: 0;
+    transition: opacity 500ms ease;
+  }
+}
+
+.temp-contact-info {
+  background-color: #fafafa;
+  border-top: 1px solid #d2d4d5;
+  color: #57595b;
+}
+.temp-contact-info ul {
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+  .temp-contact-info ul {
+    width: 100%;
+  }
+}
+.temp-contact-info ul .owl-item img {
+  width: 10%;
+}
+.temp-contact-info ul li {
+  list-style: none;
+  border-left: 2px solid #d2d4d5;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  width: 35%;
+  padding: 20px 0;
+}
+@media screen and (max-width: 1024px) {
+  .temp-contact-info ul li {
+    width: 40%;
+  }
+  .temp-contact-info ul li .contact-content {
+    display: none;
+  }
+  .temp-contact-info ul li img {
+    width: 35%;
+  }
+  .temp-contact-info ul li.active {
+    width: 100%;
+  }
+  .temp-contact-info ul li.active img {
+    width: 10%;
+  }
+  .temp-contact-info ul li.active .contact-content {
+    display: block;
+  }
+}
+.temp-contact-info ul li:last-child {
+  border-right: 2px solid #d2d4d5;
+}
+.temp-contact-info ul li img {
+  width: 10%;
+  align-self: center;
+}
+@media screen and (max-width: 1024px) {
+  .temp-contact-info ul li img {
+    width: 30%;
+  }
+}
+.temp-contact-info ul li .contact-content {
+  margin-left: 20px;
+  color: #808285;
+}
+.temp-contact-info ul li .contact-content span {
+  display: block;
+}
+.temp-contact-info ul li .contact-content span:last-child {
+  color: #28aae2;
+}
+.temp-contact-info ul li .contact-content a {
+  display: block;
+  color: #28aae2;
+}
+
+/*# sourceMappingURL=common.css.map */

static/css/service.css

@@ -0,0 +1,91 @@
+@font-face {
+  src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
+  font-family: archivo-black;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bolder;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: bold;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
+  font-family: open-sans;
+  font-style: normal;
+}
+@font-face {
+  src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype");
+  font-family: open-sans;
+  font-weight: normal;
+  font-style: italic;
+}
+.banner {
+  height: 30vh;
+  background-image: url("../images/cover-image.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.banner:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(64, 62, 65, 0.6);
+}
+.banner h3 {
+  text-align: center;
+  align-self: center;
+  font-size: 36px;
+  color: white;
+  z-index: 1;
+}
+
+.service-content {
+  width: 90%;
+  margin: 60px auto;
+  display: flex;
+  justify-content: space-between;
+}
+.service-content .scene-container {
+  overflow: hidden;
+  width: 70%;
+}
+.service-content iframe {
+  overflow-x: hidden;
+  display: none;
+}
+.service-content iframe.active {
+  display: block;
+}
+.service-content ul {
+  border: 1px solid #d2d4d5;
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+.service-content ul li {
+  list-style: none;
+  padding: 25px 0;
+  border-bottom: 1px solid #808285;
+  color: #403e41;
+  text-align: center;
+  cursor: pointer;
+}
+.service-content ul li.active {
+  background-color: #28aae2;
+  color: white;
+}
+.service-content ul li:last-child {
+  border-bottom: none;
+}
+
+/*# sourceMappingURL=service.css.map */

static/js/home.js

@@ -179,4 +179,38 @@ $('#testimonial-carousel-left-btn').click(function () {
 $('#testimonial-carousel-right-btn').click(function () {
     "use strict";
     testimonial_carousel_Btn.trigger('prev.owl.carousel', [300]);
-});
+});
+
+var owl = $('.owl-team');
+owl.owlCarousel({
+	loop: true,
+	margin: 0,
+	autoplay: true,
+	autoplayTimeout: 3000,
+	autoplayHoverPause: true,
+	responsiveClass: true,
+	responsive: {
+		0: {
+			items: 1
+		},
+		600: {
+			items: 1
+		},
+		1000: {
+			items: 4,
+		}
+	}
+});
+
+var team_carousel_Btn = $('.owl-team');
+owl.owlCarousel();
+$('#team-carousel-left-btn').click(function () {
+    "use strict";
+    team_carousel_Btn.trigger('next.owl.carousel', [300]);
+});
+
+$('#team-carousel-right-btn').click(function () {
+    "use strict";
+    team_carousel_Btn.trigger('prev.owl.carousel', [300]);
+});
+

static/js/service.js

@@ -0,0 +1,20 @@
+var service_tabs = document.querySelectorAll('.service-content .side-content li');
+var scenes = document.querySelectorAll('.scene-container iframe');
+
+for (var i = 0; i < service_tabs.length; i++) {
+    service_tabs[i].addEventListener('click', change_tabs);
+}
+
+function change_tabs(e) {
+    for (var i = 0; i < service_tabs.length; i++) {
+
+        scenes[i].classList.remove('active');
+        service_tabs[i].classList.remove('active');
+
+        if (e.currentTarget.dataset.tab == scenes[i].dataset.sceneTarget) {
+            scenes[i].classList.add('active');
+        }
+    }
+
+    e.currentTarget.classList.add('active');
+}

static/scss/about.scss

@@ -0,0 +1,110 @@
+@import '_colors';
+@import 'custom_fonts';
+
+.banner {
+    height: 30vh;
+    background-image: url('../images/cover-image.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    &:after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-color: rgba($color: $dark_brown, $alpha: 0.6)
+    }
+
+    h3 {
+        text-align: center;
+        align-self: center;
+        font-size: $heading_size;
+        color: white;
+        z-index: 1;
+    }
+}
+
+.about-content {
+    width: 90%;
+    margin: 50px auto;
+
+    .inner-container {
+        display: flex;
+        justify-content: space-between;
+
+        .description {
+            width: 60%;
+            align-self: center;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .heading {
+                font-weight: bold;
+                font-size: $heading_size;
+            } 
+        }
+    }
+
+    figure {
+        width: 30%;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    p {
+        margin-top: 30px;
+    }
+}
+
+#our-team {
+    width: 90%;
+    margin: 30px auto 100px;
+
+    h3 {
+        font-size: $heading_size;
+        color: $dark_brown;
+        text-align: center;
+    }
+
+    .owl-team {
+        margin: 50px 0;
+    }
+
+    .section-container {
+        margin: 0 20px;
+    }
+
+    figure {
+        width: 100%;
+        display: block;
+        margin: 0 auto;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    p {
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .owl-team-btn {
+		margin: 20px auto;
+		text-align: center;
+		padding: 20px 0;
+	
+		i {
+			font-size: 16px;
+			padding: 0 10px;
+			color: $blue;
+			cursor: pointer;
+		}
+	}
+}

static/scss/common.scss

@@ -0,0 +1,374 @@
+@import '_colors';
+@import 'custom_fonts';
+
+*, *:before, *:after {
+	-webkit-tap-highlight-color: transparent;
+	box-sizing: border-box;
+}
+    
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+  
+a {
+	color: inherit;
+	text-decoration: none;
+}
+    
+html, body {
+	font-family: open-sans;
+
+	&.non-scrollable {
+		overflow: hidden;
+	}
+}
+
+mark {
+	background-color: transparent;
+}
+
+.temp-intro,
+#footer {
+	background-color: $dark_brown;
+	display: flex;
+	justify-content: space-between;
+	padding: 15px 0;
+	color: $dark_gray;
+	font-size: $other_size;
+
+	.temp-name {
+		margin-left: 125px;
+
+		@media screen and (max-width: 1024px) {
+			margin-left: 20px;
+		}
+
+		mark {
+			color: white;
+			font-weight: bold;
+			letter-spacing: 0.8px;
+		}
+	}
+
+	.temp-social {
+		display: flex;
+		margin-right: 125px;
+
+		@media screen and (max-width: 1024px) {
+			margin-right: 20px;
+		}
+
+		li {
+			list-style: none;
+			align-self: center;
+			padding: 0 10px;
+			font-size: 12px;
+		}
+	}
+
+	small {
+		font-size: $other_size;
+
+		@media screen and (max-width: 1024px) {
+			display: block;
+			text-align: center;
+			padding: 5px 0;
+		}
+
+		&:first-child {
+			margin-left: 125px;
+
+			@media screen and (max-width: 1024px) {
+				margin: 0;
+			}
+		}
+
+		&:last-child {
+			margin-right: 125px;
+
+			@media screen and (max-width: 1024px) {
+				margin: 0;
+			}
+		}
+
+		mark {
+			color: $light_gray;
+		}
+	}
+
+}
+
+#footer {
+
+	@media screen and (max-width: 1024px) {
+		display: block
+	}
+}
+
+#page-header {
+	height: $header_height;
+	position: sticky;
+	display: flex;
+	top: 0;
+	left: 0;
+	background-color: white;
+	z-index: 5;
+	transition: height 500ms linear;
+
+	@media screen and (max-width: 1024px) {
+		height: $header_height_scroll;
+	}
+
+	&.minimize {
+		height: $header_height_scroll;
+		padding: 10px 0;
+	}
+
+	.inner-header {
+		width: 80%;
+		display: flex;
+		justify-content: space-between;
+		margin: 0 auto;
+		align-self: center;
+
+		@media screen and (max-width: 1024px) {
+			width: 100%;
+			justify-content: space-around;
+		}
+	}
+
+	.temp-brand {
+		display: flex;
+		align-self: center;
+		width: 20%;
+		justify-content: center;
+
+		figure {
+			margin-right: 15px;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		h1 {
+			font-size: $heading_size;
+			align-self: center;
+			letter-spacing: -0.65px;
+			font-family: 'Archivo Black', sans-serif;
+
+			mark {
+				color: $blue;
+			}
+		}
+	}
+
+	#desktop-navigation-menu {
+		width: 55%;
+		align-self: center;
+		font-size: $paragraph_size;
+
+		@media screen and (max-width: 1024px) {
+			display: none;
+		}
+
+		ul {
+			display: flex;
+			justify-content: space-between;
+
+			li {
+				list-style: none;
+				color: $dark_gray;
+
+				&.active {
+					color: $blue;
+				}
+			}
+		}
+	}
+
+	#mobile-hamburger-menu {
+		display: none;
+		position: relative;
+		height: 25px;
+
+		&.active {
+
+			.icon-line {
+				transform: rotate(45deg) translate(2px, 10px);
+
+				&:after {
+					transform: rotate(-95deg) translate(20px, 2px);
+				}
+	
+				&:before {
+					opacity: 0;
+				}
+			}
+		}
+
+		@media screen and (max-width: 1024px) {
+			display: block;
+			align-self: center;
+		}
+
+		.icon-line {
+			display: inline-block;
+			width: 35px;
+			height: 5px;
+			background-color: black;
+			position: absolute;
+			transition: transform 500ms ease;
+
+			&:before,
+			&:after {
+				content: '';
+				display: inline-block;
+				width: 35px;
+				height: 5px;
+				position: absolute;
+			}
+
+			&:before {
+				top: 200%;
+				background-color: $blue;
+				transition: opacity 500ms ease;
+			}
+
+			&:after {
+				top: 400%;
+				background-color: black;
+				transition: transform 500ms ease;
+			}
+		}
+	}
+}
+
+#mobile-nav-menu {
+	display: none;
+
+	@media screen and (max-width: 1024px) {
+		display: block;
+		height: 0;
+		overflow: hidden;
+		position: sticky;
+		top: 10vh;
+		z-index: 5;
+		background-color: white;
+		transition: height 500ms ease;
+
+		&.show {
+			height: 90vh;
+
+			ul {
+				margin-top: 50px;
+			}
+
+			li {
+				opacity: 1;
+			}
+		}
+
+		ul {
+
+			li {
+				list-style: none;
+				font-size: $heading_size;
+				text-align: center;
+				padding: 10px 0;
+				opacity: 0;
+				transition: opacity 500ms ease;
+			}
+		}
+	}
+}
+
+.temp-contact-info {
+	background-color: $white_shade;
+	border-top: 1px solid $light_gray;
+	color: $brown;
+
+	ul {
+		display: flex;
+		width: 80%;
+		margin: 0 auto;
+
+		@media screen and (max-width: 1024px) {
+			width: 100%;
+		}
+
+		.owl-item {
+
+			img {
+				width: 10%;
+			}
+		}
+
+		li {
+			list-style: none;
+			border-left: 2px solid $light_gray;
+			font-size: $other_size;
+			display: flex;
+			justify-content: center;
+			width: 35%;
+			padding: 20px 0;
+
+			@media screen and (max-width: 1024px) {
+				width: 40%;
+
+				.contact-content {
+					display: none;
+				}
+
+				img {
+					width: 35%;
+				}
+
+				&.active {
+					width: 100%;
+
+					img {
+						width: 10%;
+					}
+
+					.contact-content { 
+						display: block;
+					}
+				}
+			}
+
+			&:last-child {
+				border-right: 2px solid $light_gray;
+			}
+
+			img {
+				width: 10%;
+				align-self: center;
+
+				@media screen and (max-width: 1024px) {
+					width: 30%;
+				}
+			}
+
+			.contact-content {
+				margin-left: 20px;
+				color: $dark_gray;
+
+				span {
+					display: block;
+
+					&:last-child {
+						color: $blue;
+					}
+				}
+
+				a {
+					display: block;
+					color: $blue;
+				}
+			}
+		}
+	}
+}

static/scss/home.scss

@@ -1,378 +1,6 @@
 @import '_colors';
 @import 'custom_fonts';
 
-*, *:before, *:after {
-	-webkit-tap-highlight-color: transparent;
-	box-sizing: border-box;
-}
-    
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-  
-a {
-	color: inherit;
-	text-decoration: none;
-}
-    
-html, body {
-	font-family: open-sans;
-
-	&.non-scrollable {
-		overflow: hidden;
-	}
-}
-
-mark {
-	background-color: transparent;
-}
-
-.temp-intro,
-#footer {
-	background-color: $dark_brown;
-	display: flex;
-	justify-content: space-between;
-	padding: 15px 0;
-	color: $dark_gray;
-	font-size: $other_size;
-
-	.temp-name {
-		margin-left: 125px;
-
-		@media screen and (max-width: 1024px) {
-			margin-left: 20px;
-		}
-
-		mark {
-			color: white;
-			font-weight: bold;
-			letter-spacing: 0.8px;
-		}
-	}
-
-	.temp-social {
-		display: flex;
-		margin-right: 125px;
-
-		@media screen and (max-width: 1024px) {
-			margin-right: 20px;
-		}
-
-		li {
-			list-style: none;
-			align-self: center;
-			padding: 0 10px;
-			font-size: 12px;
-		}
-	}
-
-	small {
-		font-size: $other_size;
-
-		@media screen and (max-width: 1024px) {
-			display: block;
-			text-align: center;
-			padding: 5px 0;
-		}
-
-		&:first-child {
-			margin-left: 125px;
-
-			@media screen and (max-width: 1024px) {
-				margin: 0;
-			}
-		}
-
-		&:last-child {
-			margin-right: 125px;
-
-			@media screen and (max-width: 1024px) {
-				margin: 0;
-			}
-		}
-
-		mark {
-			color: $light_gray;
-		}
-	}
-
-}
-
-#footer {
-
-	@media screen and (max-width: 1024px) {
-		display: block
-	}
-}
-
-#page-header {
-	height: $header_height;
-	position: sticky;
-	display: flex;
-	top: 0;
-	left: 0;
-	background-color: white;
-	z-index: 5;
-	transition: height 500ms linear;
-
-	@media screen and (max-width: 1024px) {
-		height: $header_height_scroll;
-	}
-
-	&.minimize {
-		height: $header_height_scroll;
-		padding: 10px 0;
-	}
-
-	.inner-header {
-		width: 80%;
-		display: flex;
-		justify-content: space-between;
-		margin: 0 auto;
-		align-self: center;
-
-		@media screen and (max-width: 1024px) {
-			width: 100%;
-			justify-content: space-around;
-		}
-	}
-
-	.temp-brand {
-		display: flex;
-		align-self: center;
-		width: 20%;
-		justify-content: center;
-
-		figure {
-			margin-right: 15px;
-
-			img {
-				width: 100%;
-			}
-		}
-
-		h1 {
-			font-size: $heading_size;
-			align-self: center;
-			letter-spacing: -0.65px;
-			font-family: 'Archivo Black', sans-serif;
-
-			mark {
-				color: $blue;
-			}
-		}
-	}
-
-	#desktop-navigation-menu {
-		width: 55%;
-		align-self: center;
-		font-size: $paragraph_size;
-
-		@media screen and (max-width: 1024px) {
-			display: none;
-		}
-
-		ul {
-			display: flex;
-			justify-content: space-between;
-
-			li {
-				list-style: none;
-				color: $dark_gray;
-
-				&.active {
-					color: $blue;
-				}
-			}
-		}
-	}
-
-	#mobile-hamburger-menu {
-		display: none;
-		position: relative;
-		height: 25px;
-
-		&.active {
-
-			.icon-line {
-				transform: rotate(45deg) translate(2px, 10px);
-
-				&:after {
-					transform: rotate(-95deg) translate(20px, 2px);
-				}
-	
-				&:before {
-					opacity: 0;
-				}
-			}
-		}
-
-		@media screen and (max-width: 1024px) {
-			display: block;
-			align-self: center;
-		}
-
-		.icon-line {
-			display: inline-block;
-			width: 35px;
-			height: 5px;
-			background-color: black;
-			position: absolute;
-			transition: transform 500ms ease;
-
-			&:before,
-			&:after {
-				content: '';
-				display: inline-block;
-				width: 35px;
-				height: 5px;
-				position: absolute;
-			}
-
-			&:before {
-				top: 200%;
-				background-color: $blue;
-				transition: opacity 500ms ease;
-			}
-
-			&:after {
-				top: 400%;
-				background-color: black;
-				transition: transform 500ms ease;
-			}
-		}
-	}
-}
-
-#mobile-nav-menu {
-	display: none;
-
-	@media screen and (max-width: 1024px) {
-		display: block;
-		height: 0;
-		overflow: hidden;
-		position: sticky;
-		top: 10vh;
-		z-index: 5;
-		background-color: white;
-		transition: height 500ms ease;
-
-		&.show {
-			height: 90vh;
-
-			ul {
-				margin-top: 50px;
-			}
-
-			li {
-				opacity: 1;
-			}
-		}
-
-		ul {
-
-			li {
-				list-style: none;
-				font-size: $heading_size;
-				text-align: center;
-				padding: 10px 0;
-				opacity: 0;
-				transition: opacity 500ms ease;
-			}
-		}
-	}
-}
-
-.temp-contact-info {
-	background-color: $white_shade;
-	border-top: 1px solid $light_gray;
-	color: $brown;
-
-	ul {
-		display: flex;
-		width: 80%;
-		margin: 0 auto;
-
-		@media screen and (max-width: 1024px) {
-			width: 100%;
-		}
-
-		.owl-item {
-
-			img {
-				width: 10%;
-			}
-		}
-
-		li {
-			list-style: none;
-			border-left: 2px solid $light_gray;
-			font-size: $other_size;
-			display: flex;
-			justify-content: center;
-			width: 35%;
-			padding: 20px 0;
-
-			@media screen and (max-width: 1024px) {
-				width: 40%;
-
-				.contact-content {
-					display: none;
-				}
-
-				img {
-					width: 35%;
-				}
-
-				&.active {
-					width: 100%;
-
-					img {
-						width: 10%;
-					}
-
-					.contact-content { 
-						display: block;
-					}
-				}
-			}
-
-			&:last-child {
-				border-right: 2px solid $light_gray;
-			}
-
-			img {
-				width: 10%;
-				align-self: center;
-
-				@media screen and (max-width: 1024px) {
-					width: 30%;
-				}
-			}
-
-			.contact-content {
-				margin-left: 20px;
-				color: $dark_gray;
-
-				span {
-					display: block;
-
-					&:last-child {
-						color: $blue;
-					}
-				}
-
-				a {
-					display: block;
-					color: $blue;
-				}
-			}
-		}
-	}
-}
-
 section {
 
 	h3 {
@@ -566,6 +194,26 @@ section {
 			flex-direction: column-reverse;
 			padding-bottom: 30px;
 		}
+
+		a {
+			display: inline-block;
+			margin: 10px 0;
+
+			button {
+				color: white;
+				padding: 10px 15px;
+				background-color: $blue;
+				border: none;
+				font-size: 16px;
+				cursor: pointer;
+				outline: none;
+				transition: background-color 500ms ease;
+
+				&:hover {
+					background-color: $dark_brown;
+				}
+			}
+		}
 	}
 
 	figure {
@@ -786,6 +434,8 @@ section {
 	.testimonial-carousel-btn {
 		text-align: center;
 		padding-bottom: 30px;
+		position: relative;
+		z-index: 2;
 
 		i {
 			padding: 10px;

static/scss/service.scss

@@ -0,0 +1,75 @@
+@import '_colors';
+@import 'custom_fonts';
+
+.banner {
+    height: 30vh;
+    background-image: url('../images/cover-image.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    &:after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-color: rgba($color: $dark_brown, $alpha: 0.6)
+    }
+
+    h3 {
+        text-align: center;
+        align-self: center;
+        font-size: $heading_size;
+        color: white;
+        z-index: 1;
+    }
+}
+
+.service-content {
+    width: 90%;
+    margin: 60px auto;
+    display: flex;
+    justify-content: space-between;
+
+    .scene-container {
+        overflow: hidden;
+        width: 70%;
+    }
+
+    iframe {
+        overflow-x: hidden;
+        display: none;
+
+        &.active {
+            display: block;
+        }
+    }
+
+    ul {
+        border: 1px solid $light_gray;
+        width: 25%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        li {
+            list-style: none;
+            padding: 25px 0;
+            border-bottom: 1px solid $dark_gray;
+            color: $dark_brown;
+            text-align: center;
+            cursor: pointer;
+
+            &.active {
+                background-color: $blue;
+                color: white;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+}

templates/about.html

@@ -0,0 +1,109 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+
+{% block stylesheets %}
+<link rel="stylesheet" href="{% static 'css/about.css' %}">
+{% endblock stylesheets %}
+
+{% block navigation %} 
+{% include 'partials/navigation.html' with menu='About' %}
+{% endblock navigation %}
+
+{% block content %}
+<section class="banner">
+    <h3>About Us</h3>
+</section>
+<section class="about-content">
+    <div class="inner-container">
+        <figure>
+            <img src="{% static 'images/cover-image.jpg' %}" alt="">
+        </figure>
+        <div class="description">
+            <div class="heading">Hello, Bankers!</div>
+            <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
+                Delectus, incidunt! Illum blanditiis quas rem in adipisci 
+                dolor ad, debitis quibusdam pariatur doloribus corrupti dolore 
+                laborum dicta odio voluptatem aliquam placeat.
+                Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+                omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+                ipsam nisi id amet facere!
+                Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+                omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+                ipsam nisi id amet facere!
+                Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+                omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+                ipsam nisi id amet facere!
+            </p>
+        </div>
+    </div>
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+        omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+        ipsam nisi id amet facere!dolor ad, debitis quibusdam pariatur doloribus corrupti dolore 
+        laborum dicta odio voluptatem aliquam placeat.
+        Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+        omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+        ipsam nisi id amet facere!
+        Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+        omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+        ipsam nisi id amet facere!
+        Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+        omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+        ipsam nisi id amet facere!
+        Modi laboriosam possimus sint voluptatum veniam, in vel vitae 
+        omnis accusantium hic, qui laudantium accusamus assumenda placeat 
+        ipsam nisi id amet facere!
+    </p>
+</section>
+<section id="our-team">
+    <h3>Our Team</h3>
+   <div class="owl-carousel owl-team">
+        <section class="section-container">
+            <figure>
+                <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            </figure>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
+            </p>
+        </section>
+        <section class="section-container">
+            <figure>
+                <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            </figure>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
+            </p>
+        </section>
+        <section class="section-container">
+            <figure>
+                <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            </figure>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
+            </p>
+        </section>
+        <section class="section-container">
+            <figure>
+                <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            </figure>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
+            </p>
+        </section>
+        <section class="section-container">
+            <figure>
+                <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            </figure>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
+            </p>
+        </section>
+   </div>
+   <div class="owl-team-btn">
+        <i class="fas fa-chevron-left" id="team-carousel-right-btn"></i>
+        <i class="fas fa-chevron-right" id="team-carousel-left-btn"></i>
+    </div>
+</section>
+{% endblock content %}

templates/base.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Fundzin</title>
+        {% load staticfiles %}
+        <!-- Using Google hot link to render fonts, downloaded Archgivo Black fonts isn't same as the previewed. -->
+        <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
+        <link rel="stylesheet" href="{% static 'css/fontawesome-all.min.css' %}">
+        <link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.carousel.min.css' %}">
+        <link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.theme.default.min.css' %}">
+        <link rel="stylesheet" href="{% static 'css/common.css' %}">
+        {% block stylesheets %}
+        {% endblock stylesheets %}
+    </head>
+    <body>
+        <div class="temp-intro">
+            <div class="temp-name">Welcome To <mark>Fundzin</mark></div>
+            <ul class="temp-social">
+                <li>
+                    <a href="#"><i class="fab fa-facebook-f"></i></a>
+                </li>
+                <li>
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                </li>
+                <li>
+                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                </li>
+                <li>
+                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
+                </li>
+            </ul>
+        </div>
+        {% block navigation %}
+        {% endblock navigation %}
+        <nav id="mobile-nav-menu">
+            <ul>
+                <li class="active">
+                    <a href="#home">HOME</a>
+                </li>
+                <li>
+                    <a href="#about">ABOUT</a>
+                </li>
+                <li>
+                    <a href="#service">SERVICES</a>
+                </li>
+                <li>
+                    <a href="#testimonial">TESTIMONIAL</a>
+                </li>
+                <li>
+                    <a href="#enquiry">ENQUIRY</a>
+                </li>
+                <li>
+                    <a href="#contact">CONTACT</a>
+                </li>
+            </ul>
+        </nav>
+        {% block content %}
+        {% endblock content %}
+        <footer id="footer">
+            <small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
+            <small>Digitized By <mark>Webtrigon Mini</mark></small>
+        </footer>
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+        <script src="{% static 'OwlCarousel-plugins/owl.carousel.min.js' %}"></script>
+        <script src="{% static 'js/home.js' %}"></script>
+        {% block scripts %}
+        {% endblock scripts %}
+    </body>
+</html>

templates/home.html

@@ -1,36 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Fundzin</title>
-	{% load staticfiles %}
-	<!-- Using Google hot link to render fonts, downloaded Archgivo Black fonts isn't same as the previewed. -->
-	<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
-	<link rel="stylesheet" href="{% static 'css/fontawesome-all.min.css' %}">
-	<link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.carousel.min.css' %}">
-	<link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.theme.default.min.css' %}">
-	<link rel="stylesheet" href="{% static 'css/home.css' %}">
-</head>
-<body>
-	<div class="temp-intro">
-		<div class="temp-name">Welcome To <mark>Fundzin</mark></div>
-		<ul class="temp-social">
-			<li>
-				<a href="#"><i class="fab fa-facebook-f"></i></a>
-			</li>
-			<li>
-				<a href="#"><i class="fab fa-twitter"></i></a>
-			</li>
-			<li>
-				<a href="#"><i class="fab fa-linkedin-in"></i></a>
-			</li>
-			<li>
-				<a href="#"><i class="fab fa-google-plus-g"></i></a>
-			</li>
-		</ul>
-	</div>
+{% extends 'base.html' %}
+{% load staticfiles %}
+
+{% block stylesheets %}
+<link rel="stylesheet" href="{% static 'css/home.css' %}">
+{% endblock stylesheets %}
+
+{% block content %}
 	<header id="page-header">
 		<div class="inner-header">
 			<div class="temp-brand">
@@ -66,28 +41,6 @@
 			</section>
 		</div>
 	</header>
-	<nav id="mobile-nav-menu">
-		<ul>
-			<li class="active">
-				<a href="#home">HOME</a>
-			</li>
-			<li>
-				<a href="#about">ABOUT</a>
-			</li>
-			<li>
-				<a href="#service">SERVICES</a>
-			</li>
-			<li>
-				<a href="#testimonial">TESTIMONIAL</a>
-			</li>
-			<li>
-				<a href="#enquiry">ENQUIRY</a>
-			</li>
-			<li>
-				<a href="#contact">CONTACT</a>
-			</li>
-		</ul>
-	</nav>
 	<div class="temp-contact-info">
 		<ul>
 			<li>
@@ -143,6 +96,9 @@
 					aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 					nulla pariatur.
 				</p>
+				<a href="/about">
+					<button type="button">Read More</button>
+				</a>
 			</div>
 			<figure>
 				<img src="{% static 'images/03.png' %}" alt="">
@@ -156,84 +112,84 @@
 		</p>
 		<ul class="owl-carousel owl-service">
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/car.svg' %}" alt="">
 					<div class="title">Sales &amp; Trading</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/payment-method.svg' %}" alt="">
 					<div class="title">Financial Advisors</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/economic-growth.svg' %}" alt="">
 					<div class="title">Investment Planning</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/bank-building.svg' %}" alt="">
 					<div class="title">Tax Consulting</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/car.svg' %}" alt="">
 					<div class="title">Sales &amp; Trading</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/payment-method.svg' %}" alt="">
 					<div class="title">Financial Advisors</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/economic-growth.svg' %}" alt="">
 					<div class="title">Investment Planning</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 			<li>
-				<div class="inner-contents">
+				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/bank-building.svg' %}" alt="">
 					<div class="title">Tax Consulting</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
 					</p>
-				</div>
+				</a>
 			</li>
 		</ul>
 		<div class="service-carousel-btn">
@@ -385,12 +341,4 @@
 			</ul>
 		</div>
 	</section>
-	<footer id="footer">
-		<small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
-		<small>Digitalized By <mark>Webtrigon Mini</mark></small>
-	</footer>
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-	<script src="{% static 'OwlCarousel-plugins/owl.carousel.min.js' %}"></script>
-	<script src="{% static 'js/home.js' %}"></script>
-</body>
-</html>
+{% endblock content %}

templates/partials/navigation.html

@@ -0,0 +1,39 @@
+{% load staticfiles %}
+
+{% block navigation %}
+<header id="page-header">
+    <div class="inner-header">
+        <div class="temp-brand">
+            <figure>
+                <img src="{% static 'images/logo-icon.png' %}" alt="">
+            </figure>
+            <h1><mark>Fundz</mark>in</h1>
+        </div>
+        <nav id="desktop-navigation-menu">
+            <ul>
+                <li {% if menu == 'Home' %} class="active" {% endif %}>
+                    <a href="/">HOME</a>
+                </li>
+                <li {% if menu == 'About' %} class="active" {% endif %}>
+                    <a href="/">ABOUT</a>
+                </li>
+                <li {% if menu == 'Service' %} class="active" {% endif %}>
+                    <a href="/">SERVICES</a>
+                </li>
+                <li>
+                    <a href="/">TESTIMONIAL</a>
+                </li>
+                <li>
+                    <a href="/">ENQUIRY</a>
+                </li>
+                <li>
+                    <a href="/">CONTACT</a>
+                </li>
+            </ul>
+        </nav>
+        <section id="mobile-hamburger-menu">
+            <span class="icon-line"></span>
+        </section>
+    </div>
+</header>
+{% endblock navigation %}

templates/service.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+
+{% block stylesheets %}
+<link rel="stylesheet" href="{% static 'css/service.css' %}">
+{% endblock stylesheets %}
+
+{% block navigation %} 
+{% include 'partials/navigation.html' with menu='Service' %}
+{% endblock navigation %}
+
+{% block content %}
+<section class="banner">
+    <h3>Services</h3>
+</section>
+<section class="service-content">
+    <ul class="side-content">
+        <li data-tab = "sales" class="active">Sales &amp; Trading</li>
+        <li data-tab = "financial" >Financial Advisors</li>
+        <li data-tab = "investment">Investment Planning</li>
+        <li data-tab = "tax">Tax Consultants</li>
+        <li data-tab = "loan">Financial Advisors</li>
+        <li data-tab = "consultant">Tax Consultants</li>
+        <li data-tab = "planning">Investment Planning</li>
+    </ul>
+    <div class="scene-container">
+        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" class = "active" data-scene-target = "sales"></iframe>
+        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "financial"></iframe>
+        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "investment"></iframe>
+        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "tax"></iframe>
+        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "loan"></iframe>
+        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "consultant"></iframe>
+        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "planning"></iframe>
+    </div>
+</section>
+{% endblock content %}
+
+{% block scripts %}
+<script src="{% static 'js/service.js' %}" ></script>
+{% endblock scripts %}