Scribd
Upload
5 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 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
We take content rights seriously. If you suspect this is your content, claim it here.
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