Scribd
Upload
3 views

Doctype HTML

The document is an HTML webpage titled 'For You, My Love' designed as a romantic message. It features a visually appealing layout with a background image, animated heart, and a heartfelt message to a loved one, along with a button to send an email. The page also includes a JavaScript function that calculates and displays the duration of the relationship in years, months, and days.

Uploaded by

ramosmariamyrna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Doctype HTML

The document is an HTML webpage titled 'For You, My Love' designed as a romantic message. It features a visually appealing layout with a background image, animated heart, and a heartfelt message to a loved one, along with a button to send an email. The page also includes a JavaScript function that calculates and displays the duration of the relationship in years, months, and days.

Uploaded by

ramosmariamyrna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>For You, My Love</title>

<style>

body {

margin: 0;

padding: 0;

font-family: 'Arial', sans-serif;

background: url('https://scontent.fmnl33-2.fna.fbcdn.net/v/t1.15752-
9/481156118_1323558908790936_3788110898679596636_n.jpg?
_nc_cat=104&ccb=1-
7&_nc_sid=9f807c&_nc_eui2=AeFnpi1LeNOKd_k7s9N_EBfp4lOs1Qq4XtfiU6zV
Crhe15BjUqRgRGYI_I3N_JmB3O2XSWafIpJjMoBO1FXuRIr8&_nc_ohc=fg8DywL
aVDMQ7kNvgFyKKMQ&_nc_oc=AdjITyeMHBPtrnraaFb8MdoSAbv1B-
mIXtgy37elKGOWSf7QNOJNlYcj8vVYhjRurYw&_nc_zt=23&_nc_ht=scontent.f
mnl33-
2.fna&oh=03_Q7cD1gHiVin3D86eSkMViq58m9toXYALsMs6JNZmRVWL2oZ96
A&oe=67E6989B') no-repeat center center fixed;

background-size: cover;

color: pink;

text-align: center;

height: 150vh;

.container {

display: flex;
flex-direction: column;

justify-content: center;

align-items: center;

height: 100%;

header {

font-size: 6em;

margin-bottom: 20px;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

.heart {

font-size: 8em;

color: #ff4c4c;

animation: heartbeat 1s infinite;

@keyframes heartbeat {

0% {

transform: scale(1);

25% {

transform: scale(1.1);

50% {

transform: scale(1);
}

75% {

transform: scale(1.1);

100% {

transform: scale(1);

.message {

font-size: 1.5em;

margin-top: 20px;

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);

.love-time {

font-size: 1.3em;

font-weight: bold;

margin-top: 20px;

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);

color: #ff4c4c;

.button {

margin-top: 30px;

padding: 15px 30px;

font-size: 1.2em;
background-color: #ff4c4c;

color: white;

text-decoration: none;

border-radius: 30px;

box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);

transition: all 0.3s ease-in-out;

.button:hover {

background-color: #ff1f1f;

transform: scale(1.1);

footer {

position: absolute;

bottom: 10px;

font-size: 1.2em;

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);

</style>

</head>

<body>

<div class="container">

<header>

for my one and only baby

</header>
<div class="heart"> ♡ </div>

<div class="message">

My love, [Her Name],<br>

Every moment with you is a beautiful adventure. You are my


everything.

</div>

<div class="love-time" id="love-time">

Loving you since: <span id="time-running"></span>

</div>

<a href="mailto:[[email protected]]" class="button">can you


open it, babyy? 🥺 </a>

<footer>

</div>

made with love by your beb, maemae hehe

</footer>

</div>

<script>

// Replace this with the actual date you started your relationship

const startDate = new Date("2023-01-18"); // Example: new


Date("2023-05-14");

function calculateTime() {
// Get the current date and time in the local timezone

const now = new Date();

// Calculate the time difference between the start date and now

const diff = now - startDate; // Difference in milliseconds

// Convert the difference to days, months, and years

const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // Convert to


days

const years = Math.floor(days / 365); // Convert to years

const months = Math.floor((days % 365) / 30); // Convert to months

const remainingDays = days % 30; // Remaining days after full


months

// Display the time on the page

document.getElementById("time-running").textContent = `${years}
years, ${months} months, ${remainingDays} days`;

// Call the function to update the time when the page loads

calculateTime();

// Update the time every second

setInterval(calculateTime, 1000);

</script>

</body>

</html>

You might also like