InLove Documentation


Wedding template with ready to use wedding blocks and features. Blog pages, gallery. Fully responsive and retina ready.

Purchase Profile Support

Template Structure

All template files have fixed structure consisting of preloader, navbar, content, footer and Instagram block as shown below:

Page Head

Page head contains metadata, javascript and css files:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="_nK">
    <link rel="icon" href="images/logo.png">

    <title>InLove - Responsive HTML Wedding Theme</title>

    <!-- START: styles -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine:400,700">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/slick.js/slick/slick.css">
    <link rel="stylesheet" href="bower_components/slick.js/slick/slick-theme.css">
    <link rel="stylesheet" href="bower_components/photoswipe/dist/photoswipe.css">
    <link rel="stylesheet" href="bower_components/photoswipe/dist/default-skin/default-skin.css">
    <link rel="stylesheet" href="bower_components/wow/css/libs/animate.css">
    <link rel="stylesheet" href="bower_components/fullpage.js/dist/jquery.fullpage.min.css">
    <link rel="stylesheet" href="css/inlove.css">
    <!-- END: styles -->
    

    <!--[if lt IE 9]>
      <script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
</head>

Preloader

Preloader added in very first place after <body> tag:
<!-- START: preloader -->
<div class="inlove-preloader inlove-preloader-1">
    <div class="inlove-preloader-heart inlove-preloader-heart-lg"></div>
    <div class="inlove-couple">
        <div class="inlove-couple-left">
            <span class="inlove-couple-name">Kate</span>
        </div>
        <div class="inlove-couple-and"> & </div>
        <div class="inlove-couple-right">
            <span class="inlove-couple-name">Nik</span>
        </div>
    </div>
</div>
<!-- END: preloader -->

Navbar

Navbar have bootstrap navbar structure with some modifications: submenu and megamenu:
<!-- START: Navbar -->
<nav class="navbar inlove-navbar inlove-navbar-sticky ">
    <div class="container">
        <div class="navbar-header">
            <div class="container">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo.png" alt="In Love">
                </a>
            </div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-center">
                <li class="active dropdown ">
                    <a href="home-1.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home</a>
                    <ul class="dropdown-menu">
                        <li class="active  ">
                            <a href="home-1.html">Home 1</a>
                        </li>
                        <li class="  ">
                            <a href="home-2.html">Home 2</a>
                        </li>
                        <li class=" dropdown ">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sub Menu 2</a>
                            <ul class="dropdown-menu">
                                <li class="  ">
                                    <a href="#submenu-1">Sub Menu 3</a>
                                </li>
                                <li class="  ">
                                    <a href="#submenu-2">Sub Menu 3</a>
                                </li>
                                <li class="  ">
                                    <a href="#submenu-3">Sub Menu 3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class=" dropdown ">
                    <a href="blog.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
                    <ul class="dropdown-menu">
                        <li class="  ">
                            <a href="blog.html">Blog</a>
                        </li>
                        <li class="  ">
                            <a href="blog-sidebar-sticky.html">Blog Sticky Sidebar</a>
                        </li>
                        <li class="  ">
                            <a href="blog-single-post.html">Single Post</a>
                        </li>
                    </ul>
                </li>
                <li class=" dropdown ">
                    <a href="gallery-masonry.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gallery</a>
                    <ul class="dropdown-menu">
                        <li class="  ">
                            <a href="gallery-fullscreen.html">Fullscreen</a>
                        </li>
                        <li class="  ">
                            <a href="gallery-masonry.html">Masonry</a>
                        </li>
                        <li class="  ">
                            <a href="gallery-masonry-2.html">Masonry 2</a>
                        </li>
                    </ul>
                </li>
                <li class=" dropdown inlove-mega">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features</a>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="container">
                                <!-- You can add any content here -->

                                <ul class="inlove-mega-menu">


                                    <li>
                                        <label>Pages</label>


                                        <ul>
                                            <li class="  ">
                                                <a href="wishes.html">Wishes</a>
                                            </li>
                                            <li class="  ">
                                                <a href="events.html">Events</a>
                                            </li>
                                            <li class="  ">
                                                <a href="groomsmen.html">Groomsmen</a>
                                            </li>
                                            <li class="  ">
                                                <a href="bridesmaid.html">Bridesmaid</a>
                                            </li>
                                            <li class="  ">
                                                <a href="blank.html">Blank</a>
                                            </li>
                                            <li class="  ">
                                                <a href="404.html">404</a>
                                            </li>
                                        </ul>

                                    </li>

                                    <li>
                                        <label>Headers</label>


                                        <ul>
                                            <li class="  ">
                                                <a href="header-slider-parallax.html">Slider Parallax</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-slider-scale.html">Slider Scale</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-slider.html">Slider</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-image-parallax.html">Image Parallax</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-image-scale.html">Image Scale</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-image.html">Image</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-video-parallax.html">Video Parallax</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-video-scale.html">Video Scale</a>
                                            </li>
                                            <li class="  ">
                                                <a href="header-video.html">Video</a>
                                            </li>
                                        </ul>

                                    </li>

                                    <li>
                                        <label>Alternate Colors</label>


                                        <ul>
                                            <li class="  ">
                                                <a href="color-turquoise.html">Turquoise</a>
                                            </li>
                                            <li class="  ">
                                                <a href="color-lilac.html">Lilac</a>
                                            </li>
                                            <li class="  ">
                                                <a href="color-cheese.html">Cheese</a>
                                            </li>
                                            <li class="  ">
                                                <a href="color-pistachio.html">Pistachio</a>
                                            </li>
                                        </ul>

                                    </li>

                                    <li>
                                        <label>Preloaders</label>


                                        <ul>
                                            <li class="  ">
                                                <a href="preloader-1.html">Default</a>
                                            </li>
                                            <li class="  ">
                                                <a href="preloader-2.html">Style 2</a>
                                            </li>
                                            <li class="  ">
                                                <a href="preloader-3.html">Style 3</a>
                                            </li>
                                            <li class="  ">
                                                <a href="preloader-4.html">Style 4</a>
                                            </li>
                                            <li class="  ">
                                                <a href="preloader-5.html">Style 5</a>
                                            </li>
                                        </ul>

                                    </li>


                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="  ">
                    <a href="home-1.html#rsvp">RSVP</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- END: Navbar -->

