 |
| Love letter using html and css |
In this article, we given a Love letter using html and css source code as a project. Love Letter is the unique project that includes a card which shows the love letter when user click or hover on a card. In this projected, we used a html for linking, adding text, structure and css for styling, animation, design. we added a rain effect for attractive with attractive color. This project is created for fun and practice purpose only.
So, Must try this advanced project for practice in vs code to check how it works. We have given a complete source code of Love letter using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Love-letter.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Love letter using html and css source code
Here we given a html and css source code of Love letter project as given -
HTML
In HTML code, we linked a css file for styling and design. We added div tags with text in a card structure. Added a impressive lines for more additional with heart emoji in the letter. Copy the given html code and paste it into index.html file.
<!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>
<div class="container">
<div class="background-hearts"></div>
<div class="content">
<div class="envelope-container">
<div class="envelope" id="envelope">
<div class="envelope-front">
<div class="front-content">
<h2>Open for Love</h2>
<p>Click to reveal my heart...</p>
</div>
</div>
<div class="envelope-back">
<div class="letter" id="letter">
<div class="letter-content">
<h1>To My Beloved</h1>
<p class="sender-info">From: Your Name<br>Date: August 1, 2024</p>
<p class="letter-text">My Dearest Love,</p>
<p class="letter-text">You are the sunshine that brightens my days and the moonlight that fills my nights with peace. Every moment spent with you is a gift, a treasure I hold dearly in my heart.</p>
<p class="letter-text">Your laughter is music to my soul, and your touch, a gentle caress that warms me from within. I am grateful for your love, for it completes me in ways I never thought possible.</p>
<p class="letter-text">I promise to cherish and protect our love, to stand by your side through life's joys and challenges. Together, we will build a future filled with happiness, laughter, and endless love.</p>
<p class="letter-text">Forever yours,</p>
<p class="sender-name">Your Name</p>
</div>
<div class="heart-emojis">
<span>❤️</span><span>❤️</span><span>❤️</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS
In CSS code, we added a responsive design with hover effect. When user clicks on card, then it flips and shows the letter message to the user. We added a flip card with animative design and also added a rain effect with beautiful background. Copy the given css code and paste it into style.css file.
body {
font-family: 'Arial', sans-serif;
background-color: #fde7e7;
margin: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
width: 100%;
max-width: 800px;
}
.background-hearts {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle, #ff4d4d 5%, transparent 6%),
radial-gradient(circle, #ff4d4d 5%, transparent 6%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
animation: heart-rain 10s linear infinite;
}
@keyframes heart-rain {
from {
transform: translateY(-100%);
}
to {
transform: translateY(100%);
}
}
.content {
position: relative;
z-index: 1;
}
.envelope-container {
perspective: 1000px;
transform-style: preserve-3d;
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.envelope {
width: 100%;
height: 250px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.envelope:hover {
transform: rotateY(180deg);
}
.envelope-front,
.envelope-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.envelope-front {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
color: #ff4d4d;
}
.envelope-front .front-content {
text-align: center;
padding: 20px;
}
.envelope-back {
background-color: #fff;
transform: rotateY(180deg);
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.letter {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.letter-content {
text-align: center;
}
.letter-content h1 {
color: #ff4d4d;
font-size: 24px;
margin-bottom: 10px;
}
.sender-info {
font-size: 14px;
color: #888;
}
.letter-text {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.6;
}
.sender-name {
font-weight: bold;
font-style: italic;
font-size: 18px;
margin-top: 10px;
}
.heart-emojis {
font-size: 36px;
margin-top: 20px;
}
.heart-emojis span {
margin: 0 5px;
color: #ff4d4d;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
.envelope {
height: 200px;
}
.envelope-front .front-content {
padding: 10px;
}
.letter-content h1 {
font-size: 20px;
}
.letter-text {
font-size: 14px;
}
.sender-info,
.sender-name {
font-size: 12px;
}
.heart-emojis {
font-size: 24px;
}
}Output
Check this output of Love letter using html and css -
Also see this -
Hope this helps you to know about Love letter using html and css source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects