content update and UI fixes.

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%;

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);
 }

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);

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;

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');
 }

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,
 		}
 	}
 });

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;
+		}
     }
 }
 

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 {

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;
+			}
 		}
 	}
 }

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;
+            }
         }
     }
 

templates/about.html

@@ -16,7 +16,7 @@
 <section class="about-content">
     <div class="inner-container">
         <figure>
-            <img src="{% static 'images/cover-image.jpg' %}" alt="">
+            <img src="{% static 'images/edits/founders.jpg' %}" alt="">
         </figure>
         <div class="description">
             <div class="heading"><marked>About</marked> BCB</div>

templates/base.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
-        <title>Fundzin</title>
+        <title>BCB</title>
         {% load staticfiles %}
         <!-- Using Google hot link to render fonts, downloaded Archgivo Black fonts isn't same as the previewed. -->
         <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
@@ -17,7 +17,7 @@
     </head>
     <body>
         <div class="temp-intro">
-            <div class="temp-name">Welcome To <mark>Fundzin</mark></div>
+            <div class="temp-name">Welcome To <mark>BCB</mark></div>
             <ul class="temp-social">
                 <li>
                     <a href="#"><i class="fab fa-facebook-f"></i></a>
@@ -35,28 +35,7 @@
         </div>
         {% block navigation %}
         {% endblock navigation %}
-        <nav id="mobile-nav-menu">
-            <ul>
-                <li class="active">
-                    <a href="#home">HOME</a>
-                </li>
-                <li>
-                    <a href="#about">ABOUT</a>
-                </li>
-                <li>
-                    <a href="#service">SERVICES</a>
-                </li>
-                <li>
-                    <a href="#testimonial">TESTIMONIAL</a>
-                </li>
-                <li>
-                    <a href="#enquiry">ENQUIRY</a>
-                </li>
-                <li>
-                    <a href="#contact">CONTACT</a>
-                </li>
-            </ul>
-        </nav>
+
         {% block content %}
         {% endblock content %}
         <footer id="footer">

templates/home.html

@@ -8,12 +8,12 @@
 {% block content %}
 	<header id="page-header">
 		<div class="inner-header">
-			<div class="temp-brand">
+			<a href = "/" class="temp-brand">
 				<figure>
-					<img src="{% static 'images/logo-icon.png' %}" alt="">
+					<img src="{% static 'images/edits/logo.jpg' %}" alt="">
 				</figure>
-				<h1><mark>Fundz</mark>in</h1>
-			</div>
+				<h1>The <mark>Bharath Co-operative</mark> Bank</h1>
+			</a>
 			<nav id="desktop-navigation-menu">
 				<ul>
 					<li class="active">
@@ -41,6 +41,28 @@
 			</section>
 		</div>
 	</header>
+	<nav id="mobile-nav-menu">
+		<ul>
+			<li class="active">
+				<a href="#home">HOME</a>
+			</li>
+			<li>
+				<a href="#about">ABOUT</a>
+			</li>
+			<li>
+				<a href="#service">SERVICES</a>
+			</li>
+			<li>
+				<a href="#branches">BRANCHES</a>
+			</li>
+			<li>
+				<a href="#enquiry">ENQUIRY</a>
+			</li>
+			<li>
+				<a href="#contact">CONTACT</a>
+			</li>
+		</ul>
+	</nav>
 	<div class="temp-contact-info">
 		<ul>
 			<li>
@@ -68,7 +90,7 @@
 	</div>
 	<section id="home">
 		<figure class="hide">
-			<img src="{% static 'images/banner.png' %}" alt="">
+			<img src="{% static 'images/edits/bank.JPG' %}" alt="">
 		</figure>
 		<div class="description hide">
 			<h3>
@@ -79,7 +101,7 @@
 				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 				enim ad minim veniam.
 			</p>
-			<a href="/service">
+			<a href="#service">
 				<button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
 			</a>
 		</div>
