kj
/
now-in-github-bcb-website
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

UI changes

master
Navaneeth 7 years ago
parent
4d207ea867
commit
e8034f630a
13 changed files with 247 additions and 237 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -0
      package.json
  2. +5
    -1
      static/css/custom_fonts.css
  3. +90
    -47
      static/css/home.css
  4. BIN
      static/images/logo-icon.png
  5. +0
    -38
      static/images/logo-icon.svg
  6. +3
    -3
      static/images/mail-icon.svg
  7. +0
    -51
      static/images/mail.svg
  8. BIN
      static/images/map.png
  9. +12
    -29
      static/js/home.js
  10. +4
    -4
      static/scss/_colors.scss
  11. +6
    -0
      static/scss/custom_fonts.scss
  12. +82
    -30
      static/scss/home.scss
  13. +34
    -34
      templates/home.html

+ 11
- 0
package.json View File

@@ -0,0 +1,11 @@
{
"name": "fundzin",
"version": "1.0.0",
"description": "client template",
"repository": {
"type": "git",
"url": "code@webtrigon.com:fundzin.git"
},
"author": "Navaneeth N",
"license": "ISC"
}

+ 5
- 1
static/css/custom_fonts.css View File

@@ -1,10 +1,14 @@
@font-face { @font-face {
src: url("/fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
font-family: archivo-black; font-family: archivo-black;
font-style: normal; } font-style: normal; }
@font-face { @font-face {
src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
font-family: open-sans; 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-weight: bold; }
@font-face { @font-face {
src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");


+ 90
- 47
static/css/home.css View File

@@ -5,6 +5,10 @@
@font-face { @font-face {
src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
font-family: open-sans; 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-weight: bold; }
@font-face { @font-face {
src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
@@ -43,7 +47,7 @@ mark {
justify-content: space-between; justify-content: space-between;
padding: 15px 0; padding: 15px 0;
color: #808285; color: #808285;
font-size: 15px; }
font-size: 14px; }
.temp-intro .temp-name, .temp-intro .temp-name,
.temp-end .temp-name { .temp-end .temp-name {
margin-left: 80px; } margin-left: 80px; }
@@ -53,7 +57,9 @@ mark {
margin-left: 20px; } } margin-left: 20px; } }
.temp-intro .temp-name mark, .temp-intro .temp-name mark,
.temp-end .temp-name mark { .temp-end .temp-name mark {
color: white; }
color: white;
font-weight: bold;
letter-spacing: 0.8px; }
.temp-intro .temp-social, .temp-intro .temp-social,
.temp-end .temp-social { .temp-end .temp-social {
display: flex; display: flex;
@@ -70,7 +76,7 @@ mark {
font-size: 12px; } font-size: 12px; }
.temp-intro small, .temp-intro small,
.temp-end small { .temp-end small {
font-size: 15px; }
font-size: 14px; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.temp-intro small, .temp-intro small,
.temp-end small { .temp-end small {
@@ -100,10 +106,9 @@ mark {
display: block; } } display: block; } }


#page-header { #page-header {
display: flex;
justify-content: space-around;
height: 20vh; height: 20vh;
position: sticky; position: sticky;
display: flex;
top: 0; top: 0;
left: 0; left: 0;
background-color: white; background-color: white;
@@ -115,6 +120,16 @@ mark {
#page-header.minimize { #page-header.minimize {
height: 10vh; height: 10vh;
padding: 10px 0; } 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 { #page-header .temp-brand {
display: flex; display: flex;
align-self: center; align-self: center;
@@ -125,15 +140,16 @@ mark {
#page-header .temp-brand figure img { #page-header .temp-brand figure img {
width: 100%; } width: 100%; }
#page-header .temp-brand h1 { #page-header .temp-brand h1 {
font-size: 32px;
font-size: 36px;
align-self: center; align-self: center;
letter-spacing: -0.65px; letter-spacing: -0.65px;
font-family: 'Archivo Black', sans-serif; } font-family: 'Archivo Black', sans-serif; }
#page-header .temp-brand h1 mark { #page-header .temp-brand h1 mark {
color: #27aae1; } color: #27aae1; }
#page-header #desktop-navigation-menu { #page-header #desktop-navigation-menu {
width: 50%;
align-self: center; }
width: 55%;
align-self: center;
font-size: 16px; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
#page-header #desktop-navigation-menu { #page-header #desktop-navigation-menu {
display: none; } } display: none; } }
@@ -142,22 +158,19 @@ mark {
justify-content: space-between; } justify-content: space-between; }
#page-header #desktop-navigation-menu ul li { #page-header #desktop-navigation-menu ul li {
list-style: none; list-style: none;
font-weight: bold;
color: #58595b; }
color: #808285; }
#page-header #desktop-navigation-menu ul li.active { #page-header #desktop-navigation-menu ul li.active {
color: #27aae1; } color: #27aae1; }
#page-header #mobile-hamburger-menu { #page-header #mobile-hamburger-menu {
display: none; display: none;
position: relative; position: relative;
height: 25px; } height: 25px; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(1) {
transform: rotate(45deg) translate(2px, 10px);
top: 0; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(2) {
opacity: 0; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(3) {
transform: rotate(-45deg) translate(4px, -12px);
bottom: 0; }
#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) { @media screen and (max-width: 1024px) {
#page-header #mobile-hamburger-menu { #page-header #mobile-hamburger-menu {
display: block; display: block;
@@ -169,14 +182,20 @@ mark {
background-color: black; background-color: black;
position: absolute; position: absolute;
transition: transform 500ms ease; } transition: transform 500ms ease; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(1) {
top: 0; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
background-color: #27aae1; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(3) {
bottom: 0; }
#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: #27aae1;
transition: opacity 500ms ease; }
#page-header #mobile-hamburger-menu .icon-line:after {
top: 400%;
background-color: black;
transition: transform 500ms ease; }


