DEV Community

Cover image for Create Valentine's Day Card Using HTML + CSS
Sleepless Yogi
Sleepless Yogi

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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; 
  } 
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.heart span {
  font-size: 8rem;
  color: white;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)