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 %}
	<header id="page-header">
		<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="#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>
	<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:info@fundzin.com">info@fundzin.com</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:+123456789">123-456-7890</a>
				</div>
			</li>
			<li>
				<img src="{% static 'images/time.svg' %}" alt="">
				<div class="contact-content">
					<span>Opening Hours</span>
					<span>Mon-Fri: 9:00 to 6:00</span>
				</div>
			</li>
		</ul>
	</div>
	<section id="home">
		<figure class="hide">
			<img src="{% static 'images/banner.png' %}" alt="">
		</figure>
		<div class="description hide">
			<h3>
				BEING IN CONTROL <br>OF YOUR <mark>FINANCES</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>
			<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>FUNDZIN</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>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
					incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos-
					trud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
					aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
					nulla pariatur.
				</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="/service" class="inner-contents">
					<img src="{% static 'images/car.svg' %}" alt="">
					<div class="title">ATM Services</div>
					<p>	Lorem ipsum dolor sit amet,
						consectetur adipiscing elit, sed
						do eiusmod tempor
					</p>
				</a>
			</li>
			<li>
				<a href="/service" class="inner-contents">
					<img src="{% static 'images/payment-method.svg' %}" alt="">
					<div class="title">ABB Services</div>
					<p>	Lorem ipsum dolor sit amet,
						consectetur adipiscing elit, sed
						do eiusmod tempor
					</p>
				</a>
			</li>
			<li>
				<a href="/service" class="inner-contents">
					<img src="{% static 'images/economic-growth.svg' %}" alt="">
					<div class="title">Deposits</div>
					<p>	Lorem ipsum dolor sit amet,
						consectetur adipiscing elit, sed
						do eiusmod tempor
					</p>
				</a>
			</li>
			<li>
				<a href="/service" class="inner-contents">
					<img src="{% static 'images/bank-building.svg' %}" alt="">
					<div class="title">Loans</div>
					<p>	Lorem ipsum dolor sit amet,
						consectetur adipiscing elit, sed
						do eiusmod tempor
					</p>
				</a>
			</li>
			<li>
				<a href="/service" class="inner-contents">
					<img src="{% static 'images/car.svg' %}" alt="">
					<div class="title">Advance</div>
					<p>	Lorem ipsum dolor sit amet,
						consectetur adipiscing elit, sed
						do eiusmod tempor
					</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>
			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="owl-carousel owl-branches">
			<div class="owl-item-branches">
				<figure>
					<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>
			</div>
			<div class="owl-item-branches">
				<figure>
					<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>
			</div>
			<div class="owl-item-branches">
				<figure>
					<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>
			</div>
			<div class="owl-item-branches">
				<figure>
					<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>
			</div>
			<div class="owl-item-branches">
				<figure>
					<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>
			</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>
						123 Beautiful Colony,
						Best Layout, 10th Main, 31st Cross,
						Bengaluru-560 007
					</address>
				</li>
				<li>
					<label>Phone</label>
					<div class="contact-content">(123) 456-7890</div>
				</li>
				<li>
					<label>E-mail</label>
					<div class="contact-content">hello@antique.com</div>
				</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 %}