Sleepless Yogi

Posted on Feb 12, 2020

Create Valentine's Day Card Using HTML + CSS

Create HTML File

Create app folder on your computer
Create index.html file inside app folder on your computer

Write the following boilerplate code in `index.html` file

This is your HTML boilerplate code
You are telling the browser that index.html is an HTML file and render it as an HTML website
head tag is where you declare meta-data, title, and link your style files
body tag is where you actually start writing your web page codes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Valentine Gift</title>
  </head>
  <body>
  </body>
</html>

Create a CSS File

Create style.css file inside app folder that you created above

Then add the following styles in that file

You are setting some basic styles to reset your browser's pre-existing styles
height: 100vh means take the full viewport height


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
}

Then add your style in your `index.html` file

You have to use the link tag to include your style file inside your HTML file


<head>
  <meta charset="utf-8" />
  <title>Valentine Gift</title>

  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Now let's create the body of your Valentine's Day card

Replace the body tag in your index.html file to match the following code
You are adding card DIV which will be the container of your greeting card. We will add the styles later.
Inside the card DIV add two H1 tags.
- These are your heading messages.
- H1 are the biggest headings available.
- You can also change the font-size as per your need.
We also assigned appropriate classes to our HTML so that we can style them later


<body>
  <div class="card">
    <h1 class="quote">You're the CSS to my HTML</h1>
    <h1 class="message">Happy Valentine's Day</h1>
  </div>
</body>

Now let's style your card

We are using .card - class selector to grab the card DIV and style it
Here we are just setting a nice red border: 10px solid #E53038;
height: 100vh; is done to match out body tag's height - which is the full view port height.
display: flex; makes this card DIV a flex box.
- You can learn more about the other flex properties used below in our flex-box section of the Bootcamp.
- But essentially, we are just making all our flex-children align in vertically and horizontally center position in one column.


.card {
  border: 10px solid #E53038;
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Now let's style your headings

First, grab the heading with the .quote class
Give it some basic styles like background, border, color, margin, padding, and width
Here we are also setting some font styles to make it look nerdier


.quote {
  background: #fff;
  border: 6px solid #ddd;
  font-family: monospace;
  font-size: 3em;
  color: blueviolet;
  border-radius: 38px;
  font-size: 4em;
  margin-bottom: 6rem;
  padding: 1rem;
  text-align: center;
  width: 16em;
}

Let's talk about the sizes - `rem` vs `em`

Both rem and em are relative units
em is relative to the font size of its direct or nearest parent
rem is only relative to the HTML (root) font-size
rem is popularly used for margins, paddings, and sometimes font-sizes too

Now similarly let's style our other heading

A lot of the properties are the same as our quote heading
It is also using similar size unit rem and em which is described above
white-space: nowrap; is given so that the message stays on one single line
The interesting part here is its animation
- @keyframes rule is used to control the intermediate steps in a CSS animation sequence
- It gives more control over the intermediate steps of the animation
- Our animation start from width equals to 0 for the message heading
- And it ends at width: 10em; which is mentioned in the .message selector
- overflow: hidden; is given which gives the effect of the message appearing letter by letter instead of showing the entire message upfront upfront


.message {
  font-family: cursive;
  color: #E53038;
  border: 1px solid white;
  border-radius: 20rem;
  font-size: 4rem;
  margin-bottom: 4rem;
  padding: 2rem;
  text-align: center;
  margin: 6rem 0 0 10px;
  white-space: nowrap;

  /* animation */
  animation: type 4s steps(60, end); 
  overflow: hidden;
  width: 10em;
}

@keyframes type{ 
  from { 
    width: 0; 
  } 
}

Then we will now design the crux of our Valentine's Day Card - the heart

Add the below DIV between your two headings
As the container .card is a flexbox it will fit nicely on our page


<div class="heart-container">
  <div class="heart">
    <span>&hearts;</span>
  </div>
</div>

And now we can start styling our Heart

Add below styles in our style.css file
Here we are simply making our heart-container a flexbox and aligning its children in the center


.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

The red circle around the heart

The .heart DIV forms the red gorgeous circle around the heart
Main properties to look out for here are:
- background: linear-gradient(to bottom, #E53038, #d32930); which is applying a gradient with shade of red color
- border-radius: 50%; which is making the DIV a circle
- box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2); is applying a nice box shadow around the circle
Again, the interesting part here is its animation
- @keyframes rule is used to control the intermediate steps in a CSS animation sequence
- It gives more control over the intermediate steps of the animation
- For giving the beat-effect we are using transform CSS property where we scale the .heart DIV
- At the start of an animation (0%) it is at its regular size - transform: scale(1);
- In the middle of the animation we do scale(1.6) - where it is at its maximum size
- Then again it starts shrinking down and continue this animation infinitely giving the effect of an heart-beat

.heart {
  width: 12rem;
  height: 12rem;
  text-align: center;
  line-height: 12rem;
  background: linear-gradient(to bottom, #E53038, #d32930);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2);
  animation: beat 1.6s ease 0s infinite;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.6);
  }
}

