Free Wedding Template | HTML, Bootstrap 5 & JavaScript

Faraz

By Faraz - Last Updated:

Download free wedding website template built with HTML, Bootstrap 5 & JavaScript. Responsive design with AOS, Swiper, Lightbox2 & FontAwesome 6.5.

Join us on Telegram
free-wedding-template-html-bootstrap-5-and-javascript.webp
Read Alsoscaffolding-rent-and-manufacturing-template-in-html-css-js.webpScaffolding Rent & Manufacturing Template in HTML CSS JS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Are you looking for a free wedding website template to showcase your big day? A wedding website is the best way to share your story, event details, gallery, and RSVP with family and friends. This free template is built using HTML, Bootstrap 5, and JavaScript, making it responsive, modern, and easy to use.

Before you begin, here are some prerequisites you need:

  • Basic knowledge of HTML, CSS, and JavaScript
  • Installed code editor (VS Code recommended)
  • Basic understanding of the Bootstrap 5 grid system
  • Browser (Google Chrome, Firefox, or Edge) for testing

This wedding template is not only free but also comes with powerful features like FontAwesome 6.5, AOS animation, Swiper slider, and Lightbox2 gallery support.

Features of Free Wedding Template

  • Built with Bootstrap 5: responsive and mobile-friendly
  • jQuery support: smooth interactivity
  • FontAwesome 6.5: modern wedding icons
  • [email protected]: scroll animations for better user experience
  • Swiper@11: modern slider for couple images & gallery
  • Lightbox2: photo gallery with pop-up view
  • Responsive design: works on all devices

Source Code

Step 1 (HTML Code):

First, we start with HTML. This is where we create the basic layout of the wedding website. We will use Bootstrap 5 for responsive design, Swiper for image carousels, AOS for smooth scroll animations, and Lightbox2 for a photo gallery.

Copy the HTML code below and paste it into your index.html file:

Read Alsocreating-a-shopping-cart-with-html-css-vue-js-and-slick-js.webpCreating a Shopping Cart Concept Using HTML, CSS, Vue, and Slick.js

Step 2 (CSS Code):

After the HTML, we move to CSS. Bootstrap 5 covers most styles, but we will add some custom CSS for better looks.

Copy the CSS code below and paste it into your styles.css file:

:root {
  --primary-color: #c89d9c;
  --secondary-color: #4a4a4a;
  --background-color: #fdfaf6;
  --dark-color: #2c2c2c;
  --text-color: #555;
  --heading-font: 'Playfair Display', serif;
  --body-font: 'Montserrat', sans-serif;
  --border-radius: 8px;
  --loader-accent-color: #fff;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.8;
  overflow-x: hidden;
}

body.loading {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--secondary-color);
  font-weight: 700;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--secondary-color);
}

.section-title {
  font-size: 3rem;
  font-style: italic;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--secondary-color);
  margin-bottom: 3rem;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(200, 157, 156, 0.4);
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #b38a89 !important;
  border-color: #b38a89 !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(200, 157, 156, 0.6);
}

/* --- Loader Container --- */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}

.loader-split-left,
.loader-split-right {
  position: absolute;
  top: 0;
  width: 50.5%;
  height: 100%;
  background-color: var(--primary-color);
  transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
  z-index: 9998;
}

.loader-split-left {
  left: 0;
}

.loader-split-right {
  right: 0;
}

/* Class to hide the loader */
.loader-hidden {
  pointer-events: none;
}

.loader-hidden .loader-split-left {
  transform: translateX(-100%);
}

.loader-hidden .loader-split-right {
  transform: translateX(100%);
}

.loader-hidden .loader-content {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* --- Heart Animation --- */
.loader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 9999;
  transition: opacity 0.5s, transform 0.5s;
}

.drawing-heart {
  width: 120px;
  height: 120px;
  animation: pulse-heart 1.5s 2s ease-in-out infinite;
}

