 |
| Love Message in HTML & CSS |
In this article, we given a Love message in html and css as a project. Love message is the unique project that shows a I love you message in html and css. It is shows a message with animation for better look.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Love message in 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-message.
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 message in html and css source code
Here we given a html and css source code of Love message project as given -
HTML
In html, we added a message as "I Love You" in container. Linked a css file to add the design and animation to the project. 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 Message</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="message">
<h1>I Love You</h1>
<p>More than words can say</p>
</div>
</div>
</body>
</html>CSS
In css code, we added a styling to love message with a responsive design. Added a animation to make it more attractive. Copy the given css code and paste it into style.css file.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff6b6b, #f7d54c);
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.container {
text-align: center;
}
.message {
background-color: #fff;
border-radius: 15px;
padding: 20px 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
animation: bounceIn 2s ease-out;
}
h1 {
font-size: 3rem;
margin: 0;
color: #ff6b6b;
animation: fadeIn 3s ease-in;
}
p {
font-size: 1.5rem;
color: #333;
margin: 10px 0 0;
animation: fadeIn 3s ease-in 1s;
}
@keyframes bounceIn {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Output
Check the output of Love message project -
Also see this -
Hope this helps you to know about Love message in html and css with 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