{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<div id="fullpage">
    <section class="section slider" id="sec1" data-anchor="section1">
        <div class="home-slider overflow-hidden">
            {% for i in range(0, 4) -%}
            <div class="slide-item overflow-hidden">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-7">
                            <div class="slide-content d-flex align-items-center vcenter">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h2 class="text-bold mt-0 mb-3">Enjoy your future endeavors online payments</h2>
                                    </div>
                                    <div class="col-sm-7">
                                        <p>Classifieds are usually the first place you think of when you are getting ready to make a purchase. Whether you want to purchase a vehicle, bed, or pet, the classified section of your local newspaper can be one of the best resources available. </p>
                                        <a href="#" class="btn d-inline-block mt-4">Read more</a>
                                    </div>
                                </div>
                            </div>
                            <div class="slide-image cover" style="background-image: url('./assets/images/jonathan-riley-VW8MUbHyxCU-unsplash.jpg')"></div>
                        </div>
                    </div>
                </div>
            </div>
            {%- endfor %}
        </div>
        <div class="slider-nav overflow-hidden">
            <div class="container">
                <div class="d-flex justify-content-end align-items-center">
                    <div class="arrows">
                        <button type='button' class='prev'><i class='fas fa-chevron-left'></i></button>
                        <button type='button' class='next'><i class='fas fa-chevron-right'></i></button>
                    </div>
                    <nav class="bank-nav d-flex align-items-center">
                        <a href="#" class="mr-4 d-flex align-items-center text-semibold"><img src="./assets/images/mobile-banking.svg" alt="" class="mr-2">Mobile Banking</a>
                        <a href="#" class="mr-4 d-flex align-items-center text-semibold"><img src="./assets/images/wallet.svg" alt="" class="mr-2">E-Wallet</a>
                        <a href="#" class="mr-4 d-flex align-items-center text-semibold"><img src="./assets/images/currency.svg" alt="" class="mr-2">Exchange currancy</a>
                        <a href="#" class="d-flex align-items-center text-semibold"><img src="./assets/images/map.svg" alt="" class="mr-2">Branch Locator</a>
                    </nav>
                </div>

            </div>
        </div>
    </section>

    <section class="section position-relative" id="sec2" data-anchor="section2">
        <div class="slide cover" style="background-image: url('./assets/images/bg-white.jpg')">
            <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-semibold active" id="normal-tab" data-toggle="tab" href="#normal" role="tab" aria-controls="normal" aria-selected="true">Personal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-semibold" id="alpha-tab" data-toggle="tab" href="#alpha" role="tab" aria-controls="alpha" aria-selected="false">Excellence</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContentt">
                <div class="tab-pane fade show active" id="normal" role="tabpanel" aria-labelledby="normal-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="slide-content vcenter section-content">
                                    <div>
                                        <img src="./assets/images/logo-green.png" alt="">
                                        <h2 class="mt-3 text-bold text-green">Ebank Normal</h2>
                                        <p>When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?</p>
                                        <div class="mt-4">
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Savings
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Accounts
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Cards
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Payroll
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Funds
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-green text-bold">
                                                    <img src="./assets/images/wave-green.png" alt="" class="mr-2">
                                                    Loans
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="section-image text-right">
                                    <img src="./assets/images/user-1.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide cover" style="background-image: url('./assets/images/bg-purple.jpg')">
            <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="myTabb" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-semibold" id="normall-tab" data-toggle="tab" href="#normal" role="tab" aria-controls="normal" aria-selected="true">Personal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-semibold active" id="alphaa-tab" data-toggle="tab" href="#alpha" role="tab" aria-controls="alpha" aria-selected="false">Excellence</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade  show active" id="alpha" role="tabpanel" aria-labelledby="alpha-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="slide-content vcenter section-content">
                                    <div>
                                        <img src="./assets/images/Ebank-logo-white.png" alt="">
                                        <h2 class="mt-3 text-bold text-white">Ebank Alpha</h2>
                                        <p class="text-white">When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?</p>
                                        <div class="mt-4">
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Savings
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Accounts
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Cards
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Payroll
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Funds
                                                </div>
                                            </div>
                                            <div class="d-inline-block">
                                                <div class="mr-4 mb-3 d-flex align-items-center text-white text-bold">
                                                    <img src="./assets/images/wave-white.png" alt="" class="mr-2">
                                                    Loans
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="section-image text-right">
                                    <img src="./assets/images/user-2.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="section position-relative" id="sec3" data-anchor="section3">
        <div class="slide cover" style="background-image: url('./assets/images/bg-white.jpg')">
            <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="mobileBanking" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-semibold" id="products-tab" data-toggle="tab" href="#products" role="tab" aria-controls="normal" aria-selected="true">Bank Products</a>
                </li>
            </ul>
            <div class="tab-content" id="mobileBankingContent">
                <div class="tab-pane fade show active" id="products" role="tabpanel" aria-labelledby="products-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="slide-content vcenter section-content">
                                    <div>
                                        <img src="./assets/images/ebnak-colored.png" alt="">
                                        <h2 class="mt-3 text-bold text-primaryColor">Mobile internet Banking</h2>
                                        <p>When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?
                                            When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?</p>
                                        <a href="#" class="btn d-inline-block mt-4">Read more</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="section-image">
                                    <div id="mobile-banking" class="svg-reposition"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide cover" style="background-image: url('./assets/images/bg-purple.jpg')">
            <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="offersAndCards" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-semibold active" id="offers-tab" data-toggle="tab" href="#offers" role="tab" aria-controls="normal" aria-selected="true">Cards and offers</a>
                </li>
            </ul>
            <div class="tab-content" id="offersAndCardsContent">
                <div class="tab-pane fade show active" id="offers" role="tabpanel" aria-labelledby="products-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="slide-content vcenter section-content">
                                    <div>
                                        <img src="./assets/images/Ebank-logo-white.png" alt="">
                                        <h2 class="mt-3 text-bold text-white">Cards and offers</h2>
                                        <p class="text-white">When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?
                                            When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?</p>
                                        <a href="#" class="btn btn-white d-inline-block mt-4">Read more</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="section-image">
                                    <div id="cards-offers" class="svg-reposition"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide sec-pad cover" style="background-image: url('./assets/images/bg-white.jpg')">
            <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="ebankLoans" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-semibold" id="loans-tab" data-toggle="tab" href="#loans" role="tab" aria-controls="normal" aria-selected="true">EBank Loans</a>
                </li>
            </ul>
            <div class="tab-content" id="ebankLoansContent">
                <div class="tab-pane sec-pad cover fade show active" id="loans" role="tabpanel" aria-labelledby="products-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="slide-content vcenter section-content">
                                    <div>
                                        <img src="./assets/images/ebnak-colored.png" alt="">
                                        <h2 class="mt-3 text-bold text-primaryColor">EBank Loans</h2>
                                        <p>When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?
                                            When you starting a company you are thinking on how to cut expenses. One of such options to cut the startup costs is a company logo design. But is it good idea to order a cheap logo or work without company logo at all?</p>
                                        <a href="#" class="btn d-inline-block mt-4">Read more</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="section-image">
                                    <div id="ebank-loans" class="svg-reposition"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section position-relative cover"  id="sec6" data-anchor="section6" style="background-image: url('./assets/images/bg-purple.jpg')">
        <ul class="nav nav-tabs nav-ebank d-flex justify-content-center" id="latestNews" role="tablist">
            <li class="nav-item">
                <a class="nav-link text-semibold active" id="news-tab" data-toggle="tab" href="#news" role="tab" aria-controls="normal" aria-selected="true">Latest News</a>
            </li>
        </ul>
        <div class="tab-content" id="latestNewsContent">
            <div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="card">
                                <div class="card-image cover" style="background-image: url('./assets/images/News-Image.jpg')"></div>
                                <div class="card-body">
                                    <h4 class="card-title">Motivation Is The First Step To Success</h4>
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center">
                                    <div class="footer-data text-semibold"><i class="fa fa-book mr-2"></i>10 mins read</div>
                                    <div class="footer-data text-semibold"><i class="far fa-clock mr-2"></i>24 mins ago</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="card">
                                <div class="card-image cover" style="background-image: url('./assets/images/News-Image-1.jpg')"></div>
                                <div class="card-body">
                                    <h4 class="card-title">Motivation Is The First Step To Success</h4>
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center">
                                    <div class="footer-data text-semibold"><i class="fa fa-book mr-2"></i>10 mins read</div>
                                    <div class="footer-data text-semibold"><i class="far fa-clock mr-2"></i>24 mins ago</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="card">
                                <div class="card-image cover" style="background-image: url('./assets/images/News-Image-2.jpg')"></div>
                                <div class="card-body">
                                    <h4 class="card-title">Motivation Is The First Step To Success</h4>
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center">
                                    <div class="footer-data text-semibold"><i class="fa fa-book mr-2"></i>10 mins read</div>
                                    <div class="footer-data text-semibold"><i class="far fa-clock mr-2"></i>24 mins ago</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="footer-logo mb-3">
                            <img src="./assets/images/ebnak-colored.png" alt="">
                        </div>
                        <p class="slogan mtsm">Buying the right telescope to take your love of astronomy to the next level.</p>
                    </div>
                    <div class="col-sm-3">
                        <div class="footer-links">
                            <h4 class="text-semibold mb-3">Quick links</h4>
                            <nav role="navigation">
                                <a class="text-capitalize d-block" href="#">About Us</a>
                                <a class="text-capitalize d-block" href="#">Personal Banking</a>
                                <a class="text-capitalize d-block" href="#">Alpha</a>
                                <a class="text-capitalize d-block" href="#">Corporate banking</a>
                                <a class="text-capitalize d-block" href="#">Investor relation</a>
                            </nav>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="footer-links">
                            <h4 class="text-semibold mb-3">Support</h4>
                            <nav role="navigation">
                                <a class="text-capitalize d-block" href="contact.html">contact us</a>
                                <a class="text-capitalize d-block" href="faq.html">FAQ</a>
                                <a class="text-capitalize d-block" href="terms.html">Terms and conditions</a>
                                <a class="text-capitalize d-block" href="privacy.html">Privacy Policy</a>
                            </nav>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="footer-links">
                            <h4 class="text-semibold mb-3">Connect with us:</h4>
                            <nav>
                                <a class="mrmd d-inline-block" href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                <a class="mrmd d-inline-block" href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                <a class="mrmd d-inline-block" href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                            </nav>
                        </div>
                        <div class="footer-links mtxlg footer-newsletter">
                            <h4 class="text-semibold mb-3">Sign up to our Newsletter</h4>
                            <form class="form-inline">
                                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
                                <button class="btn" type="submit"><img src="./assets/images/envelope.svg" alt="mail-icon"></button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="copyrights">
                    <div class="ebank-copy">Copyright© 2020 EBank, All Rights Reserved.</div>
                </div>
            </div>
        </footer>
    </section>

</div>

{% endblock content %}