index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Notepad</title>

    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel="stylesheet" href="assets/stylesheets/main.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Slab">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fredericka+the+Great">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope">

    <script src="scripts/main.js" async></script>

</head>

<body>

<header>

    <h4>The thing that everyone ever wanted</h4>
    <h1>Notepad</h1>
    <img src="assets/images/logo/notepad-logo.png" alt="Notepad"/>

</header>

<section id="primary-content">

    <section id="notes-list"></section>

    <section id="create-note">

        <div class="create-note-container">

            <div id="create-note-button-container">
                <div class="create-note-image-container">
                    <img src="assets/images/icons/create-note.png" alt="Create Note"/>
                </div>
                <br/>
                <h3>Create Note</h3>
                <span id="separator">__________</span>
                <br/>
                <p>Click here to start typing</p>
            </div>

            <div id="textarea-container">
                <div id="textarea-title-container">Title</div>
                <textarea name="note" id="new-note" rows="10" cols="50" placeholder="Your text goes here"></textarea>
                <br/>
                <button id="save-note">Save</button>
            </div>

        </div>

    </section>

</section>

<footer>


</footer>

</body>

</html>