Create Valentine's Day Card Using HTML + CSS
Published: 2020-02-12 01:17:33



## 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](http://bit.ly/geekyValentinesDayy).
  - 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](https://app.netlify.com/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](https://happy-ramanujan-9ca090.netlify.com/)

## Get The Code

If you want to get the fully-functional working code - I have made it [available here](http://bit.ly/geekyValentinesDayy). 

*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](http://ngninja.com/). And, if you are looking to level up your Web Development chops, do checkout my [Ultimate Web Development Bootcamp](https://cutt.ly/web-development-bootcamp).