Wish Your crush in HTML and JS

Create a heartfelt webpage to wish your crush using HTML and JavaScript. Simple code examples included.

Sunday, August 18, 2024
Wish Your crush in HTML and JS


Have you ever wanted to do something special for your crush, something that stands out? Imagine sending them a personalized webpage with a heartfelt message, crafted entirely by you! Whether you're a beginner or an experienced coder, this simple project will let you express your feelings in a creative way.



What You'll Learn:

In this post, I'll guide you through the steps to create a beautiful webpage using basic HTML and JavaScript. Don’t worry if you’re new to coding—I'll explain everything in a way that's easy to follow. And to make it even simpler, I’m providing a free source code template that you can download and tweak to make it your own.

Why This Project?

This isn’t just a generic greeting; it’s a digital gesture that shows effort and thoughtfulness. Plus, it’s a great way to practice your coding skills! With just a few edits, you can personalize the text, colors, and even add your own images to make the page truly unique.

How to Use the Template:

  1. Customize the Message: Edit the text to say exactly what you want.
  2. Add Personal Touches: Change the colors, fonts, or even add a special image that means something to both of you.
  3. Share Your Creation: Once you’re happy with it, simply share the link with your crush and wait for their reaction!

Important Note:

Remember, this code is just a starting point—a template designed to help you get started quickly. Be sure to personalize it so it reflects your personality and the message you want to convey.

Ready to Make a Lasting Impression?

Download the source code now, and start creating something special for that special someone!

HTML Code

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="open.css" />
    <script>
      function openUp() {
        const $opentop = document.querySelector("#opentop");
        const $top = document.querySelector("#top");
        const $front = document.querySelector("#front");
        const $back = document.querySelector("#back");
        const $letter = document.querySelector("#letter");
        const $button = document.querySelector("button");

        $opentop.beginElement();
        $top.style.zIndex = 2;

        $top.classList.add("animate");
        $front.classList.add("animate");
        $back.classList.add("animate");
        $button.classList.add("animate");
        $letter.classList.add("animate");
      }
    </script>
  </head>
  <body>
    <div class="text">
      <h1>Hey ! Listen this is for you ?....</h1>
    </div>
    <div id="envelope">
      <div id="back">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          height="300"
          width="300"
        >
          <polygon
            points="0,100 300,100 300,300 0,300"
            style="fill: #4a274a; stroke: none; stroke-width: 0"
          />
        </svg>
      </div>
      <div id="front">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          height="300"
          width="300"
        >
          <polygon
            points="0,100 150,200 300,100 300,300 0,300"
            style="fill: #2abad0; stroke: #ffffff; stroke-width: 3"
          />
        </svg>
      </div>
      <div id="top">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          height="300"
          width="300"
        >
          <polygon
            points="0,100 150,200 300,100"
            style="fill: #2abad0; stroke: #ffffff; stroke-width: 2"
          >
            <animate
              id="opentop"
              attributeName="points"
              dur="0.5s"
              fill="freeze"
              begin="indefinite"
              from="0,100 150,200 300,100"
              to="0,100 150,0 300,100"
            />
          </polygon>
        </svg>
      </div>

      <div id="letter">
        <h1>For My <span>Love</span></h1>

        <!-- <img src="https://i.postimg.cc/5yZQnDpb/ukraine-7424066-640.webp" />-->
        <p>
          You are the person I have been dreaming all my life , so allow me to
          express my intense love for you. You are the most precious thing in my
          life. You have fascinated my heart and seized my mind with your
          magnetic presence and I keep dreaming of yourself Your memories are
          invaluable treasure of my life, which are locked inside my heart. The
          time spent with you was the most mesmerizing and delightful of my
          life. <br />
          <br />
          I take this opportunity to ask for your consent if you want to be my
          life partner.This letter is a token of my love for you. <br />
          If You Accept
          <a href="new.html">Click Here</a>
        </p>
      </div>
      <button onclick="openUp()">Click Here</button>
    </div>
  </body>
</html>

CSS Code

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(180deg, #000000 15%, #000000 100%);
}

div:before,
div:after {
  display: block;
  content: "";
  position: absolute;
}

