/wedding-invitation-website

Static, Interactive and Fully Responsive Single Page Website designed as Wedding Invitation from imaginary lovebirds Aman and Gur.

Primary LanguageCSSMIT LicenseMIT

Wedding Invitation Website

Frontend Web project on Wedding invitation to GurAman's Wedding

Java

To preview the webpage, click here

A frontend focussed Web project that is made as an invitation to the wedding of imaginary love birds Aman and Gurdeep. The inspiration of this project was taken from an online template on wedding invitation website available on wix. Click here to view the template. It consists of the following notable features:

  • Firebase Storage used as FTP for image assets of the webpage.
  • Perfectly responsive according to various screen sizes.
  • Sections of the webpage linked to navbar elements.
  • Parallax effect using event listener in JS file.
  • Page element reveal using subtle animation.
  • Responsive buttons on hover.

Technology used

  • HTML : index.html provides basic structure to the webpage
  • CSS : style.css helps in styling the webpage
  • JavaScript : main.js consists of functions that enables parallax effect using event listener and reveal function to add animation

How to install and view this project

  1. Install Code editor (VS Code is recommended).
  2. Download GitHub Desktop.
  3. Sign in to GitHub.com and GitHub Desktop before you start to clone.
  4. On GitHub.com, navigate to the main page of the repository.
  5. Above the list of files, click Code.
  6. Click Open with GitHub Desktop to clone and open the repository with GitHub Desktop.
  7. Click Choose... and, using the Finder window, navigate to a local path where you want to clone the repository.
    Note: If the repository is configured to use LFS, you will be prompted to initialize Git LFS.
  8. Click Clone.
  9. Once the repository has been cloned, open the folder in VS Code.
  10. Download and Install Live Server extenstion.
  11. Open the index.html file and click "Go Live" button in the bottom right corner of VS Code.

How to tweek this project for your own use

You are free to use and make changes is my code. I would recommend you to clone and rename this project and use it for your own purpose. Certain points need to be kept in mind while you make any changes.

  1. Even though CSS file has been structured using comments, HTML file is structured but lacks comments and JS file is just coarse.
  2. Folder structuring is not done properly as this was my earliest of projects and I was ignorant.
  3. Image resources cannot be accessed as they are stored as ftp. You will find image url and not any path.

Found a bug?

If you found an issue or would like to submit an improvement of this project, please submit an issue using the issue tab above. If you would like to submit a PR with a fix, reference the issue you created!

Known issues

This project has been completed. There is no plans of any further working over this project from my end(author's end). If you think you can add any feature, do ping me on my socials(recommended) or submit an issue.

Preview of the Webpage

Warning: Certain elements are missing(like navbar) and parallax effect cannot be presented in this screenshot. It's recommended to clone the project and view.

127 0 0 1_5500_index html (2)