@@ -181,16 +203,8 @@
 					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
 				</figure>
 				<div class="description">
-					<blockquote>
-						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.
-					</blockquote>
-					<div class="person-name">Nagarabjavi</div>
-					<div class="person-info">Bangalore</div>
-					<div class="person-info">Karnataka</div>
+					<div class="person-name">Nagarabhavi</div>
+					<div class="person-info">Bangalore, Karnataka</div>
 				</div>
 			</div>
 			<div class="owl-item-branches">
@@ -198,16 +212,8 @@
 					<img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
 				</figure>
 				<div class="description">
-					<blockquote>
-						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.
-					</blockquote>
-					<div class="person-name">Nagarabjavi</div>
-					<div class="person-info">Bangalore</div>
-					<div class="person-info">Karnataka</div>
+					<div class="person-name">Nagarabhavi</div>
+					<div class="person-info">Bangalore, Karnataka</div>
 				</div>
 			</div>
 			<div class="owl-item-branches">
@@ -215,16 +221,8 @@
 					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
 				</figure>
 				<div class="description">
-					<blockquote>
-						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.
-					</blockquote>
-					<div class="person-name">Nagarabjavi</div>
-					<div class="person-info">Bangalore</div>
-					<div class="person-info">Karnataka</div>
+					<div class="person-name">Nagarabhavi</div>
+					<div class="person-info">Bangalore, Karnataka</div>
 				</div>
 			</div>
 			<div class="owl-item-branches">
@@ -232,16 +230,8 @@
 					<img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
 				</figure>
 				<div class="description">
-					<blockquote>
-						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.
-					</blockquote>
-					<div class="person-name">Nagarabjavi</div>
-					<div class="person-info">Bangalore</div>
-					<div class="person-info">Karnataka</div>
+					<div class="person-name">Nagarabhavi</div>
+					<div class="person-info">Bangalore, Karnataka</div>
 				</div>
 			</div>
 			<div class="owl-item-branches">
@@ -249,16 +239,8 @@
 					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
 				</figure>
 				<div class="description">
-					<blockquote>
-						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.
-					</blockquote>
-					<div class="person-name">Nagarabjavi</div>
-					<div class="person-info">Bangalore</div>
-					<div class="person-info">Karnataka</div>
+					<div class="person-name">Nagarabhavi</div>
+					<div class="person-info">Bangalore, Karnataka</div>
 				</div>
 			</div>
 		</div>

templates/partials/navigation.html

@@ -5,9 +5,9 @@
     <div class="inner-header">
         <a href = "/" class="temp-brand">
             <figure>
-                <img src="{% static 'images/logo-icon.png' %}" alt="">
+                <img src="{% static 'images/edits/logo.jpg' %}" alt="">
             </figure>
-            <h1><mark>Fundz</mark>in</h1>
+            <h1>The <mark>Bharath Co-operative</mark> Bank</h1>
         </a>
         <nav id="desktop-navigation-menu">
             <ul>
@@ -20,9 +20,6 @@
                 <li {% if menu == 'Service' %} class="active" {% endif %}>
                     <a href="/service">SERVICES</a>
                 </li>
-                <li>
-                    <a href="/">TESTIMONIAL</a>
-                </li>
                 <li>
                     <a href="/">ENQUIRY</a>
                 </li>
@@ -36,4 +33,24 @@
         </section>
     </div>
 </header>
+
+<nav id="mobile-nav-menu">
+    <ul>
+        <li class="active">
+            <a href="/">HOME</a>
+        </li>
+        <li>
+            <a href="/about">ABOUT</a>
+        </li>
+        <li>
+            <a href="/service">SERVICES</a>
+        </li>
+        <li>
+            <a href="/">ENQUIRY</a>
+        </li>
+        <li>
+            <a href="/">CONTACT</a>
+        </li>
+    </ul>
+</nav>
 {% endblock navigation %}