The 6 Days of Creation

Build a full-screen scrolling website using CSS scroll-snap and gradients.

Introduction

30 Second Summary

Think about turning pages in a beautifully illustrated book. Each page fills your entire view with one dramatic scene before you move on to the next.

In this project, you will build a single-page scrolling website that presents the 6 days of biblical creation as full-screen visual scenes with atmospheric gradient backgrounds and classical typography. You will deploy it to a live URL that anyone can visit.

What You'll Build

You scroll down and the page snaps to each day of creation like turning pages in an illuminated manuscript, with dramatic colors and elegant scripture text visible to anyone you share the link with.

By the end of this project, you'll have:

A full-screen scrolling experience where each day of creation snaps precisely into view with its own unique gradient background evoking the mood of that day's work.
Elegant classical serif typography using Google Fonts for headings and scripture verses that feel like an illuminated manuscript brought to screen.
A live deployed website on Vercel with a public URL you can send to anyone.
Secret Mission: A fixed dot navigation that highlights the current day as you scroll through the six scenes.

Are there any prerequisites?

You should have basic familiarity with HTML tags and CSS properties. No prior experience with CSS scroll-snap, gradients, or deployment is needed.

Before We Start

Before We Start...

Before we dive in, let's lock in what you're about to build and why it matters. This is your moment to commit to the goal so every step that follows has clear purpose.

Set Up Your Project

Every website starts as a set of files in a folder. Before you can see anything in the browser, you need a clean project structure with the right files in the right places.

In this step, you will create the project folder, add the two files your site needs, and write enough HTML to confirm everything is wired up correctly.

In this step, get ready to:

Create the project folder and files on your Desktop.
Write the HTML boilerplate that links to your stylesheet.
Open the page in Firefox and confirm the heading displays.

Create the project folder and files

In VS Code, click Terminal in the top menu bar.
Click New Terminal.

Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir creation-days
cd creation-days

Create the two files your site needs by running:

touch index.html style.css

Confirm the files exist by running:

ls

You should see index.html and style.css in the output.

Don't see both files?

Make sure you ran touch index.html style.css from inside the creation-days folder. Run pwd to check your current directory.

Help me find my files in the terminal.

Now open this folder in VS Code. In VS Code, click File in the top menu bar.
Click Open Folder.
Navigate to your Desktop, select the creation-days folder, and click Open.

You should see index.html and style.css listed in the Explorer sidebar on the left.

Write the HTML boilerplate

Every HTML page needs a standard structure that tells the browser what it is dealing with. This boilerplate declares the document type, sets the character encoding, and links your stylesheet.

In the Explorer sidebar, click index.html to open it in the editor.
Paste the following code into the file:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding and responsive viewport -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Six Days of Creation</title>
  <!-- Link to external stylesheet -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Main heading to confirm setup works -->
  <h1>The Six Days of Creation</h1>
</body>
</html>

What does this code do?

<!DOCTYPE html> tells the browser this is a modern HTML5 document.
The <meta charset="UTF-8"> tag ensures special characters (like curly quotes in scripture) display correctly.
The <meta name="viewport"> tag makes the page scale properly on mobile devices.
The <link rel="stylesheet" href="style.css"> tag connects your CSS file so styles will apply once you write them.

Save index.html by pressing Ctrl+S.

✔️ Awesome, I've got everything!

Great. Make sure you have saved the file before moving on.

ⓧ I'd like to double check the full code

Your index.html should look exactly like this (comments are optional):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Six Days of Creation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>The Six Days of Creation</h1>
</body>
</html>

Open in the browser

Before you run the next command, what do you expect to see in the browser? Think about what your HTML contains right now.

Open index.html in Firefox by running this command in your terminal:

firefox index.html

You should see "The Six Days of Creation" displayed as a heading on a blank white page. Nothing else appears because the body only contains the <h1> element.

Don't see the heading?

Make sure you saved index.html before running the command. Unsaved changes do not appear in the browser.

Check that your terminal is still inside the creation-days folder. Run pwd to confirm.

Help me get my HTML page showing in Firefox.

Your project structure is in place and you have confirmed it works in the browser. Next up, you will fill those empty sections with the six days of creation content.