Content

Use any content after navbar and before body.

Footer 1

Footer section with logo and instagram:
<!-- START: footer -->
<footer class="inlove-footer">
    <div class="container">
        <div class="inlove-footer-logo wow fadeIn">
            <img width="300" src="images/logo-big.png" alt="Kate & Nik">
        </div>
        <div class="inlove-footer-copyright wow fadeIn">
            <em>InLove © 2015 — Designed by <a href="http://themeforest.net/user/_nk?ref=_nK">nK</a></em>
        </div>
    </div>
</footer>
<!-- END: footer -->

<!-- START: instagram -->
<div class="inlove-instagram">
    <div>
        <a class="inlove-instagram-title" href="https://www.instagram.com/envato/" target="_blank">#kateandnik</a>

        <div class="row no-gutter">
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-1.jpg" alt="">
                </a>
            </div>
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-2.jpg" alt="">
                </a>
            </div>
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-3.jpg" alt="">
                </a>
            </div>
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-4.jpg" alt="">
                </a>
            </div>
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-5.jpg" alt="">
                </a>
            </div>
            <div class="col-sm-2 col-xs-4">
                <a href="#">
                    <img src="images/instagram-6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</div>
<!-- END: instagram -->

Footer 2

Footer section with widgitized area and dark background:
<!-- START: footer -->
<footer class="inlove-footer inlove-footer-dark">
    <div class="container">
        <div class="inlove-footer-widgets">
            <div class="row vertical-gutter multi-columns-row">
                <div class="col-md-3 col-sm-6">
                    <div class="widget wow fadeInUp">
                        <h4 class="widget-title">About the Blog</h4>
                        <p>
                            <em>We become a family and we want blogging together. Enjoy reading this blog with interesting situations and stories.</em>
                        </p>
                        <img src="images/signature.png" alt="">
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="widget wow fadeInUp">
                        <h4 class="widget-title">Latest Posts</h4>
                        <div class="inlove-widget-posts">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#" class="inlove-post-image">
                                        <img src="images/image-1.jpg" alt="">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h3 class="inlove-post-title"><a href="#">We're getting married!</a></h3>
                                    <div class="inlove-post-meta">
                                        <a href="#"><i class="fa fa-calendar"></i> October 10, 2015</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="inlove-widget-posts">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#" class="inlove-post-image">
                                        <img src="images/image-2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h3 class="inlove-post-title"><a href="#">Choice of shoes for the bride</a></h3>
                                    <div class="inlove-post-meta">
                                        <a href="#"><i class="fa fa-calendar"></i> October 4, 2015</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="widget wow fadeInUp">
                        <h4 class="widget-title">Our Twitter</h4>

                        <div class="inlove-twitter">
                            <div class="inlove-twitter-text">
                                Looking for an awesome Gaming WordPress Theme? Youplay is creative new look gaming theme. Get it here: <a href="http://themeforest.net/item/youplay-gaming-wordpress-template/11959042?ref=_nK" target="_blank">http://wp.nkdev.info/youplay</a>
                            </div>
                            <div class="inlove-twitter-date">
                                <i class="fa fa-twitter"></i>
                                <span class="twitter-date">2 days ago</span>
                            </div>
                        </div>

                        <div class="inlove-twitter">
                            <div class="inlove-twitter-text">
                                What about personal blog theme? Flatness available for WordPress: <a href="http://themeforest.net/item/flatness-personal-wordpress-blog-theme/13867599?ref=_nK" target="_blank">http://wp.nkdev.info/flatness</a>
                            </div>
                            <div class="inlove-twitter-date">
                                <i class="fa fa-twitter"></i>
                                <span class="twitter-date">7 days ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="widget wow fadeInUp">
                        <h4 class="widget-title">Our Instagram</h4>
                        <div class="row vertical-gutter small-gutter">
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-1.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-2.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-3.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-4.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-5.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#">
                                    <img src="images/instagram-6.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="inlove-footer-copyright wow fadeIn">
            <em>InLove © 2015 — Designed by <a href="http://themeforest.net/user/_nk?ref=_nK">nK</a></em>
        </div>
    </div>
