diff --git a/static/css/about.css b/static/css/about.css index 9f63a3b..46d2e34 100644 --- a/static/css/about.css +++ b/static/css/about.css @@ -61,6 +61,11 @@ width: 90%; margin: 0 auto; } +@media screen and (max-width: 1024px) { + .about-content .inner-container { + flex-direction: column; + } +} .about-content .inner-container .description { width: 60%; align-self: center; @@ -68,6 +73,11 @@ justify-content: space-between; flex-direction: column; } +@media screen and (max-width: 1024px) { + .about-content .inner-container .description { + width: 100%; + } +} .about-content .inner-container .description p { width: 100%; } @@ -84,17 +94,30 @@ width: 37%; align-self: center; display: flex; + height: 50vh; +} +@media screen and (max-width: 1024px) { + .about-content figure { + width: 100%; + } } .about-content figure img { width: 100%; align-self: center; + height: 100%; + object-fit: cover; + object-position: top; } .about-content p { - margin-top: 30px; width: 90%; - margin: 30px auto 0; + margin: 0 auto 0; padding-bottom: 50px; } +@media screen and (max-width: 1024px) { + .about-content p { + margin: 0 auto; + } +} #our-team { width: 90%; diff --git a/static/css/common.css b/static/css/common.css index 2c0358d..0a39f64 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -157,7 +157,7 @@ mark { padding: 10px 0; } #page-header .inner-header { - width: 80%; + width: 90%; display: flex; justify-content: space-between; margin: 0 auto; @@ -166,27 +166,42 @@ mark { @media screen and (max-width: 1024px) { #page-header .inner-header { width: 100%; - justify-content: space-around; + justify-content: none; } } #page-header .temp-brand { display: flex; align-self: center; - width: 20%; + width: auto; justify-content: center; + cursor: pointer; +} +@media screen and (max-width: 1024px) { + #page-header .temp-brand { + justify-content: unset; + width: calc(100% -55px); + } } #page-header .temp-brand figure { margin-right: 15px; + width: 60px; + height: 60px; } #page-header .temp-brand figure img { width: 100%; + height: 100%; } #page-header .temp-brand h1 { - font-size: 36px; + font-size: 20px; align-self: center; letter-spacing: -0.65px; font-family: "Archivo Black", sans-serif; } +@media screen and (max-width: 1024px) { + #page-header .temp-brand h1 { + font-size: 15px; + } +} #page-header .temp-brand h1 mark { color: #28aae2; } @@ -216,6 +231,11 @@ mark { position: relative; height: 25px; } +@media screen and (max-width: 1024px) { + #page-header #mobile-hamburger-menu { + width: 45px; + } +} #page-header #mobile-hamburger-menu.active .icon-line { transform: rotate(45deg) translate(2px, 10px); } diff --git a/static/css/home.css b/static/css/home.css index b80a0a3..071a877 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -66,6 +66,7 @@ section .description p { #home { box-shadow: 0 8px 20px -6px #a6a8ab; display: flex; + height: 80vh; } @media screen and (max-width: 1024px) { #home { @@ -84,6 +85,8 @@ section .description p { #home figure { opacity: 1; transition: opacity 500ms ease; + text-align: center; + align-self: flex-end; } @media screen and (max-width: 1024px) { #home figure { @@ -94,6 +97,9 @@ section .description p { #home figure.hide { opacity: 0; } +#home figure img { + width: 90%; +} #home .description { overflow-x: hidden; } @@ -365,7 +371,6 @@ section .description p { } } #branches .owl-branches .owl-item-branches { - display: flex; width: 97%; background-color: white; margin: 50px 0; @@ -377,13 +382,8 @@ section .description p { } } #branches .owl-branches .owl-item-branches figure { - width: 500px; - height: 255px; -} -@media screen and (max-width: 1024px) { - #branches .owl-branches .owl-item-branches figure { - width: 350px; - } + width: 100%; + height: 90%; } #branches .owl-branches .owl-item-branches figure img { width: 100%; @@ -405,12 +405,6 @@ section .description p { } #branches .owl-branches .owl-item-branches .description .person-name { color: #28aae2; - padding-top: 20px; -} -#branches .owl-branches .owl-item-branches blockquote { - font-size: 16px; - color: #808285; - line-height: 1.3; } #branches .branches-carousel-btn { text-align: center; @@ -422,9 +416,14 @@ section .description p { padding: 10px; background-color: #d2d4d5; color: #57595b; - margin: 0 12px; + margin: 0 0 0 12px; cursor: pointer; } +@media screen and (max-width: 1024px) { + #branches .branches-carousel-btn i { + margin: 50px 0 0 12px; + } +} #enquiry { background: linear-gradient(#28aae2, #2b3991); diff --git a/static/css/service.css b/static/css/service.css index 266791c..bb681ff 100644 --- a/static/css/service.css +++ b/static/css/service.css @@ -68,6 +68,19 @@ .service-content object.active { display: block; } +@media screen and (max-width: 1024px) { + .service-content object.active { + display: none; + } +} +.service-content iframe { + display: none; +} +@media screen and (max-width: 1024px) { + .service-content iframe.active { + display: block; + } +} .service-content ul { width: 25%; display: flex; diff --git a/static/images/edits/bank-1.jpg b/static/images/edits/bank-1.jpg new file mode 100644 index 0000000..fba3ec7 Binary files /dev/null and b/static/images/edits/bank-1.jpg differ diff --git a/static/images/edits/bank-2.jpg b/static/images/edits/bank-2.jpg new file mode 100644 index 0000000..85c87a0 Binary files /dev/null and b/static/images/edits/bank-2.jpg differ diff --git a/static/images/edits/bank-3.jpg b/static/images/edits/bank-3.jpg new file mode 100644 index 0000000..3f113ec Binary files /dev/null and b/static/images/edits/bank-3.jpg differ diff --git a/static/images/edits/bank.JPG b/static/images/edits/bank.JPG new file mode 100644 index 0000000..c2c3188 Binary files /dev/null and b/static/images/edits/bank.JPG differ diff --git a/static/images/edits/founders.jpg b/static/images/edits/founders.jpg new file mode 100644 index 0000000..0085c6f Binary files /dev/null and b/static/images/edits/founders.jpg differ diff --git a/static/images/edits/logo.jpg b/static/images/edits/logo.jpg new file mode 100644 index 0000000..af25141 Binary files /dev/null and b/static/images/edits/logo.jpg differ diff --git a/static/js/common.js b/static/js/common.js index 8821ca5..82326f1 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -10,4 +10,16 @@ function page_scroll() { } else { page_header.classList.add('minimize'); } +} + +var hamburger_menu = document.getElementById('mobile-hamburger-menu'); +var mobile_menu = document.getElementById('mobile-nav-menu'); + +hamburger_menu.addEventListener('click', show_menu); + +function show_menu() { + 'use strict'; + hamburger_menu.classList.toggle('active'); + document.body.classList.toggle('non-scrollable'); + mobile_menu.classList.toggle('show'); } \ No newline at end of file diff --git a/static/js/home.js b/static/js/home.js index 831aad4..2b95f71 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -1,15 +1,3 @@ -var hamburger_menu = document.getElementById('mobile-hamburger-menu'); -var mobile_menu = document.getElementById('mobile-nav-menu'); - -hamburger_menu.addEventListener('click', show_menu); - -function show_menu() { - 'use strict'; - hamburger_menu.classList.toggle('active'); - document.body.classList.toggle('non-scrollable'); - mobile_menu.classList.toggle('show'); -} - var desktop_navigation_menu_links = document.querySelectorAll('#desktop-navigation-menu ul li'); for (var i = 0; i < desktop_navigation_menu_links.length; i++) { @@ -87,15 +75,15 @@ function hide_mobile_nav() { } // Native method of doing smooth scrolling -// document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { -// anchor.addEventListener('click', function (e) { -// e.preventDefault(); +document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function (e) { + e.preventDefault(); -// document.querySelector(this.getAttribute('href')).scrollIntoView({ -// behavior: 'smooth' -// }); -// }); -// }); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); // Support for old Browsers. $(document).on('click', 'a[href^="#"]', function (event) { @@ -145,7 +133,7 @@ var owl = $('.owl-branches'); owl.owlCarousel({ loop: true, margin: 0, - autoplay: true, + autoplay: false, autoplayTimeout: 3000, autoplayHoverPause: true, responsiveClass: true, @@ -157,8 +145,7 @@ owl.owlCarousel({ items: 1 }, 1000: { - items: 2, - stagePadding: -10 + items: 3, } } }); diff --git a/static/scss/about.scss b/static/scss/about.scss index 7c597cf..506afc4 100644 --- a/static/scss/about.scss +++ b/static/scss/about.scss @@ -40,12 +40,20 @@ width: 90%; margin: 0 auto; + @media screen and (max-width: 1024px) { + flex-direction: column; + } + .description { width: 60%; align-self: center; display: flex; justify-content: space-between; flex-direction: column; + + @media screen and (max-width: 1024px) { + width: 100%; + } p { width: 100%; @@ -68,18 +76,29 @@ width: 37%; align-self: center; display: flex; + height: 50vh; + + @media screen and (max-width: 1024px) { + width: 100%; + } img { width: 100%; align-self: center; + height: 100%; + object-fit: cover; + object-position: top; } } p { - margin-top: 30px; width: 90%; - margin: 30px auto 0; + margin: 0 auto 0; padding-bottom: 50px; + + @media screen and (max-width: 1024px) { + margin: 0 auto; + } } } diff --git a/static/scss/common.scss b/static/scss/common.scss index 14ce66f..83ac8f9 100644 --- a/static/scss/common.scss +++ b/static/scss/common.scss @@ -127,7 +127,7 @@ mark { } .inner-header { - width: 80%; + width: 90%; display: flex; justify-content: space-between; margin: 0 auto; @@ -135,30 +135,43 @@ mark { @media screen and (max-width: 1024px) { width: 100%; - justify-content: space-around; + justify-content: none; } } .temp-brand { display: flex; align-self: center; - width: 20%; + width: auto; justify-content: center; + cursor: pointer; + + @media screen and (max-width: 1024px) { + justify-content: unset; + width: calc(100% -55px); + } figure { margin-right: 15px; + width: 60px; + height: 60px; img { width: 100%; + height: 100%; } } h1 { - font-size: $heading_size; + font-size: 20px; align-self: center; letter-spacing: -0.65px; font-family: 'Archivo Black', sans-serif; + @media screen and (max-width: 1024px) { + font-size: 15px; + } + mark { color: $blue; } @@ -194,6 +207,10 @@ mark { position: relative; height: 25px; + @media screen and (max-width: 1024px) { + width: 45px; + } + &.active { .icon-line { diff --git a/static/scss/home.scss b/static/scss/home.scss index 6d98d50..03274d8 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -50,6 +50,7 @@ section { #home { box-shadow: 0 8px 20px -6px $gray; display: flex; + height: 80vh; @media screen and (max-width: 1024px) { flex-direction: column; @@ -67,6 +68,8 @@ section { figure { opacity: 1; transition: opacity 500ms ease; + text-align: center; + align-self: flex-end; @media screen and (max-width: 1024px) { width: 100%; @@ -76,6 +79,10 @@ section { &.hide { opacity: 0; } + + img { + width: 90%; + } } .description { @@ -376,7 +383,6 @@ section { } .owl-item-branches { - display: flex; width: 97%; background-color: white; margin: 50px 0; @@ -387,12 +393,8 @@ section { } figure { - width: 500px; - height: 255px; - - @media screen and (max-width: 1024px) { - width: 350px; - } + width: 100%; + height: 90%; img { width: 100%; @@ -418,16 +420,9 @@ section { .person-name { color: $blue; - padding-top: 20px; } } - - blockquote { - font-size: $paragraph_size; - color: $dark_gray; - line-height: 1.3; - } } } @@ -441,8 +436,12 @@ section { padding: 10px; background-color: $light_gray; color: $brown; - margin: 0 12px; + margin: 0 0 0 12px; cursor: pointer; + + @media screen and (max-width: 1024px) { + margin: 50px 0 0 12px; + } } } } diff --git a/static/scss/service.scss b/static/scss/service.scss index f7355dc..b3765eb 100644 --- a/static/scss/service.scss +++ b/static/scss/service.scss @@ -47,6 +47,20 @@ &.active { display: block; + + @media screen and (max-width: 1024px) { + display: none; + } + } + } + + iframe { + display: none; + + @media screen and (max-width: 1024px) { + &.active { + display: block; + } } } diff --git a/templates/about.html b/templates/about.html index a2a7a7e..9d61587 100644 --- a/templates/about.html +++ b/templates/about.html @@ -16,7 +16,7 @@
- +
About BCB
diff --git a/templates/base.html b/templates/base.html index 7436f13..0a34f31 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ - Fundzin + BCB {% load staticfiles %} @@ -17,7 +17,7 @@
-
Welcome To Fundzin
+
Welcome To BCB
  • @@ -35,28 +35,7 @@
{% block navigation %} {% endblock navigation %} - + {% block content %} {% endblock content %}
+
- +