div.beloved {
  width: 100vmin;
  height: 100vmin;
  left: -5vmin;
  margin: 0 auto;
  display: flex;
  z-index: -99;
  position: relative;
  background: radial-gradient(ellipse, #e3ba9b 3vmin, transparent 5vmin) 50vmin
      5vmin/10vmin 5vmin no-repeat,
    radial-gradient(circle, #3c6526 0.75vmin, black 0.75vmin, transparent 1vmin)
      52vmin 12vmin/4vmin 4vmin no-repeat,
    radial-gradient(circle, #3c6526 0.75vmin, black 0.75vmin, transparent 1vmin)
      56vmin 12vmin/4vmin 4vmin no-repeat,
    radial-gradient(circle, #f0caab 5vmin, #ecbc95 10vmin, transparent 10vmin)
      45vmin 5vmin/20vmin 20vmin no-repeat,
    radial-gradient(ellipse at 90% 100%, #633b1c 8vmin, transparent 8vmin)
      30vmin 85vmin/20vmin 8vmin no-repeat,
    radial-gradient(ellipse at 10% 100%, #633b1c 8vmin, transparent 8vmin)
      63vmin 85vmin/20vmin 8vmin no-repeat,
    linear-gradient(
        -85deg,
        transparent 1vmin,
        #4e555e 1vmin,
        #717a88 10vmin,
        transparent 10vmin
      )
      37vmin 60vmin/15vmin 30vmin no-repeat,
    linear-gradient(
        85deg,
        transparent 1vmin,
        #4e555e 1vmin,
        #717a88 10vmin,
        transparent 10vmin
      )
      61vmin 60vmin/15vmin 30vmin no-repeat;
}

div.beloved:before {
  width: 100vmin;
  height: 100vmin;
  z-index: 50;
  display: flex;
  position: absolute;
  transform: rotate(45deg);
  background: radial-gradient(
        circle,
        #f0caab 1vmin,
        #e8af80 3.5vmin,
        transparent 3.5vmin
      )
      29vmin 61vmin/8vmin 6vmin no-repeat,
    radial-gradient(circle, #f0caab 1vmin, #e8af80 3.5vmin, transparent 3.5vmin)
      71vmin 20vmin/6vmin 8vmin no-repeat,
    radial-gradient(circle, #b40001 20vmin, transparent 20vmin) 35vmin 5vmin/40vmin
      40vmin no-repeat,
    radial-gradient(circle, #b40001 20vmin, transparent 20vmin) 15vmin 25vmin/40vmin
      40vmin no-repeat,
    linear-gradient(90deg, #b40001 50vmin, transparent 50vmin) 35vmin 25vmin/40vmin
      40vmin no-repeat;
}

div.beloved:after {
  width: 100vmin;
  height: 100vmin;
  top: 30vmin;
  left: 28vmin;
  z-index: 50;
  display: flex;
  position: absolute;
  white-space: pre;
  content: "Thank you \a Love";

  text-align: center;
  line-height: 1.1;
  color: #ffffff;
  opacity: 0.38;
  font-family: "Architects Daughter", cursive;
  font-size: 12vmin;
}

div.beloved:before {
  animation: floatturn 10s ease-out infinite;
}

@keyframes floatturn {
  50% {
    transform: rotateZ(45deg) translateY(-3vmin);
  }
}
div.beloved:after {
  animation: float 10s ease-out infinite;
}

@keyframes float {
  50% {
    transform: translateX(3vmin) translateY(-3vmin);
  }
}

JavaScript Code

<!-- Thank You code-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {
  margin: 0;
  position: relative;
  width: 100vw;
  height: 100vh;

  background-image: linear-gradient(0deg, #e87d7d 0%, #11a4ff 100%);
}

#envelope {
  position: absolute;
  top: calc(50vh - 200px);
  left: calc(50vw - 150px);
  width: 300px;
  height: 300px;
}

#envelope > * {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#back {
  display: block;
  z-index: 0;
}

#front {
  display: block;
  z-index: 10;
}

#top {
  display: block;
  z-index: 11;
}

#top.animate,
#front.animate,
#back.animate,
#envelope button.animate {
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 1s;
}

#letter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(255, 255, 255);
  padding: 5px;
  z-index: 5;
  left: 15px;
  right: 15px;
  bottom: 5px;
  top: 105px;

  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  font-size: 16px;
}
h1 {
  padding-top: 12px;
}
h1 span {
  color: red;
}
p {
  font-size: 17px;
  padding: 2px;
  line-height: 20px;
}
#letter img {
  background-size: cover;
}
#letter.animate {
  animation: makebig 2s forwards;
  animation-delay: 1s;
}

@keyframes makebig {
  0% {
    top: 105px;
    left: 15px;
    right: 15px;
    bottom: 5px;
    font-size: 16px;
  }
  33% {
    top: -100px;
    left: 15px;
    right: 15px;
    bottom: 150px;
    font-size: 16px;
  }
  100% {
    top: -0px;
    left: -55px;
    right: -25px;
    bottom: -100px;
    font-size: 24px;
  }
}

#letter h1 {
  font-size: inherit;
}

#letter h2 {
  font-size: inherit;
}

#letter img {
  height: 50%;
}
a {
  color: red;
}
#envelope button {
  display: block;
  z-index: 15;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: rgb(255, 89, 0);
  font-weight: bold;
  text-align: center;
  color: white;
  cursor: pointer;
  top: calc(200px - 25px);
  left: calc(150px - 25px);
  transition: transform 1s, background-color 1s, color 1s;
}

#envelope button:hover {
  background-color: white;
  transform: scale(1.5);
  color: rgb(255, 89, 0);
  transition: transform 1s, background-color 1s, color 1s;
}
.text h1 {
  color: rgb(255, 255, 255);
  text-align: center;
}

</style><linkrel"stylesheet"href"style2.css"
    <title>thankyou</title>
</head>
<body>
    <div class="heart">
        <i class="fa-solid fa-heart"></i>
    </div>
    <div class="beloved"></div>
</body>
</html>

PHP Code

NO Need
Show Result






Leave a Comment: 👇