#mobile-nav-menu { #mobile-nav-menu {
display: none; } display: none; }
@@ -198,7 +217,7 @@ mark {
opacity: 1; } opacity: 1; }
#mobile-nav-menu ul li { #mobile-nav-menu ul li {
list-style: none; list-style: none;
font-size: 32px;
font-size: 36px;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
opacity: 0; opacity: 0;
@@ -220,22 +239,35 @@ mark {
.temp-contact-info ul li { .temp-contact-info ul li {
list-style: none; list-style: none;
border-left: 2px solid #d1d3d4; border-left: 2px solid #d1d3d4;
font-size: 15px;
font-size: 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 35%; width: 35%;
padding: 20px 0; } padding: 20px 0; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.temp-contact-info ul li { .temp-contact-info ul li {
width: 101%; } }
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 { .temp-contact-info ul li:last-child {
border-right: 2px solid #d1d3d4; } border-right: 2px solid #d1d3d4; }
.temp-contact-info ul li img { .temp-contact-info ul li img {
width: 10%; width: 10%;
align-self: center;
margin-right: 20px; }
align-self: center; }
@media screen and (max-width: 1024px) {
.temp-contact-info ul li img {
width: 30%; } }
.temp-contact-info ul li .contact-content { .temp-contact-info ul li .contact-content {
font-weight: bold; }
margin-left: 20px;
color: #808285; }
.temp-contact-info ul li .contact-content span { .temp-contact-info ul li .contact-content span {
display: block; } display: block; }
.temp-contact-info ul li .contact-content span:last-child { .temp-contact-info ul li .contact-content span:last-child {
@@ -245,7 +277,7 @@ mark {
color: #27aae1; } color: #27aae1; }


section h3 { section h3 {
font-size: 32px;
font-size: 36px;
font-family: 'Archivo Black', sans-serif; font-family: 'Archivo Black', sans-serif;
line-height: 1.2; line-height: 1.2;
color: #414042; } color: #414042; }
@@ -256,7 +288,8 @@ section h3 {
color: #27aae1; } color: #27aae1; }
section p { section p {
color: #808285; color: #808285;
font-size: 14px; }
font-size: 16px;
letter-spacing: 0.8px; }
section figure { section figure {
width: 50%; } width: 50%; }
section figure img { section figure img {
@@ -324,8 +357,9 @@ section .description {
border: none; border: none;
background-color: #27aae1; background-color: #27aae1;
color: white; color: white;
padding: 10px 18px;
padding: 20px 30px;
outline: none; outline: none;
font-size: 16px;
cursor: pointer; } cursor: pointer; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
#home button { #home button {
@@ -376,7 +410,7 @@ section .description {
#about figure { #about figure {
width: 35%; width: 35%;
position: relative; position: relative;
left: 8%;
left: 6%;
opacity: 0; opacity: 0;
transition: left 1000ms ease, opacity 1000ms ease; } transition: left 1000ms ease, opacity 1000ms ease; }
#about figure.show { #about figure.show {
@@ -388,7 +422,7 @@ section .description {
display: block; display: block;
margin: 0 auto; } } margin: 0 auto; } }
#about figure img { #about figure img {
transform: scale(1.2);
transform: scale(1.3);
top: 25%; top: 25%;
position: relative; position: relative;
width: 100%; } width: 100%; }
@@ -397,7 +431,11 @@ section .description {
transform: scale(1); } } transform: scale(1); } }
#about .description { #about .description {
opacity: 0; opacity: 0;
transition: opacity 1000ms ease; }
transition: opacity 1000ms ease;
width: 55%; }
@media screen and (max-width: 1024px) {
#about .description {
width: 100%; } }
#about .description.show { #about .description.show {
opacity: 1; } opacity: 1; }
#about p { #about p {
@@ -440,12 +478,14 @@ section .description {
margin: 0 auto; margin: 0 auto;
padding-top: 20px; } padding-top: 20px; }
#service .owl-service li .inner-contents p { #service .owl-service li .inner-contents p {
width: 100%; }
width: 90%;
margin: 0 auto;
font-size: 14px; }
#service .owl-service li .inner-contents .title { #service .owl-service li .inner-contents .title {
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
color: #414042; color: #414042;
font-size: 15px;
font-size: 14px;
font-weight: bold; } font-weight: bold; }
#service .service-carousel-btn { #service .service-carousel-btn {
margin: 20px auto; margin: 20px auto;
@@ -498,7 +538,7 @@ section .description {
padding: 10px 0; } padding: 10px 0; }
#testimonial .owl-testimonial .owl-item-testimonial .description .person-name, #testimonial .owl-testimonial .owl-item-testimonial .description .person-name,
#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { #testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
font-size: 15px;
font-size: 14px;
font-weight: bold; } font-weight: bold; }
#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { #testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
padding: 2px 0; padding: 2px 0;
@@ -507,7 +547,7 @@ section .description {
color: #27aae1; color: #27aae1;
padding-top: 20px; } padding-top: 20px; }
#testimonial .owl-testimonial .owl-item-testimonial blockquote { #testimonial .owl-testimonial .owl-item-testimonial blockquote {
font-size: 14px;
font-size: 16px;
color: #808285; color: #808285;
font-weight: bold; font-weight: bold;
line-height: 1.8; } line-height: 1.8; }
@@ -588,7 +628,7 @@ section .description {
border: none; border: none;
border: 2px solid white; border: 2px solid white;
color: white; color: white;
font-size: 15px; }
font-size: 14px; }


#contact { #contact {
padding: 30px 0; } padding: 30px 0; }
@@ -614,7 +654,10 @@ section .description {
flex-direction: column; flex-direction: column;
width: 90%; } } width: 90%; } }
#contact .inner-container figure { #contact .inner-container figure {
width: 40%; }
width: 60%; }
@media screen and (max-width: 1024px) {
#contact .inner-container figure {
width: 100%; } }
#contact .inner-container .description-container { #contact .inner-container .description-container {
width: 30%; } width: 30%; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -625,7 +668,7 @@ section .description {
justify-content: space-evenly; justify-content: space-evenly;
padding: 15px 0; } padding: 15px 0; }
#contact .inner-container .description-container li address { #contact .inner-container .description-container li address {
font-size: 14px;
font-size: 16px;
color: #58595b; color: #58595b;
font-family: open-sans; font-family: open-sans;
font-style: normal; font-style: normal;
@@ -633,13 +676,13 @@ section .description {
#contact .inner-container .description-container li label { #contact .inner-container .description-container li label {
color: #58595b; color: #58595b;
font-weight: bold; font-weight: bold;
font-size: 14px; }
font-size: 16px; }
#contact .inner-container .description-container li address, #contact .inner-container .description-container li address,
#contact .inner-container .description-container li .contact-content { #contact .inner-container .description-container li .contact-content {
width: 70%; } width: 70%; }
#contact .inner-container .description-container li .contact-content { #contact .inner-container .description-container li .contact-content {
display: flex; display: flex;
font-size: 14px; }
font-size: 16px; }
#contact .inner-container .description-container li .contact-content li { #contact .inner-container .description-container li .contact-content li {
color: #58595b; color: #58595b;
padding: 0 15px 0 0; } padding: 0 15px 0 0; }


