Skip to content

Animated website for kerala wedding invitation(also contains timer, background music, Photo gallery and Pre-wedding video) | Save the Date: Apr 24, 2021

Notifications You must be signed in to change notification settings

arungop/akhiarya

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wedding Invitation 💍

SAVE THE DATE: APR 24, 2021
akhiarya.netlify.app

GitHub code size in bytes Netlify Status GitHub license Release date

Wedding Invitation 💍

View Invitation Inivitation letter

A kerala style wedding inivitaion website designed for my friend's marriage. This invitation website is inspired from clean and amazing work of Vinitshahdeo. Take a look and feel free to give him a star.

Additional features

  • A responsive photo gallery
  • Embedded pre wedding video (muted)
    • Because the main attraction of the original content is in the background score.

Feel free to use this template to build your wedding website!

To reuse this, follow the steps:

  • Replace the date in script.js to have a timer running for your big day!
// Set the date we're counting down to
var countDownDate = new Date("Nov 29, 2020 00:00:00").getTime();
  • If you wish to change the track which plays on click, edit the src in index.html
<div class="music">
   <audio src="./assets/mp3/song.mp3" id="my_audio" loop="loop"></audio> 
</div>

Song: Inkem Inkem by Gopi Sundar. Cover: flutesiva

  • *Responsive image gallery can be modified by adding the images in /assets/img folder . Also change the paths in the html index.html.
body {
  margin: 0;
  padding: 0;
}

.containerw3 {

	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	margin: -2.5px;
}
.containerw3:after {
	content: '';
	flex-grow: 999999999;
	min-width: 200px;
	height: 0;
}
.containerw3 > * {
	position: relative;
	display: block;
	height: 250px;
	margin: 2.5px;
	flex-grow: 1;
}
.containerw3 > * > img {
	height: 250px;
	object-fit: cover;
	max-width: 100%;
	min-width: 100%;
	vertical-align: bottom;
}
.containerw3.containerw3-margin {
	margin: 2.5px;
}

Html part:

<div class="containerw3 containerw3-margin">
            <a href="#">
                <img src="assets/img/d11.webp" />
            </a>
</div>
  • *Pre-wedding video
    • Save the video in the /assests/video folder and replace the file name index.html.
<div>
<video width="100%" height="100%" autoplay loop muted>
  <source src="assets/video/save_s.mp4" type="video/mp4">
  <source src="assets/video/save_s.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
  • *Bonus tip. You can replace the beautiful flowers on the top of the website with Cassia fistula and yellow flower shower.

Do not forget to leave a star! 🤗


With warm regards,
Arun Gopinath

About

Animated website for kerala wedding invitation(also contains timer, background music, Photo gallery and Pre-wedding video) | Save the Date: Apr 24, 2021

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published