Create HTML File
- Create
app
folder on your computer - Create
index.html
file insideapp
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 insideapp
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 yourindex.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 outbody
tag's height - which is the full view port height. -
display: flex;
makes thiscard
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.
- You can learn more about the other flex properties used below in our
.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
andem
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 to0
for themessage
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>♥</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
-
♥
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>♥</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.
Top comments (0)