BIN
static/images/logo-icon.png View File

Before After
Width: 47  |  Height: 47  |  Size: 1.1 KiB

+ 0
- 38
static/images/logo-icon.svg View File

@@ -1,38 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="47.284px" height="47.285px" viewBox="0 0 47.284 47.285" enable-background="new 0 0 47.284 47.285" xml:space="preserve">
<g>
<g>
<g>
<circle fill="#414042" cx="16.549" cy="21.278" r="2.364"/>
</g>
</g>
<g>
<g>
<g>
<path fill="#27AAE1" d="M37.827,0c-3.264,0-5.984,2.218-6.811,5.219c0.779,0.152,1.544,0.34,2.293,0.559
c0.572-1.965,2.37-3.414,4.518-3.414c2.607,0,4.729,2.121,4.729,4.729c0,1.1-0.393,2.1-1.024,2.905
c0.622,0.489,1.211,1.007,1.772,1.552c0.996-1.222,1.617-2.758,1.617-4.457C44.92,3.175,41.745,0,37.827,0z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="#414042" d="M47.284,26.006c0-10.43-9.545-18.914-21.277-18.914c-2.113,0-4.238,0.299-6.332,0.891l-6.376-5.101
c-0.427-0.342-0.95-0.518-1.477-0.518c-0.348,0-0.698,0.076-1.023,0.233c-0.819,0.394-1.34,1.223-1.34,2.131v9.458
c-1.336,1.466-2.396,3.048-3.169,4.727H2.364C1.058,18.914,0,19.972,0,21.278v9.457c0,1.306,1.058,2.364,2.364,2.364h3.941
c0.919,2.021,2.22,3.88,3.845,5.498c-0.45,0.84-0.693,1.788-0.693,2.776c0,3.26,2.651,5.911,5.91,5.911
c2.204,0,4.131-1.214,5.147-3.008c1.791,0.428,3.629,0.643,5.492,0.643s3.701-0.215,5.492-0.643
c1.016,1.794,2.942,3.008,5.146,3.008c3.259,0,5.91-2.651,5.91-5.911c0-0.987-0.242-1.937-0.691-2.774
C45.335,35.15,47.284,30.673,47.284,26.006z M38.534,38.381c0.994,0.629,1.658,1.729,1.658,2.992
c0,1.958-1.588,3.546-3.547,3.546c-1.958,0-3.547-1.588-3.547-3.546c0-0.012,0.004-0.022,0.004-0.033
c-2.192,0.778-4.584,1.216-7.096,1.216s-4.903-0.438-7.096-1.216c0,0.011,0.003,0.021,0.003,0.033
c0,1.958-1.588,3.546-3.546,3.546s-3.546-1.588-3.546-3.546c0-1.263,0.665-2.363,1.658-2.992
c-2.603-2.019-4.548-4.658-5.573-7.646H2.364v-9.457h5.522c0.786-2.309,2.168-4.378,3.935-6.145V4.729l7.356,5.884
c2.124-0.723,4.413-1.156,6.83-1.156c10.445,0,18.914,7.41,18.914,16.55C44.92,30.937,42.442,35.349,38.534,38.381z"/>
</g>
</g>
</g>
</svg>

