Hey Lovebirds! 💑✨
Valentine’s Day Week Day 2: Propose Day, February 8
This Propose Day, let's add a tech twist to your love story! 💻💞Create a special HTML & CSS project to pop the question in style. Customize it with romantic colors, animations, and heartfelt messages.
Share the love with code! 💑✨
Feel free to adjust the text further to suit your preferences!!!
Preview
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyjOsLkMc8gdS8d37iBNHQeqXuB9U3k62Klh8Na3dfkRN23dkva4eI36wqSkO7xPFlyRrgIwpgwpPHjNX34upab7YdJLvi7L51cGMjDSRpfOrD9LFNm208IJjYcnge63AP_yBdDbbVHTFiL8_IoTGyd5oaUBy8JqlNLWcRtEVim957Gsm5bgC_57p-bM/s1280/WhatsApp%20Image%202024-02-05%20at%2018.54.36_85429e10.jpg)
HTML Code Structure :-
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>LOADS OF LOGIC</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Short+Stack&family=Homemade+Apple&display=swap'> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <!-- A pen by Developer Rahul --> <div class="paper heart"> <p class="love-you">I LOVE YOU</p> </div> <div class="paper image"> <p> and I fallen in</p> <p>Love with You 😍 </p> <img src="images/1.jpeg" /> </div> <div class="paper image"> <p</p> <img src="images/2.jpeg" /> </div> <div class="paper image"> <p>How can be </p> <p> someone so cute ❤️ </p> <img src="images/3.jpg" /> </div> <div class="paper red"> <p class="p1"> and My Favorite</p> <p class="p2">Person 😍</p> </div> <div class="paper"> <p class="p1">You are Cute </p> <p class="p1">Amazing <span style="color: red !important;">❤️</span></p> </div> <div class="paper"> <p class="p1">Drag the papers to move!</p> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS Code Structure :-
style.css
@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; } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60); } .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; 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; } .love-you{ display: flex; justify-content: center; align-items: center; font-size: 46px; font-weight: bold; } p { font-family: 'Zeyada'; font-size: 50px; color: rgb(0,0,100); opacity: 0.75; user-select: none; }
JS Code Structure :-
script.js
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); });
Follow Us