Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Tapestry of Eternal Love</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid p-0 header-container" id="home">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a href="#home" class="navbar-brand text-light wedding-font letter-s-1">N&A</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarcontent"
aria-controls="navbarcontent" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcontent">
<ul class="navbar-nav me-auto ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="#ourstory" class="nav-link text-light font-monospace">Our Story</a>
</li>
<li class="nav-item mx-md-2">
<a href="#savethedate" class="nav-link text-light font-monospace">Save the Date</a>
</li>
<li class="nav-item">
<a href="#schedule" class="nav-link text-light font-monospace">Celebration Schedule</a>
</li>
</ul>
<a href="#rspv" class="btn btn-light font-monospace px-5 py-1">Fill RSPV</a>
</div>
</div>
</nav>
<div class="position-absolute top-50 translate-middle-y w-100">
<h1 class="text-light text-center display-1 wedding-font letter-s-1">
Neha <small>&</small> Abhinay <span>Wedding</span>
</h1>
</div>
</div>
<div class="container py-5" id="ourstory">
<h2 class="text-center text-uppercase my-5 font-monospace letter-s-1">We're getting married!</h2>
<p class="w-50 mx-auto text-center my-5 font-monospace">As the sun dipped below the horizon, casting a warm glow
on the quiet lakeside, Neha and Abhinay, hand in hand, shared a momentous secret on a weathered bench.
"We're getting married" Abhinay whispered, his eyes gleaming with anticipation. In that quiet revelation,
their journey from chance meetings to intertwined dreams unfolded, and the promise of forever sparkled in
their smiles. Surrounded by the love of family and friends, the couple stood at the threshold of a new
chapter, ready to embark on the beautiful adventure of marriage, their hearts beating as one in the
enchanting tapestry of their shared love story.</p>
</div>
<div class="container-fluid savethedate-container position-relative p-0" id="savethedate">
<div class="position-absolute top-50 translate-middle-y w-100">
<h1 class="text-light text-center display-1 wedding-font letter-s-1">Save the Date</h1>
<h4 class="text-uppercase text-light text-center fs-6 font-monospace">February 15, 2024</h4>
</div>
</div>
<div class="container py-5" id="schedule">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-5">
<h3 class="text-uppercase text-center font-monospace letter-s-1">Haldi-Mehndi</h3>
<p class="text-body-secondary text-center font-monospace">February 14, 2024</p>
<p class="text-body-secondary text-center font-monospace">11:00 AM onwards</p>
<p class="text-body-secondary text-center font-monospace">Some Palace, City</p>
<p class="text-body-secondary text-center font-monospace">+91 9876543210</p>
<div class="w-100 text-center font-monospace"><a href="#" class="map-link">View Map</a></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-5">
<h3 class="text-uppercase text-center font-monospace letter-s-1">Wedding</h3>
<p class="text-body-secondary text-center font-monospace">February 15, 2024</p>
<p class="text-body-secondary text-center font-monospace">07:00 PM onwards</p>
<p class="text-body-secondary text-center font-monospace">Some Garden, City</p>
<p class="text-body-secondary text-center font-monospace">+91 9876543210</p>
<div class="w-100 text-center font-monospace"><a href="#" class="map-link">View Map</a></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-5">
<h3 class="text-uppercase text-center font-monospace letter-s-1">Reception</h3>
<p class="text-body-secondary text-center font-monospace">February 18, 2024</p>
<p class="text-body-secondary text-center font-monospace">08:00 PM onwards</p>
<p class="text-body-secondary text-center font-monospace">Some Resort, City</p>
<p class="text-body-secondary text-center font-monospace">+91 9876543210</p>
<div class="w-100 text-center font-monospace"><a href="#" class="map-link">View Map</a></div>
</div>
</div>
</div>
<div class="container-fluid footer-container position-relative p-0" id="rspv">
<div class="position-absolute top-50 translate-middle-y w-100">
<h1 class="text-light text-center display-1 wedding-font letter-s-1">Wedding Invitation</h1>
<h4 class="text-uppercase text-center fs-6 mt-5">
<button class="btn btn-light font-monospace px-5 py-1">RSPV</button>
</h4>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
}
h1 span {
display: block;
width: 100%;
font-size: 75%;
text-indent: -60px;
margin-top: -5px;
}
.wedding-font {
font-family: 'Bad Script', cursive;
}
.header-container, .savethedate-container, .footer-container {
height: 100vh;
width: 100%;
background-image: url('https://images.unsplash.com/photo-1615966650071-855b15f29ad1?q=80&w=2766&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.letter-s-1 {
letter-spacing: 1px;
text-indent: 1px;
}
.savethedate-container {
height: 75vh;
background-image: url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-position: bottom;
}
.map-link {
color: #ff5a00;
text-decoration: none;
transition: all 0.5s ease;
}
.map-link:hover {
color: #ff5a00bf;
text-decoration: underline;
}
.footer-container {
background-image: url('https://images.unsplash.com/photo-1494774157365-9e04c6720e47?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}Thanks for visiting