Close Menu
    HTML & CSS

    How to make Valentine’s Day Card using HTML & CSS

    Coding StellaBy No Comments5 Mins Read

    Hello lovely creators! Today, let’s spread some love and creativity by crafting a delightful Valentine’s Day Card using just HTML and CSS. This project is perfect for everyone, whether you’re new to coding and want to learn, or you’re a seasoned developer looking to add a charming touch to your projects.

    We’ll keep it simple yet stylish, using HTML to structure our card and CSS to add that special touch of romance. No need for complex setups – just pure coding bliss!

    So, join me in celebrating the spirit of love and creativity as we dive into creating a beautiful Valentine’s Day Card. Whether you’re passionate about coding or simply curious about web development, this tutorial offers a wonderful opportunity to learn and have fun along the way.

    Ready to infuse your card with love and whimsy? Let’s embark on this coding adventure together and create something truly special for Valentine’s Day. Let’s get started!

    HTML :

    This HTML code creates a webpage for a Valentine’s Day card. It includes a title, a heading for the card, two heart shapes, and a message wishing “Happy Valentines Day”. The card’s layout and styling are expected to be defined in a separate CSS file named “style.css”. tag.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Valentines Day Card</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
 
  <div id="card">
    <center><h1>Valentines Day Card </h1></center>
    <div class="heart" id="heart1">
      <div id="half1">
        <div id="circle"></div>
        <div id="rec"></div>
      </div>
      <div id="half2">
        <div id="circle"></div>
        <div id="rec"></div>
      </div>
    </div>
    <div id="message">
      <h2>Happy Valentines Day</h2>
    </div>
    <div class="heart" id="heart2">
      <div id="half1">
        <div id="circle"></div>
        <div id="rec"></div>
      </div>
      <div id="half2">
        <div id="circle"></div>
        <div id="rec"></div>
      </div>
    </div>
  </div>
  
</body>
</html>

    CSS :

    This CSS code styles a Valentine’s Day card webpage, setting the background color, font, and layout. It creates two heart shapes, styled with red and white colors, and adds animation for a flipping effect when hovering over them. Overall, it enhances the visual appeal of the Valentine’s Day card.

    /* The Code that is on instagram post is of SCSS and this is CSS Code */

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
  background-color: #ddd;
  font-family: "Poiret One", Segoe UI Light, cursive;
}

#card {
  position: absolute;
  top: 100px;
  width: 460px;
  height: 260px;
  left: 50%;
  margin-left: -230px;
}

#card .heart {
  width: 260px;
  height: 260px;
  float: left;
}
#card .heart #circle {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  background-color: #d32f2f;
}
#card .heart #rec,
#card .heart #rec2 {
  margin-top: -60px;
  width: 130px;
  height: 130px;
  background-color: #d32f2f;
  border-radius: 35% 0 0 0;
}
#card .heart #half2 {
  -ms-transform: rotate(-90deg);
  /* IE 9 */
  -webkit-transform: rotate(-90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
  margin-top: -330px;
  margin-left: -200px;
}
#card #heart2 {
  margin-top: -60px;
  margin-left: -130px;
}
#card #heart2 #circle,
#card #heart2 #rec {
  background-color: #fff;
}
#card #heart2 #half2 #rec {
  border-bottom: 1px solid #eee;
  margin-top: -61px;
}
#card #message {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -130px;
  background-color: #333;
  border-radius: 35% 0 35% 0;
  text-align: center;
}
#card #message h2 {
  font-size: 20px;
  color: #fff;
  width: 160px;
  margin-top: 60px;
  margin-left: 16px;
}
#card #heart1 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft 2s ease-in-out forwards;
  -moz-animation: closeLeft 2s ease-in-out forwards;
  -ms-animation: closeLeft 2s ease-in-out forwards;
  animation: closeLeft 2s ease-in-out forwards;
}
#card #heart2 {
  -webkit-animation: closeRight 2s ease-in-out forwards;
  -moz-animation: closeRight 2s ease-in-out forwards;
  -ms-animation: closeRight 2s ease-in-out forwards;
  animation: closeRight 2s ease-in-out forwards;
}

#card:hover #heart1 {
  -webkit-animation: openLeft 2s ease-in-out forwards;
  -moz-animation: openLeft 2s ease-in-out forwards;
  -ms-animation: openLeft 2 ease-in-out forwards;
  animation: openLeft 2s ease-in-out forwards;
}
#card:hover #heart2 {
  -webkit-animation: openRight 2s ease-in-out forwards;
  -moz-animation: openRight 2s ease-in-out forwards;
  -ms-animation: openRight 2 ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
  }
}
@-moz-keyframes closeLeft {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(180deg);
  }
}
@-ms-keyframes closeLeft {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(180deg);
  }
}
@keyframes closeLeft {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
@-moz-keyframes openLeft {
  from {
    -moz-transform: rotateY(180deg);
  }
  to {
    -moz-transform: rotateY(0deg);
  }
}
@-webkit-keyframes openLeft {
  from {
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
  }
}
@-ms-keyframes openLeft {
  from {
    -ms-transform: rotateY(180deg);
  }
  to {
    -ms-transform: rotateY(0deg);
  }
}
@keyframes openLeft {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
@-moz-keyframes openRight {
  0% {
    -moz-transform: rotateX(180deg);
  }
  100% {
    -moz-transform: rotateX(0deg) rotateZ(180deg);
  }
}
@-webkit-keyframes openRight {
  0% {
    -webkit-transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotateZ(180deg);
  }
}
@-ms-keyframes openRight {
  0% {
    -ms-transform: rotateX(180deg);
  }
  100% {
    -ms-transform: rotateX(0deg) rotateZ(180deg);
  }
}
@keyframes openRight {
  0% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg) rotateZ(180deg);
  }
}
@-webkit-keyframes closeRight {
  from {
    -webkit-transform: rotateX(0deg) rotate(180deg);
  }
  to {
    -webkit-transform: rotateX(180deg);
  }
}
@-moz-keyframes closeRight {
  from {
    -moz-transform: rotateX(0deg) rotate(180deg);
  }
  to {
    -moz-transform: rotateX(180deg);
  }
}
@-ms-keyframes closeRight {
  from {
    -ms-transform: rotateX(0deg) rotate(180deg);
  }
  to {
    -ms-transform: rotateX(180deg);
  }
}
@keyframes closeRight {
  from {
    transform: rotateX(0deg) rotate(180deg);
  }
  to {
    transform: rotateX(180deg);
  }
}

    To sum it up, making a Valentine’s Day Card with HTML and CSS is a fun and easy way to add a personal touch to your greetings. Whether you’re a seasoned coder or just starting out, this tutorial offers a sweet way to create something special for your loved ones. Let your creativity shine and spread love with your unique card design!

    Facing any problems in your project ? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply