ijustlovehim/i-love-him.markdown

## i-love-him.markdown

      
    Raw
  

              i-love-him.markdown
            
          
    I love him

A Pen by ijustlovehim on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Love Letter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>My Love Letter</h1>

    <!-- Section 1: I'm Sorry -->
    <div class="section" id="sorrySection">
        I'm Sorry
    </div>
    <div class="message" id="sorryMessage">
        I know the words 'I'm sorry' have become something I say over and over again. I say them endlessly, and each time, it feels like they lose their meaning. But please, understand that I truly mean it. I know I make mistakes, but with every mistake, I try again. Why? Because I love you endlessly. My love for you can't be measured by words, but in my heart, it’s more than I can ever explain. I will never let us be separated. Our love might face difficult days, but I will never give up. I’ll always fight for us.
    </div>

    <!-- Section 2: Things I Want Us To Experience -->
    <div class="section" id="experienceSection">
        Things I Want Us To Experience
    </div>
    <div class="message" id="experienceMessage">
        I dream of a life with you, one where we experience everything together. I want us to build a family, to laugh and cry together, to share every moment, no matter how small. I want us to run under the rain, I want to cuddle for hours without ever getting bored, to wake up every morning with your face in front of mine, and to cook for you and be the best wife I can be. Our life together will be filled with endless love, laughter, and all the experiences that make it meaningful.
    </div>

    <!-- Section 3: I Love You -->
    <div class="section" id="loveSection">
        I Love You
    </div>
    <div class="message" id="loveMessage">
        My love, you are my everything. You're my world, my universe, my home. You are the one I turn to when I need comfort, and the one I want to hold when everything feels uncertain. No matter how cold the words or actions from you might feel, I will never turn away. Even when I feel like you’re pulling away, I’ll keep trying, I’ll keep loving you, because you are the reason my heart beats. You’re my safe place, and no matter how difficult things get, I will never give up on us.
    </div>

    <!-- Section 4: Things I Don't Want You To Forget -->
    <div class="section" id="forgetSection">
        Things I Don't Want You To Forget
    </div>
    <div class="message" id="forgetMessage">
        There’s something I need you to remember, something I hope you never forget: I will always be your girl. I will always stay loyal to you, no matter what. I promise you, every day I try my best. I’ve worked hard on us, I’ve changed, and I’m not done growing. I will keep improving, keep changing, and keep loving you with all of me. Even if you doubt me, know this—I will never stop.
    </div>

    <!-- Section 5: Do You Forgive Me? -->
    <div class="section" id="forgivenessSection">
        Do You Forgive Me?
    </div>
    <div id="yesNoSection">
        <button id="yesButton">Yes</button>
        <button id="noButton">No</button>
    </div>
    <div class="message" id="yesMessage">
        If you forgive me, I will cherish you even more than before. I will never stop trying to be a better partner for us. No matter how many times I fail, my love for you is unwavering. Together, we rise, and together, we’ll build a love stronger than anything we’ve faced.
    </div>
    <div class="quote" id="yesQuote">
        "In love, we stumble, we fall, but the most beautiful part is that we rise together, stronger than before."
    </div>
    <div class="message" id="noMessage">
        If you can’t forgive me, know this: I’ll never stop trying. I will always keep striving to make things right because you and this love mean more to me than anything. I will never give up on us, no matter how tough things get. Please, don’t ever doubt that my heart is yours forever.
    </div>
    <div class="quote" id="noQuote">
        "Love is not just a feeling, it's a promise to keep trying, no matter how hard it gets."
    </div>

    <script src="script.js"></script>
</body>
</html>

## script.js
// Function to toggle the display of the message when a section is clicked
document.getElementById("sorrySection").addEventListener("click", function() {
    toggleMessage("sorryMessage");
});
document.getElementById("experienceSection").addEventListener("click", function() {
    toggleMessage("experienceMessage");
});
document.getElementById("loveSection").addEventListener("click", function() {
    toggleMessage("loveMessage");
});
document.getElementById("forgetSection").addEventListener("click", function() {
    toggleMessage("forgetMessage");
});

// Function to toggle the display of the "Yes/No" section
document.getElementById("forgivenessSection").addEventListener("click", function() {
    document.getElementById("yesNoSection").style.display = "block";
});

// Function to handle toggling the visibility of messages
function toggleMessage(messageId) {
    var message = document.getElementById(messageId);
    if (message.style.display === "block") {
        message.style.display = "none";
    } else {
        message.style.display = "block";
    }
}

// Yes/No responses
document.getElementById("yesButton").addEventListener("click", function() {
    document.getElementById("yesMessage").style.display = "block";
    document.getElementById("yesQuote").style.display = "block";
    document.getElementById("noMessage").style.display = "none";
    document.getElementById("noQuote").style.display = "none";
});

document.getElementById("noButton").addEventListener("click", function() {
    document.getElementById("noMessage").style.display = "block";
    document.getElementById("noQuote").style.display = "block";
    document.getElementById("yesMessage").style.display = "none";
    document.getElementById("yesQuote").style.display = "none";
});

## style.css
/* General page styling */
body {
    font-family: 'Georgia', serif;
    background: #fef6f6;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    text-align: center;
}

/* Title */
h1 {
    font-size: 2rem;
    color: #d15b5b;
    font-family: 'Georgia', serif;
    margin-bottom: 20px;
}

/* Styling for the sections */
.section {
    background-color: #fff;
    padding: 20px;
    margin: 10px 0;
    border: 2px solid #e3e3e3;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    font-family: 'Georgia', serif;
}

.section:hover {
    transform: scale(1.05);
    background-color: #ffebf2;
}

/* Section Message and Quote Styling */
.message, .quote {
    display: none;
    font-size: 1.2rem;
    color: #444;
    margin-top: 20px;
    padding: 25px;
    background-color: #fff;
    border: 2px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
    font-family: 'Georgia', serif;
}

.message {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
    background-color: #f5f5f5;
    padding: 30px;
}

/* Styling for the Yes/No section */
#yesNoSection {
    display: none;
    margin-top: 20px;
}

#yesButton, #noButton {
    font-size: 1.2rem;
    padding: 10px 20px;
    background-color: #d15b5b;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 5px;
}

#yesButton:hover, #noButton:hover {
    background-color: #f8a6a6;
}

/* Styling for the quote */
.quote {
    font-size: 1.1rem;
    color: #777;
    background-color: #f1f1f1;
    padding: 15px;
    margin-top: 20px;
    font-style: italic;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Love Letter</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>My Love Letter</h1>

	<!-- Section 1: I'm Sorry -->
	<div class="section" id="sorrySection">
	I'm Sorry
	</div>
	<div class="message" id="sorryMessage">
	I know the words 'I'm sorry' have become something I say over and over again. I say them endlessly, and each time, it feels like they lose their meaning. But please, understand that I truly mean it. I know I make mistakes, but with every mistake, I try again. Why? Because I love you endlessly. My love for you can't be measured by words, but in my heart, it’s more than I can ever explain. I will never let us be separated. Our love might face difficult days, but I will never give up. I’ll always fight for us.
	</div>

	<!-- Section 2: Things I Want Us To Experience -->
	<div class="section" id="experienceSection">
	Things I Want Us To Experience
	</div>
	<div class="message" id="experienceMessage">
	I dream of a life with you, one where we experience everything together. I want us to build a family, to laugh and cry together, to share every moment, no matter how small. I want us to run under the rain, I want to cuddle for hours without ever getting bored, to wake up every morning with your face in front of mine, and to cook for you and be the best wife I can be. Our life together will be filled with endless love, laughter, and all the experiences that make it meaningful.
	</div>

	<!-- Section 3: I Love You -->
	<div class="section" id="loveSection">
	I Love You
	</div>
	<div class="message" id="loveMessage">
	My love, you are my everything. You're my world, my universe, my home. You are the one I turn to when I need comfort, and the one I want to hold when everything feels uncertain. No matter how cold the words or actions from you might feel, I will never turn away. Even when I feel like you’re pulling away, I’ll keep trying, I’ll keep loving you, because you are the reason my heart beats. You’re my safe place, and no matter how difficult things get, I will never give up on us.
	</div>

	<!-- Section 4: Things I Don't Want You To Forget -->
	<div class="section" id="forgetSection">
	Things I Don't Want You To Forget
	</div>
	<div class="message" id="forgetMessage">
	There’s something I need you to remember, something I hope you never forget: I will always be your girl. I will always stay loyal to you, no matter what. I promise you, every day I try my best. I’ve worked hard on us, I’ve changed, and I’m not done growing. I will keep improving, keep changing, and keep loving you with all of me. Even if you doubt me, know this—I will never stop.
	</div>

	<!-- Section 5: Do You Forgive Me? -->
	<div class="section" id="forgivenessSection">
	Do You Forgive Me?
	</div>
	<div id="yesNoSection">
	<button id="yesButton">Yes</button>
	<button id="noButton">No</button>
	</div>
	<div class="message" id="yesMessage">
	If you forgive me, I will cherish you even more than before. I will never stop trying to be a better partner for us. No matter how many times I fail, my love for you is unwavering. Together, we rise, and together, we’ll build a love stronger than anything we’ve faced.
	</div>
	<div class="quote" id="yesQuote">
	"In love, we stumble, we fall, but the most beautiful part is that we rise together, stronger than before."
	</div>
	<div class="message" id="noMessage">
	If you can’t forgive me, know this: I’ll never stop trying. I will always keep striving to make things right because you and this love mean more to me than anything. I will never give up on us, no matter how tough things get. Please, don’t ever doubt that my heart is yours forever.
	</div>
	<div class="quote" id="noQuote">
	"Love is not just a feeling, it's a promise to keep trying, no matter how hard it gets."
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	// Function to toggle the display of the message when a section is clicked
	document.getElementById("sorrySection").addEventListener("click", function() {
	toggleMessage("sorryMessage");
	});
	document.getElementById("experienceSection").addEventListener("click", function() {
	toggleMessage("experienceMessage");
	});
	document.getElementById("loveSection").addEventListener("click", function() {
	toggleMessage("loveMessage");
	});
	document.getElementById("forgetSection").addEventListener("click", function() {
	toggleMessage("forgetMessage");
	});

	// Function to toggle the display of the "Yes/No" section
	document.getElementById("forgivenessSection").addEventListener("click", function() {
	document.getElementById("yesNoSection").style.display = "block";
	});

	// Function to handle toggling the visibility of messages
	function toggleMessage(messageId) {
	var message = document.getElementById(messageId);
	if (message.style.display === "block") {
	message.style.display = "none";
	} else {
	message.style.display = "block";
	}
	}

	// Yes/No responses
	document.getElementById("yesButton").addEventListener("click", function() {
	document.getElementById("yesMessage").style.display = "block";
	document.getElementById("yesQuote").style.display = "block";
	document.getElementById("noMessage").style.display = "none";
	document.getElementById("noQuote").style.display = "none";
	});

	document.getElementById("noButton").addEventListener("click", function() {
	document.getElementById("noMessage").style.display = "block";
	document.getElementById("noQuote").style.display = "block";
	document.getElementById("yesMessage").style.display = "none";
	document.getElementById("yesQuote").style.display = "none";
	});
	/* General page styling */
	body {
	font-family: 'Georgia', serif;
	background: #fef6f6;
	color: #333;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	flex-direction: column;
	text-align: center;
	}

	/* Title */
	h1 {
	font-size: 2rem;
	color: #d15b5b;
	font-family: 'Georgia', serif;
	margin-bottom: 20px;
	}

	/* Styling for the sections */
	.section {
	background-color: #fff;
	padding: 20px;
	margin: 10px 0;
	border: 2px solid #e3e3e3;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.3s ease;
	font-family: 'Georgia', serif;
	}

	.section:hover {
	transform: scale(1.05);
	background-color: #ffebf2;
	}

	/* Section Message and Quote Styling */
	.message, .quote {
	display: none;
	font-size: 1.2rem;
	color: #444;
	margin-top: 20px;
	padding: 25px;
	background-color: #fff;
	border: 2px solid #e3e3e3;
	border-radius: 8px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	transition: opacity 0.3s ease-in-out;
	font-family: 'Georgia', serif;
	}

	.message {
	font-size: 1.3rem;
	line-height: 1.6;
	color: #333;
	text-align: left;
	background-color: #f5f5f5;
	padding: 30px;
	}

	/* Styling for the Yes/No section */
	#yesNoSection {
	display: none;
	margin-top: 20px;
	}

	#yesButton, #noButton {
	font-size: 1.2rem;
	padding: 10px 20px;
	background-color: #d15b5b;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	margin: 5px;
	}

	#yesButton:hover, #noButton:hover {
	background-color: #f8a6a6;
	}

	/* Styling for the quote */
	.quote {
	font-size: 1.1rem;
	color: #777;
	background-color: #f1f1f1;
	padding: 15px;
	margin-top: 20px;
	font-style: italic;
	}