Scribd
Upload
11 views3 pages

Index HTML

The document is an HTML page designed as a romantic tribute to someone named Sara, featuring animated text and background shapes. It includes a button to play or pause background music, enhancing the overall experience. The page uses CSS for styling and animations, creating an engaging visual presentation.

Uploaded by

Osamah Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views3 pages

Index HTML

The document is an HTML page designed as a romantic tribute to someone named Sara, featuring animated text and background shapes. It includes a button to play or pause background music, enhancing the overall experience. The page uses CSS for styling and animations, creating an engaging visual presentation.

Uploaded by

Osamah Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>For Sara</title>
<style>
body {
background-color: #0d0d0d;
color: #f0f0f0;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
margin: 0;
overflow: hidden;
}

.text {
font-size: 24px;
border-right: 2px solid #f0f0f0;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: typing 6s steps(40, end) forwards, blink .7s step-end infinite;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink {
from, to { border-color: transparent }
50% { border-color: #f0f0f0 }
}

.controls {
margin-top: 20px;
}

.controls button {
background-color: #f0f0f0;
color: #0d0d0d;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}

.controls button:hover {
background-color: #c0c0c0;
}

.background-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
}

.background-shapes span {
position: absolute;
display: block;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.1);
animation: animate 20s linear infinite;
bottom: -150px;
}

@keyframes animate {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; }
}
</style>
</head>
<body>

<div class="background-shapes">
<span style="left: 10%; animation-duration: 15s;"></span>
<span style="left: 20%; animation-duration: 12s;"></span>
<span style="left: 70%; animation-duration: 18s;"></span>
<span style="left: 80%; animation-duration: 14s;"></span>
</div>

<div class="text" id="text">


Among infinite patterns, you are the only design that feels complete. Sara... Ti
amo senza misura.
</div>

<div class="controls">
<button onclick="toggleMusic()">Play/Pause Music</button>
</div>

<audio id="background-music" loop>


<source src="https://files.freemusicarchive.org/storage-freemusicarchive-org/
music/no_curator/Komiku/It_is_Year_2120/Komiku_-_06_-_Little_Romantic.mp3"
type="audio/mp3">
</audio>

<script>
var music = document.getElementById("background-music");

function toggleMusic() {
if (music.paused) {
music.play();
} else {
music.pause();
}
}
</script>
</body>
</html>

You might also like