As an engineering student, I don't know how to impress my crush, and I think this is not just my problem—many boys in college and school face the same struggle. 😤

Also, if your goal isn’t to impress your crush but to make an impression on any woman in your life—be it your mother, sister, or partner—it can still be quite challenging.

That's why I created a small project called "Crush" using HTML, CSS, and JavaScript. I can't guarantee that your crush (or anyone you want to impress) will be impressed, but one thing is for sure—she will never forget what you made for her. ♥️

HTML PART 

Crush 2
  









   and I fallen in
    Love with You 😍 
   



  
  



  How can be 
    someone so cute ❤️ 

  





 and My Favorite
Person 😍



You are Cute 
  Amazing ❤️



Drag the papers to move!


  






    Enter fullscreen mode
    


    Exit fullscreen mode
    




we all know html part is easy.
  
  
  CSS PART

@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');




body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 1000px;
  background-image: url("https://www.psdgraphics.com/wp-content/uploads/2022/01/white-math-paper-texture.jpg");
  background-position: center center;
}

.paper {
  background-image: url("https://i0.wp.com/textures.world/wp-content/uploads/2018/10/2-Millimeter-Paper-Background-copy.jpg?ssl=1");
  background-size: 500px;
  background-position: center center;
  padding: 20px 100px;
/*  min-width: 800px; */

  transform: rotateZ(-5deg);
  box-shadow: 1px 15px 20px 0px rgba(0,0,0,0.5);

  position: absolute;
}

.paper.heart {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 0;
  border-radius: 50%;
}

.paper.image {
  padding: 10px;
}
.paper.image p {
  font-size: 30px;
}

img {
  max-height: 200px;
  width: 100%;
  user-select: none;
}

.paper.heart::after {
  content: "";
  background-image: url('https://cdn.pixabay.com/photo/2016/03/31/19/25/cartoon-1294994__340.png');
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.6;
}

p {
  font-family: 'Zeyada';
  font-size: 50px;
  color: rgb(0,0,100);
  opacity: 0.75;
  user-select: none;

}



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  JAVASCRIPT PART

let highestZ = 1;

class Paper {
  holdingPaper = false;
  mouseTouchX = 0;
  mouseTouchY = 0;
  mouseX = 0;
  mouseY = 0;
  prevMouseX = 0;
  prevMouseY = 0;
  velX = 0;
  velY = 0;
  rotation = Math.random() * 30 - 15;
  currentPaperX = 0;
  currentPaperY = 0;
  rotating = false;

  init(paper) {
    document.addEventListener('mousemove', (e) => {
      if(!this.rotating) {
        this.mouseX = e.clientX;
        this.mouseY = e.clientY;

        this.velX = this.mouseX - this.prevMouseX;
        this.velY = this.mouseY - this.prevMouseY;
      }

      const dirX = e.clientX - this.mouseTouchX;
      const dirY = e.clientY - this.mouseTouchY;
      const dirLength = Math.sqrt(dirX*dirX+dirY*dirY);
      const dirNormalizedX = dirX / dirLength;
      const dirNormalizedY = dirY / dirLength;

      const angle = Math.atan2(dirNormalizedY, dirNormalizedX);
      let degrees = 180 * angle / Math.PI;
      degrees = (360 + Math.round(degrees)) % 360;
      if(this.rotating) {
        this.rotation = degrees;
      }

      if(this.holdingPaper) {
        if(!this.rotating) {
          this.currentPaperX += this.velX;
          this.currentPaperY += this.velY;
        }
        this.prevMouseX = this.mouseX;
        this.prevMouseY = this.mouseY;

        paper.style.transform = `translateX(${this.currentPaperX}px) translateY(${this.currentPaperY}px) rotateZ(${this.rotation}deg)`;
      }
    })

    paper.addEventListener('mousedown', (e) => {
      if(this.holdingPaper) return; 
      this.holdingPaper = true;

      paper.style.zIndex = highestZ;
      highestZ += 1;

      if(e.button === 0) {
        this.mouseTouchX = this.mouseX;
        this.mouseTouchY = this.mouseY;
        this.prevMouseX = this.mouseX;
        this.prevMouseY = this.mouseY;
      }
      if(e.button === 2) {
        this.rotating = true;
      }
    });
    window.addEventListener('mouseup', () => {
      this.holdingPaper = false;
      this.rotating = false;
    });
  }
}

const papers = Array.from(document.querySelectorAll('.paper'));

papers.forEach(paper => {
  const p = new Paper();
  p.init(paper);
});



    Enter fullscreen mode
    


    Exit fullscreen mode
    




In the end the project will look like this 👇