Build the Six Sections

Your page has a title, but no content yet. Right now there is nothing for the browser to scroll through and nothing that separates one day from the next.

In this step you will replace that single heading with six full sections of scripture content. By the end you will see the core problem this project solves: all six days run together as one long wall of unstyled text.

In this step, get ready to:

Add six HTML section elements with Genesis content for each day of creation.
Load classical serif fonts from Google Fonts for use in later steps.
See the designed problem: all six days display as an undifferentiated wall of text.

Add the six section elements

Each day of creation becomes its own <section> element with structured content inside it: a day number label, a heading, and a scripture quote.

In VS Code, open index.html.
Find the <h1> line:

  <h1>The Six Days of Creation</h1>

Delete that line and replace it with the first three days by pasting this code:

  <section class="day day-1" id="day-1">
    <span class="day-number">Day One</span>
    <h2>Let There Be Light</h2>
    <blockquote>
      And God said, Let there be light: and there was light. And God saw the light, that it was good: and God divided the light from the darkness.
      <cite>Genesis 1:3-4</cite>
    </blockquote>
  </section>

  <section class="day day-2" id="day-2">
    <span class="day-number">Day Two</span>
    <h2>The Firmament</h2>
    <blockquote>
      And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters. And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so.
      <cite>Genesis 1:6-7</cite>
    </blockquote>
  </section>

  <section class="day day-3" id="day-3">
    <span class="day-number">Day Three</span>
    <h2>Land and Vegetation</h2>
    <blockquote>
      And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so. And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind: and it was so.
      <cite>Genesis 1:9,11</cite>
    </blockquote>
  </section>

What does this structure do?

Each <section> has two classes: day (shared styling later) and day-1 through day-6 (individual backgrounds later).
The id attribute on each section creates an anchor point for navigation links.
The <span> holds the day label, <h2> holds the title, and <blockquote> wraps the scripture with a <cite> for the reference.

Save index.html and refresh Firefox.
You should see three days of scripture text displayed as plain, unstyled content.

Return to index.html in VS Code and paste the remaining three days directly below the Day Three section:

  <section class="day day-4" id="day-4">
    <span class="day-number">Day Four</span>
    <h2>Sun, Moon, and Stars</h2>
    <blockquote>
      And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also.
      <cite>Genesis 1:16</cite>
    </blockquote>
  </section>

  <section class="day day-5" id="day-5">
    <span class="day-number">Day Five</span>
    <h2>Creatures of Sea and Sky</h2>
    <blockquote>
      And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven. And God created great whales, and every living creature that moveth.
      <cite>Genesis 1:20-21</cite>
    </blockquote>
  </section>

  <section class="day day-6" id="day-6">
    <span class="day-number">Day Six</span>
    <h2>Man in His Image</h2>
    <blockquote>
      So God created man in his own image, in the image of God created he him; male and female created he them.
      <cite>Genesis 1:27</cite>
    </blockquote>
  </section>

What is each day about?

Day 4 covers the sun, moon, and stars (Genesis 1:16).
Day 5 covers creatures of the sea and sky (Genesis 1:20-21).
Day 6 covers the creation of humanity in God's image (Genesis 1:27).

Before you save and refresh, what do you think the page will look like with all six days added but no CSS at all?

Save index.html and refresh Firefox.
Scroll down. You should see all six days stacked vertically as plain, unstyled text with no visual separation between them.

That wall of text is the problem. Nothing tells the viewer where one day ends and the next begins.

Not seeing all six days?

Make sure you deleted the original <h1> line completely before pasting the sections.
Check that all six sections sit between the <body> and </body> tags, not inside the <head>.
Confirm you have closing </section> tags for every opening <section> tag.

Why isn't my HTML content showing up in the browser?

Add the Google Fonts link

Later steps will style this page with classical serif typography. You need to load the fonts now so they are available when the CSS references them.

In index.html, find this line inside the <head>:

  <link rel="stylesheet" href="style.css">

Add this Google Fonts link on the line directly above it:

  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

What does this link load?

This single URL loads two font families from Google Fonts. Cinzel is inspired by first-century Roman inscriptions, perfect for dramatic headings. EB Garamond is a revival of a 16th-century humanist typeface, ideal for readable scripture text.

