Devlog #1: The landing Page

Hey everyone! Welcome to the very first devlog for Forever—a study app designed for logging your study time to see how much you focus.

I wanted to build an app that matches my vibes so the color scheme of the app is blue and white which are my fav colors. Today, I officially finished building the very first screen of the app: The Welcome Page.

Here is a breakdown of what went into this first step, how I designed it, and what’s coming next!

The Vibe & UI Design

I wanted the design of Forever to be something that represents me so instead of a boring, flat solid color, I went with a spiral bg which i found on pinterest. I love the spiral pattern alot so I thought why not.

The Color Palette: Deep blues, slate greys, and soft whites. Blue is my favourite color if you couldnt tell.
The Content Card: I added a glassy looking dark overlay card in the center. This helps the text show properly since the background is very detailed.

The code

I wanted a clean layout structure that was easy to navigate and looked good on a phone.

1. HTML Structure

The layout is simple but effective. I wrapped the main text and button inside a centered container:

<div class="welcome-container">
  <h1>Welcome to Forever</h1>
  <p class="subtitle">A study app for lifelong learning</p>
  <button class="start-btn">Start Studying!</button>
</div>