Table of Contents
Introduction:
Welcome to an exciting journey into the realm of web development, where we’ll explore the art of crafting a Valentine Day Card using HTML and CSS. In this tutorial, we invite you to unleash your creativity and embark on a heartfelt coding adventure that celebrates love and innovation.
Whether you’re a budding coder or an experienced developer, this tutorial provides a canvas for expressing your affection through code. By combining the power of HTML’s structure with CSS’s styling capabilities, you’ll discover endless possibilities for designing a personalized Valentine’s Day card that speaks volumes to your loved ones.
Join us as we delve into the world of web design and transform lines of code into tokens of love and appreciation. Let’s infuse our digital creations with warmth, charm, and a sprinkle of romance, as we bring joy to the hearts of those we hold dear. Are you ready to embark on this enchanting coding journey? Let’s dive in and create memories that will last a lifetime.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Create a Valentine Day Card:
Follow these step-by-step instructions to set up and customize your Valentine Day Card using the provided HTML and CSS code —
Step 1: Prepare Project Files
Begin by creating a new project folder and naming it according to your preference. Inside this folder, create two crucial files: index.html for the HTML structure and style.css to add visual flair to your Valentine Day Card. This initial setup establishes the groundwork for your heartfelt creation.
Step 2: HTML Structure
Open your index.html file and insert the HTML code provided above. This code defines the structural elements of your Valentine Day Card, including an envelope, a card with a message, and a heart icon. Feel free to customize the message to suit your sentiments and personalize the card for your special someone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Day Card</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Solitreo' rel='stylesheet'>
<div class="container">
<div class="envelope"></div>
<div class="card">
<h1 class="message">Do you know!<br>what’s on Valentine’s Day menu?<br>Me n U :)</h1>
<div class="heart"></div>
</div>
<div class="cover"></div>
<div class="lid"></div>
<div class="shadow"></div>
</div>
</body>
</html>Step 3: Styling with CSS
Next, inject personality and style into your card by incorporating the CSS code provided. Copy and paste the CSS code into your style.css file to apply colors, positioning, and animations to your Valentine Day Card. Experiment with the variables to adjust the card’s appearance and make it uniquely yours.
* {
margin: 0;
padding: 0;
}
h1 {
font-family: Solitreo;
}
body {
height: 100vh;
width: 100vw;
background: #fee2e9;
font-family: "Pangolin", cursive;
font-size: 1vmin;
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
top: 0vmin;
}
.envelope {
position: relative;
background: #f980a1;
height: 30vmin;
width: 47.9vmin;
}
.card {
position: absolute;
background: white;
height: 25vmin;
width: 43vmin;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 2.5vmin;
top: 0vmin;
animation: slide-rev 0.2s ease-out;
}
.message {
position: absolute;
top: 5vmin;
}
.cover {
position: absolute;
height: 0;
width: 0;
border-bottom: 15vmin solid #fba7bd;
border-left: 24vmin solid transparent;
border-right: 24vmin solid transparent;
top: 15vmin;
z-index: 3;
}
.cover::after {
/*left triangle*/
position: absolute;
content: "";
border-left: 24.5vmin solid #fcbbcc;
border-bottom: 15vmin solid transparent;
border-top: 15vmin solid transparent;
top: -15vmin;
left: -24vmin;
}
.cover::before {
position: absolute;
content: "";
border-right: 24.5vmin solid #fcbbcc;
border-bottom: 15vmin solid transparent;
border-top: 15vmin solid transparent;
top: -15vmin;
left: -0.5vmin;
}
.lid {
position: absolute;
height: 0;
width: 0;
border-top: 15vmin solid #f980a1;
border-left: 24vmin solid transparent;
border-right: 24vmin solid transparent;
top: 0;
transform-origin: top;
animation: open-rev 2s;
}
.container:hover .lid {
animation: open 0.5s;
animation-fill-mode: forwards;
}
.container:hover .card {
animation: slide 0.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.shadow {
position: relative;
top: 3vmin;
border-radius: 50%;
opacity: 0.7;
height: 2vmin;
width: 48vmin;
background: #e8c5d0;
}
.heart {
position: relative;
width: 5vmin;
height: 4vmin;
top: 7vmin;
left: -1vmin;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 2.5vmin;
top: 7vim;
width: 2.5vmin;
height: 4vmin;
background: #f40b4a;
border-radius: 2.5vmin 2.5vmin 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes open {
100% {
transform: rotatex(180deg);
}
}
@keyframes slide {
100% {
transform: translatey(-15vmin);
z-index: 2;
}
}
@keyframes open-rev {
from {
transform: rotatex(-180deg);
}
}
@keyframes slide-rev {
from {
transform: translatey(-15vmin);
}
}Conclusion & Final Words:
In conclusion, you’ve embarked on a delightful journey of crafting a digital Valentine Day Card using HTML and CSS. By following these simple steps and leveraging the provided code snippets, you’ve created a heartfelt token of affection that embodies the spirit of Valentine’s Day.
As you continue your coding endeavors, remember that each project is an opportunity for growth and expression. Whether you’re creating for a special occasion or simply honing your skills, let your creativity flourish and your passion for coding shine through.
So go ahead, share your masterpiece with your loved ones, and spread joy and love in the digital realm. Happy coding, and may your Valentine Day Card bring warmth and smiles to all who receive it!
Code by – https://codepen.io/thestemdiaries/
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
