html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<h1 id="title">Introducing YTAI</h1>
<p>YouTube Just launch own AI is about to blow your mind!</p>
<button class="btn" onclick="showSurprise()">Check it</button>
<div class="surprise-container" id="surprise">
<div class="surprise-text">Happy April Fools Day</div>
<div class="surprise-image">
<img src="https://i.ibb.co/JF0KB0JY/Chat-GPT-Image-Apr-1-2025-06-01-55-PM.png" alt="April Fools Image">
</div>
</div>
<script>
function showSurprise() {
const surprise = document.getElementById('surprise');
const title = document.getElementById('title');
surprise.style.display = 'block';
document.querySelector('.btn').style.display = 'none';
document.querySelector('p').style.display = 'none';
title.style.display = 'none';
}
</script>
</body>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #fff5f5, #ffe6e6);
font-family: 'Roboto', sans-serif;
padding: 20px;
}
h1 {
color: #ff0000;
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 10px;
text-shadow: 1px 1px 3px rgba(255, 0, 0, 0.2);
}
js
js
1
BROWSER
Console
Uruchom