Valentine’s Day Card using HTML and CSS

Published by StudyMuch on

Valentine's Day Card using HTML and CSS

Creating a Valentine’s Day Card using HTML and CSS

Valentine’s Day is just around the corner, and what better way to express your love than with a personalized digital Valentine’s Day card! In this blog post, we’ll provide you with the full Source Code to create a charming Valentine’s Day Card using HTML and CSS, with code explanation of both HTML and CSS.

HTML Structure

Let’s start by examining the HTML structure of our Valentine’s Day Card:

<body>
 <div class="container">
 <div class="valentines">
  <div class="envelope"></div>
   <div class="front"></div>
 <div class="card">
  <div class="text">Happy</br>Valentine's Day!</div>
  <div class="texts">My Love!</div>
  <div class="heart"</div>
 </div>

 <div class="hearts">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  </div>
 </div>
</div>
  <div class="shadow"></div>
  </div>
 </div>
<body/>

Document Structure

  • ‘<!DOCTYPE html>‘: This declaration defines the document type and version of HTML being used. In this case, it’s HTML5.
  • ‘<html lang=”en”>’: The root element of the HTML document. The lang attribute is set to “en” for English.
  • ‘<head>’: Contains meta-information about the HTML document, such as character encoding and the document title.
  • ‘<meta charset=”UTF-8″>’: Specifies the character encoding for the document, ensuring proper interpretation of special characters.
  • ‘<title>Valentine Day Card By StudyMuch</title>’: Sets the title of the HTML document, which is displayed in the browser’s title bar or tab.
  • ‘<style>’: This is where you include your CSS code. In this case, the actual CSS code is not provided in the example, but it’s indicated to be placed here.

Valentine's Day Card

CSS Styles

Now, let’s break down the CSS styles used to create this Valentine’s Day Card:

</style>
body {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: 100vh;
  background-color: #fdc3c9;
}

.container {
  position: relative;
}
.valentines {
  position: relative;
  top:50px;
  cursor: pointer;
  animation: up 3s linear infinite;
}

.envelope {
  position: relative;
  width: 300px;
  height:200px;
  background-color: #8202d2; 
  border: 2px solid rgb(76, 1, 25);
  border-radius: 5px;
}
.envelope:before {
  background-color: #8202d2; 
  content:"";
  position: absolute;
  width: 212px;
  height: 212px;
  transform: rotate(45deg);
  top:-105px;
  left:44px;
  border-radius:30px 0 0 0;
}
.card {
  position:relative;
  background-color: #ecbae6;
  width: 270px;
  height: 170px;
  bottom: 190px;
  left:15px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: -5px -5px 100px rgba(0,0,0,0.4); 
  animation: cd 3s linear infinite;  
}

@keyframes cd {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}
.card:before {
  content:"";
  position: absolute;
  border:3px solid #a504f6;
  border-style: dotted;
  width: 240px;
  heighT: 140px;
  left:12px;
  top:12px;
  bottom: 0px;
}

.text {
  position: absolute;
  font-family: 'Brush Script MT', cursive;
  font-size: 28px;
  text-align: center;
  line-height:25px;
  top:19px;
  left:60px;
  color: #003049;
}

.texts {
  position: absolute;
  font-family: 'Brush Script MT', cursive;
  font-size: 25px;
  text-align: center;
  line-height:25px;
  top:70px;
  left:90px;
  color: #590293;
}

.heart {
  background-color: #d62828;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 110px;
  left:105px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d62828;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}
.heart:after {
  left: 15px;
  top: 0;
}
.front {
  position: absolute;
  border-right: 180px solid #8202d2;
  border-top: 95px solid transparent;
  border-bottom: 100px solid transparent;
  left:120px;
  top:5px;
  width:0;
  height:0;
  z-index:10;
}

.front:before {
  position: absolute;
  content:"";
  border-left: 300px solid #ac32f8;
  border-top: 195px solid transparent;
  left:-120px;
  top:-95px;
  width:0;
  height:0;
}

.shadow {
  position: absolute;
  width: 330px;
  height: 25px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.3);
  top:265px;
  left:-15px;
  animation: scale 3s linear infinite;
  z-index:-1;
}

@keyframes up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

@keyframes scale {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.85);
  }
}

.hearts {
  position: absolute  
}
.one, .two, .three, .four, .five {
  background-color: red;
  display: inline-block;
  height: 10px;
  margin: 0 10px;
  position: relative;  transform: rotate(-45deg);
  width: 10px;
  top:50px;
}

.one:before,
.one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, 
.five:before, .five:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.one:before, .two:before, .three:before, .four:before, .five:before {
  top: -5px;
  left: 0;
}
.one:after, .two:after, .three:after, .four:after, .five:after {
  left: 5px;
  top: 0;
}

.one {
  left:10px;
  animation: heart 1s ease-out infinite; 
}
.two {
  left:30px;
  animation: heart 2s ease-out infinite; 
}
.three {
  left:50px;
  animation: heart 1.5s ease-out infinite;
}
.four {
  left:70px;
  animation: heart 2.3s ease-out infinite;
}
.five {
  left:90px;
  animation: heart 1.7s ease-out infinite;
}

@keyframes heart {
  0%{
    transform: translateY(0) rotate(-45deg) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-150px) rotate(-45deg) scale(1.3);
    opacity: 0.5;
  }
}
</style>

How It Works

  • The ‘body’ is styled to be a flex container, centering the content both horizontally and vertically with a romantic background color.
  • The ‘.valentines’ class represents the main card container and is animated to gently move up and down, adding a subtle touch.
  • The heart-shaped elements are created using the ‘:before’ and ‘:after’ pseudo-elements, forming a lovely pattern.
  • The ‘@keyframes’ animations add dynamic movements to the card, making it visually appealing.

Conclusion

You can use this HTML and CSS code to create a unique and charming Valentine’s Day card to express your love. Feel free to customize the colors, text, and animations to make it truly special for your loved one. Happy Coding and Happy Valentine’s Day!

Learn More;

Categories: CodingComputers or ProgrammingProject
Tags:

4 Comments

Declan · February 7, 2024 at 2:25 am

I think the admin of this web page is actually working hard in support of his website, because
here every material is quality based material.

Reply

Sreenath · February 7, 2024 at 5:18 am

My mind is different

Reply

Mystic · February 8, 2024 at 5:57 am

I enjoy reading through a post that will make people think.
Also, thank you for permitting me to comment!

Reply

click for source · February 10, 2024 at 11:20 pm

May I share this writing? It’s valuable advice worth sharing! My followers will find value in this too.

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Advantage and Disadvantage of Cloud Computing

Advantage and Disadvantage of Cloud Computing Cloud Computing has become a cornerstone of modern digital infrastructure, offering a variety of benefits as well as some challenges. In this blog post, we will explain in detail Read more…

Characteristic of Computer

Characteristic of Computer In the modern world, computers are powering everything from smartphones to supercomputers. To understand the capabilities and limitations of a computer, it is necessary to understand the characteristics of computer. Let’s take Read more…

Graphics Hardware

Graphics Hardware Graphics Hardware is the backbone of visual computing, enabling us to interact with digital content in a visually immersive way. In this blog post, we will explore deeper into the architecture of raster Read more…