+ 3
- 3
static/images/mail-icon.svg View File

@@ -3,13 +3,13 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="12.176px" viewBox="0 0 16 12.176" enable-background="new 0 0 16 12.176" xml:space="preserve"> width="16px" height="12.176px" viewBox="0 0 16 12.176" enable-background="new 0 0 16 12.176" xml:space="preserve">
<g opacity="0.5">
<g opacity="0.3">
<g> <g>
<path fill="#FFFFFF" d="M14.047,0H1.957C0.877,0,0,0.877,0,1.956v8.264c0,1.079,0.877,1.956,1.957,1.956h12.086
<path fill="#a7a9ac;" d="M14.047,0H1.957C0.877,0,0,0.877,0,1.956v8.264c0,1.079,0.877,1.956,1.957,1.956h12.086
c1.08,0,1.957-0.877,1.957-1.956V1.959C16.003,0.881,15.126,0,14.047,0z M15.109,10.22c0,0.586-0.477,1.063-1.063,1.063H1.957 c1.08,0,1.957-0.877,1.957-1.956V1.959C16.003,0.881,15.126,0,14.047,0z M15.109,10.22c0,0.586-0.477,1.063-1.063,1.063H1.957
c-0.586,0-1.063-0.477-1.063-1.063V1.959c0-0.586,0.478-1.063,1.063-1.063h12.086c0.586,0,1.063,0.477,1.063,1.063v8.261H15.109z" c-0.586,0-1.063-0.477-1.063-1.063V1.959c0-0.586,0.478-1.063,1.063-1.063h12.086c0.586,0,1.063,0.477,1.063,1.063v8.261H15.109z"
/> />
<path fill="#FFFFFF" d="M10.09,5.985l3.914-3.509c0.182-0.166,0.198-0.447,0.033-0.633c-0.166-0.182-0.447-0.199-0.633-0.033
<path fill="#a7a9ac;" d="M10.09,5.985l3.914-3.509c0.182-0.166,0.198-0.447,0.033-0.633c-0.166-0.182-0.447-0.199-0.633-0.033
L8.008,6.654l-1.053-0.94C6.951,5.711,6.948,5.707,6.948,5.703C6.926,5.681,6.902,5.661,6.875,5.641L2.592,1.807 L8.008,6.654l-1.053-0.94C6.951,5.711,6.948,5.707,6.948,5.703C6.926,5.681,6.902,5.661,6.875,5.641L2.592,1.807
C2.406,1.643,2.125,1.658,1.959,1.844C1.794,2.029,1.811,2.311,1.996,2.477l3.959,3.539L2.013,9.707 C2.406,1.643,2.125,1.658,1.959,1.844C1.794,2.029,1.811,2.311,1.996,2.477l3.959,3.539L2.013,9.707
c-0.179,0.168-0.189,0.449-0.02,0.632c0.089,0.093,0.208,0.142,0.327,0.142c0.109,0,0.219-0.039,0.305-0.119l4.002-3.744 c-0.179,0.168-0.189,0.449-0.02,0.632c0.089,0.093,0.208,0.142,0.327,0.142c0.109,0,0.219-0.039,0.305-0.119l4.002-3.744


+ 0
- 51
static/images/mail.svg View File

