Promise Day | 11 Feb Special In Htm, CSS | by #untoldCoding
11 Feb Special
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>untoldcoding</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<label>
<div class="heart">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg"></img>
</div>
<input id="messageState" type="checkbox" style="display:none"/>
</label>
<div class="message">
<h1>My Dearest</h1>
<p>As <span class="main">Promise Day</span> dawns upon us,
I find myself overwhelmed with gratitude for having you in my life.
With each passing moment, my love for you grows deeper, and my commitment to you strengthens.
<br>Today, I want to make you a promise - a promise to stand by your side through thick and thin,
to support you in your dreams and aspirations, and to cherish every moment we share together.
I promise to be your rock, your confidant, and your best friend. I promise to listen to you,
to understand you, and to love you unconditionally. I promise to laugh with you in times of joy
and hold you close in times of sorrow. I promise to respect you, to honor you, and to always be
honest with you.
But above all, I promise to love you fiercely and passionately, now and for all eternity.
You are my light, my love, and my everything, and I vow to spend the rest of my days making you happy.
Happy Promise Day, my love. Here's to a lifetime of love, laughter, and endless promises fulfilled.</p>
<p><span class="main"> Your Love</span>
</p>
</div>
<p class="back">Click On Heart To See Magic</p>
</div>
<script src="untoldcoding.js"></script>
</body>
</html>
<html lang="en">: This is the outlet tag for the HTML record. The lang="en" characteristic specifies the language of the file as English.
<head>: This is the outlet tag for the pinnacle section of the HTML report. The head segment generally includes meta-records approximately the document, consisting of the character encoding, viewport settings, identify, and hyperlinks to outside resources like stylesheets and scripts.
<meta charset="UTF-8" />: This meta tag specifies the person encoding of the report as UTF-8, which helps a extensive variety of characters from various languages and logos.
<meta call="viewport" content="width=tool-width, initial-scale=1.0" />: This meta tag sets the viewport properties for responsive net layout. It guarantees that the web site is scaled nicely to suit the width of the device's screen and units the preliminary zoom level to 1.0.
<name>untoldcoding</name>: This tag units the title of the webpage, which is displayed inside the browser's title bar or tab.
<script src="https://code.Jquery.Com/jquery-three.6.0.Min.Js"></script>: This script tag hyperlinks to the jQuery library hosted on the jQuery content shipping community (CDN). JQuery is a JavaScript library that simplifies HTML record traversing, occasion coping with, animating, and Ajax interactions for rapid web development.
<link rel="stylesheet" href="style.Css">: This hyperlink tag hyperlinks to an external stylesheet named "style.Css", which includes the CSS regulations for styling the HTML factors within the record.
<frame>: This is the opening tag for the frame section of the HTML report. The body section carries the seen content material of the web site, along with textual content, pics, links, and different HTML factors.
The rest of the code inside the body segment consists of diverse HTML factors including <div>, <label>, <input>, <h1>, <p>, and <img>, which are used to structure and show the content material of the website.
<script src="untoldcoding.Js"></script>: This script tag links to an outside JavaScript document named "untoldcoding.Js", which incorporates JavaScript code that adds interactivity or functionality to the website.
CSS
h1,
p {
font-family: "Hind", sans-serif;
}
p {
text-indent: 50px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
h1 {
font-weight: 800;
color: rgb(55, 0, 255);
text-shadow: 0 0 10px white;
}
body {
margin: 0px;
background: url(https://i.postimg.cc/5tgNs0n9/couple-sunset-city-scenery-art-uhdpaper-com-4-K-8-264.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.heart {
position: absolute;
left: 50%;
top: 40%;
text-align: center;
transform: translate(-50%, -50%);
transiton: transform 2s;
z-index: 1;
}
.heart > img {
width: 80px;
height: auto;
}
p {
font-size: 22px;
}
.message {
padding: 20px;
background-color: #eeeeee95;
min-width: 400px;
height: 70%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
overflow: hidden;
animation-name: openmsg;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: paused;
animation-fill-mode: forwards;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 5px;
}
.heart > img:hover {
animation-name: beat;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
}
#messageState {
}
@keyframes beat {
0% {
width: 80px;
}
25% {
width: 88px;
}
30% {
width: 80px;
}
50% {
width: 70px;
}
60% {
width: 80px;
}
75% {
width: 88px;
}
100% {
width: 80px;
}
}
@keyframes openmsg {
0% {
height: 0px;
padding: 0px 20px;
}
100% {
height: 75%;
padding: 20px 20px;
}
}
@keyframes heartMove {
0% {
top: 50%;
}
100% {
top: 85%;
transform: translate(-50%, 0);
}
}
.openNor {
animation-direction: normal;
animation-play-state: running;
}
.closeNor {
animation-direction: reverse;
animation-play-state: running;
}
.no-anim {
animation: none;
}
.closed {
height: 0px;
padding: 0px 20px;
}
.bottom {
bottom: 5px;
}
.openHer {
animation-name: heartMove;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
}
.closeHer {
animation-name: heartMove;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.beating > img {
animation-name: beat;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
}
.openedHer {
top: 85%;
transform: translate(-50%, 0);
}
.main {
color: red;
font-weight: 700;
}
@media (max-width: 480px) {
p {
font-size: 17px;
}
h1 {
padding-left: 10px;
}
}
@media (max-width: 580px) {
p {
font-size: 17px;
}
}
.back {
position: absolute;
bottom: 5%;
left: 50%;
font-size: 18px;
font-weight: 700;
color: white;
text-shadow: 0 0 10px rgb(0, 0, 0);
}
JavaScript
$("#messageState").on("change", (x) => {
$(".message").removeClass("openNor").removeClass("closeNor");
if ($("#messageState").is(":checked")) {
$(".message")
.removeClass("closed")
.removeClass("no-anim")
.addClass("openNor");
$(".heart")
.removeClass("closeHer")
.removeClass("openedHer")
.addClass("openHer");
$(".container").stop().animate({ backgroundColor: "#f48fb1" }, 2000);
console.log("Abrindo");
} else {
$(".message").removeClass("no-anim").addClass("closeNor");
$(".heart")
.removeClass("openHer")
.removeClass("openedHer")
.addClass("closeHer");
$(".container").stop().animate({ backgroundColor: "#fce4ec" }, 2000);
console.log("fechando");
}
});
$(".message").on(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function (e) {
console.log("Animation End");
if ($(".message").hasClass("closeNor")) $(".message").addClass("closed");
$(".message")
.removeClass("openNor")
.removeClass("closeNor")
.addClass("no-anim");
}
);
$(".heart").on(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function (e) {
console.log("Animation End");
if (!$(".heart").hasClass("closeHer"))
$(".heart").addClass("openedHer").addClass("beating");
else $(".heart").addClass("no-anim").removeClass("beating");
$(".heart").removeClass("openHer").removeClass("closeHer");
}
);
Frequently Asked Questions (FAQ) - Promise Day Webpage
What is the significance of Promise Day?
- Promise Day, celebrated on 11th February, is a special day dedicated to making commitments and promises to our loved ones. It signifies the importance of trust, loyalty, and dedication in relationships.
How can I create a Promise Day-themed webpage like the one described?
- To create a Promise Day-themed webpage, you can start by designing the layout using HTML and styling it using CSS. You can include elements such as headers, paragraphs, images, and buttons to convey your message. Don't forget to add JavaScript if you want to include interactive features.
What does the HTML structure of the webpage entail?
- The HTML structure includes the basic layout of the webpage, such as the
<!DOCTYPE html>declaration,<html>tag with language attribute,<head>section containing meta tags and links to external resources, and the<body>section containing visible content like text, images, and other HTML elements.
- The HTML structure includes the basic layout of the webpage, such as the
What is the purpose of the CSS stylesheet in the webpage?
- The CSS stylesheet is used to style the HTML elements of the webpage, including setting colors, fonts, margins, padding, and other visual properties. It enhances the presentation and aesthetics of the webpage, making it visually appealing to the users.
Why is jQuery included in the webpage?
- jQuery is included to provide additional functionality and interactivity to the webpage. It simplifies tasks such as DOM manipulation, event handling, and AJAX requests, making it easier to create dynamic and responsive web applications.
Can I customize the content of the Promise Day message on the webpage?
- Yes, you can customize the content of the Promise Day message by editing the text within the
<p>tags in the HTML code. You can express your heartfelt promises and sentiments to your loved one in your own words.
- Yes, you can customize the content of the Promise Day message by editing the text within the
Is it necessary to have JavaScript for the webpage?
- No, JavaScript is not mandatory for the webpage, but it can enhance the user experience by adding interactive features such as animations, pop-ups, or form validations. However, you can create a functional webpage using just HTML and CSS.
How can I make the Promise Day webpage responsive for different devices?
- You can make the webpage responsive by using CSS media queries to adjust the layout and styling based on the screen size of the device. This ensures that the webpage looks good and functions well on desktops, tablets, and smartphones.
Can I share this webpage with my loved one on Promise Day?
- Absolutely! You can share the webpage with your loved one by sending them the URL or sharing the page directly via email, messaging apps, or social media platforms. It's a thoughtful way to express your love and make promises to them on this special day.
What are some other ways to celebrate Promise Day?
- Aside from creating a Promise Day-themed webpage, you can celebrate by exchanging handwritten letters, spending quality time together, planning future goals as a couple, or simply reaffirming your love and commitment to each other through heartfelt conversations.
Post a Comment