Wedding Invitation 💍
SAVE THE DATE: APR 24, 2021
akhiarya.netlify.app
View Invitation
Inivitation letterA 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.
- A responsive photo gallery
- Embedded pre wedding video (muted)
- Because the main attraction of the original content is in the background score.
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.
With warm regards,
Arun Gopinath