@@ -1,51 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 31.012 31.012" style="enable-background:new 0 0 31.012 31.012;fill:#a7a9ac;" xml:space="preserve">
<g>
<g>
<path d="M25.109,21.51c-0.123,0-0.246-0.045-0.342-0.136l-5.754-5.398c-0.201-0.188-0.211-0.505-0.022-0.706
c0.189-0.203,0.504-0.212,0.707-0.022l5.754,5.398c0.201,0.188,0.211,0.505,0.022,0.706C25.375,21.457,25.243,21.51,25.109,21.51z
"/>
<path d="M5.902,21.51c-0.133,0-0.266-0.053-0.365-0.158c-0.189-0.201-0.179-0.518,0.022-0.706l5.756-5.398
c0.202-0.188,0.519-0.18,0.707,0.022c0.189,0.201,0.179,0.518-0.022,0.706l-5.756,5.398C6.148,21.465,6.025,21.51,5.902,21.51z"/>
</g>
<path d="M28.512,26.529H2.5c-1.378,0-2.5-1.121-2.5-2.5V6.982c0-1.379,1.122-2.5,2.5-2.5h26.012c1.378,0,2.5,1.121,2.5,2.5v17.047
C31.012,25.408,29.89,26.529,28.512,26.529z M2.5,5.482c-0.827,0-1.5,0.673-1.5,1.5v17.047c0,0.827,0.673,1.5,1.5,1.5h26.012
c0.827,0,1.5-0.673,1.5-1.5V6.982c0-0.827-0.673-1.5-1.5-1.5H2.5z"/>
<path d="M15.506,18.018c-0.665,0-1.33-0.221-1.836-0.662L0.83,6.155C0.622,5.974,0.6,5.658,0.781,5.449
c0.183-0.208,0.498-0.227,0.706-0.048l12.84,11.2c0.639,0.557,1.719,0.557,2.357,0L29.508,5.419
c0.207-0.181,0.522-0.161,0.706,0.048c0.181,0.209,0.16,0.524-0.048,0.706L17.342,17.355
C16.835,17.797,16.171,18.018,15.506,18.018z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

BIN
static/images/map.png View File

Before After
Width: 2953  |  Height: 1911  |  Size: 274 KiB Width: 750  |  Height: 388  |  Size: 67 KiB

+ 12
- 29
static/js/home.js View File

@@ -49,38 +49,13 @@ function page_scroll() {


var home_image = document.querySelector('#home figure'); var home_image = document.querySelector('#home figure');
var home_description = document.querySelector('#home .description'); var home_description = document.querySelector('#home .description');
var temp_contact_info = document.querySelector('.temp-contact-info ul');
var temp_contact_info = document.querySelectorAll('.temp-contact-info ul li');


function page_loaded() { function page_loaded() {
home_image.classList.remove('hide'); home_image.classList.remove('hide');
home_description.classList.remove('hide'); home_description.classList.remove('hide');


if ($(window).width() < 960) { if ($(window).width() < 960) {
temp_contact_info.classList.add('owl-carousel');
temp_contact_info.classList.add('owl-contact');
var owl = $('.owl-contact');
owl.owlCarousel({
loop: true,
margin: 0,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
stagePadding: 100,
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});

$(document).on('click', 'a[href^="#"]', function (event) { $(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault(); event.preventDefault();
@@ -88,12 +63,20 @@ function page_loaded() {
scrollTop: $($.attr(this, 'href')).offset().top - 730 scrollTop: $($.attr(this, 'href')).offset().top - 730
}, 500); }, 500);
}); });

for (var i = 0; i < temp_contact_info.length; i++) {
temp_contact_info[i].addEventListener('click', toggle_contact_info);
}
} }
}

function toggle_contact_info(e) {
else {
temp_contact_info.classList.remove('owl-carousel');
temp_contact_info.classList.remove('owl-contact');
for (var i = 0; i < temp_contact_info.length; i++) {
temp_contact_info[i].classList.remove('active');
} }

e.currentTarget.classList.add('active');
} }


