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:  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 *