A Guide to Creating Beautiful Wedding Invitations Using HTML and CSS | Wedding Invitations by #untoldcoding
A Guide to Creating Beautiful Wedding Invitations Using HTML and CSS | Wedding Invitations by #untoldcoding
Live Demo : Click Here
Introduction:
.png "Wedding Invitation")
Part 1: Why You Choose HTML and CSS for Wedding Invitations
Explore the benefits of using HTML and CSS for wedding invitations.
Learn how this technology offers flexibility, functionality, and endless possibilities.
Part 2: Setting up your project
Step-by-step instructions for creating a project folder and organizing your files.
The basic structure of an HTML document is an overview of links to your CSS stylesheet.
Phase 3: Configuration
Dive into the world of CSS for layout design.
Tips and tricks for creating an elegant and acceptable wedding invitation design.
Part 4: Adding Beautiful Typography
Discover the art of using custom fonts and fonts to enhance your invitations.
Learn how to use a web browser to ensure cross-browser compatibility.
Part 5: Includes illustrations and illustrations
A guide on how to add photos, images and pictures to your wedding invitations.
Tips for improving image quality and maintaining a cohesive design.
Part 6: Responsive design for devices
Make sure your wedding invitations look amazing on desktop, tablet and smartphone.
Media interviews were used to implement responsive policy strategies.
Part 7: Interactive elements and animation
Elevate your wedding invitation with clever graphics and interactive features using CSS.
Showcase your creativity with hover effects and transitions.
Section 8: Testing
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="shortcut icon" href="favicon.png" type="image/png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="author" content="untoldcoding">
<meta name="email" content="vishaltewatiawork@gmail.com">
<meta name="copyright" content="untoldcoding 2024" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta property="og:type" content="Wedding Website" >
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<title>Wedding Invitation | untoldcoding</title>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Dancing+Script&display=swap'>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="untoldcoding-falling"></div>
<img src="https://i.postimg.cc/mDD9D8Zd/Untitled-design-1-removebg-preview.png" alt="image-top-right" class="top-right-decoration">
<img src="https://i.postimg.cc/P5X5TN5y/Untitled-design-removebg-preview-1.png" alt="image-top-left" class="top-left-decoration" >
<section id="media"></section>
<div class="wrap">
<div class="title">
<p><b>|| ॐ श्री महावीराय नमः || </b></p>
<h1>Nitin</h1>
<h2>&</h2>
<h1>Niharika</h1>
<h3>Are getting married</h3>
<p>
on <span class="date">14 February 2024</span></29>, At <span class="place">
Ram Mandir</span> Ayodhya, Uttar Pradesh.
</p>
<div class="body2">
<svg width="50" height="50" viewBox="0 0 200 200">
<g transform="translate(100 100)">
<path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
attributeName="transform"
type="scale"
values="1; 1.5; 1.25; 1.5; 1.5; 1;"
dur="1s"
repeatCount="indefinite"
additive="sum">
</animateTransform>
</g>
</svg>
<svg width="50" height="50" viewBox="0 0 200 200">
<g transform="translate(100 100)">
<path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
attributeName="transform"
type="scale"
values="1; 1.5; 1.25; 1.5; 1.5; 1;"
dur="1s"
repeatCount="indefinite"
additive="sum">
</animateTransform>
</g>
</svg>
<svg width="50" height="50" viewBox="0 0 200 200">
<g transform="translate(100 100)">
<path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
attributeName="transform"
type="scale"
values="1; 1.5; 1.25; 1.5; 1.5; 1;"
dur="1s"
repeatCount="indefinite"
additive="sum">
</animateTransform>
</g>
</svg>
<svg width="50" height="50" viewBox="0 0 200 200">
<g transform="translate(100 100)">
<path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
attributeName="transform"
type="scale"
values="1; 1.5; 1.25; 1.5; 1.5; 1;"
dur="1s"
repeatCount="indefinite"
additive="sum">
</animateTransform>
</g>
</svg>
</div>
</div>
</div>
<div class="actions">
<a href="#" target="_blank">
<div class="venue"> See The Best Captured Moments 📷</div>
</a>
</div>
<br>
<div id="time"></div>
<p class="happiness">Join us in our happiness!<br><a href="#" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a></p>
<div class="tile__img">
<img class="tile__img" src="./assets/img/ggg.gif" alt="" />
</div>
<p class="dance-med">
dinner & dancing to follow
</p>
<div class="actions">
<a href="./assets/img/Invitation (1).png" href="{{.}}" target="_blank">
<div class="venue">DOWNLOAD INVITATION CARD</div>
</a>
</div>
<p class="footer">
Can't wait to celebrate auspicious moment of our family with you! <br>
Ping me for queries: +91 9729373708
<span> <a href="https://api.whatsapp.com/send?phone=919729373708&utm_source=Messaging&utm_medium=Whatsapp" target="_blank" class="social-icon" title="WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 -8 30 30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
</a></span>
</p>
<div class="music">
<audio src="./assets/mp3/asd.mp3" id="my_audio" loop="loop"></audio>
</div>
<p>How do I get there?</p>
<div class="actions">
<a href="https://www.google.com/maps?sca_esv=98f0236581d1750a&sxsrf=ACQVn0-HCUHFFIlOjWRMaZuQnyTmNQ8mYg:1706959393065&uact=5&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXJhbSBtYW5kaXIgYXlvZGh5YSB1cDIIEAAYgAQYgAQyCBAAGIAEGIAEMggQABiABBiABDIIEAAYgAQYgAQyChAAGIAEGIAEGAIyChAAGIAEGIAEGAIyChAAGIAEGIAEGAIyCBAAGIAEGIAEMggQABiABBiABDIIEAAYgAQYgARIrhBQ3wtYkg5wA3gBkAEAmAHSAaABigOqAQUwLjEuMbgBA8gBAPgBAcICChAAGEcY1gQYsAPCAg0QABiABBiKBRhDGLADwgIFEAAYgATCAgsQABiABBiKBRiRAsICChAAGIAEGAIYywHiAwQYACBBiAYBkAYK&um=1&ie=UTF-8&fb=1&gl=in&sa=X&geocode=Kb_weTDNB5o5MdypO7Ij6IlV&daddr=Sai+Nagar,+Ayodhya,+Uttar+Pradesh+224123" target="_blank">
<div class="venue">SEE THE VENUE</div>
</a>
</div>
<br>
</div>
<div class="wrapper">
<section id="section1">
<div class="item">
<img src="./assets/img/jkl.gif" alt="Describe Image">
</div>
<div class="item">
<img src="./assets/img/Invitation (1).png" alt="Describe Image">
</div>
<div class="item">
<img src="./assets/img/cvb.gif" alt="Describe Image">
</div>
<div class="item">
<img src="./assets/img/Invitation (2).png" alt="Describe Image">
</div>
<div class="item">
<img src="./assets/img/bvc.gif" alt="Describe Image">
</div>
</section>
</div>
</div>
</div>
</div>
<p class="footer">With the divine grace of the almighty,
I cordially invite you and your family to
my elder brother's wedding
I'd eagerly await your kind presence in auspicious occasion of my family.
</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/timoschaefer/jQuery-Sakura/jquery-sakura.min.js'></script>
<script src="./js/script.js"></script>
<script src="/path/to/flickity.pkgd.min.js"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>
<div>
<blockquote>हल्दी है चंदन है रिश्तों का बंधन है ।
<br>पुरा परिवार सहित आपका हार्दिक अभिनंदन है ।।
</blockquote>
</div>
<br>
Crafted by untoldcoding❤️
</body>
</html>
This is About Html file
<!DOCTYPE html>: This is a document type declaration, which indicates that the document follows the HTML5 standard.
<html lang="en">: Opens an HTML document, displaying the language as English.
<head>: This section contains metadata about the document, such as font layout, viewport layout, author information, and links to external resources.
<link rel="shortcut icon" href="favicon.png" type="image/png">: Sets the website favicon.
<meta charset="UTF-8">: Declares that the character set is UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scale=no" />: Configures the viewport for responsive layout.
<meta name="author" content="untoldcoding">: Specifies the author of the page.
<meta name="email" content="vishaltewatiawork@gmail.com">: Provides contact email information.
<meta name="copyright" content="untoldcoding 2024" />: Displays copyright information.
A set of <meta> tags related to the Open Graph (OG) property, used when sharing websites on social media platforms.
<title>Wedding Invitation Card | untoldcoding</title>: Sets the title of the web page.
External Style Sheet Links:
Designs from Google Fonts (Arvo and Dance Fonts).
Font Awesome for logo fonts.
A custom stylesheet (style.css) and some JavaScript files.
<body>: The main body of the web page.
<div> a variety of elements including images, animations, and text to create the visual structure of the invitation.
Links to watch the recording, download the invitation, and view the venue on Google Maps.
Built-in audio player for background music.
A slideshow section of images.
The <script> tags at the end of the document include jQuery, the Sakura jQuery plugin, and a custom JavaScript file (script.js).
The last part of the HTML file contains a blockquote
If You Want to Download Zip File , Scroll Down and at the bottom of the blog you find link
JavaScript
/**
* @author Untoldcoding <vishaltewatiawork@gmail.com>
*/
(function ($) {
"use strict";
$(".untoldcoding-falling").sakura("start", {
blowAnimations: ["blow-soft-left"],
className: "sakura",
fallSpeed: 2.5,
maxSize: 12,
minSize: 9,
newOn: 250,
});
})(jQuery);
$(document).on("click", function () {
document.getElementById("my_audio").play();
console.log("Shaadi me zaroor aana");
});
function pauseAudio() {
document.getElementById("my_audio").pause();
console.log("Shaadi me pakka aana");
event.stopPropagation();
}
var countDownDate = new Date("Feb 14, 2024 00:00:00").getTime();
var x = setInterval(function () {
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("time").innerHTML =
"<div class='container'><div class='days block'>" +
days +
"<br>Days</div>" +
"<div class='hours block'>" +
hours +
"<br>Hours</div>" +
"<div class='minutes block'>" +
minutes +
"<br>Minutes</div>" +
"<div class='seconds block'>" +
seconds +
"<br>Seconds</div></div>";
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "Wedding Completed !!";
}
}, 1000);
var styles = [
"background: linear-gradient(#D33106, #571402)",
"border: 1px solid red",
"color: white",
"display: block",
"text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3)",
"box-shadow: 0 2px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset",
"line-height: 40px",
"text-align: center",
"font-weight: bold",
"font-size: 32px",
].join(";");
var styles1 = [
"color: #FF6C37",
"display: block",
"text-shadow: 0 2px 0 rgba(0, 0, 0, 1)",
"line-height: 40px",
"font-weight: bold",
"font-size: 32px",
].join(";");
var styles2 = [
"color: teal",
"display: block",
"text-shadow: 0 2px 0 rgba(0, 0, 0, 1)",
"line-height: 40px",
"font-weight: bold",
"font-size: 32px",
].join(";");
console.log("\n\n%c SAVE THE DATE: 14th Feb, 2021", styles);
Explaintion
This code utilizes the Sakura jQuery plugin to create falling cherry blossom animations on an element with the class
untoldcoding-falling. The options specify the animation properties, such as the type of blow animation, fall speed, and size range.
Post a Comment