Loise - Responsive Wedding Invitation

Dear customers, thank you for choosing our products. In this document, you will find an in-depth description of all the template's features and functionality.

If you have any questions not attended to by our template documentation, please contact us. If you like our template, please leave your feedback. Thanks :)

Template Version: 1.1
By: lucky_roo
Response time (up to): 1 business day.

Installation

Follow the steps below to setup your site template:

Please note that Loise is a simple HTML template and not a Wordpress theme/plugin.

  1. Log into your hosting space via an FTP software (Filezilla for example).
  2. Unzip the downloaded package and open the html folder to find all the template files.
  3. Below is the folder structure and needs to be uploaded to your website root directory:
    • html/css - Stylesheets folder
    • html/images - Images folder
    • html/img - Images folder
    • html/js - Javacripts folder
    • html/index.html – HTML file
    • html/rsvp.php – RSVP form PHP file
  4. Upload the HTML files corresponding to the variant of your choice along with all directories in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder. You should upload all or specific HTML files as per your need.

Tips Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

HTML Structure

Loise follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!doctype html>
<html lang="en" class="h-100 w-100">
    <head>
        <title>Loise - Responsive Wedding Invitation</title>`

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- Required CSS files -->
        <link href="css/style.min.css" rel="stylesheet">

        <!-- Favicon -->
        <link rel="icon" href="img/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="img/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="icon" href="img/favicon.ico">
    </head>

    <body id="page-top" class="h-100 overflow-x-hidden w-100">

        <!-- Preloader Start -->
        <div class="preloader bg-white h-100 position-fixed w-100">
            ...
        </div>
        <!-- Preloader End -->

        <!-- Header Start -->
        <header class="fixed-top">
        ...    
        </header>
        <!-- Header End -->

        <!-- Spacer -->
        <span class="spacer d-block w-100"></span>

        <!-- Section - Hero Start -->
        <section id="hero" class="bg-secondary-2">
        ...    
        </section>
        <!-- Section - Hero End -->

        <!-- Section - The Couple Start -->
        <section id="the-couple">
        ...    
        </section>
        <!-- Section - The Couple End -->

        <!-- Section - Wedding Event Start -->
        <section id="wedding-event" class="bg-secondary-2">
        ...
        </section>
        <!-- Section - Wedding Event End -->

        <!-- Section - Wedding Party Start -->
        <section id="wedding-party">
        ...
        </section>
        <!-- Section - Wedding Party End -->

        <!-- Section - Love Story Start -->
        <section id="love-story" class="bg-holder" data-bg-image="images/bg-love-story.jpg">
        ...    
        </section>
        <!-- Section - Love Story End -->

        <!-- Section - Proposed Start -->
        <section id="proposed">
        ...    
        </section>
        <!-- Section - Proposed End -->

        <!-- Section - Photos Start -->
        <section id="photos" class="border-top">
        ...    
        </section>
        <!-- Section - Photos End -->

        <!-- Section - Wedding Gifts Start -->
        <section id="wedding-gifts" class="bg-holder" data-bg-image="images/bg-wedding-gifts.jpg">
        ...    
        </section>
        <!-- Section - Wedding Gifts End -->

        <!-- Section - RSVP Start -->
        <section id="rsvp">
        ...    
        </section>
        <!-- Section - RSVP End -->

        <!-- Footer Start -->
        <footer class="bg-secondary-2 pb-0 section">
        ...    
        </footer>
        <!-- Footer End -->

        <!-- Required JS files -->
        <script src="js/script.min.js"></script>
    </body>
</html>

Page Link

You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: page-scroll and href should be the ID of the section as per the example shown below:

<a href="#the-couple" class="nav-link page-scroll">The Couple</a>

<!-- Section - The Couple Start -->
<section id="the-couple">    
...
</section>
<!-- Section - The Couple End -->

NotePlease note that destination section should have valid ID.

External Page Link

<a href="https://themeforest.net/" target="_blank">External Page Link</a>