SONNET/index.html at main · genevieveagugua/SONNET · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SONNET</title>
    <script
      src="https://kit.fontawesome.com/de3cc7cb54.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="styles/base.css" />
    <link rel="stylesheet" href="styles/component.css" />
    <link rel="stylesheet" href="styles/layout.css" />
    <link rel="stylesheet" href="styles/pages.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- HEADER -->
    <header class="header">
      <nav class="nav__container">
        <!-- Larger Screens -->
        <a href="#">SONNET</a>

        <a href="#hero">Home</a>
        <a href="#how-it-works">How it Works</a>
        <a href="#templates">Templates</a>
        <a href="#review">Review</a>
        <a href="#create-now">CTA</a>

        <a href="login.html">Login</a>
        <a href="create.html"><button>Create a Note</button></a>

        <!-- Smaller Screens -->
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
        <i class="fa-solid fa-bars"></i>
        </label>

        <div class="mobile__nav">
        <!-- <i class="fa-solid fa-xmark"></i> -->
        <a href="#hero">Home</a>
        <a href="#how-it-works">How it Works</a>
        <a href="#templates">Templates</a>
        <a href="#review">Review</a>
        <a href="#create-now">CTA</a>

        <a href="login.html">Login</a>
        <a href="create.html"><button>Create a Note</button></a>
        </div>
      </nav>

      <aside class="hero__aside" id="hero">
        <p>Now in beta testing</p>
        <h1>
          Share a song. <br />Leave a thought. <br />
          Light up their day.
        </h1>
        <p>
          Send a meaningful song with a personal note attached, wrapped in a
          warm midnight glow. The simplest way to share a feeling, a memory, or
          just a late-night vibe.
        </p>
        <div>
          <button><a href="create.html">Get Started</a></button>
          <button><a href="#how-it-works">Learn More</a></button>
        </div>
        <p>Loved by our beta testers</p>
      </aside>
      <picture class="hero__image">
        <source
          media="(min-width: 1024px)"
          srcset="images/hero-image.png"
          type="image/png"
        />
        <source
          media="(min-width: 640px)"
          srcset="images/hero-image.png"
          type="image/png"
        />
        <img src="images/hero-image.png" alt="Hero Image" width="400" />
      </picture>
    </header>
    <main class="main">
      <!-- HOW IT WORKS -->
      <section class="how-it-works__container section-base" id="how-it-works">
        <h2>Curate a note for your lover</h2>
        <p>
          Whether it's a late-night thought, a shared memory, or just a vibe,
          SONNET helps you send it with the perfect song and a personal touch.
        </p>

        <ol class="list__container flex-col gap-lg">
          <li class="list__item flex-col gap-md text-left">
            <h3>1. Pick a song <i class="fa-solid fa-magnifying-glass"></i></h3>
            <p>
              Search from millions of songs across all genres and eras. Find the
              one that speaks your heart.
            </p>
          </li>

          <li class="list__item flex-col gap-md text-left">
            <h3>2. Write a note <i class="fa-solid fa-pencil"></i></h3>
            <p>
              Share your thoughts, memories, or just a vibe. Make it personal.
              Your words appear in paper-like stationery.
            </p>
          </li>

          <li class="list__item flex-col gap-md text-left">
            <h3>
              3. Share the moment <i class="fa-regular fa-paper-plane"></i>
            </h3>
            <p>
              Send a beautiful link via text, email, or social media. No account
              needed to view or listen.
            </p>
          </li>
        </ol>
      </section>

      <!-- TEMPLATES -->
      <section id="templates" class="section-base">
        <h2>More human than a text message.</h2>
        <p>
          Music unlocks memory and emotion like nothing else. Combine it with
          your words, in a setting that feels like a quiet, glowing corner of
          the night. Music unlocks memory and emotion like nothing else. Combine
          it with your words, in a setting that feels like a quiet, glowing
          corner of the night.
        </p>
        <h3>No app needed</h3>
        <p>
          Recipients can open your link and press play instantly in any browser.
        </p>
        <h3>Paper-like notes</h3>
        <p>
          Choose from different textures and colors that echo the song's mood.
        </p>
        <h3>Timed prompts</h3>
        <p>Guide them to read a line right as the chorus hits.</p>
      </section>

      <!-- REVIEW -->
      <section id="review" class="section-base">
        <h2>What people are saying</h2>
        <p>
          Tiny rituals, big feelings. See how others are using Sonnet to say
          what a text can't.
        </p>
        <div class="flex-col gap-lg">
          <article class="card-base flex-col gap-md text-left">
            <p class="article__name">Michael R.</p>
            <p>Best-friend's birthday</p>
            <blockquote>
              "I sent my best friend a SONNET for her birthday, and she said it
              was the most thoughtful gift she's ever received. The combination
              of my words with her favorite song made it so special."
              <footer>Shared 3 sonnets this month</footer>
            </blockquote>
          </article>

          <article class="card-base flex-col gap-md text-left">
            <p class="article__name">Genevieve A.</p>
            <p>Relationship Anniversary</p>
            <blockquote>
              "We hit play at the same time on a call. It felt like being in the
              same room for three and a half minutes"
              <footer>"My new love language"</footer>
            </blockquote>
          </article>

          <article class="card-base flex-col gap-md text-left">
            <p class="article__name">Alex M.</p>
            <p>Cheering up a friend</p>
            <blockquote>
              "Sent my friend a song on a hard day with a little note. She saved
              the link and replays it when she needs it."
              <footer>"Sonnet is such a wonderful product"</footer>
            </blockquote>
          </article>
        </div>
      </section>

      <!-- CTA -->
      <section id="create-now" class="section-base">
        <h2>Ready to send a midnight melody?</h2>
        <p>
          Join thousands of people turning simple links into small,
          unforgettable rituals. Its free to get started.
        </p>
        <a href="create.html" class="btn-primary">Create a Note for Free</a>
        <p>No credit card required.</p>
      </section>
    </main>

    <!-- FOOTER -->
    <footer>
      <p>© 2026 SONNET</p>
      <div>
        Built by <a href="https://github.com/genevieveaguguar" target="_blank">Genevieve</a> and <a href="https://github.com/Rukkyoo" target="_blank">Michael</a>
      </div>
    </footer>
  </body>
</html>