The browser downloads the font files so your CSS can reference them by name in later steps.

Save index.html.

The page still looks the same. No CSS rules reference these fonts yet, so there is no visible change. The next step will put them to use.

✔️ Awesome, I've got everything!

Great. Double check you have saved index.html with all six sections and the Google Fonts link.

ⓧ I'd like to double check the full code

Your index.html is longer than 30 lines now. Scroll up and confirm these chunks are present in this order:

The <head> contains the Google Fonts <link> tag on the line above the style.css link.
The <body> contains six <section> elements (day-1 through day-6) in order.
Each section has a <span class="day-number">, an <h2> title, and a <blockquote> with a <cite> inside.
The original <h1> is completely gone.

Your content is in place, but it reads like a plain document with no sense of drama or separation. Next up, you will make each day fill the entire screen and snap into place like turning pages.

Add Scroll-Snap and Full-Viewport Sections

Your HTML is in place, but right now the six days of creation read like one continuous document.

You scroll past each day without even registering the transitions. In this step, you will force each day to fill the entire screen and make scrolling land precisely on each section using CSS scroll-snap.

In this step, get ready to:

Set up the scroll-snap container on the body element.
Make each section fill the full viewport height.
Test the snapping behavior in your browser.

Set up the scroll container

For scroll-snap to work, you need a container that controls scrolling and children that declare where to snap. The body element will be the scroll container.

Open style.css in VS Code (it should be empty) and add the following code:

/* Give html full height so body can inherit it */
html {
  height: 100%;
}

/* Set up the scroll-snap container */
body {
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  font-family: 'EB Garamond', serif;
}

What does this code do?

html { height: 100% } gives the document a fixed height reference. Without it, the body cannot calculate its own 100% height.

scroll-snap-type: y mandatory tells the browser that after any scroll, the viewport MUST land exactly on a snap point. The y means vertical snapping. font-family: 'EB Garamond', serif activates the Google Font you linked in the previous step.

Save style.css and refresh the page in Firefox.
You should see the text change from the browser's default font to a more elegant serif typeface (EB Garamond).

Font not changing?

Make sure you saved style.css. Unsaved changes will not appear in the browser.
Confirm the <link rel="stylesheet" href="style.css"> tag exists in your index.html head section.
Check that the Google Fonts <link> tag appears BEFORE the stylesheet link in the head. The font must load before your CSS references it.

Why isn't my Google Font loading in the browser?

Make each section full-viewport

The scroll container is ready, but the sections are still their natural content height. Each section needs to fill the entire viewport and declare itself as a snap point.

Add the following rule below your body rule in style.css:

/* Each section fills the viewport and snaps into place */
.day {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

What does this code do?

height: 100vh makes each section exactly the height of the browser window. One day per screen.
scroll-snap-align: start tells the browser where to snap. The top edge of each section is the landing point.
The flexbox properties (display: flex, align-items: center, justify-content: center) center the day number, heading, and scripture both horizontally and vertically within each full-screen section.

Why mandatory instead of proximity?

scroll-snap-type: y mandatory ensures the viewport always lands precisely on a section after scrolling stops. The alternative, proximity, would allow the page to stop between sections. That breaks the one-day-per-screen metaphor you are building.

Save style.css.

Test the snapping behavior

Before you refresh, think about what you expect to see. You set each section to fill the full viewport height and declared snap points at the top of each one. What do you think will happen when you scroll?

Refresh the page in Firefox and scroll down slowly.

Each day snaps into place, filling the entire screen. The content is centered vertically and horizontally within each section. The backgrounds are plain white.

Page not snapping between sections?

Check that body has both overflow-y: scroll and scroll-snap-type: y mandatory. Both are required for snapping to activate.
Confirm .day has scroll-snap-align: start. Without this, the container has nothing to snap to.
Make sure html has height: 100%. If body cannot compute its height, scroll-snap will not engage.

Why isn't CSS scroll-snap working on my page?

✔️ Awesome, I've got everything!

Great. Double check you have saved style.css and that each day fills the screen when you scroll.

ⓧ I'd like to double check the full code

Here is the complete style.css at this point:

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  font-family: 'EB Garamond', serif;
}

