<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Css style -->
    <link rel="stylesheet" href="/indexStyle.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookify</title>
</head>

<body>
    <!-- Navbar -->
    <div class="navbar">
        <ul>
            <a href="#">
                <li class="nav--title">BOOKIFY</li>
            </a>
            <a href="/login">
                <li class="nav--login"><button>Login</button></li>
            </a>
            <li class="nav--small">Contact</li>
            <li class="nav--small">About</li>
        </ul>
    </div>

    <div class="banner">
        <div class="banner--content">
            <div class="text--content">
                <ul>
                    <li class="big--text">KEEP TRACK OF YOUR READING PROGRESS</li>
                    <li class="small--text">Store your book titles in bookify and write your notes for a better
                        acknowledging of your favourite reads. Search for a variety of titles and add them to their
                        profile.</li>
                    <li><a href="/register"><button>Create your free account</button></a></li>
                </ul>
            </div>
            <div class="illustration">
                <img src="/banner.png">
            </div>
        </div>
    </div>

    <div class="about">
        <div class="about--title">Why is bookify useful?</div>
        <div class="about--content">
            <div class="component">
                <div class="component--color"></div>
                <div class="component--title">Store owned books</div>
                <div class="component--text">Put your owned book titles all in one place and keep track of your reading.
                </div>
            </div>

            <div class="component">
                <div class="component--color"></div>
                <div class="component--title">Take notes</div>
                <div class="component--text">In order to gain better knowledge from your lecture, you can also store
                    notes.
                </div>
            </div>

            <div class="component">
                <div class="component--color"></div>
                <div class="component--title">Store owned books</div>
                <div class="component--text">Put your owned book titles all in one place and keep track of your reading.
                </div>
            </div>
        </div>
    </div>

    <div class="contact">
        <div class="contact--title">Contact</div>
        <div class="contact--clip"></div>
        <div class="contact--flex">
            <div class="contact--text">Dancau Sebastian<br>
                sebidancau@yahoo.com <br>
                <a href="https://www.facebook.com/sebastian.dancau.9" target="_blank"><i class="fa fa-facebook"
                        aria-hidden="true"></i></a>
                <a href="https://github.com/Ssebi1" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
                <a href="https://twitter.com/sebidancau1701" target="_blank"><i class="fa fa-twitter"
                        aria-hidden="true"></i></a>
            </div>
            <div class="contact--image"><img src="/profile.png"></div>

        </div>

    </div>

    <div class="footer">
        <div class="footer--text">Designed and developed <br>
            by Dancau Sebastian <br>
            Copyright 2020</div>
    </div>
    <script>
        var buttons = document.querySelectorAll('.nav--small');
        buttons[0].addEventListener('click', () => {
            document.querySelector('.contact').scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' });
        });

        buttons[1].addEventListener('click', () => {
            document.querySelector('.about').scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' });
        });
    </script>
</body>

</html>