</footer>
<!-- END: footer -->

Foot

Foot contains all scripts:
<!-- START: scripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jarallax/jarallax/jarallax.js"></script>
<script src="bower_components/jarallax/jarallax/jarallax-video.js"></script>
<script src="bower_components/slick.js/slick/slick.min.js"></script>
<script src="bower_components/isotope/dist/isotope.pkgd.min.js"></script>
<script src="bower_components/photoswipe/dist/photoswipe.min.js"></script>
<script src="bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>
<script src="bower_components/theia-sticky-sidebar/js/theia-sticky-sidebar.js"></script>
<script src="bower_components/smoothscroll-for-websites/SmoothScroll.js"></script>
<script src="bower_components/wow/dist/wow.min.js"></script>
<script src="bower_components/jquery.countdown/dist/jquery.countdown.min.js"></script>
<script src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
<script src="js/inlove.js"></script>
<!-- END: scripts -->

<!-- START: init inlove -->
<script>
if (typeof inlove !== 'undefined') {
    inlove.init();
}
</script>
<!-- END: init inlove -->

Fonts

InLove uses Google fonts. For default text used Merriweather font, for headings used Tangerine font. Loaded in head section.
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

Colors

InLove comes with 4 altername color schemes: Turquoise, Lilac, Cheese and Pistachio. To change theme, you need to use specified styles file instead of css/inlove.css.

Turquoise:

<link rel="stylesheet" href="css/inlove-turquoise.css">

Lilac:

<link rel="stylesheet" href="css/inlove-lilac.css">

Cheese:

<link rel="stylesheet" href="css/inlove-cheese.css">

Pistachio:

<link rel="stylesheet" href="css/inlove-pistachio.css">

Preloaders

Default

Used on page preloader-1.html
<!-- START: preloader -->
<div class="inlove-preloader inlove-preloader-1">
    <div class="inlove-preloader-heart inlove-preloader-heart-lg"></div>
    <div class="inlove-couple">
        <div class="inlove-couple-left">
            <span class="inlove-couple-name">Kate</span>
        </div>
        <div class="inlove-couple-and"> & </div>
        <div class="inlove-couple-right">
            <span class="inlove-couple-name">Nik</span>
        </div>
    </div>
</div>
<!-- END: preloader -->

Style 2

Used on page preloader-2.html
<!-- START: preloader 2 -->
<div class="inlove-preloader">
    <!-- http://codepen.io/MarkoD/pen/KdpmYa -->
    <div class="inlove-preloader-2">
        <div class="inlove-preloader-heart"></div>
        <div class="inlove-preloader-heart inlove-preloader-heart-md"></div>
        <div class="inlove-preloader-heart inlove-preloader-heart-sm"></div>
    </div>
</div>
<!-- END: preloader 2 -->

Style 3

Used on page preloader-3.html
<!-- START: preloader 3 -->
<div class="inlove-preloader">
    <!-- http://codepen.io/valentin/pen/sfnCE -->
    <div class="inlove-preloader-3">
        <div class="inlove-preloader-heart inlove-preloader-heart-1"></div>
        <div class="inlove-preloader-heart inlove-preloader-heart-2"></div>
    </div>
</div>
<!-- END: preloader 3 -->

Style 4

Used on page preloader-4.html
<!-- START: preloader 4 -->
<div class="inlove-preloader inlove-preloader-4">
    <svg width="140px" height="80px" viewBox="0 0 187.3 93.7" preserveAspectRatio="xMidYMid meet" style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);">
        <path stroke="#ef92a8" class="inlove-preloader-outline" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z" />
        <path id="outline-bg" opacity="0.5" fill="none" stroke="#FAD0D1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z" />
    </svg>
</div>
<!-- END: preloader 4 -->

Style 5

Used on page preloader-5.html
<!-- START: preloader 5 -->
<div class="inlove-preloader">
    <!-- http://preloaders.net/en/search/heart -->
    <img src="images/preloader.gif" alt="" style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);">
</div>
<!-- END: preloader 5 -->

New Page

To create a new page, you can use blank.html which provides basic page layout.

SASS

InLove uses SASS pre-processor for development. You can change predefined colors in files: scss/_variables.scss.

Main file for compile Less - scss/inlove.scss
All references see in folder scss/parts/

Credits

Plugins

Images

Some images from https://pixabay.com/.

THIS IMAGES DON'T INCLUDED IN THEME PACKAGE! Used only in demo pages.

End of Documentation

Thanks for purchasing InLove. I hope you will enjoy using it for your next project.