FOXEWEDDING is a beautiful easy to use wedding template built on bootstrap, Its can be used as wedding invitation for new couple getting married.The template is responsive, so you can view it also in the mobile/tablets devices and it looks very nice in thoose devices. FOXEWEDDING is retina ready that means it looks great and very sharp in high resolution devices.
When you download the main download file you will find several folder :
In this section a guide to understanding how FOXEWEDDING is structured.
This folder contain all the files needed to setup the template and upload it to your server including sub folder that contains the core of the template setup css files, js files, webfonts files and assets files.
This folder contain all the css files that are required by the template those files are :
main.css
magnific-popup
font.css
This folder contain all the js files required by the template those files are :
This subfolder contain other subfolders : the img subfolder and the svg subfolder, evenif those are not included in the main download files and replaced with placeholders, but you can replace theme easly with your own assets.
/assets/img./assets/svg.
This folder contain all the webfonts from fontawsome used in this template, you can use a wide range of icons that suits your need and the . For more info on how to setup and use fontawsome please visit this link below :
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
An overview of the plugins supplied with FOXERESTO
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software using the permissive MIT License.
A full javascript source for the version of bootstrap used in this templatte. FOXERESTO ships with Bootstrap 4.1.3. This will be updated as further Bootstrap versions are released.
A lightweight script to animate scrolling to anchor links. This provides a better user experience for navigating one-page sites or long landing pages.
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js).
Instafeed is a dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript.
Placeholders.js is a polyfill (or shim, or whatever you like to call it) for the HTML5 placeholder attribute, as defined in the HTML5 specification. Placeholder attributes are valid on input elements of various types and textarea elements.
Contains additional scripts required by FOXEWEDDING.
FOXEWEDDING uses fontawsome icons and Flaticon svg , the template come with a set of icons that you can use as you want, and change the default icons to fit your needs.You can find the list of the icons in the fonts.css in the css folder then you can choose the icon that you want and change it in the html code.
Flaticon has been used for demo purposes only and are not included in the main download file, but you can use them without any problems by your own,
Icons used from flaticon :
Font generated by http://www.flaticon.com
Under http://creativecommons.org/licenses/by/3.0/ CC
Author Eucalyp : https://www.flaticon.com/authors/smashicons
Author Dave Gandy : https://www.flaticon.com/authors/dave-gandy
Author Freepik : https://www.freepik.com/
The images used in this template are not included with the main purchased files, but there are freebies and you can download them from the links below :
The svg icons used in this template are scalable Vector Graphics, the svg used to accomplish the design of the heart shape mask to make the image look like a heart shape using svg and css technique to mask the image within the svg.
To put the image that you want inside the svg mak shape is very easy, just open mask-lg.jpg or the mask-md.jpg images located inside the assets folder under img folder subfolder in any image editor software of you choice and replace the place holder by your own.
Note : please do not change the size of the place holder of the image used in the svg shape mask the size of the images is personalized ot fit the mask area.
FOXEWEDDING come with instagram feed section to display user, popular or tags photo feeds inside your site, by default this area in the footer display a default set of images for demo purposes, but od cours you can display your own instagram fee, popular or tags photo feeds....
To change the instafeed widget located in the footer to display the images that want(your user feed, popular or tags photo feeds), simply open script.js file located in js folder inside the main HTML folder then locate the instagram feed setup section look for the line of codes that setup the instagram feed then replace the userId and accessToken variables by yours.
More info about instgram feed option can be found here :
FOXEWEDDING come with a counter to show how much time is left until the wedding time. The setup is very easy just open script.js and scroll down until you find the countdown section you will find the lines below just change the date that you want in the function that handel to countdown.
// Countdown setup
$('.countdown').countdown('2019/6/2').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<div class="col"><div class="card card-body countdown-shadow mb-4 mb-lg-0 p-3"><span class="counter text-primary mb-1 ">%d</span> <span class="label ">Day%!d</span></div></div> '
+ '<div class="col"><div class="card card-body countdown-shadow mb-4 mb-lg-0 p-3"><span class="counter text-primary mb-1">%H</span> <span class="label">Hour%!H</span></div></div> '
+ '<div class="col"><div class="card card-body countdown-shadow mb-4 mb-lg-0 p-3"><span class="counter text-primary mb-1">%M</span> <span class="label">Minute%!M</span></div></div> '
+ '<div class="col"><div class="card card-body countdown-shadow p-3"><span class="counter text-primary mb-1">%S</span> <span class="label">Second%!S</span></div></div>'));
});
For more info just visit the link below :
http://hilios.github.io/jQuery.countdown/
For more information, see the official Bootstrap documentation.
FOXEWEDDING is very easy to customize because it's a block based design template so you can move sections arround , and put them the order you want.
Because FOXEWEDDING is built using bootstrap, you can cutomize the element and the display of the element by simply modifying class names.
Please see this links below on how to setup or customize the grid system of bootstrap :
Updates will be released periodically to add new features, provide fixes where necessary and maintain compatibility.
Manly the updated files are javascript or CSS and your project should need little adjustment in order to stay up to date.
You will be notified by the author once some updates are made to the template.