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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
    <title>Wish Happy New Year 2024!title>
    <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 you! 🌟 Happy New Year! 💖 Here's to more smiles and moments together....😊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: #ffff; stroke-width: 3" />

                <animate id="opentop" attributeName="points" dur="0.5s" fill="freeze" begin="indefinite"
                    from="o,100 150,200 300,100" to="0,100 150,0 300,100" />
                polygon>
            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: #ffff; stroke-width: 2" />

                <animate id="opentop" attributeName="points" dur="0.5s" fill="freeze" begin="indefinite"
                    from="o,100 150,200 300,100" to="0,100 150,0 300,100" />
                polygon>
            svg>
        div>
        <div id="letter">
            <h1>For My <span>Lovespan>h1>
            
            <p>
                As the new year unfolds, my thoughts are filled with the warmth you bring to my life. Wishing you
                boundless happiness, unwavering success, and the fulfillment of your dreams in 2024. Here's to shared
                smiles, stolen glances, and the possibility of our unspoken sentiments turning into a beautiful love
                story. Happy New Year, my crush.
                <br>
                <br>
                I cherish you deeply and wanted to express my feelings. Will you be my life partner? This letter is a
                token of my love. If you accept.
                <a href="thankyou.html">Click❤️ Herea>
                <br>

            p>
        div>
        <button onclick="openUp()">Click❤️ Herebutton>
    div>

body>

html>

CSS Code

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;
  }
*,
*: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


                                        
                                    

                                    

                                        
PHP Code

                                        

                                        
                                    

                                    

                                        


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style2.css" />
    <title>thankyoutitle>
head>
<body>
    <div class="heart">
        <i class="fa-solid fa-heart">i>
    div>
    <div class="beloved">div>
body>
html>
                                    

                                

                            

                        

                    

                    



                    

                







            


            
             


    

  




    
    

        

        

        

    

    

        

        

        

    









        

        
        

        

            

                

                    
Leave a Comment: