JavaScript.io/index.html at main · Rileey/JavaScript.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Gamja+Flower&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Sanni's Journal</title>
    <link rel="stylesheet" href="project.css">

</head>

<body>
    <header>
        <h1>Sanni's Journal</h1>
        <h2>So fresh and so clean</h2>
    </header>
        <button id="notes" onclick="popup()">Add a new note</button>

    <section>
        <p> you have <span id="word" class="words"></span></p>
    </section>

    <main>
    <article id="articles">
        <article class="section" id="article">
            <section class="top-text-content">
            <h2 class="journal_title"><span class="date">13/05/23:</span> Spatulas</h2>
            <p><img src="assets/spatula.gif" class="spatula" alt="spatulas"></p>
            <p>
                Yesterday I went to the store and got some much-needed <a href="https://www.youtube.com/watch?v=2XbCWmY0eqY">spatulas!</a> (What better way to say I love myself than to buy myself a spatula?)
            </p>
            </section>
        </article>
        <article class="section bottom-article" id="article">
            <section class="bottom-text-content">
            <h2>14/05/23: Cookie Monster Cupcakes</h2>
            <p><img src="assets/cookiemonster.jpg" class="cookie" alt="cookie monster"></p>
            <p>My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds.
            </p>

            <p>Did you know? Cookie Monster once said, <q>Sometimes me think what is love, and then me think love is what last cookie is for. Me give up the last cookie for you.</q> I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!)
            </p>
            </section>
        </article>
    </article>
        <!--JavaScript Form-->

        <section id="form"  style="display: none;">
            <form class="form-body">
                <label>Write a note</label>
                <span id="cancel" onclick="cancel()">&times;</span>
                <div class="textbox">
                    <div class="msg"></div>
                    <br>
                    <input type="text" id="box" class="input-js" placeholder="title">
                    <br><br>
                    <textarea id="box2" placeholder="rest of the fucking note..."></textarea>
                    <br><br>
                    <input type="text" name="link" id="box3" placeholder="Put image link here">
                </div>
                <input type="submit" class="submit" value="Okay">
            </form>
        </section>
    </main>
    <hr>
    <footer>
    <h2>Stay connected</h2>
    <p>Join my mailing list.</p>
    <form>
        <p class="input"><input type="text" placeholder="First name"></p>
        <p class="input"><input type="text" placeholder="Email"></p>
        <p class="input"><input type="submit" value="Submit"></p>
    </form>
    <p>&copy; 2023 Sanni. No Rights Reserved.</p>
    </footer>
    <script src="popup.js">
    </script>
</body>

</html>