Skip to content

mindfultatiana/valentinesday2024

Repository files navigation

Valentines Day Card

I wanted to create an opensource hosted valentines day card for someone special. Valentines Day Card Here

Problem:

Digitally bridging the distance and making something custom.

  • I wanted something I could send a link from that was a bit more interactive.
  • I wanted it more custom than the digital card creators.

What I learned:

I was reminded about what it's like to center a div (I haven't worked with css since 2016). I think this project is special because it's heartfelt and was built with a lot of love for a special holiday.

Tech Stack

HTML, CSS, GitHub Pages, Prettier

image

Steps

Step 1

Figure out how to make the Valentines Day card:

  • I started off by getting ideas from a tutorial by Jonah Lawrence Here.
  • That taught how to do a Happy Birthday card.

Step 2

Make alterations to customize it:

  • I changed the colors, text, and image to be about Valentines Day.
  • I added an image from PNGTree
  • I decided to adjust the padding for the image and the text.
  • I realized the max-height was stretching the image so I adjusted it to 50% instead of just 40vh and added a max-width.

Step 3

Add music player to webpage:

  • I found a public domain song "Good Night" by FASSounds available Here.
  • I found a tutorial on adding a song to your webpage with HTML by Geek Tutorials Here.

Step 4

Set up GitHub Pages

  • I followed instructions on how to create the GitHub Page Here and Here.
  • It's launched and it looks amazing!

About

My Valentines Day Card Project

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published