This Project is designed to impress your partner with a totally different trick that no one has ever tried . you can use it with some changes in its Name and Gifs and it look coolest than ever .
This is consist of three languages [ HTML - CSS ] , All the source codes are down you can easily copy and use it everywhere and most important thing is this project is made on Codepen website so when you use it in another platform , you many need to change some specification like its Size and width and speed , which can easily change by the HTML & CSS . If you found any error or you need my help just Message me i will solve your problems.
Download or Copy Source Codes From Here 👇
--
HTML PAGE 1
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div>
<h1 class="header_text">Do you wanna go out with me?</h1>
</div>
<p>
<a href="https://www.instagram.com/code_with_arrow/?igshid=OGQ5ZDc2ODk2ZA%3D%3D">CODE.WITH.ARROW</a>
</p>
<div class="gif_container">
<img
src="https://i.postimg.cc/pdNqPxx1/milk-and-mocha-cute.gif"
alt="Cute animated illustration"
/>
</div>
<div class="buttons">
<button class="btn" id="yesButton" onclick="nextPage()">Yes</button>
<button
class="btn"
id="noButton"
onmouseover="moveButton()"
onclick="moveButton()"
>
No
</button>
<script>
function nextPage() {
window.location.href = "Add-the-link-of-next-page";
}
function moveButton() {
var x =
Math.random() *
(window.innerWidth -
document.getElementById("noButton").offsetWidth);
var y =
Math.random() *
(window.innerHeight -
document.getElementById("noButton").offsetHeight);
document.getElementById("noButton").style.left = `${x}px`;
document.getElementById("noButton").style.top = `${y}px`;
}
</script>
</div>
</div>
</body>
</html>
CSS PAGE 1
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(rgb(57, 284, 254), rgb(254, 20, 229));
}
#noButton {
position: absolute;
margin-left: 150px;
transition: 0.5s;
margin-top: 30px;
}
#yesButton {
position: absolute;
margin-right: 250px;
margin-top: 30px;
}
.header_text {
font-family: "Nunito";
font-size: 72px;
font-weight: bold;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
color: #000000;
}
.text {
font-family: "Nunito";
font-size: 30px;
font-weight: bold;
color: #000000;
text-align: center;
margin-top: 20px;
margin-bottom: 0px;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-left: 50px;
}
.btn {
background-color: #39FE67;
color: Black;
font-weight: 950;
padding: 19px 25px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border: none;
border-radius: 19px;
transition: background-color 0.3s ease;
box-shadow: 0 3px 3px black;
}
.btn:hover {
background-color: #FE50DB;
color: #000000;
}
.gif_container {
display: flex;
justify-content: center;
align-items: center;
}
p {
color: black;
margin-left: 39%;
}
p a {
color: rgb(15, 4, 4);
font-size: 20px;
font-weight: 500;
opacity: 0.90;
}
HTML PAGE 2
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div>
<h1 class="header_text">Yeeyy ! Finally</h1>
</div>
<div class="gif_container">
<img
src="https://i.postimg.cc/wTDG30TB/yes.gif"
alt="Cute animated illustration"
/>
</div>
<button class="btn" id="yesButton" onclick="nextPage()">
Let's Fix a Date
</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Heart</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 50;
background-color: #f0f0f0;
}
.heart {
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
top: 0;
width: 54px;
height: 80px;
border-radius: 50%;
background: #ff4d4d;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0%, 100% {
transform: scale(2);
}
50% {
transform: scale(1.3);
}
}
</style>
</head>
<body>
<div class="heart" style="left: 50px; top: -180px;"></div>
</body>
</html>
CSS PAGE 2
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(rgb(57, 284, 254), rgb(254, 20, 229));
}
#noButton {
position: absolute;
margin-left: 150px;
transition: 0.5s;
margin-top: 30px;
}
#yesButton {
position: absolute;
margin-right: 150px;
margin-top: 30px;
}
.header_text {
font-family: "Nunito";
font-size: 80px;
font-weight: bold;
text-align: center;
margin-top: -200px;
margin-bottom: 20px;
color: #000000;
}
.text {
font-family: "Nunito";
font-size: 25px;
font-weight: bold;
color: black;
text-align: center;
margin-top: 200px;
margin-bottom: 100px;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
margin-left: 20px;
}
.btn {
background-color: #F49301;
color: black;
font-weight: 750;
padding: 17px 32px;
text-align: center;
display: inline-block;
font-size: 18px;
margin: 140px 158px;
cursor: pointer;
border: none;
border-radius: 25px;
transition: background-color 0.3s ease;
box-shadow: 0 3px 3px black;
}
.btn:hover {
background-color: #01B3F4;
color: #000000;
}
.gif_container {
display: flex;
justify-content: center;
align-items: center;
}
p {
color: white;
margin-left: 50%;
}
p a {
color: rgb(255, 255, 255);
font-size: 20px;
font-weight: 600;
opacity: 0.25;
}