.day {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

You now have a page that turns like a book. Each day claims the full screen, and scrolling locks into place. But every section has the same plain white background. Next up, you will add atmospheric gradients and typography to transform this stark slideshow into a dramatic visual journey.

Add the Biblical Atmosphere

Your scroll-snap layout works. Each day fills the screen and snapping locks into place. But scroll through the page right now and you will notice a problem.

Every section looks identical. Plain white backgrounds strip away all sense of drama or reverence. In this step, you will transform each day into a distinct visual scene using typography, color, and atmospheric gradients.

In this step, get ready to:

Apply classical serif typography and warm ivory text colors.
Add unique gradient backgrounds for each of the 6 days.
Polish the design with text shadows and spacing.

Apply typography and base colors

Right now the text is black on white. You will switch to warm ivory text and apply the Cinzel font to headings and day labels to evoke classical inscriptions.

In VS Code, switch back to style.css.
Find your .day rule. Add these two properties at the end of the rule, after box-sizing: border-box;:

  color: #f5f0e8;
  text-align: center;

Below the closing } of .day, add this new rule to style the day number labels:

.day-number {
  font-family: 'Cinzel', serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.8;
}

What does this code do?

color: #f5f0e8 sets all text inside each section to a warm ivory that reads well against dark backgrounds.
text-align: center centers all text within each section.
The .day-number rule applies the Cinzel font (inspired by Roman inscriptions) to the "Day One", "Day Two" labels. Uppercase and wide letter-spacing give them a monumental, engraved feel.

Save style.css and refresh Firefox.
You should see the text color change to a warm ivory and the day labels ("Day One", "Day Two", etc.) appear in small uppercase letters with wide spacing.

Text still black?

Make sure the two new properties are inside the .day { ... } block (before the closing brace), not outside it.
Check that you saved the file. Unsaved changes will not show in the browser.
Help me debug why my text color isn't changing.

Now add this rule below .day-number to style the creation titles:

.day h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: #d4af37;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

What does this code do?

clamp(2rem, 5vw, 4rem) makes the heading responsive. It scales with viewport width but never shrinks below 2rem or grows beyond 4rem.
color: #d4af37 gives headings a rich gold tone that stands out against the ivory body text.
The text-shadow adds depth so the heading appears to float slightly above the background.

Save style.css and refresh Firefox.
The creation titles ("Let There Be Light", "The Firmament", etc.) now appear in gold with the Cinzel serif font.

Headings not gold?

Confirm you typed .day h2 (with a space between .day and h2). Without the space, it targets a different element.
Check that the color value is #d4af37 with no typos.
Help me figure out why my headings aren't styled.

Add these two rules below .day h2 to style the scripture text and citations:

.day blockquote {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.8;
  max-width: 600px;
  margin: 0;
  padding: 0 1rem;
}

.day blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.9rem;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

What does this code do?

The blockquote rule makes the scripture italic and limits its width to 600px so lines stay comfortable to read.
line-height: 1.8 adds generous spacing between lines for a calm, measured reading pace.
The cite rule moves the Genesis reference onto its own line with reduced opacity, creating a subtle attribution rather than competing with the verse.

Save style.css and refresh Firefox.
The scripture text now appears in elegant italic with the Genesis citation sitting subtly below each verse. The typography is in place, but every section still has the same plain white background.

Citation not on its own line?

Check that you typed .day blockquote cite with spaces between each word. This targets the <cite> element inside blockquotes.
Make sure display: block is present. Without it, the citation stays inline with the verse text.
Help me debug my blockquote cite styling.

Add gradient backgrounds for each day

Each day of creation has a distinct mood. You will use CSS gradients to give each section a unique atmospheric background that evokes what was created that day.

Add these six rules below .day blockquote cite to give each day its own background:

