now-in-github-bcb-website/templates/home.html

{% extends 'base.html' %}
{% load staticfiles %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock stylesheets %}

{% block content %}
<section class="toast">
	<header>ANNOUNCEMENTS</header>
	<div class="close-toast"><img src="{% static 'images/down-chevron.svg' %}" alt=""></div>
	<ul>
		<li><a href="{% static 'files/gbm-notice-17-18.pdf' %}" target="_blank">General Body Meeting Notice 2017-2018 (Click to View/Download)</a></li>
	</ul>
</section>
<div class="temp-intro-home">
		<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>
			</li>
			<li>
				<a href="#"><i class="fab fa-twitter"></i></a>
			</li>
			<li>
				<a href="#"><i class="fab fa-linkedin-in"></i></a>
			</li>
			<li>
				<a href="#"><i class="fab fa-google-plus-g"></i></a>
			</li>
		</ul> -->
	</div>
	<header id="page-header">
		<div class="inner-header">
			<a href = "/" class="temp-brand">
				<figure>
					<img src="{% static 'images/edits/logo.jpg' %}" alt="">
				</figure>
				<h1>The <mark>Bharath Co-operative</mark> Bank</h1>
			</a>
			<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="#branches">BRANCHES</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>
	</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>
				<img src="{% static 'images/mail-icon.svg' %}" alt="">
				<div class="contact-content">
					<span>Send us a message</span>
					<a href="mailto:bcbho34@bsnl.in">bcbho34@bsnl.in</a>
				</div>
			</li>
			<li class="active">
				<img src="{% static 'images/phone-call.svg' %}" alt="">
				<div class="contact-content">
					<span>Give us a Call</span>
					<a href="tel:+26632783">2663 2783, 2663 3566</a>
				</div>
			</li>
			<li>
				<img src="{% static 'images/time.svg' %}" alt="">
				<div class="contact-content">
					<span>Opening Hours (Head Office)</span>
					<span>Mon-Sat: 9:30 A.M - 12:30 P.M, <br> 4:30 P.M - 7:00 P.M</span>
				</div>
			</li>
		</ul>
	</div>
	<section id="home">
		<figure class="hide">
			<img src="{% static 'images/edits/bank.JPG' %}" alt="">
		</figure>
		<div class="description hide">
			<h3>
				BEING IN CONTROL <br>OF YOUR <mark>FINANCES</mark>
			</h3>
			<p>
				To emerge as a prime national bank backed by modern technology
				meeting customer’s aspirations with professional banking services and
				sustained growth contributing to national development.
			</p>
			<a href="#service">
				<button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
			</a>
		</div>
	</section>
	<section id="about">
		<div class="wrapper">
			<div class="description">
				<h3>ABOUT <mark>BCB</mark></h3>
				<!-- <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
					incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
				</p> -->
				<p>
					Vision of Bharath Co-operative Bank is to be sound and strong, truly
					member owned, democratically controlled and ethically managed
					banking institution with high degree of transparency, and providing need
					based services essentially to the middle class, lower –middle class and
					marginalized section of society.
				</p>
				<a href="/about">
					<button type="button">Read More</button>
				</a>
			</div>
			<figure>
				<img src="{% static 'images/03.png' %}" alt="">
			</figure>
		</div>
	</section>
	<section id="service">
		<h3>OUR SEVICES</h3>
		<!-- <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam.
		</p> -->
		<ul class="owl-carousel owl-service">
			<li>
				<a href="/deposit" class="inner-contents">
					<img src="{% static 'images/economic-growth.svg' %}" alt="">
					<div class="title">DEPOSIT SCHEMES</div>
					<p>Save for the future, the way you want to, with our range of Deposits</p>
				</a>
			</li>
			<li>
				<a href="/loans" class="inner-contents">
					<img src="{% static 'images/payment-method.svg' %}" alt="">
					<div class="title">LOANS AND ADVANCES</div>
					<p>	
						Get a step closer to fulfilling your dreams by applying for personal loan
						and meet your financial needs at attractive interest rates.
					</p>
				</a>
			</li>
			<li>
				<a href="/others" class="inner-contents">
					<img src="{% static 'images/bank-building.svg' %}" alt="">
					<div class="title">OTHER SERVICES</div>
					<p>	Time is money and we at Barath Co-Operative Bank value your time. 
						Change the way you bank.
					</p>
				</a>
			</li>
		</ul>
		<div class="service-carousel-btn">
			<i class="fas fa-chevron-left" id="service-carousel-right-btn"></i>
			<i class="fas fa-chevron-right" id="service-carousel-left-btn"></i>
		</div>
	</section>
	<section id="branches">
		<h3>BRANCHES</h3>
		<p>
			Weekly Holidays: Sunday, 2nd and 4th Saturdays.		
		</p>
		<div class="owl-carousel owl-branches">
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/head-office.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">JAYANAGAR</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.30 pm - 7.00 p.m
					</div>
					<div class="person-info">H.O: #30, 15th cross, 3rd block, Bangalore - 011</div>
					<div class="person-info">PH : 2663 2783, 2663 3566</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/mathikere.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">mathikere</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 1047, Triveni road, Bangalore - 054</div>
					<div class="person-info">PH : 2337 4010</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/vijaynagar.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">vijayanagar</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 2941/E, Service road, OPP. Maruthi Mandir, Vijayanagar 2nd stage, Bangalore - 040</div>
					<div class="person-info">PH : 2340 3063</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/kengeri.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">kengeri</div>
					<div class="person-info">
						10.00 a.m - 1.30 p.m,
						2.00 pm - 4.00 p.m
					</div>
					<div class="person-info">No. 40, SLN Complex Mysore road, Kengeri town, Bangalore - 060</div>
					<div class="person-info">PH : 2848 2256</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/yelanka.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">yelanka</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 796, 8th Main Road, 'A' sector, Opp. N.E.S Office, Yelahanka New Town, Bangalore - 064</div>
					<div class="person-info">PH : 2856 2074</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/beguru.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">beguru</div>
					<div class="person-info">
						10.00 a.m - 1.30 p.m.
						2.00 pm - 5.00 p.m
					</div>
					<div class="person-info">16th Main, 4th Block, Bangalore - 011</div>
					<div class="person-info">PH : 2574 0777</div>
				</div>
			</div>
		</div>
		<div class="branches-carousel-btn">
			<i class="fas fa-chevron-left" id="branches-carousel-right-btn" ></i>
			<i class="fas fa-chevron-right" id="branches-carousel-left-btn"></i>
		</div>
	</section>
	<section id="enquiry">
		<h3>ENQUIRY FORM</h3>
		<!-- <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam.
		</p> -->
		<form>
			<fieldset>
				<input type="text" placeholder="Name">
				<input type="email" placeholder="Email ID">
				<input type="tel" placeholder="Phone">
				<input type="text" placeholder="Subject">
				<textarea name="message" rows="6" placeholder="Your Message..."></textarea>
				<button type="button">Send</button>
			</fieldset>
		</form>
	</section>
	<section id="contact">
		<h3>CONTACT US</h3>
		<!-- <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam.
		</p> -->
		<div class="inner-container">
			<figure>
				<img src="{% static 'images/map.png' %}" alt="">
			</figure>
			<ul class="description-container">
				<li>
					<label>Address</label>
					<address>
						H.O: #30, 15th cross, 3rd block, Bangalore - 560 011
					</address>
				</li>
				<li>
					<label>Phone</label>
					<div class="contact-content">2663 2783, 2663 3566</div>
				</li>
				<li>
					<label>E-mail</label>
					<a href="mailto:bcbho34@bsnl.in" class="contact-content">bcbho34@bsnl.in</a>
				</li>
				<!-- <li>
					<label>Socials</label>
					<ul class="contact-content">
						<li>
							<a href="#"><i class="fab fa-facebook-f"></i></a>
						</li>
						<li>
							<a href="#"><i class="fab fa-twitter"></i></a>
						</li>
						<li>
							<a href="#"><i class="fab fa-linkedin-in"></i></a>
						</li>
						<li>
							<a href="#"><i class="fab fa-google-plus-g"></i></a>
						</li>
					</ul>
				</li> -->
			</ul>
		</div>
	</section>
{% endblock content %}

{% block scripts %}
<script src="{% static 'js/home.js' %}"></script>
{% endblock scripts %}