impress your crush with HTML

impress your crush with HTML

Since all of you asking about the source code I posted in my reels. here it is to impress your crush with HTML

<html>
<head>
<title>Hiiiiii</title>
<style>
p {
text-align: center;
font-size: 32px;
font-family: Candara, Oswald;
}
img {
display: block;
margin: 0 auto;
width: 25%;
}
</style>
</head>
<body>
<p>Can we hang out soon?</p>
<img src="https://media.tenor.com/zGm5acSjHCIAAAAM/cat-begging.gif">
</body>
<title>Botões</title>
<style>
#botao1 {
position: fixed;
top: 70%;
left: 55%;
transform: translate(-50%, -50%);
}
#botao2 {
position: absolute;
 left: 39%;
  top: 68%;
}
</style>
</head>
<body>
<button id="botao1">YES BBY!</button>
<button id="botao2">NO</button>
<script>
const button2 = document.getElementById('botao2');
let left = 40;
button2.addEventListener('mouseover', function() {
  if(left == 40){
    left = 44;
  }else{
    left = 40;
  }
  this.style.left = left + '%';
});

</script>
<script>document.getElementById('botao1').addEventListener('click', function() {
alert('YAYY THANK U 😍❤️');
});
</script>
</body>
</html>

How To Run:

Copy and paste the code into an editor or notepad and save it as index.html

Double-click on the file and it will run in your browser

1 thought on “impress your crush with HTML”

  1. hiiiiii

    p {
    text-align: center;
    font-size: 32px;
    font-family: candara, oswald;
    }
    img {
    display: block;
    margin: 0 auto;
    width: 25%;
    }

    can we hang out soon?

    botões

    #botao1 {
    position: fixed;
    top: 70%;
    left: 55%;
    transform: translate(-50%, -50%);
    }
    #botao2 {
    position: absolute;
    left: 39%;
    top: 68%;
    }

    yes bby!
    no

    const button2 = document.getelementbyid(‘botao2’);
    let left = 40;
    button2.addeventlistener(‘mouseover’, function() {
    if(left == 40){
    left = 44;
    }else{
    left = 40;
    }
    this.style.left = left + ‘%’;
    });

    document.getelementbyid(‘botao1’).addeventlistener(‘click’, function() {
    alert(‘yayy thank u 😍❤️’);
    });

Leave a Comment

Your email address will not be published. Required fields are marked *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

we provide projects, courses, and other stuff for free. in order for running we use Google ads to make revenue. please disable adblocker to support us.