Finally the HEART

&hearts; is the HTML code which browser understands and renders as a heart
Then in the styles, we give it a font-size, font color, and text-shadow to make it look, beautiful white heart

<span>&hearts;</span>

.heart span {
  font-size: 8rem;
  color: white;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}

Run the application

To run your application locally simply open your index.html file in the browser
Assuming you have provided a correct path to the styles file - it should render Valentine's Day Card successfully

Run the application on the Internet for FREE

If you want to run the application on the Internet and share the URL with your partner follow these steps
Go to Netlify Drop
Drop the folder that contains your HTML and CSS file on that page where it says Drag and drop your site folder here
And Voila! It should create a unique URL that you can simply share with your partner

You can see the working example here

Get The Code

If you want to get the fully-functional working code - I have made it available here.

Disclaimer: This is a part of my HTML + CSS Study Guide which is paid.

I love jotting down my thoughts on my blog Ninja Academy. And, if you are looking to level up your Web Development chops, do checkout my Ultimate Web Development Bootcamp.

DEV Community

Create Valentine's Day Card Using HTML + CSS

Create HTML File

Write the following boilerplate code in `index.html` file

Create a CSS File

Then add the following styles in that file

Then add your style in your `index.html` file

Now let's create the body of your Valentine's Day card

Now let's style your card

Now let's style your headings

Let's talk about the sizes - `rem` vs `em`

Now similarly let's style our other heading

Then we will now design the crux of our Valentine's Day Card - the heart

And now we can start styling our Heart

The red circle around the heart

Finally the HEART

Run the application

Run the application on the Internet for FREE

Get The Code

Top comments (0)

Read next

The Big Reveal of Node.js Performance Optimization! 🚀 Part One: Profiling Node.js

WSL run code . to open VSCode in current directory

Best Free Platforms to Practice Kubernetes for Free

Beyond Stream.distinct()

Create HTML File

Write the following boilerplate code in index.html file

Create a CSS File

Then add the following styles in that file

Then add your style in your index.html file

Now let's create the body of your Valentine's Day card

Now let's style your card

Now let's style your headings

Let's talk about the sizes - rem vs em

Now similarly let's style our other heading

Then we will now design the crux of our Valentine's Day Card - the heart

And now we can start styling our Heart

The red circle around the heart

Finally the HEART

Run the application

Run the application on the Internet for FREE

Get The Code

Read next

The Big Reveal of Node.js Performance Optimization! 🚀 Part One: Profiling Node.js

WSL run code . to open VSCode in current directory

Best Free Platforms to Practice Kubernetes for Free

Beyond Stream.distinct()

Write the following boilerplate code in `index.html` file

Then add your style in your `index.html` file

Let's talk about the sizes - `rem` vs `em`