.drawing-heart path {
  fill: none;
  stroke: var(--loader-accent-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-heart-path 2s ease-out forwards;
}

.loader-text {
  font-family: var(--heading-font);
  font-size: 2rem;
  font-style: italic;
  color: var(--loader-accent-color);
  margin-top: 20px;
  opacity: 0;
  animation: fade-in-text 1s 1.5s ease-out forwards;
}

/* Keyframes for animations */
@keyframes draw-heart-path {
  to {
      stroke-dashoffset: 0;
  }
}

@keyframes pulse-heart {

  0%,
  100% {
      transform: scale(1);
  }

  50% {
      transform: scale(1.05);
  }
}

@keyframes fade-in-text {
  from {
      opacity: 0;
      transform: translateY(10px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* --- Navbar --- */
.mainNav {
  padding: 1rem 2rem;
  background: transparent;
  transition: var(--transition);
}

.mainNav.scrolled {
  padding: 0.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  background: rgba(253, 250, 246, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 157, 156, 0.08);
}

.mainNav.hamburgerclicked {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  background: rgba(253, 250, 246, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 157, 156, 0.08);
}

.navbar-brand {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 1px;
  position: relative;
}

.navbar-brand span {
  color: var(--primary-color);
}

.nav-item {
  margin: 0 0.6rem;
  position: relative;
}

.nav-link {
  font-weight: 500;
  color: var(--secondary-color);
  padding: 0.5rem 0;
  position: relative;
  letter-spacing: 0.5px;
}

.nav-link::before {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  transition: var(--transition);
}

.nav-link:hover::before,
.nav-link.active::before {
  width: 100%;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

.dropdown-menu {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  padding: 0.8rem 0;
  margin-top: 1rem;
  border: 1px solid rgba(200, 157, 156, 0.1);
}

.dropdown-item {
  padding: 0.5rem 1.8rem;
  transition: var(--transition);
  font-size: 0.9rem;
}

.dropdown-item:hover {
  background: var(--primary-color);
  color: white;
}

.dropdown-item.active {
  background: var(--primary-color);
}

/* Animated Hamburger */
.hamburger-animated {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
}

.hamburger-animated span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--dark-color);
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.hamburger-animated span:nth-child(1) {
  top: 0;
  transform-origin: left center;
}

.hamburger-animated span:nth-child(2) {
  top: 9px;
  transform-origin: left center;
}

.hamburger-animated span:nth-child(3) {
  top: 18px;
  transform-origin: left center;
}

.hamburger-animated.open span:nth-child(1) {
  transform: rotate(45deg);
  top: -1px;
  left: 4px;
}

.hamburger-animated.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.hamburger-animated.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 20px;
  left: 4px;
}

/* --- Hero Section --- */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(253, 250, 246, 0.4) 0%, rgba(253, 250, 246, 0.8) 100%);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/wedding_template/hero-section.png') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 5%;
}

.pre-title {
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  display: block;
}

.hero-title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1.1;
  color: var(--dark-color);
  margin-bottom: 2rem;
  letter-spacing: -1.5px;
}

.hero-title span {
  color: var(--primary-color);
  position: relative;
  display: inline-block;
}

.hero-title span::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: rgba(200, 157, 156, 0.3);
  z-index: -1;
}

.hero-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--secondary-color);
  max-width: 500px;
  margin-bottom: 3rem;
}

.hero-btn {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 1.1rem 3.5rem;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  margin-right: 1.5rem;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  transition: var(--transition);
  z-index: -1;
}

.hero-btn:hover {
  color: white;
}

.hero-btn:hover::before {
  left: 0;
}

.hero-btn-outline {
  background-color: transparent;
  border: 2px solid var(--dark-color);
  color: var(--dark-color);
  padding: 1.1rem 3.5rem;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: var(--transition);
}

.hero-btn-outline:hover {
  background-color: var(--dark-color);
  color: white;
}

.countdown-container {
  display: flex;
  gap: 2.5rem;
  margin: 4rem 0;
}

.countdown-item {
  text-align: center;
}

.countdown-number {
  font-family: var(--heading-font);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--dark-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.countdown-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--secondary-color);
}

/* ========== ANIMATED MOUSE SCROLL ========== */
.mouse-scroll {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--secondary-color);
  border-radius: 12px;
  position: relative;
  margin: 0 auto;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background: var(--secondary-color);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% {
      transform: translate(-50%, 0);
      opacity: 1;
  }

  100% {
      transform: translate(-50%, 10px);
      opacity: 0;
  }
}

.scroll-text {
  color: var(--secondary-color);
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-top: 1rem;
  text-align: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
      opacity: 0.6;
  }

  50% {
      opacity: 1;
  }

  100% {
      opacity: 0.6;
  }
}

/* --- General Section Styling --- */
.section-padding {
  padding: 70px 0;
}

.bg-light-pink {
  background-color: #fff6f6;
}

/* --- Our Story Section --- */
.story-img {
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 100%;
}

/* --- Meet the Couple Section --- */
.couple-card {
  background: #fff;
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
}

.couple-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.couple-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 5px solid var(--primary-color);
}

.couple-card h3 {
  color: var(--primary-color);
  font-style: italic;
  font-size: 2rem;
}