.day-1 {
  background: radial-gradient(ellipse at center, #d4af37 0%, #1a1a0a 40%, #000000 100%);
}

.day-2 {
  background: linear-gradient(180deg, #0a1628 0%, #1a3a5c 50%, #2e5c8a 100%);
}

.day-3 {
  background: linear-gradient(180deg, #0a2e1a 0%, #1a5c3a 50%, #2e8c5a 100%);
}

.day-4 {
  background: linear-gradient(180deg, #d4760a 0%, #6b2fa0 50%, #1a1040 100%);
}

.day-5 {
  background: linear-gradient(180deg, #0a3d3d 0%, #1a5c6b 50%, #0e4466 100%);
}

.day-6 {
  background: linear-gradient(180deg, #3d1f0a 0%, #6b3a1a 50%, #d4870a 100%);
}

What do these gradients represent?

Day 1 uses a radial-gradient with gold bursting from a dark void. Light emerging from darkness.
Day 2 flows from deep navy to steel blue. The separation of sky and waters.
Day 3 shifts from dark forest green to emerald. Land and vegetation appearing.
Day 4 sweeps from warm amber through purple to navy. A sunset sky holding the sun, moon, and stars.
Day 5 moves through deep teal to ocean blue. The waters teeming with life.
Day 6 builds from rich brown to warm amber. The earth from which humanity was formed.

Save style.css and refresh Firefox.
Scroll through all 6 days. Each section now has a dramatic, unique gradient background. The ivory text and gold headings read clearly against the dark colors.

Backgrounds still white?

Check that each class name matches exactly: .day-1 through .day-6 (with hyphens). These must match the class names in your HTML.
Make sure each background property ends with a semicolon.
Help me figure out why my gradient backgrounds aren't showing.

Add text shadows and final polish

The gradients look great, but the body text could use more depth. A text shadow will make the scripture feel carved into each scene, and a gap property will improve the spacing between elements.

In style.css, find your .day rule.
Find this line:

  text-align: center;

Add these two properties directly below it:

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  gap: 1.5rem;

What does this code do?

text-shadow adds a dark shadow behind all text, making it pop against the gradient backgrounds. The effect is subtle but dramatically improves readability.
gap: 1.5rem adds consistent spacing between the flex children (day number, heading, and blockquote) without needing margins on each one.

Before you refresh, what do you expect the text to look like now compared to a moment ago?

Save style.css and refresh Firefox.
Scroll through all 6 days. Each section now has a unique dramatic gradient background, elegant serif typography in light colors, and text shadows that make the scripture feel carved into the scene.

Text looks the same as before?

Make sure text-shadow and gap are inside the .day { ... } block, not outside it or in a different rule.
The shadow is subtle. Look closely at the edges of the white text against the gradient. You should see a soft dark outline that was not there before.
Help me debug my text-shadow not appearing.

✔️ Awesome, I've got everything!

Great. Double check you have saved style.css and the page looks right in the browser.

ⓧ I'd like to double check the full code

Your style.css should contain the following rules in this order. Scroll up and confirm each one is present:

html rule (height 100%).
body rule (margin, height, overflow, scroll-snap-type, font-family).
.day rule (height, snap-align, flex, padding, box-sizing, color, text-align, text-shadow, gap).
.day-number rule (Cinzel font, size, uppercase, letter-spacing, opacity).
.day h2 rule (Cinzel font, clamp size, weight, gold color, margin, text-shadow).
.day blockquote rule (italic, size, line-height, max-width, margin, padding).
.day blockquote cite rule (display block, margin-top, normal style, size, opacity, letter-spacing).
.day-1 through .day-6 rules (one gradient background per day).

Your index.html has not changed in this step.

Your creation days now look like illuminated manuscript pages. Each section is its own dramatic scene. Next up, you will take this from your laptop to the live internet so anyone can experience it.

Deploy to Vercel

Your creation days website looks stunning locally. The atmospheric gradients, classical typography, and smooth scroll-snapping all work together perfectly on your machine.

A website that only lives on your laptop cannot be shared with anyone else. Deploying to Vercel gives you a live public URL that anyone can visit.

In this step, get ready to:

Confirm your project folder is ready for deployment.
Deploy your site to Vercel using Vercel Drop.
Visit and verify your live public URL.

Prepare your project folder

Vercel Drop serves static HTML/CSS sites as-is with no build step. For the homepage to load correctly at the root URL, index.html must be at the top level of the folder you upload.

Switch back to your terminal.
Confirm your project folder contains only the two expected files by running:

ls ~/Desktop/creation-days

You should see exactly two files listed: index.html and style.css.

Seeing extra files?

If you see any other files (like .DS_Store on macOS), they won't break the deployment but you can safely delete them. The important thing is that index.html is directly inside creation-days, not nested inside a subfolder.

Help me check my project structure is correct for Vercel Drop.

Deploy via Vercel Drop

Vercel Drop lets you deploy a static site by dragging a folder onto a web page. No Git repository, no CLI, no configuration needed.

Open Firefox and go to vercel.com/drop.
Sign in to your Vercel account if prompted.
Open your file manager and navigate to ~/Desktop.
Drag and drop your creation-days folder onto the Vercel Drop page.

Vercel will ask you to configure your new project.

Choose your Vercel team from the dropdown.
Enter creation-days as the project name.
Click Deploy.

What happens when you deploy?

Vercel uploads your files and serves them as a static site. Since index.html is at the top of the folder, it automatically loads as your homepage.

The deployment typically completes in under 30 seconds for static HTML/CSS files.

Visit your live site

Once the deployment finishes, Vercel displays a live URL for your project.

Wait for Vercel to show a success state with your live URL.

Before you click the link, what do you expect to see? Will the scroll-snapping, gradients, and Google Fonts all work on the live version?

Click the live URL that Vercel provides.
Scroll through all 6 days on the live site.

Your site is now live on the internet. Each day snaps into place with its unique gradient background, gold Cinzel headings, and italic EB Garamond scripture text. Anyone with the link sees the same polished experience.

Site looks broken or unstyled?

If the page appears as plain unstyled text, check that style.css is in the same folder as index.html (not nested inside a subfolder). The link tag in your HTML references style.css as a relative path, so both files must be at the same level.

If fonts look different, confirm your Google Fonts link tag is still in the <head> of index.html. Google Fonts loads from an external CDN, so it works on any server.

Help me debug why my Vercel deployment looks different from my local version.

Why not redeploy into the same project?

Each Vercel Drop creates a new project. If you want to update your site later, you would drop the folder again and it creates a separate project with a new URL. For iterative development, Vercel's Git-based workflow is better. For a one-off deploy like this, Drop is the fastest path to a live link.

Secret mission

Add Navigation Dots

With 6 full-screen sections, your viewer has no sense of position. Are they on Day 2 or Day 5? Add a fixed dot navigation that shows progress and lets viewers click to jump between days.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs on Vercel's free Hobby plan with static files, so there are no ongoing costs.

Resources you used:

Local creation-days folder (containing index.html and style.css).
Vercel project (creation-days) with a live deployment URL.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your live site accessible at its Vercel URL.

Your local creation-days folder stays on your Desktop.
Your Vercel project remains live and accessible to anyone with the link.
Both are free to keep indefinitely.

Pause - I'll come back to this later

Since this project uses only static files and Vercel's free tier, there is nothing to pause. Your site costs nothing while deployed.

Leave your local creation-days folder in place for when you return.
Your Vercel deployment stays live at no cost until you decide to delete it.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow both steps below to clean up completely.

Delete the local project folder by running this command in your terminal:
macOS/Linux:
Windows:

rm -rf ~/Desktop/creation-days

On Windows, run this instead:

Remove-Item -Recurse -Force ~\Desktop\creation-days

Delete the Vercel project:

Open the Vercel dashboard at vercel.com/dashboard.
Select the creation-days project.
Click Settings in the sidebar.
Scroll to the bottom of the General page and find the Delete Project section.
Click Delete.
In the confirmation dialog, type the project name and click Continue.

Nice Work!

Nice work! You just built and deployed a complete scrolling website that presents the six days of biblical creation as an immersive, full-screen visual journey.

You've learned how to:

Use CSS scroll-snap (scroll-snap-type: y mandatory and scroll-snap-align: start) to create precise, page-like scrolling between full-viewport sections.
Create atmospheric CSS gradient backgrounds and integrate Google Fonts (Cinzel and EB Garamond) for classical, biblical-themed typography.
Deploy a static site to a live public URL using Vercel Drop with zero configuration.
Secret Mission: Added a fixed dot navigation for visual progress and click-to-jump functionality.

Ready to quiz yourself?