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:

6 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

tlover tonet · May 6, 2024 at 12:53 pm

Hey, you used to write great, but the last several posts have been kinda boring?K I miss your tremendous writings. Past several posts are just a little out of track! come on!

Reply

smortergiremal · November 3, 2024 at 10:35 pm

I love it when people come together and share opinions, great blog, keep it up.

Reply

Leave a Reply

Avatar placeholder

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

Related Posts

Digital Marketing vs Graphic Design

Digital Marketing vs Graphic Design Digital marketing and graphic design are essential to modern business strategies, shaping the customer experience and enhancing brand visibility. As two dynamic fields with unique demands and growth potential, both Read more…

Tailwind CSS vs Bootstrap

Tailwind CSS vs Bootstrap When creating user interfaces for the web, developers often turn to popular CSS frameworks for speed, efficiency, and responsive design capabilities. Two of the most widely used CSS frameworks are Tailwind Read more…

Difference Between Bootstrap and WordPress

Difference Between Bootstrap and WordPress What is Bootstrap? Bootstrap is one of the most widely used CSS frameworks in web development, designed to help developers create visually appealing, fully responsive websites. It is primarily a Read more…