.social-icons a {
  color: var(--secondary-color);
  font-size: 1.2rem;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--primary-color);
}

/* --- Wedding Party Section --- */
.party-member {
  text-align: center;
}

.party-member img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.party-member h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.party-member p {
  font-size: 0.9rem;
  color: #777;
}

.swiper-pagination {
  position: relative !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important;
}

/* --- Event Timeline Section --- */
.timeline {
  position: relative;
  padding: 0;
  list-style: none;
}

.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1.5px;
  background-color: #e9ecef;
}

.timeline>li {
  position: relative;
  margin-bottom: 50px;
  min-height: 50px;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
}

.timeline>li .timeline-panel {
  position: relative;
  float: left;
  width: 46%;
  padding: 30px;
  border-radius: var(--border-radius);
  background-color: #fff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.timeline>li .timeline-image {
  position: absolute;
  z-index: 100;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  border: 7px solid #e9ecef;
  border-radius: 100%;
  text-align: center;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline>li .timeline-image i {
  font-size: 2rem;
}

.timeline>li.timeline-inverted>.timeline-panel {
  float: right;
}

.timeline-heading h4 {
  margin-top: 0;
  color: var(--primary-color);
  font-size: 1.5rem;
}

.timeline-heading .subheading {
  text-transform: none;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Gallery Section --- */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  margin-bottom: 30px;
  display: block;
}

.gallery-item img {
  transition: transform 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 157, 156, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  color: #fff;
  padding: 20px;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay .overlay-content {
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.gallery-item:hover .overlay .overlay-content {
  transform: translateY(0);
}

.gallery-item .overlay i {
  font-size: 2rem;
  margin-bottom: 10px;
}

.gallery-item .overlay h5 {
  color: #fff;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

/* --- RSVP Section --- */
.rsvp-section {
  background: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/wedding_template/rsvp-section.png') no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

.rsvp-section .overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(253, 250, 246, 0.65);
}

.rsvp-content {
  position: relative;
  z-index: 1;
}

/* --- Gift Registry Section --- */
.gift-logo {
  max-width: 150px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  opacity: 0.7;
}

.gift-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- Blog Section --- */
.blog-card {
  background: #fff;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
  overflow: hidden;
}

.blog-card {
  background: #fff;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-card .card-img-top {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.blog-card .card-body {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card .card-title {
  font-size: 1.3rem;
}

.blog-card .card-title a {
  color: var(--secondary-color);
}

.blog-card .card-meta {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 15px;
}

.blog-card .card-text {
  flex-grow: 1;
}

/* --- Footer --- */
.footer-main {
  background-color: var(--dark-color);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 0;
}

.footer-main .footer-brand {
  font-family: var(--heading-font);
  font-size: 2rem;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
}

.footer-main h5 {
  color: #fff;
  font-family: var(--body-font);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-main .footer-links li {
  padding-bottom: 10px;
}

.footer-main .footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-main .footer-links a:hover {
  color: #fff;
  padding-left: 5px;
}

.footer-main .contact-info i {
  color: var(--primary-color);
  margin-right: 10px;
  width: 20px;
}

.footer-main .social-icons-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.footer-main .social-icons-footer a:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

.footer-bottom {
  background-color: #222;
  color: rgba(255, 255, 255, 0.5);
  padding: 20px 0;
  margin-top: 60px;
  font-size: 0.9rem;
}

.footer-bottom a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}


/* --- Responsive Adjustments --- */
@media (max-width: 576px) {
  .hero-title {
      font-size: 2.8rem;
  }

  .countdown-container {
      gap: 1rem;
  }

  .countdown-number {
      font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .section-title {
      font-size: 2.5rem;
  }

  .hero-content h1 {
      font-size: 3rem;
  }

  .hero-content p {
      font-size: 1.2rem;
  }

  #countdown {
      font-size: 1.2rem;
  }

  #countdown>div span {
      font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  .mainNav {
      padding: 1.5rem;
  }

  .hero-title {
      font-size: 3.2rem;
  }

  .countdown-container {
      gap: 1.5rem;
  }

  .countdown-number {
      font-size: 2.5rem;
  }

  .hero-btn,
  .hero-btn-outline {
      padding: 1rem 2.5rem;
      margin-right: 1rem;
      margin-bottom: 1rem;
  }
}

@media (max-width: 991.98px) {
  .hero-content h1 {
      font-size: 4rem;
  }

  #countdown {
      font-size: 1.8rem;
      gap: 1rem;
  }

  .timeline:before {
      left: 40px;
  }

  .timeline>li .timeline-panel {
      width: calc(100% - 90px);
      float: right;
  }

  .timeline>li .timeline-image {
      left: 0;
      margin-left: 0;
  }
}

@media (max-width: 992px) {
  .hero-section {
      min-height: 800px;
      text-align: center;
  }

  .hero-text {
      margin-left: auto;
      margin-right: auto;
  }

  .countdown-container {
      justify-content: center;
  }

  .btn-group {
      justify-content: center;
  }
}

@media (max-width: 1200px) {
  .hero-title {
      font-size: 4.5rem;
  }
}

Step 3 (JavaScript Code):

Now comes the final step: JavaScript. We will use it to initialize the Swiper slider and AOS animations.

Copy the JS code below and paste it into your script.js file:

function toggleHamburger(element) {
  const hamburger = element.querySelector('.hamburger-animated');
  hamburger.classList.toggle('open');

  const isHamburgerVisible = $('.navbar-toggler').is(':visible');
  const isScrolledLessThan50 = $(document).scrollTop() < 50;

  // Check if menu is now open (after toggle)
  const isMenuOpen = hamburger.classList.contains('open');

  if (isHamburgerVisible && isScrolledLessThan50 && isMenuOpen) {
      $('.mainNav').addClass('hamburgerclicked');
  } else {
      $('.mainNav').removeClass('hamburgerclicked');
  }
}

$(document).ready(function () {

  // 1. AOS Initialization
  AOS.init({
      duration: 1000,
      once: true,
  });

  // 2. Navbar Shrink on Scroll
  $(window).scroll(function () {
      if ($(document).scrollTop() > 50) {
          $('.mainNav').addClass('scrolled');
      } else {
          $('.mainNav').removeClass('scrolled');
      }
  });

  // 3. Smooth Scrolling for Nav Links
  $('.nav-link').on('click', function (event) {
      if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();
          var hash = this.hash;
          $('html, body').animate({
              scrollTop: $(hash).offset().top - 70 // Adjust for fixed navbar height
          }, 800, function () {
              // window.location.hash = hash; // This line can be distracting
          });
      }
  });

  // 4. Countdown Timer
  // Set the date we're counting down to
  var countDownDate = new Date("Dec 25, 2025 14:00:00").getTime();

  // Update the count down every 1 second
  var x = setInterval(function () {
      var now = new Date().getTime();
      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);

      // Display the result in the respective elements
      $('#days').html(days);
      $('#hours').html(hours);
      $('#minutes').html(minutes);
      $('#seconds').html(seconds);

      // If the count down is finished, write some text
      if (distance < 0) {
          clearInterval(x);
          $('#countdown').html("<h2>The Wedding Day is Here!</h2>");
      }
  }, 1000);

  // 5. Wedding Party Slider (Swiper JS)
  $(function () {
      $('.wedding-party-slider').each(function () {
          new Swiper(this, {
              loop: true,
              slidesPerView: 1,
              spaceBetween: 30,
              pagination: {
                  el: $(this).find('.swiper-pagination')[0],
                  clickable: true
              },
              breakpoints: {
                  640: { slidesPerView: 2, spaceBetween: 20 },
                  768: { slidesPerView: 3, spaceBetween: 40 },
                  1024: { slidesPerView: 4, spaceBetween: 50 }
              }
          });
      });
  });

  // 6. Lightbox2 Initialization
  if (typeof lightbox !== "undefined") {
      lightbox.option({
          resizeDuration: 200,
          wrapAround: true,
          disableScrolling: true
      });
  }
});

window.addEventListener('load', function () {
  const loader = document.getElementById('loader');
  const body = document.body;
  setTimeout(() => {
      loader.classList.add('loader-hidden');
      body.classList.remove('loading');

  }, 2500);
});

Final Output:

free-wedding-template-html-bootstrap-5-and-javascript.gif
Read Alsodigitalclock.pngMaster HTML, CSS, and JavaScript by Building a Digital Clock (Source Code)

Conclusion:

This Free Wedding Template using HTML, Bootstrap 5, and JavaScript is the perfect choice to create a stylish and modern wedding website. With built-in support for FontAwesome 6.5, AOS animations, Swiper slider, and Lightbox2 gallery, you can easily create a responsive website without any extra cost.

Make your big day memorable with a beautiful wedding website, and the best part, it’s free to download!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: free wedding website template html bootstrap 5, responsive wedding template free download, wedding template with aos swiper lightbox2, modern wedding template using html and javascript, bootstrap 5 wedding website template, wedding template, bootstrap wedding website, free html template, responsive template
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