var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li'); var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li');


+ 4
- 4
static/scss/_colors.scss View File

@@ -3,7 +3,7 @@
$dark_blue: #2b3990; $dark_blue: #2b3990;
$blue: #27aae1; $blue: #27aae1;
$dark_brown: #414042; $dark_brown: #414042;
$brown: #58595b ;
$brown: #58595b;
$dark_gray: #808285; $dark_gray: #808285;
$gray: #a7a9ac; $gray: #a7a9ac;
$light_gray: #d1d3d4; $light_gray: #d1d3d4;
@@ -11,8 +11,8 @@ $lightest_gray: #efefef;
$white_shade: #f9f9f9; $white_shade: #f9f9f9;


// font size // font size
$paragraph_size: 14px;
$heading_size: 32px;
$other_size: 15px;
$paragraph_size: 16px;
$heading_size: 36px;
$other_size: 14px;
$header_height: 20vh; $header_height: 20vh;
$header_height_scroll : 10vh; $header_height_scroll : 10vh;

+ 6
- 0
static/scss/custom_fonts.scss View File

@@ -7,6 +7,12 @@
@font-face { @font-face {
src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-family: open-sans; 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-weight: bold;
} }




+ 82
- 30
static/scss/home.scss View File

@@ -47,6 +47,8 @@ mark {


mark { mark {
color: white; color: white;
font-weight: bold;
letter-spacing: 0.8px;
} }
} }


@@ -106,10 +108,9 @@ mark {
} }


