In this article, we will learn how to create a Birthday Card with HTML and CSS. That is landscape on large screens and vertical on mobile screens.
You can see the Demo here: Birthday Card with HTML and CSS
What should you know before you start?
- HTML
- CSS
Implementation Of Birthday Card with HTML and CSS
First, create an index.html file and add a boilerplate with Emmett by pressing the exclamation point in visual studio code. inside the body tag, we will create a div and add a class is card.
Now, this card class has a white background. we’ll make our rounded corners border-radius 4px. in the card we set the height or width is 85vh or 80vw. also need to make the body have a display grid. And we want the card to be centered so we will write place items center. also set the background color of the body. and also set the height of the body to be a hundred viewport height and also need to set the margin to zero.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Card with HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
</div>
</body>
</html>body {
background: #008888;
display: grid;
place-items: center;
height: 100vh;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.card {
background: #fdfdfd;
border-radius: 4px;
height: 85vh;
width: 80vw;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}Output:
Now Let’s put some content in the card div. we have image which is called birthday.svg. when load this image it’ll be over here it’s very large so we’ll need to adjust that. so we add class birthday. in birthday class we set max-height 40vh. we need this image center. so in card class, we add text-align: center;
Now add some text. so create div and give class name text. inside text div we have to create H1 and paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Card with HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<img src="./birthday.svg" alt="birthday" class="birthday">
<div class="text">
<h1>Happy Birthday!</h1>
<p>I hope you have a wonderful birthday</p>
<p class="muted">- Jonah Lawrence</p>
</div>
<div class="space"></div>
</div>
</body>
</html>body {
background: #008888;
display: grid;
place-items: center;
height: 100vh;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.card {
background: #fdfdfd;
border-radius: 4px;
height: 85vh;
width: 80vw;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
overflow: hidden;
}
img.birthday {
max-height: 40vh;
}
.text {
padding: 1em;
}
.muted {
opacity: 0.8;
}
.space {
height: 100px;
} Output:
Making a Responsive Birthday Card
* {
transition: all 0.2s ease-in-out;
}
body {
background: #008888;
display: grid;
place-items: center;
height: 100vh;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.card {
background: #fdfdfd;
border-radius: 4px;
height: 85vh;
width: 80vw;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
overflow: hidden;
}
@media only screen and (min-width: 1000px) {
.card {
flex-direction: row-reverse;
}
.card img.birthday {
width: 100%;
max-width: 50vw;
max-height: unset;
}
}
@media only screen and (max-height: 640px) {
.card {
flex-direction: row-reverse;
}
.card img.birthday {
width: 100%;
max-width: 50vw;
max-height: unset;
}
}
img.birthday {
max-height: 40vh;
}
.text {
padding: 1em;
}
.muted {
opacity: 0.8;
}
.space {
height: 100px;
}Output
Download Source Code: Birthday Card with HTML and CSS
I discovered your blog site on google and verify a few of your early posts. Continue to keep up the superb operate. I just additional up your RSS feed to my MSN Information Reader. Searching for forward to studying more from you afterward!…
It’s actually a nice and useful piece of info. I am happy that you shared this helpful info with us. Please stay us informed like this. Thank you for sharing.
Thank you for some other informative web site. Where else may I am getting that kind of information written in such an ideal method? I’ve a venture that I am just now running on, and I’ve been on the look out for such info.