The project is comprised of the following:
index.html- Contenttheme.css- CSS Styling/img- Images/js- External Scripts (Smooth-scrolling)/icons- FontAwesome's Icon Library (See below for more details)
The template is designed with an initial full viewport header with background image. The header is responsive but you may want to play want around with your image to make sure it looks good on a mobile phone.
To override the stock image, you have two options:
- Replace
img/hero.jpegwith your own image (but keep the filename the same). - Replace the header
background-imagefile path intheme.csswith the path to your image.
The template is initialized with a few "Details" sections (When, Location, Lodging, etc). Change these to whatever you'd like using the HTML.
The icons are provided by FontAwesome.
To add/change icons, find the icon you like on their page and then use the following syntax to insert:
<i class="fas fa-[ICON ID HERE]"></i>
I would've liked to include this library using a CDN instead of including the files locally but FontAwesome requires an email address to use their CDN so you're on own configuring that.
The template comes with a blank RSVP section as everyone likes to do this differently (and not many people create their own methods of sending data).
I recommend creating the RSVP in Google Forms and embedding the form in an iFrame (provided by commented out). However, your free to handle this however you'd like.
This template makes use of a few external scripts but doesn't rely on any build scripts or anything like that. Big thanks to the following:
- SmoothScroll - RSVP Scroll Functionality
- FontAwesome - Iconography
- Google Fonts - Fonts (Caveat and Quicksand)