#page-header { #page-header {
display: flex;
justify-content: space-around;
height: $header_height; height: $header_height;
position: sticky; position: sticky;
display: flex;
top: 0; top: 0;
left: 0; left: 0;
background-color: white; background-color: white;
@@ -125,6 +126,19 @@ mark {
padding: 10px 0; 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 { .temp-brand {
display: flex; display: flex;
align-self: center; align-self: center;
@@ -152,8 +166,9 @@ mark {
} }


#desktop-navigation-menu { #desktop-navigation-menu {
width: 50%;
width: 55%;
align-self: center; align-self: center;
font-size: $paragraph_size;


@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
display: none; display: none;
@@ -165,8 +180,7 @@ mark {


li { li {
list-style: none; list-style: none;
font-weight: bold;
color: $brown;
color: $dark_gray;


&.active { &.active {
color: $blue; color: $blue;
@@ -183,20 +197,15 @@ mark {
&.active { &.active {


.icon-line { .icon-line {
transform: rotate(45deg) translate(2px, 10px);


&:nth-child(1) {
transform: rotate(45deg) translate(2px, 10px);
top: 0;
&:after {
transform: rotate(-95deg) translate(20px, 2px);
} }
&:nth-child(2) {
&:before {
opacity: 0; opacity: 0;
} }
&:nth-child(3) {
transform: rotate(-45deg) translate(4px, -12px);
bottom: 0;
}
} }
} }


@@ -213,18 +222,25 @@ mark {
position: absolute; position: absolute;
transition: transform 500ms ease; transition: transform 500ms ease;


&:nth-child(1) {
top: 0;
&:before,
&:after {
content: '';
display: inline-block;
width: 35px;
height: 5px;
position: absolute;
} }


&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
&:before {
top: 200%;
background-color: $blue; background-color: $blue;
transition: opacity 500ms ease;
} }


&:nth-child(3) {
bottom: 0;
&:after {
top: 400%;
background-color: black;
transition: transform 500ms ease;
} }
} }
} }
@@ -300,7 +316,27 @@ mark {
padding: 20px 0; padding: 20px 0;


@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
width: 101%;
width: 40%;

.contact-content {
display: none;
}

img {
width: 35%;
}

&.active {
width: 100%;

img {
width: 10%;
}

.contact-content {
display: block;
}
}
} }


&:last-child { &:last-child {
@@ -310,11 +346,15 @@ mark {
img { img {
width: 10%; width: 10%;
align-self: center; align-self: center;
margin-right: 20px;

@media screen and (max-width: 1024px) {
width: 30%;
}
} }


.contact-content { .contact-content {
font-weight: bold;
margin-left: 20px;
color: $dark_gray;


span { span {
display: block; display: block;
@@ -353,6 +393,7 @@ section {
p { p {
color: $dark_gray; color: $dark_gray;
font-size: $paragraph_size; font-size: $paragraph_size;
letter-spacing: 0.8px;
} }


figure { figure {
@@ -458,8 +499,9 @@ section {
border: none; border: none;
background-color: $blue; background-color: $blue;
color: white; color: white;
padding: 10px 18px;
padding: 20px 30px;
outline: none; outline: none;
font-size: $paragraph_size;
cursor: pointer; cursor: pointer;


@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -529,7 +571,7 @@ section {
figure { figure {
width: 35%; width: 35%;
position: relative; position: relative;
left: 8%;
left: 6%;
opacity: 0; opacity: 0;
transition: left 1000ms ease, opacity 1000ms ease; transition: left 1000ms ease, opacity 1000ms ease;


@@ -545,7 +587,7 @@ section {
} }


img { img {
transform: scale(1.2);
transform: scale(1.3);
top: 25%; top: 25%;
position: relative; position: relative;
width: 100%; width: 100%;
@@ -559,6 +601,11 @@ section {
.description { .description {
opacity: 0; opacity: 0;
transition: opacity 1000ms ease; transition: opacity 1000ms ease;
width: 55%;

@media screen and (max-width: 1024px) {
width: 100%;
}


&.show { &.show {
opacity: 1; opacity: 1;
@@ -621,7 +668,9 @@ section {
} }


p { p {
width: 100%;
width: 90%;
margin: 0 auto;
font-size: 14px;
} }


.title { .title {
@@ -877,9 +926,12 @@ section {
width: 90%; width: 90%;
} }


// Change it Accordingly when the image comes into place
figure { figure {
width: 40%;
width: 60%;

@media screen and (max-width: 1024px) {
width: 100%;
}
} }


.description-container { .description-container {


+ 34
- 34
templates/home.html View File

@@ -32,39 +32,39 @@
</ul> </ul>
</div> </div>
<header id="page-header"> <header id="page-header">
<div class="temp-brand">
<figure>
<img src="{% static 'images/logo-icon.svg' %}" alt="">
</figure>
<h1><mark>Fundz</mark>in</h1>
<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 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>
<section id="mobile-hamburger-menu">
<span class="icon-line"></span>
</section>
</div> </div>
<nav id="desktop-navigation-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>
<section id="mobile-hamburger-menu">
<span class="icon-line"></span>
<span class="icon-line"></span>
<span class="icon-line"></span>
</section>
</header> </header>
<nav id="mobile-nav-menu"> <nav id="mobile-nav-menu">
<ul> <ul>
@@ -91,13 +91,13 @@
<div class="temp-contact-info"> <div class="temp-contact-info">
<ul> <ul>
<li> <li>
<img src="{% static 'images/mail.svg' %}" alt="">
<img src="{% static 'images/mail-icon.svg' %}" alt="">
<div class="contact-content"> <div class="contact-content">
<span>Send us a message</span> <span>Send us a message</span>
<a href="mailto:info@fundzin.com">info@fundzin.com</a> <a href="mailto:info@fundzin.com">info@fundzin.com</a>
</div> </div>
</li> </li>
<li>
<li class="active">
<img src="{% static 'images/phone-call.svg' %}" alt=""> <img src="{% static 'images/phone-call.svg' %}" alt="">
<div class="contact-content"> <div class="contact-content">
<span>Give us a Call</span> <span>Give us a Call</span>


Write Preview
Loading…
Cancel
Save