diff --git a/package.json b/package.json new file mode 100644 index 0000000..45d84e1 --- /dev/null +++ b/package.json @@ -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" +} diff --git a/static/css/custom_fonts.css b/static/css/custom_fonts.css index 3c80dc3..ab7ce3e 100644 --- a/static/css/custom_fonts.css +++ b/static/css/custom_fonts.css @@ -1,10 +1,14 @@ @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-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"); diff --git a/static/css/home.css b/static/css/home.css index 004b095..a0e9922 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -5,6 +5,10 @@ @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"); @@ -43,7 +47,7 @@ mark { justify-content: space-between; padding: 15px 0; color: #808285; - font-size: 15px; } + font-size: 14px; } .temp-intro .temp-name, .temp-end .temp-name { margin-left: 80px; } @@ -53,7 +57,9 @@ mark { margin-left: 20px; } } .temp-intro .temp-name mark, .temp-end .temp-name mark { - color: white; } + color: white; + font-weight: bold; + letter-spacing: 0.8px; } .temp-intro .temp-social, .temp-end .temp-social { display: flex; @@ -70,7 +76,7 @@ mark { font-size: 12px; } .temp-intro small, .temp-end small { - font-size: 15px; } + font-size: 14px; } @media screen and (max-width: 1024px) { .temp-intro small, .temp-end small { @@ -100,10 +106,9 @@ mark { display: block; } } #page-header { - display: flex; - justify-content: space-around; height: 20vh; position: sticky; + display: flex; top: 0; left: 0; background-color: white; @@ -115,6 +120,16 @@ mark { #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; @@ -125,15 +140,16 @@ mark { #page-header .temp-brand figure img { width: 100%; } #page-header .temp-brand h1 { - font-size: 32px; + font-size: 36px; align-self: center; letter-spacing: -0.65px; font-family: 'Archivo Black', sans-serif; } #page-header .temp-brand h1 mark { color: #27aae1; } #page-header #desktop-navigation-menu { - width: 50%; - align-self: center; } + width: 55%; + align-self: center; + font-size: 16px; } @media screen and (max-width: 1024px) { #page-header #desktop-navigation-menu { display: none; } } @@ -142,22 +158,19 @@ mark { justify-content: space-between; } #page-header #desktop-navigation-menu ul li { list-style: none; - font-weight: bold; - color: #58595b; } + color: #808285; } #page-header #desktop-navigation-menu ul li.active { color: #27aae1; } #page-header #mobile-hamburger-menu { display: none; position: relative; 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) { #page-header #mobile-hamburger-menu { display: block; @@ -169,14 +182,20 @@ mark { background-color: black; position: absolute; 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 { display: none; } @@ -198,7 +217,7 @@ mark { opacity: 1; } #mobile-nav-menu ul li { list-style: none; - font-size: 32px; + font-size: 36px; text-align: center; padding: 10px 0; opacity: 0; @@ -220,22 +239,35 @@ mark { .temp-contact-info ul li { list-style: none; border-left: 2px solid #d1d3d4; - font-size: 15px; + 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: 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 { border-right: 2px solid #d1d3d4; } .temp-contact-info ul li img { 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 { - font-weight: bold; } + 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 { @@ -245,7 +277,7 @@ mark { color: #27aae1; } section h3 { - font-size: 32px; + font-size: 36px; font-family: 'Archivo Black', sans-serif; line-height: 1.2; color: #414042; } @@ -256,7 +288,8 @@ section h3 { color: #27aae1; } section p { color: #808285; - font-size: 14px; } + font-size: 16px; + letter-spacing: 0.8px; } section figure { width: 50%; } section figure img { @@ -324,8 +357,9 @@ section .description { border: none; background-color: #27aae1; color: white; - padding: 10px 18px; + padding: 20px 30px; outline: none; + font-size: 16px; cursor: pointer; } @media screen and (max-width: 1024px) { #home button { @@ -376,7 +410,7 @@ section .description { #about figure { width: 35%; position: relative; - left: 8%; + left: 6%; opacity: 0; transition: left 1000ms ease, opacity 1000ms ease; } #about figure.show { @@ -388,7 +422,7 @@ section .description { display: block; margin: 0 auto; } } #about figure img { - transform: scale(1.2); + transform: scale(1.3); top: 25%; position: relative; width: 100%; } @@ -397,7 +431,11 @@ section .description { transform: scale(1); } } #about .description { 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 { opacity: 1; } #about p { @@ -440,12 +478,14 @@ section .description { margin: 0 auto; padding-top: 20px; } #service .owl-service li .inner-contents p { - width: 100%; } + width: 90%; + margin: 0 auto; + font-size: 14px; } #service .owl-service li .inner-contents .title { text-align: center; padding-top: 20px; color: #414042; - font-size: 15px; + font-size: 14px; font-weight: bold; } #service .service-carousel-btn { margin: 20px auto; @@ -498,7 +538,7 @@ section .description { padding: 10px 0; } #testimonial .owl-testimonial .owl-item-testimonial .description .person-name, #testimonial .owl-testimonial .owl-item-testimonial .description .person-info { - font-size: 15px; + font-size: 14px; font-weight: bold; } #testimonial .owl-testimonial .owl-item-testimonial .description .person-info { padding: 2px 0; @@ -507,7 +547,7 @@ section .description { color: #27aae1; padding-top: 20px; } #testimonial .owl-testimonial .owl-item-testimonial blockquote { - font-size: 14px; + font-size: 16px; color: #808285; font-weight: bold; line-height: 1.8; } @@ -588,7 +628,7 @@ section .description { border: none; border: 2px solid white; color: white; - font-size: 15px; } + font-size: 14px; } #contact { padding: 30px 0; } @@ -614,7 +654,10 @@ section .description { flex-direction: column; width: 90%; } } #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 { width: 30%; } @media screen and (max-width: 1024px) { @@ -625,7 +668,7 @@ section .description { justify-content: space-evenly; padding: 15px 0; } #contact .inner-container .description-container li address { - font-size: 14px; + font-size: 16px; color: #58595b; font-family: open-sans; font-style: normal; @@ -633,13 +676,13 @@ section .description { #contact .inner-container .description-container li label { color: #58595b; font-weight: bold; - font-size: 14px; } + 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: 14px; } + font-size: 16px; } #contact .inner-container .description-container li .contact-content li { color: #58595b; padding: 0 15px 0 0; } diff --git a/static/images/logo-icon.png b/static/images/logo-icon.png new file mode 100644 index 0000000..5401e49 Binary files /dev/null and b/static/images/logo-icon.png differ diff --git a/static/images/logo-icon.svg b/static/images/logo-icon.svg deleted file mode 100644 index 2f1de3d..0000000 --- a/static/images/logo-icon.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/images/mail-icon.svg b/static/images/mail-icon.svg index 4083c5c..34e6ff8 100644 --- a/static/images/mail-icon.svg +++ b/static/images/mail-icon.svg @@ -3,13 +3,13 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/images/map.png b/static/images/map.png index 4a74c7b..95659ea 100644 Binary files a/static/images/map.png and b/static/images/map.png differ diff --git a/static/js/home.js b/static/js/home.js index bff87de..2bf0c26 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -49,38 +49,13 @@ function page_scroll() { var home_image = document.querySelector('#home figure'); 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() { home_image.classList.remove('hide'); home_description.classList.remove('hide'); 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) { event.preventDefault(); @@ -88,12 +63,20 @@ function page_loaded() { scrollTop: $($.attr(this, 'href')).offset().top - 730 }, 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'); diff --git a/static/scss/_colors.scss b/static/scss/_colors.scss index e677a23..79d736c 100644 --- a/static/scss/_colors.scss +++ b/static/scss/_colors.scss @@ -3,7 +3,7 @@ $dark_blue: #2b3990; $blue: #27aae1; $dark_brown: #414042; -$brown: #58595b ; +$brown: #58595b; $dark_gray: #808285; $gray: #a7a9ac; $light_gray: #d1d3d4; @@ -11,8 +11,8 @@ $lightest_gray: #efefef; $white_shade: #f9f9f9; // 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_scroll : 10vh; \ No newline at end of file diff --git a/static/scss/custom_fonts.scss b/static/scss/custom_fonts.scss index 65e5f66..6a2b6a4 100644 --- a/static/scss/custom_fonts.scss +++ b/static/scss/custom_fonts.scss @@ -7,6 +7,12 @@ @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; } diff --git a/static/scss/home.scss b/static/scss/home.scss index 0a01c5d..a262dd2 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -47,6 +47,8 @@ mark { mark { color: white; + font-weight: bold; + letter-spacing: 0.8px; } } @@ -106,10 +108,9 @@ mark { } #page-header { - display: flex; - justify-content: space-around; height: $header_height; position: sticky; + display: flex; top: 0; left: 0; background-color: white; @@ -125,6 +126,19 @@ mark { 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; @@ -152,8 +166,9 @@ mark { } #desktop-navigation-menu { - width: 50%; + width: 55%; align-self: center; + font-size: $paragraph_size; @media screen and (max-width: 1024px) { display: none; @@ -165,8 +180,7 @@ mark { li { list-style: none; - font-weight: bold; - color: $brown; + color: $dark_gray; &.active { color: $blue; @@ -183,20 +197,15 @@ mark { &.active { .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; } - - &:nth-child(3) { - transform: rotate(-45deg) translate(4px, -12px); - bottom: 0; - } } } @@ -213,18 +222,25 @@ mark { position: absolute; 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; + 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; @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 { @@ -310,11 +346,15 @@ mark { img { width: 10%; align-self: center; - margin-right: 20px; + + @media screen and (max-width: 1024px) { + width: 30%; + } } .contact-content { - font-weight: bold; + margin-left: 20px; + color: $dark_gray; span { display: block; @@ -353,6 +393,7 @@ section { p { color: $dark_gray; font-size: $paragraph_size; + letter-spacing: 0.8px; } figure { @@ -458,8 +499,9 @@ section { border: none; background-color: $blue; color: white; - padding: 10px 18px; + padding: 20px 30px; outline: none; + font-size: $paragraph_size; cursor: pointer; @media screen and (max-width: 1024px) { @@ -529,7 +571,7 @@ section { figure { width: 35%; position: relative; - left: 8%; + left: 6%; opacity: 0; transition: left 1000ms ease, opacity 1000ms ease; @@ -545,7 +587,7 @@ section { } img { - transform: scale(1.2); + transform: scale(1.3); top: 25%; position: relative; width: 100%; @@ -559,6 +601,11 @@ section { .description { opacity: 0; transition: opacity 1000ms ease; + width: 55%; + + @media screen and (max-width: 1024px) { + width: 100%; + } &.show { opacity: 1; @@ -621,7 +668,9 @@ section { } p { - width: 100%; + width: 90%; + margin: 0 auto; + font-size: 14px; } .title { @@ -877,9 +926,12 @@ section { width: 90%; } - // Change it Accordingly when the image comes into place figure { - width: 40%; + width: 60%; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .description-container { diff --git a/templates/home.html b/templates/home.html index ae5bd9e..41678b5 100644 --- a/templates/home.html +++ b/templates/home.html @@ -32,39 +32,39 @@
-
-
- -
-

Fundzin

+
+
+
+ +
+

Fundzin

+
+ +
+ +
- -
- - - -