diff --git a/fundzin/__init__.py b/bcb/__init__.py similarity index 100% rename from fundzin/__init__.py rename to bcb/__init__.py diff --git a/fundzin/settings.py b/bcb/settings.py similarity index 62% rename from fundzin/settings.py rename to bcb/settings.py index 1840ad5..d5b41e2 100644 --- a/fundzin/settings.py +++ b/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') \ No newline at end of file + +STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') diff --git a/bcb/urls.py b/bcb/urls.py new file mode 100644 index 0000000..e681c31 --- /dev/null +++ b/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')), +] + diff --git a/fundzin/wsgi.py b/bcb/wsgi.py similarity index 58% rename from fundzin/wsgi.py rename to bcb/wsgi.py index 609e3e0..b367fb2 100644 --- a/fundzin/wsgi.py +++ b/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() diff --git a/fundzin/urls.py b/fundzin/urls.py deleted file mode 100644 index 414ed49..0000000 --- a/fundzin/urls.py +++ /dev/null @@ -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')), -] diff --git a/home/urls.py b/home/urls.py index e04a1f8..3cd2054 100644 --- a/home/urls.py +++ b/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'), ] \ No newline at end of file diff --git a/home/views.py b/home/views.py index cf6e5a8..249132d 100644 --- a/home/views.py +++ b/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') diff --git a/manage.py b/manage.py index dc7a296..40a2fb0 100644 --- a/manage.py +++ b/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) diff --git a/requirements.txt b/requirements.txt index 2be7bbd..d2372dd 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1,2 @@ -Django==1.8 +Django==2.0.6 diff --git a/static/css/about.css b/static/css/about.css new file mode 100644 index 0000000..4d4539d --- /dev/null +++ b/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 */ diff --git a/static/css/common.css b/static/css/common.css new file mode 100644 index 0000000..e218aa7 --- /dev/null +++ b/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 */ diff --git a/static/css/home.css b/static/css/home.css index ecdd2f1..817df3f 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,695 +1,602 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; } + font-weight: bolder; +} @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; } + font-weight: bold; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; } + 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; } - + font-style: italic; +} section h3 { font-size: 36px; - font-family: 'Archivo Black', sans-serif; + font-family: "Archivo Black", sans-serif; line-height: 1.2; - color: #403e41; } - @media screen and (max-width: 1024px) { - section h3 { - text-align: center; } } - section h3 mark { - color: #28aae2; } + color: #403e41; +} +@media screen and (max-width: 1024px) { + section h3 { + text-align: center; + } +} +section h3 mark { + color: #28aae2; +} section p { color: #808285; font-size: 16px; - letter-spacing: 0.8px; } + letter-spacing: 0.8px; +} section figure { - width: 50%; } - section figure img { - width: 100%; - height: 100%; } + width: 50%; +} +section figure img { + width: 100%; + height: 100%; +} section .description { width: 50%; - align-self: center; } - @media screen and (max-width: 1024px) { - section .description { - width: 100%; } } - section .description p { - line-height: 1.8; } + align-self: center; +} +@media screen and (max-width: 1024px) { + section .description { + width: 100%; + } +} +section .description p { + line-height: 1.8; +} #home { box-shadow: 0 8px 20px -6px #a6a8ab; - display: flex; } - @media screen and (max-width: 1024px) { - #home { - flex-direction: column; } } + display: flex; +} +@media screen and (max-width: 1024px) { + #home { + flex-direction: column; + } +} +#home p { + padding: 30px 0; + width: 75%; +} +@media screen and (max-width: 1024px) { #home p { - padding: 30px 0; - width: 75%; } - @media screen and (max-width: 1024px) { - #home p { - margin: 0 auto; } } + margin: 0 auto; + } +} +#home figure { + opacity: 1; + transition: opacity 500ms ease; +} +@media screen and (max-width: 1024px) { #home figure { - opacity: 1; - transition: opacity 500ms ease; } - @media screen and (max-width: 1024px) { - #home figure { - width: 100%; - margin-top: 30px; } } - #home figure.hide { - opacity: 0; } - #home .description { - overflow-x: hidden; } - #home .description p, - #home .description button { - position: relative; - left: 0; - opacity: 1; - transition: left 500ms ease, opacity 500ms ease; } - #home .description h3 { - opacity: 1; - left: 0; - position: relative; - transition: left 500ms ease, opacity 500ms ease; } - @media screen and (max-width: 1024px) { - #home .description h3 { - position: absolute; - left: 50%; - width: 100%; - transform: translateX(-50%); } } - #home .description p { - transition-delay: 500ms; } - #home .description button { - transition-delay: 1000ms; } - #home .description.hide h3, - #home .description.hide p, - #home .description.hide button { - left: 10%; - opacity: 0; } + width: 100%; + margin-top: 30px; + } +} +#home figure.hide { + opacity: 0; +} +#home .description { + overflow-x: hidden; +} +#home .description p, +#home .description button { + position: relative; + left: 0; + opacity: 1; + transition: left 500ms ease, opacity 500ms ease; +} +#home .description h3 { + opacity: 1; + left: 0; + position: relative; + transition: left 500ms ease, opacity 500ms ease; +} +@media screen and (max-width: 1024px) { + #home .description h3 { + position: absolute; + left: 50%; + width: 100%; + transform: translateX(-50%); + } +} +#home .description p { + transition-delay: 500ms; +} +#home .description button { + transition-delay: 1000ms; +} +#home .description.hide h3, +#home .description.hide p, +#home .description.hide button { + left: 10%; + opacity: 0; +} +#home button { + border: none; + background-color: #28aae2; + color: white; + padding: 20px 30px; + outline: none; + font-size: 16px; + cursor: pointer; +} +@media screen and (max-width: 1024px) { #home button { - border: none; - background-color: #28aae2; - color: white; - padding: 20px 30px; - outline: none; - font-size: 16px; - cursor: pointer; } - @media screen and (max-width: 1024px) { - #home button { - display: block; - margin: 0 auto; - margin-bottom: 40px; } } - #home button .fas { - padding-left: 12px; - font-size: 14px; - position: relative; - left: 0; - transition: left 500ms ease; } - #home button:hover .fas { - left: 10px; } + display: block; + margin: 0 auto; + margin-bottom: 40px; + } +} +#home button .fas { + padding-left: 12px; + font-size: 14px; + position: relative; + left: 0; + transition: left 500ms ease; +} +#home button:hover .fas { + left: 10px; +} #home, #about { - position: relative; } - @media screen and (max-width: 1024px) { - #home, - #about { - padding-top: 100px; } } - @media screen and (max-width: 1024px) { - #home h3, - #about h3 { - position: absolute; - top: 35px; - left: 50%; - transform: translateX(-50%); - width: 100%; } } + position: relative; +} +@media screen and (max-width: 1024px) { + #home, +#about { + padding-top: 100px; + } +} +@media screen and (max-width: 1024px) { + #home h3, +#about h3 { + position: absolute; + top: 35px; + left: 50%; + transform: translateX(-50%); + width: 100%; + } +} #about { background-color: #f0f0f0; display: block; - margin-bottom: 225px; } - @media screen and (max-width: 1024px) { - #about { - margin-bottom: 50px; } } + margin-bottom: 225px; +} +@media screen and (max-width: 1024px) { + #about { + margin-bottom: 50px; + } +} +#about .wrapper { + width: 85%; + margin: 0 auto; + display: flex; + justify-content: space-around; +} +@media screen and (max-width: 1024px) { #about .wrapper { - width: 85%; - margin: 0 auto; - display: flex; - justify-content: space-around; } - @media screen and (max-width: 1024px) { - #about .wrapper { - flex-direction: column-reverse; - padding-bottom: 30px; } } + flex-direction: column-reverse; + padding-bottom: 30px; + } +} +#about .wrapper a { + display: inline-block; + margin: 10px 0; +} +#about .wrapper a button { + color: white; + padding: 10px 15px; + background-color: #28aae2; + border: none; + font-size: 16px; + cursor: pointer; + outline: none; + transition: background-color 500ms ease; +} +#about .wrapper a button:hover { + background-color: #403e41; +} +#about figure { + width: 35%; + position: relative; + left: 6%; + opacity: 0; + transition: left 1000ms ease, opacity 1000ms ease; +} +#about figure.show { + left: 0; + opacity: 1; +} +@media screen and (max-width: 1024px) { #about figure { - width: 35%; - position: relative; - left: 6%; - opacity: 0; - transition: left 1000ms ease, opacity 1000ms ease; } - #about figure.show { - left: 0; - opacity: 1; } - @media screen and (max-width: 1024px) { - #about figure { - width: 100%; - display: block; - margin: 0 auto; } } - #about figure img { - transform: scale(1.3); - top: 25%; - position: relative; - width: 100%; } - @media screen and (max-width: 1024px) { - #about figure img { - transform: scale(1); } } + width: 100%; + display: block; + margin: 0 auto; + } +} +#about figure img { + transform: scale(1.3); + top: 25%; + position: relative; + width: 100%; +} +@media screen and (max-width: 1024px) { + #about figure img { + transform: scale(1); + } +} +#about .description { + opacity: 0; + transition: opacity 1000ms ease; + width: 55%; +} +@media screen and (max-width: 1024px) { #about .description { - opacity: 0; - transition: opacity 1000ms ease; - width: 55%; } - @media screen and (max-width: 1024px) { - #about .description { - width: 100%; } } - #about .description.show { - opacity: 1; } - #about p { - padding: 14px 0; } - #about p:nth-of-type(1) { - font-style: italic; - font-weight: bold; - color: black; } + width: 100%; + } +} +#about .description.show { + opacity: 1; +} +#about p { + padding: 14px 0; +} +#about p:nth-of-type(1) { + font-style: italic; + font-weight: bold; + color: black; +} #service { - display: block; } - #service h3 { - text-align: center; } + display: block; +} +#service h3 { + text-align: center; +} +#service p { + width: 50%; + margin: 0 auto; + text-align: center; + padding: 20px 0 40px; + line-height: 1.8; +} +@media screen and (max-width: 1024px) { #service p { - width: 50%; - margin: 0 auto; - text-align: center; - padding: 20px 0 40px; - line-height: 1.8; } - @media screen and (max-width: 1024px) { - #service p { - width: 90%; } } + width: 90%; + } +} +#service .owl-service { + width: 82%; + margin: 0 auto; + display: block; +} +@media screen and (max-width: 1024px) { #service .owl-service { - width: 82%; - margin: 0 auto; - display: block; } - @media screen and (max-width: 1024px) { - #service .owl-service { - width: 100%; } } - #service .owl-service li { - list-style: none; - background-color: #f0f0f0; - width: 90%; - margin: 0 auto; } - #service .owl-service li .inner-contents { - padding-top: 20px; } - #service .owl-service li .inner-contents img { - width: 50px; - height: 50px; - display: block; - margin: 0 auto; - padding-top: 20px; } - #service .owl-service li .inner-contents p { - width: 90%; - margin: 0 auto; - font-size: 14px; } - #service .owl-service li .inner-contents .title { - text-align: center; - padding-top: 20px; - color: #403e41; - font-size: 14px; - font-weight: bold; } - #service .service-carousel-btn { - margin: 20px auto; - text-align: center; - padding: 20px 0; } - #service .service-carousel-btn i { - font-size: 16px; - padding: 0 10px; - color: #28aae2; - cursor: pointer; } + width: 100%; + } +} +#service .owl-service li { + list-style: none; + background-color: #f0f0f0; + width: 90%; + margin: 0 auto; +} +#service .owl-service li .inner-contents { + padding-top: 20px; +} +#service .owl-service li .inner-contents img { + width: 50px; + height: 50px; + display: block; + margin: 0 auto; + padding-top: 20px; +} +#service .owl-service li .inner-contents p { + width: 90%; + margin: 0 auto; + font-size: 14px; +} +#service .owl-service li .inner-contents .title { + text-align: center; + padding-top: 20px; + color: #403e41; + font-size: 14px; + font-weight: bold; +} +#service .service-carousel-btn { + margin: 20px auto; + text-align: center; + padding: 20px 0; +} +#service .service-carousel-btn i { + font-size: 16px; + padding: 0 10px; + color: #28aae2; + cursor: pointer; +} #testimonial { background-color: #f0f0f0; - padding: 20px 0; } - #testimonial h3 { - text-align: center; - padding: 20px 0; } + padding: 20px 0; +} +#testimonial h3 { + text-align: center; + padding: 20px 0; +} +#testimonial p { + text-align: center; + width: 50%; + margin: 0 auto; +} +@media screen and (max-width: 1024px) { #testimonial p { - text-align: center; - width: 50%; - margin: 0 auto; } - @media screen and (max-width: 1024px) { - #testimonial p { - width: 90%; } } + width: 90%; + } +} +#testimonial .owl-testimonial { + width: 80%; + margin: 0 auto; + height: 55vh; +} +@media screen and (max-width: 1024px) { #testimonial .owl-testimonial { - width: 80%; - margin: 0 auto; - height: 55vh; } - @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial { - width: 100%; } } - #testimonial .owl-testimonial .owl-item-testimonial { - display: flex; - width: 97%; - background-color: white; - margin: 50px 0; } - @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial .owl-item-testimonial { - width: 90%; - margin: 50px auto; } } - #testimonial .owl-testimonial .owl-item-testimonial figure { - width: 250px; - height: 300px; } - @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial .owl-item-testimonial figure { - width: 350px; } } - #testimonial .owl-testimonial .owl-item-testimonial figure img { - width: 100%; - height: 100%; - object-fit: cover; } - #testimonial .owl-testimonial .owl-item-testimonial .description { - margin: 0 20px; - padding: 10px 0; } - #testimonial .owl-testimonial .owl-item-testimonial .description .person-name, - #testimonial .owl-testimonial .owl-item-testimonial .description .person-info { - font-size: 14px; - font-weight: bold; } - #testimonial .owl-testimonial .owl-item-testimonial .description .person-info { - padding: 2px 0; - color: #808285; } - #testimonial .owl-testimonial .owl-item-testimonial .description .person-name { - color: #28aae2; - padding-top: 20px; } - #testimonial .owl-testimonial .owl-item-testimonial blockquote { - font-size: 16px; - color: #808285; - line-height: 1.8; } - #testimonial .testimonial-carousel-btn { - text-align: center; - padding-bottom: 30px; } - #testimonial .testimonial-carousel-btn i { - padding: 10px; - background-color: #d2d4d5; - color: #57595b; - margin: 0 12px; - cursor: pointer; } + width: 100%; + } +} +#testimonial .owl-testimonial .owl-item-testimonial { + display: flex; + width: 97%; + background-color: white; + margin: 50px 0; +} +@media screen and (max-width: 1024px) { + #testimonial .owl-testimonial .owl-item-testimonial { + width: 90%; + margin: 50px auto; + } +} +#testimonial .owl-testimonial .owl-item-testimonial figure { + width: 250px; + height: 300px; +} +@media screen and (max-width: 1024px) { + #testimonial .owl-testimonial .owl-item-testimonial figure { + width: 350px; + } +} +#testimonial .owl-testimonial .owl-item-testimonial figure img { + width: 100%; + height: 100%; + object-fit: cover; +} +#testimonial .owl-testimonial .owl-item-testimonial .description { + margin: 0 20px; + padding: 10px 0; +} +#testimonial .owl-testimonial .owl-item-testimonial .description .person-name, +#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { + font-size: 14px; + font-weight: bold; +} +#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { + padding: 2px 0; + color: #808285; +} +#testimonial .owl-testimonial .owl-item-testimonial .description .person-name { + color: #28aae2; + padding-top: 20px; +} +#testimonial .owl-testimonial .owl-item-testimonial blockquote { + font-size: 16px; + color: #808285; + line-height: 1.8; +} +#testimonial .testimonial-carousel-btn { + text-align: center; + padding-bottom: 30px; + position: relative; + z-index: 2; +} +#testimonial .testimonial-carousel-btn i { + padding: 10px; + background-color: #d2d4d5; + color: #57595b; + margin: 0 12px; + cursor: pointer; +} #enquiry { - background: linear-gradient(#28aae2, #2b3991); } - #enquiry h3 { - text-align: center; - color: white; - padding: 60px 0 30px; } + background: linear-gradient(#28aae2, #2b3991); +} +#enquiry h3 { + text-align: center; + color: white; + padding: 60px 0 30px; +} +#enquiry p { + width: 50%; + margin: 0 auto; + text-align: center; + color: #fafafa; + line-height: 1.8; +} +@media screen and (max-width: 1024px) { #enquiry p { - width: 50%; - margin: 0 auto; - text-align: center; - color: #fafafa; - line-height: 1.8; } - @media screen and (max-width: 1024px) { - #enquiry p { - width: 90%; } } + width: 90%; + } +} +#enquiry form fieldset { + border: none; + width: 35%; + margin: 0 auto; + padding: 30px 0; +} +@media screen and (max-width: 1024px) { #enquiry form fieldset { - border: none; - width: 35%; - margin: 0 auto; - padding: 30px 0; } - @media screen and (max-width: 1024px) { - #enquiry form fieldset { - width: 90%; } } - #enquiry form fieldset input { - background-color: transparent; - border: 2px solid white; - padding: 8px 18px; - clear: both; - width: 48%; - margin: 10px 0; } - #enquiry form fieldset input:nth-child(even) { - float: right; } - #enquiry form fieldset ::-webkit-input-placeholder { - color: #fafafa; } - @media screen and (max-width: 1024px) { - #enquiry form fieldset ::-webkit-input-placeholder { - padding-left: 13px; } } - #enquiry form fieldset ::-moz-placeholder { - color: #fafafa; } - @media screen and (max-width: 1024px) { - #enquiry form fieldset ::-moz-placeholder { - padding-left: 13px; } } - #enquiry form fieldset :-ms-input-placeholder { - color: #fafafa; } - @media screen and (max-width: 1024px) { - #enquiry form fieldset :-ms-input-placeholder { - padding-left: 13px; } } - #enquiry form fieldset :-moz-placeholder { - color: #fafafa; } - @media screen and (max-width: 1024px) { - #enquiry form fieldset :-moz-placeholder { - padding-left: 13px; } } - #enquiry form fieldset textarea { - background-color: transparent; - border: 2px solid white; - width: 100%; - padding: 8px; - font-family: open-sans; } - #enquiry form fieldset button { - display: block; - margin: 20px auto; - padding: 8px 18px; - width: 40%; - background-color: transparent; - border: none; - border: 2px solid white; - color: white; - font-size: 14px; } + width: 90%; + } +} +#enquiry form fieldset input { + background-color: transparent; + border: 2px solid white; + padding: 8px 18px; + clear: both; + width: 48%; + margin: 10px 0; +} +#enquiry form fieldset input:nth-child(even) { + float: right; +} +#enquiry form fieldset ::-webkit-input-placeholder { + color: #fafafa; +} +@media screen and (max-width: 1024px) { + #enquiry form fieldset ::-webkit-input-placeholder { + padding-left: 13px; + } +} +#enquiry form fieldset ::-moz-placeholder { + color: #fafafa; +} +@media screen and (max-width: 1024px) { + #enquiry form fieldset ::-moz-placeholder { + padding-left: 13px; + } +} +#enquiry form fieldset :-ms-input-placeholder { + color: #fafafa; +} +@media screen and (max-width: 1024px) { + #enquiry form fieldset :-ms-input-placeholder { + padding-left: 13px; + } +} +#enquiry form fieldset :-moz-placeholder { + color: #fafafa; +} +@media screen and (max-width: 1024px) { + #enquiry form fieldset :-moz-placeholder { + padding-left: 13px; + } +} +#enquiry form fieldset textarea { + background-color: transparent; + border: 2px solid white; + width: 100%; + padding: 8px; + font-family: open-sans; +} +#enquiry form fieldset button { + display: block; + margin: 20px auto; + padding: 8px 18px; + width: 40%; + background-color: transparent; + border: none; + border: 2px solid white; + color: white; + font-size: 14px; +} #contact { - padding: 30px 0; } - #contact h3 { - text-align: center; - padding: 10px 0 20px; } + padding: 30px 0; +} +#contact h3 { + text-align: center; + padding: 10px 0 20px; +} +#contact p { + width: 50%; + margin: 0 auto; + text-align: center; + line-height: 1.8; +} +@media screen and (max-width: 1024px) { #contact p { - width: 50%; - margin: 0 auto; - text-align: center; - line-height: 1.8; } - @media screen and (max-width: 1024px) { - #contact p { - width: 90%; } } + width: 90%; + } +} +#contact .inner-container { + display: flex; + width: 80%; + margin: 40px auto; + padding: 20px 0; + justify-content: space-between; +} +@media screen and (max-width: 1024px) { #contact .inner-container { - display: flex; - width: 80%; - margin: 40px auto; - padding: 20px 0; - justify-content: space-between; } - @media screen and (max-width: 1024px) { - #contact .inner-container { - flex-direction: column; - width: 90%; } } - #contact .inner-container figure { - width: 60%; } - @media screen and (max-width: 1024px) { - #contact .inner-container figure { - width: 100%; } } - #contact .inner-container .description-container { - width: 30%; } - @media screen and (max-width: 1024px) { - #contact .inner-container .description-container { - width: 100%; } } - #contact .inner-container .description-container li { - display: flex; - justify-content: space-evenly; - padding: 15px 0; } - #contact .inner-container .description-container li address { - font-size: 16px; - color: #57595b; - font-family: open-sans; - font-style: normal; - line-height: 1.8; } - #contact .inner-container .description-container li label { - color: #57595b; - font-weight: bold; - font-size: 16px; } - #contact .inner-container .description-container li address, - #contact .inner-container .description-container li .contact-content { - width: 70%; } - #contact .inner-container .description-container li .contact-content { - display: flex; - font-size: 16px; } - #contact .inner-container .description-container li .contact-content li { - color: #57595b; - padding: 0 15px 0 0; } - #contact .inner-container .description-container li .contact-content li i { - font-size: 18px; } + flex-direction: column; + width: 90%; + } +} +#contact .inner-container figure { + width: 60%; +} +@media screen and (max-width: 1024px) { + #contact .inner-container figure { + width: 100%; + } +} +#contact .inner-container .description-container { + width: 30%; +} +@media screen and (max-width: 1024px) { + #contact .inner-container .description-container { + width: 100%; + } +} +#contact .inner-container .description-container li { + display: flex; + justify-content: space-evenly; + padding: 15px 0; +} +#contact .inner-container .description-container li address { + font-size: 16px; + color: #57595b; + font-family: open-sans; + font-style: normal; + line-height: 1.8; +} +#contact .inner-container .description-container li label { + color: #57595b; + font-weight: bold; + font-size: 16px; +} +#contact .inner-container .description-container li address, +#contact .inner-container .description-container li .contact-content { + width: 70%; +} +#contact .inner-container .description-container li .contact-content { + display: flex; + font-size: 16px; +} +#contact .inner-container .description-container li .contact-content li { + color: #57595b; + padding: 0 15px 0 0; +} +#contact .inner-container .description-container li .contact-content li i { + font-size: 18px; +} /*# sourceMappingURL=home.css.map */ diff --git a/static/css/service.css b/static/css/service.css new file mode 100644 index 0000000..1ff9c5c --- /dev/null +++ b/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 */ diff --git a/static/files/sample-1.pdf b/static/files/sample-1.pdf new file mode 100644 index 0000000..4457690 Binary files /dev/null and b/static/files/sample-1.pdf differ diff --git a/static/files/sample-2.pdf b/static/files/sample-2.pdf new file mode 100644 index 0000000..a389c81 Binary files /dev/null and b/static/files/sample-2.pdf differ diff --git a/static/images/cover-image.jpg b/static/images/cover-image.jpg new file mode 100644 index 0000000..15aa4ea Binary files /dev/null and b/static/images/cover-image.jpg differ diff --git a/static/js/home.js b/static/js/home.js index a6ba7d6..4bed3ea 100644 --- a/static/js/home.js +++ b/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]); -}); \ No newline at end of file +}); + +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]); +}); + diff --git a/static/js/service.js b/static/js/service.js new file mode 100644 index 0000000..e7011ac --- /dev/null +++ b/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'); +} \ No newline at end of file diff --git a/static/scss/about.scss b/static/scss/about.scss new file mode 100644 index 0000000..c6cf419 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/static/scss/common.scss b/static/scss/common.scss new file mode 100644 index 0000000..dfde803 --- /dev/null +++ b/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; + } + } + } + } +} \ No newline at end of file diff --git a/static/scss/home.scss b/static/scss/home.scss index 9ee0667..c0152ba 100644 --- a/static/scss/home.scss +++ b/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; diff --git a/static/scss/service.scss b/static/scss/service.scss new file mode 100644 index 0000000..ca8697c --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/templates/about.html b/templates/about.html new file mode 100644 index 0000000..4b34d88 --- /dev/null +++ b/templates/about.html @@ -0,0 +1,109 @@ +{% extends 'base.html' %} +{% load staticfiles %} + +{% block stylesheets %} + +{% endblock stylesheets %} + +{% block navigation %} +{% include 'partials/navigation.html' with menu='About' %} +{% endblock navigation %} + +{% block content %} + +
+
+
+ +
+
+
Hello, Bankers!
+

+ 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! +

+
+
+

+ 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! +

+
+
+

Our Team

+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur! +

+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur! +

+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur! +

+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur! +

+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur! +

+
+
+
+ + +
+
+{% endblock content %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..474e118 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,72 @@ + + + + + + + Fundzin + {% load staticfiles %} + + + + + + + {% block stylesheets %} + {% endblock stylesheets %} + + +
+
Welcome To Fundzin
+ +
+ {% block navigation %} + {% endblock navigation %} + + {% block content %} + {% endblock content %} + + + + + {% block scripts %} + {% endblock scripts %} + + \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 72eec80..b07de2e 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,36 +1,11 @@ - - - - - - - Fundzin - {% load staticfiles %} - - - - - - - - -
-
Welcome To Fundzin
- -
+{% extends 'base.html' %} +{% load staticfiles %} + +{% block stylesheets %} + +{% endblock stylesheets %} + +{% block content %}
@@ -66,28 +41,6 @@
-
@@ -156,84 +112,84 @@

@@ -385,12 +341,4 @@
- - - - - - \ No newline at end of file +{% endblock content %} diff --git a/templates/partials/navigation.html b/templates/partials/navigation.html new file mode 100644 index 0000000..8ba0d50 --- /dev/null +++ b/templates/partials/navigation.html @@ -0,0 +1,39 @@ +{% load staticfiles %} + +{% block navigation %} +
+
+
+
+ +
+

Fundzin

+
+ +
+ +
+
+
+{% endblock navigation %} \ No newline at end of file diff --git a/templates/service.html b/templates/service.html new file mode 100644 index 0000000..b0b2a2b --- /dev/null +++ b/templates/service.html @@ -0,0 +1,40 @@ +{% extends 'base.html' %} +{% load staticfiles %} + +{% block stylesheets %} + +{% endblock stylesheets %} + +{% block navigation %} +{% include 'partials/navigation.html' with menu='Service' %} +{% endblock navigation %} + +{% block content %} + +
+ +
+ + + + + + + +
+
+{% endblock content %} + +{% block scripts %} + +{% endblock scripts %} \ No newline at end of file