@@ -79,7 +101,7 @@ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

- +

@@ -181,16 +203,8 @@
-
- Lorem ipsum dolor sit amet, con- - sectetur adipiscing elit, sed do - eiusmod tempor incididunt ut - labore et dolore magna aliqua. - Ut enim ad minim veniam. -
-
Nagarabjavi
-
Bangalore
-
Karnataka
+
Nagarabhavi
+
Bangalore, Karnataka
@@ -198,16 +212,8 @@
-
- Lorem ipsum dolor sit amet, con- - sectetur adipiscing elit, sed do - eiusmod tempor incididunt ut - labore et dolore magna aliqua. - Ut enim ad minim veniam. -
-
Nagarabjavi
-
Bangalore
-
Karnataka
+
Nagarabhavi
+
Bangalore, Karnataka
@@ -215,16 +221,8 @@
-
- Lorem ipsum dolor sit amet, con- - sectetur adipiscing elit, sed do - eiusmod tempor incididunt ut - labore et dolore magna aliqua. - Ut enim ad minim veniam. -
-
Nagarabjavi
-
Bangalore
-
Karnataka
+
Nagarabhavi
+
Bangalore, Karnataka
@@ -232,16 +230,8 @@
-
- Lorem ipsum dolor sit amet, con- - sectetur adipiscing elit, sed do - eiusmod tempor incididunt ut - labore et dolore magna aliqua. - Ut enim ad minim veniam. -
-
Nagarabjavi
-
Bangalore
-
Karnataka
+
Nagarabhavi
+
Bangalore, Karnataka
@@ -249,16 +239,8 @@
-
- Lorem ipsum dolor sit amet, con- - sectetur adipiscing elit, sed do - eiusmod tempor incididunt ut - labore et dolore magna aliqua. - Ut enim ad minim veniam. -
-
Nagarabjavi
-
Bangalore
-
Karnataka
+
Nagarabhavi
+
Bangalore, Karnataka
diff --git a/templates/partials/navigation.html b/templates/partials/navigation.html index cb7f3b4..edc02ec 100644 --- a/templates/partials/navigation.html +++ b/templates/partials/navigation.html @@ -5,9 +5,9 @@
- +
-

Fundzin

+

The Bharath Co-operative Bank
+ + {% endblock navigation %} \ No newline at end of file