Attribution 3.0 Unported (CC BY 3.0) | |||||
You are free to: | |||||
Share — copy and redistribute the material in any medium or format | |||||
Adapt — remix, transform, and build upon the material | |||||
for any purpose, even commercially. | |||||
This license is acceptable for Free Cultural Works. | |||||
The licensor cannot revoke these freedoms as long as you follow the license terms. | |||||
Know more about the license follow this link - https://creativecommons.org/licenses/by/3.0/ | |||||
If you want to remove the credit simply make a [donation](https://www.paypal.me/Themefisher), so that we can run our contribution to hugo community. |
# _Meghna_ for Hugo | |||||
![screenshot](https://user-images.githubusercontent.com/37659754/45415821-501e8480-b6a0-11e8-89a8-5c2248b35d5e.png "Home of the website") | |||||
Meghna is a free responsive one page business template built with HTML5/CSS3, JavaScript and JQuery. The HTML template is minimalist, lightweight and fast loading, has been shipped wrapping latest technologies and awesome design trend. Mehna has successfully passed W3C validation and speed test. The bootstrap based HTML crafted with eye-catching design(UI) and ideal for well-researched user experience (UX), perfectly suited for Business, agency, startup, corporate, portfolio, showcasing, photography studio, SME business, non-profit organizations, fashion government agencies. and many more. | |||||
## Usage | |||||
Create a new Hugo site by typing | |||||
``` | |||||
$ hugo new site <SITENAME> | |||||
``` | |||||
Then clone this repository: | |||||
``` | |||||
$ cd <SITENAME>/themes | |||||
$ git clone https://github.com/themefisher/meghna-hugo | |||||
``` | |||||
Now take a look at the exampleSite folder and you're ready to go! | |||||
## License | |||||
This Template is released under [Creative Commons Attribution 3.0 (CC-BY-3.0) License](https://creativecommons.org/licenses/by/3.0/) | |||||
If you want to remove the credit simply make a [donation](https://www.paypal.me/Themefisher), so that we can run our contribution to hugo community. | |||||
[![HELP US TO GROW](https://user-images.githubusercontent.com/16266381/45262626-1e0ce880-b43c-11e8-9698-1b95f143e240.png)](https://www.paypal.me/Themefisher) | |||||
## About Themefisher | |||||
[Themefisher] has been creating beautiful free and premium Bootstrap and HTML5 templates since 2014. | |||||
Visit us at https://themefisher.com/ to see other great-looking themes. | |||||
[Hugo]: https://gohugo.io/ | |||||
[Themefisher]: https://themefisher.com/ | |||||
## We are available for Hiring of your next HUGO project. Drop Us a mail [themefisher@gmail.com](mailto:themefisher@gmail.com) |
+++ | |||||
+++ |
baseURL = "http://example.org/" | |||||
languageCode = "en-us" | |||||
title = "Meghna | Responsive Multipurpose Parallax HTML5 Template" | |||||
theme = "meghna" | |||||
# Menu | |||||
[menu] | |||||
[[menu.nav]] | |||||
name = "About Us" | |||||
URL = "about" | |||||
weight = 2 | |||||
[[menu.nav]] | |||||
name = "Service" | |||||
URL = "services" | |||||
weight = 3 | |||||
[[menu.nav]] | |||||
name = "Portfolio" | |||||
URL = "portfolio" | |||||
weight = 4 | |||||
[[menu.nav]] | |||||
name = "Team" | |||||
URL = "our-team" | |||||
weight = 5 | |||||
[[menu.nav]] | |||||
name = "Pricing" | |||||
URL = "pricing" | |||||
weight = 6 | |||||
[[menu.nav]] | |||||
name = "Blog" | |||||
URL = "blog" | |||||
weight = 7 | |||||
[[menu.nav]] | |||||
name = "Contact" | |||||
URL = "contact-us" | |||||
weight = 8 | |||||
# Site params | |||||
[params] | |||||
home= "Home" | |||||
logo = "images/logo.png" | |||||
gmapAPI = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBI14J_PNWVd-m0gnUBkjmhoQyNyd7nllA" | |||||
# Banner Section | |||||
[params.banner] | |||||
enable = true | |||||
bgImage = "images/slider/hero-area.jpg" | |||||
icon = "tf-ion-play" | |||||
heading = "Experience the new reality" | |||||
content= "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, excepturi. At recusandae sit perferendis autem,iste tempora nostrum numquam sapiente!" | |||||
btn = true | |||||
btnText="Explore Us" | |||||
btnURL="#services" | |||||
# call to action | |||||
[params.cta] | |||||
enable = true | |||||
title = "Great Design & Incredible Features" | |||||
content = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis tenetur odio impedit incidunt? Omnis accusantium ea reiciendis, fugit commodi nostrum." | |||||
btnURL = "#" | |||||
btnText = "Start a project with us" | |||||
# counter | |||||
[params.counter] | |||||
enable = true | |||||
bgImage = "images/backgrounds/bg-1.jpg" | |||||
[[params.counter.counterItem]] | |||||
title = "Happy Clients" | |||||
icon = "tf-ion-android-happy" | |||||
count = "320" | |||||
[[params.counter.counterItem]] | |||||
title = "Projects completed" | |||||
icon = "tf-ion-archive" | |||||
count = "565" | |||||
[[params.counter.counterItem]] | |||||
title = "Positive feedback" | |||||
icon = "tf-ion-thumbsup" | |||||
count = "95" | |||||
[[params.counter.counterItem]] | |||||
title = "Cups of Coffee" | |||||
icon = "tf-ion-coffee" | |||||
count = "2500" | |||||
# footer | |||||
[params.footer] | |||||
copyright = "Themefisher Team" | |||||
copyrightURL = "http://www.themefisher.com" | |||||
# social Icons | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-facebook" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-twitter" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-google-outline" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-youtube" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-linkedin" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-dribbble-outline" | |||||
[[params.footer.socialIcon]] | |||||
icon = "tf-ion-social-pinterest-outline" |
--- | |||||
title: "Are You Doing the Right Way" | |||||
date: 2018-09-12T14:51:12+06:00 | |||||
author: John Doe | |||||
image: images/blog/blog-post-3.jpg | |||||
--- | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. | |||||
> Design is not just what it looks like and feels like. Design is how it works. | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. | |||||
--- | |||||
title: "Simple Image Post" | |||||
date: 2018-09-12T12:52:36+06:00 | |||||
image: images/blog/blog-post-1.jpg | |||||
author: Jamica Jock | |||||
--- | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. | |||||
> Design is not just what it looks like and feels like. Design is how it works. | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. |
--- | |||||
title: "Simple Post Title" | |||||
date: 2018-09-12T14:39:16+06:00 | |||||
author: Somrat | |||||
image: images/blog/blog-post-2.jpg | |||||
--- | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. | |||||
> Design is not just what it looks like and feels like. Design is how it works. | |||||
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. | |||||
Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. | |||||
enable : true | |||||
heading : About | |||||
headingSpan : Us | |||||
aboutItem : | |||||
- icon : tf-tools | |||||
title : We're Creative | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, perspiciatis eos provident laborum eum dignissimos. | |||||
- icon : tf-strategy | |||||
title : We're Professional | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, perspiciatis eos provident laborum eum dignissimos. | |||||
- icon : tf-anchor2 | |||||
title : We're Genius | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, perspiciatis eos provident laborum eum dignissimos. |
enable : true | |||||
image : images/about/about-business-man.jpg | |||||
title : We’re A Digital Design Agency. | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam tempora itaque, autem dolores culpa cum mollitia voluptate nesciunt voluptatibus quasi. | |||||
description2 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam tempora itaque, autem dolores culpa cum mollitia voluptate nesciunt voluptatibus quasi. Aliquam tempora itaque, autem dolores culpa cum mollitia voluptate nesciunt voluptatibus quasi. | |||||
aboutItem : | |||||
- icon : tf-circle-compass | |||||
title : SEO Optimized | |||||
content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe | |||||
- icon : tf-hotairballoon | |||||
title : Easy Customization | |||||
content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe |
enable : true | |||||
heading : Latest | |||||
headingSpan : Posts |
enable : true | |||||
heading : Get In | |||||
headingSpan : Touch | |||||
title : Contact Details | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, vero, provident, eum eligendi blanditiis ex explicabo vitae nostrum facilis asperiores dolorem illo officiis ratione vel fugiat dicta laboriosam labore adipisci. | |||||
mapLatitude : 51.5223477 | |||||
mapLongitude: -0.1622023 | |||||
contactDetails : | |||||
- icon : tf-map-pin | |||||
info : "Khaja Road, Bayzid, Chittagong, Bangladesh" | |||||
- icon : tf-ion-ios-telephone-outline | |||||
info : "Phone: +880-31-000-000" | |||||
- icon : tf-ion-iphone | |||||
info : "Fax: +880-31-000-000" | |||||
- icon : tf-ion-ios-email-outline | |||||
info : "Email: hello@meghna.com" | |||||
enable : true | |||||
heading : Our | |||||
headingSpan : Works | |||||
filterList : | |||||
- filterType : photography | |||||
filterTitle : Photography | |||||
- filterType : design | |||||
filterTitle : Design | |||||
- filterType : development | |||||
filterTitle : Development | |||||
portfolioItem : | |||||
- types : design | |||||
image : images/portfolio/portfolio-1.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Tag Design | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : development | |||||
image : images/portfolio/portfolio-2.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Sound system | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : design development | |||||
image : images/portfolio/portfolio-3.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Clock Product | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : photography development | |||||
image : images/portfolio/portfolio-4.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Bottol Label | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : design | |||||
image : images/portfolio/portfolio-5.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Shopping Bag | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : photography | |||||
image : images/portfolio/portfolio-6.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Tag Design | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : development | |||||
image : images/portfolio/portfolio-7.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Business Card | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : design development | |||||
image : images/portfolio/portfolio-8.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Stationary Design | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! | |||||
- types : design photography | |||||
image : images/portfolio/portfolio-2.jpg | |||||
icon : tf-ion-android-search | |||||
URL : # | |||||
title : Tag Design | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo! |
enable : true | |||||
heading : Our Greatest | |||||
headingSpan : Plans | |||||
pricingTable : | |||||
- title : Free | |||||
price : $99 | |||||
time : month | |||||
btnURL : # | |||||
btnText : Signup | |||||
plan : | |||||
- planDetails : 1GB Disk Space | |||||
- planDetails : 10 Email Account | |||||
- planDetails : Script Installer | |||||
- planDetails : 1 GB Storage | |||||
- planDetails : 10 GB Bandwidth | |||||
- planDetails : 24/7 Tech Support | |||||
- title : Silver | |||||
price : $149 | |||||
time : month | |||||
btnURL : # | |||||
btnText : Signup | |||||
plan : | |||||
- planDetails : 1GB Disk Space | |||||
- planDetails : 10 Email Account | |||||
- planDetails : Script Installer | |||||
- planDetails : 1 GB Storage | |||||
- planDetails : 10 GB Bandwidth | |||||
- planDetails : 24/7 Tech Support | |||||
- title : Gold | |||||
price : $199 | |||||
time : month | |||||
btnURL : # | |||||
btnText : Signup | |||||
plan : | |||||
- planDetails : 1GB Disk Space | |||||
- planDetails : 10 Email Account | |||||
- planDetails : Script Installer | |||||
- planDetails : 1 GB Storage | |||||
- planDetails : 10 GB Bandwidth | |||||
- planDetails : 24/7 Tech Support | |||||
- title : Platinum | |||||
price : $299 | |||||
time : month | |||||
btnURL : # | |||||
btnText : Signup | |||||
plan : | |||||
- planDetails : 1GB Disk Space | |||||
- planDetails : 10 Email Account | |||||
- planDetails : Script Installer | |||||
- planDetails : 1 GB Storage | |||||
- planDetails : 10 GB Bandwidth | |||||
- planDetails : 24/7 Tech Support |
enable : true | |||||
heading : Our | |||||
headingSpan : Services | |||||
serviceItem : | |||||
- icon : tf-globe | |||||
title : WordPress Theme | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. | |||||
- icon : tf-ion-laptop | |||||
title : Responsive Design | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. | |||||
- icon : tf-genius | |||||
title : Media & Advertisement | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. | |||||
- icon : tf-dial | |||||
title : Graphic Design | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. | |||||
- icon : tf-target3 | |||||
title : Apps Development | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. | |||||
- icon : tf-lifesaver | |||||
title : Networking | |||||
content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur. |
enable : true | |||||
heading : Our | |||||
headingSpan : Skills | |||||
title : We’ve skilled in wide range of web and Other digital market tools. | |||||
content : Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis magni explicabo cum aperiam recusandae sunt accusamus totam. Quidem quos fugiat sapiente numquam accusamus quas hic, itaque in libero reiciendis tempora! | |||||
image : images/about/company-growth.png | |||||
skillItem : | |||||
- itemNumber : 01- | |||||
itemName : Business Development | |||||
itemPercent : 90% | |||||
- itemNumber : 02- | |||||
itemName : Analysis | |||||
itemPercent : 70% | |||||
- itemNumber : 03- | |||||
itemName : Design | |||||
itemPercent : 80% | |||||
- itemNumber : 04- | |||||
itemName : IOS Development | |||||
itemPercent : 95% | |||||
- itemNumber : 05- | |||||
itemName : Andriod Development | |||||
itemPercent : 75% |
enable : true | |||||
heading : Our | |||||
headingSpan : Team | |||||
teamMember : | |||||
- image : images/team/team-1.jpg | |||||
name : Abul Mal Muhit | |||||
designation : CEO/Founder | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio. | |||||
socialIcon : | |||||
- icon : tf-ion-social-facebook | |||||
- icon : tf-ion-social-twitter | |||||
- icon : tf-ion-social-linkedin | |||||
- icon : tf-ion-social-dribbble-outline | |||||
- image : images/team/team-2.jpg | |||||
name : Frank Miller | |||||
designation : Manager | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio. | |||||
socialIcon : | |||||
- icon : tf-ion-social-facebook | |||||
- icon : tf-ion-social-twitter | |||||
- icon : tf-ion-social-linkedin | |||||
- icon : tf-ion-social-dribbble-outline | |||||
- image : images/team/team-3.jpg | |||||
name : Michael Jonson | |||||
designation : Web Developer | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio. | |||||
socialIcon : | |||||
- icon : tf-ion-social-facebook | |||||
- icon : tf-ion-social-twitter | |||||
- icon : tf-ion-social-linkedin | |||||
- icon : tf-ion-social-dribbble-outline | |||||
- image : images/team/team-4.jpg | |||||
name : Mo. Kha. Alamgir | |||||
designation : SEO Specialist | |||||
description : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio. | |||||
socialIcon : | |||||
- icon : tf-ion-social-facebook | |||||
- icon : tf-ion-social-twitter | |||||
- icon : tf-ion-social-linkedin | |||||
- icon : tf-ion-social-dribbble-outline |
enable : true | |||||
bgImage : images/backgrounds/bg-2.jpg | |||||
testimonialItem : | |||||
- name : Jonathon Andrew | |||||
image : images/team/client-1.jpg | |||||
date : Dec 26, 2018 | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium minima ex, quia error, deserunt voluptatibus repellendus? Incidunt eligendi aliquam repellat molestias, vel sed optio rem odit quis ratione non consequuntur! | |||||
- name : Jonathon Andrew | |||||
image : images/team/client-2.jpg | |||||
date : Dec 26, 2018 | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium minima ex, quia error, deserunt voluptatibus repellendus? Incidunt eligendi aliquam repellat molestias, vel sed optio rem odit quis ratione non consequuntur! | |||||
- name : Jonathon Andrew | |||||
image : images/team/client-1.jpg | |||||
date : Dec 26, 2018 | |||||
content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium minima ex, quia error, deserunt voluptatibus repellendus? Incidunt eligendi aliquam repellat molestias, vel sed optio rem odit quis ratione non consequuntur! |
<!DOCTYPE html> | |||||
<html> | |||||
{{- partial "head.html" . -}} | |||||
<body> | |||||
{{- partial "header.html" . -}} | |||||
<div id="content"> | |||||
{{- block "main" . }}{{- end }} | |||||
</div> | |||||
{{- partial "footer.html" . -}} | |||||
</body> | |||||
</html> |
{{ partial "header.html" . }} | |||||
{{ partial "navigation.html" . }} | |||||
{{"<!-- Start Blog Section -->" | safeHTML}} | |||||
<section id="blog" class="section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
<div class="clearfix"> | |||||
{{ range .Data.Pages }} | |||||
{{"<!-- single blog post -->" | safeHTML}} | |||||
<article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms"> | |||||
<div class="post-block"> | |||||
<div class="media-wrapper"> | |||||
{{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }} | |||||
</div> | |||||
<div class="content"> | |||||
<h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3> | |||||
<p>{{ .Summary }}</p> | |||||
<a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a> | |||||
</div> | |||||
</div> | |||||
</article> | |||||
{{"<!-- /single blog post -->" | safeHTML}} | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /blog -->" | safeHTML}} | |||||
{{ partial "footer.html" . }} |
{{ partial "header.html" . }} | |||||
{{ partial "navigation.html" . }} | |||||
<section class="section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
<div class="col-md-8 col-md-offset-2 text-center"> | |||||
<h1>{{ .Title }}</h1> | |||||
<ul class="list-inline mb-50"> | |||||
<li class="list-inline-item">{{ .Params.author }}</li> | |||||
<li class="list-inline-item">{{ dateFormat "Monday, Jan 2, 2006" .Date }}</li> | |||||
</ul> | |||||
<img class="img-fluid mb-50" src="{{ .Params.image | absURL }}" alt="blog-image"> | |||||
</div> | |||||
<div class="col-md-8 col-md-offset-2"> | |||||
<div class="post-single-content"> | |||||
{{ .Content }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{ partial "footer.html" . }} |
{{ partial "header.html" . }} | |||||
{{ partial "preloader.html" . }} | |||||
{{ partial "hero-area.html" . }} | |||||
{{ partial "navigation.html" . }} | |||||
{{ partial "about.html" . }} | |||||
{{ partial "cta.html" . }} | |||||
{{ partial "service.html" . }} | |||||
{{ partial "skill.html" . }} | |||||
{{ partial "portfolio.html" . }} | |||||
{{ partial "counter.html" . }} | |||||
{{ partial "team.html" . }} | |||||
{{ partial "pricing.html" . }} | |||||
{{ partial "testimonial.html" . }} | |||||
{{ partial "blog.html" . }} | |||||
{{ partial "contact.html" . }} | |||||
{{ partial "footer.html" . }} |
{{ if .Site.Data.about.enable}} | |||||
{{"<!-- Start About Section -->" | safeHTML}} | |||||
<section class="bg-one about section" id="about"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center wow fadeIn" data-wow-duration="1500ms"> | |||||
<h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
{{ range .Site.Data.about.aboutItem }} | |||||
{{"<!-- About item -->" | safeHTML}} | |||||
<div class="col-md-4 text-center wow fadeInUp" data-wow-duration="500ms"> | |||||
<div class="block"> | |||||
<div class="icon-box"> | |||||
{{with .icon}}<i class="{{ . }}"></i>{{ end }} | |||||
</div> | |||||
{{"<!-- Express About Yourself -->" | safeHTML}} | |||||
<div class="content text-center"> | |||||
{{ with .title }}<h3 class="ddd">{{ . }}</h3>{{ end }} | |||||
{{ with .content}} <p>{{ . }}</p>{{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /about -->" | safeHTML}} | |||||
{{ end }} | |||||
{{ if .Site.Data.about2.enable }} | |||||
{{"<!-- about 2 -->" | safeHTML}} | |||||
<section class="section about-2 padding-0 bg-dark"> | |||||
<div class="container-fluid"> | |||||
<div class="row"> | |||||
<div class="col-md-6 padding-0 "> | |||||
<img class="img-responsive" src="{{ .Site.Data.about2.image | absURL}}" alt="image"> | |||||
</div> | |||||
<div class="col-md-6"> | |||||
<div class="content-block"> | |||||
{{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }} | |||||
{{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }} | |||||
{{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }} | |||||
<div class="row"> | |||||
{{ range .Site.Data.about2.aboutItem }} | |||||
<div class="col-md-6"> | |||||
<div class="media"> | |||||
<div class="pull-left"> | |||||
{{with .icon}} <i class="{{ . }}"></i> {{ end }} | |||||
</div> | |||||
<div class="media-body"> | |||||
{{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }} | |||||
{{ with .content}} <p>{{ . }}</p> {{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /about 2 -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Data.blog.enable}} | |||||
{{"<!-- Start Blog Section -->" | safeHTML}} | |||||
<section id="blog" class="section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center wow fadeInDown"> | |||||
<h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} </span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
<div class="clearfix"> | |||||
{{ range .Data.Pages }} | |||||
{{"<!-- single blog post -->" | safeHTML}} | |||||
<article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms"> | |||||
<div class="post-block"> | |||||
<div class="media-wrapper"> | |||||
{{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }} | |||||
</div> | |||||
<div class="content"> | |||||
<h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3> | |||||
<p>{{ .Summary }}</p> | |||||
<a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a> | |||||
</div> | |||||
</div> | |||||
</article> | |||||
{{"<!-- /single blog post -->" | safeHTML}} | |||||
{{ end }} | |||||
</div> | |||||
<div class="all-post text-center"> | |||||
<a class="btn btn-main" href="/blog">View All Post</a> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /blog -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Data.contact.enable }} | |||||
{{"<!-- Srart Contact Us -->" | safeHTML}} | |||||
<section id="contact-us" class="contact-us section-bg"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center wow fadeIn" data-wow-duration="500ms"> | |||||
<h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.heading }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
{{"<!-- Contact Details -->" | safeHTML}} | |||||
<div class="contact-info col-md-6 wow fadeInUp" data-wow-duration="500ms"> | |||||
{{ with .Site.Data.contact.title }}<h3>{{ . }}</h3> {{ end }} | |||||
{{ with .Site.Data.contact.content }} <p> {{ . }} </p> {{ end }} | |||||
<div class="contact-details"> | |||||
{{ range .Site.Data.contact.contactDetails }} | |||||
<div class="con-info clearfix"> | |||||
<i class="{{ .icon }}"></i> | |||||
<span>{{ .info }}</span> | |||||
</div> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
{{"<!-- Contact Form -->" | safeHTML}} | |||||
<div class="contact-form col-md-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms"> | |||||
<form id="contact-form" method="post" action="sendmail.php" role="form"> | |||||
<div class="form-group"> | |||||
<input type="text" placeholder="Your Name" class="form-control" name="name" id="name"> | |||||
</div> | |||||
<div class="form-group"> | |||||
<input type="email" placeholder="Your Email" class="form-control" name="email" id="email"> | |||||
</div> | |||||
<div class="form-group"> | |||||
<input type="text" placeholder="Subject" class="form-control" name="subject" id="subject"> | |||||
</div> | |||||
<div class="form-group"> | |||||
<textarea rows="6" placeholder="Message" class="form-control" name="message" id="message"></textarea> | |||||
</div> | |||||
<div id="mail-success" class="success"> | |||||
Thank you. The Mailman is on His Way :) | |||||
</div> | |||||
<div id="mail-fail" class="error"> | |||||
Sorry, don't know what happened. Try later :( | |||||
</div> | |||||
<div id="cf-submit"> | |||||
<input type="submit" id="contact-submit" class="btn btn-transparent" value="Submit"> | |||||
</div> | |||||
</form> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{"<!-- Google Map -->" | safeHTML}} | |||||
<div class="google-map"> | |||||
<div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} | |||||
{{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /contact -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Params.counter.enable }} | |||||
{{"<!-- Start Counter Section -->" | safeHTML}} | |||||
<section id="counter" class="parallax-section bg-1 section overly" style='background-image: url("{{ .Site.Params.counter.bgImage | absURL }}")'> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{ range .Site.Params.counter.counterItem }} | |||||
<div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInDown" data-wow-duration="500ms"> | |||||
<div class="counters-item"> | |||||
<i class="{{ .icon }}"></i> | |||||
<span data-speed="3000" data-to="{{ .count }}">{{ .count }}</span> | |||||
<h3>{{ .title }}</h3> | |||||
</div> | |||||
</div> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /Counter Section -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Params.cta.enable}} | |||||
{{"<!-- Start Call To Action -->" | safeHTML}} | |||||
<section class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .Site.Params.counter.bgImage | absURL }}")'> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
<div class="col-md-12 text-center"> | |||||
{{ with .Site.Params.cta.title}} <h2>{{ . }}</h2> {{ end }} | |||||
{{ with .Site.Params.cta.content }} <p>{{ . }}</p> {{ end }} | |||||
<a href="{{ .Site.Params.cta.btnURL }}" class="btn btn-main">{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- Start Services Section -->" | safeHTML}} | |||||
{{ end }} |
{{"<!-- end Contact Area -->" | safeHTML}} | |||||
<footer id="footer" class="bg-one"> | |||||
<div class="container"> | |||||
<div class="row wow fadeInUp" data-wow-duration="500ms"> | |||||
<div class="col-lg-12"> | |||||
{{"<!-- Footer Social Links -->" | safeHTML}} | |||||
<div class="social-icon"> | |||||
<ul class="list-inline"> | |||||
{{ range .Site.Params.footer.socialIcon }} | |||||
<li><a href="#"><i class="{{ .icon }}"></i></a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</div> | |||||
{{"<!-- copyright -->" | safeHTML}} | |||||
<div class="copyright text-center"> | |||||
<a href="{{ .Site.BaseURL | absURL }}"> | |||||
<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" /> | |||||
</a> | |||||
<br> | |||||
<p>Design And Developed by <a href="{{ .Site.Params.footer.copyrightURL | absURL }}"> {{ with .Site.Params.footer.copyright }} {{ . }} {{ end }} </a>. Copyright © <script> | |||||
document.write(new Date().getFullYear()) | |||||
</script>. All Rights Reserved.</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</footer> | |||||
{{"<!-- /footer -->" | safeHTML}} | |||||
{{"<!-- Essential Scripts -->" | safeHTML}} | |||||
{{"<!-- Main jQuery -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/jquery/dist/jquery.min.js" | absURL}}"></script> | |||||
{{"<!-- Bootstrap 3.1 -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/bootstrap/dist/js/bootstrap.min.js" | absURL}}"></script> | |||||
{{"<!-- Slick Carousel -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/slick-carousel/slick/slick.min.js" | absURL}}"></script> | |||||
{{"<!-- Portfolio Filtering -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/mixitup/mixitup.min.js" | absURL}}"></script> | |||||
{{"<!-- Smooth Scroll -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/smooth-scroll/dist/js/smooth-scroll.min.js" | absURL}}"></script> | |||||
{{"<!-- Magnific popup -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/magnific-popup/dist/jquery.magnific-popup.min.js" | absURL}}"></script> | |||||
{{"<!-- Google Map API -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ .Site.Params.gmapAPI | absURL }}"></script> | |||||
{{"<!-- Sticky Nav -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/Sticky/jquery.sticky.js" | absURL}}"></script> | |||||
{{"<!-- Number Counter Script -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/count-to/jquery.countTo.js" | absURL}}"></script> | |||||
{{"<!-- wow.min Script -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/wow/dist/wow.min.js" | absURL}}"></script> | |||||
{{"<!-- Custom js -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "js/script.js" | absURL}}"></script> | |||||
</body> | |||||
</html> |
<!DOCTYPE html> | |||||
<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}"> | |||||
<head> | |||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |||||
<meta name="description" content="Meghna One page parallax responsive HTML Template "> | |||||
<meta name="author" content="Themefisher"> | |||||
{{ "<!-- Mobile Specific Meta -->" | safeHTML }} | |||||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
{{ .Hugo.Generator }} | |||||
<title> {{ .Title }} </title> | |||||
{{"<!-- Favicon -->" |safeHTML}} | |||||
<link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon.ico" | absURL }}"/> | |||||
{{"<!-- CSS -->"|safeHTML}} | |||||
{{"<!-- Fontawesome Icon font -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"plugins/themefisher-font/style.css" | absURL}}"> | |||||
{{"<!-- bootstrap.min css -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"plugins/bootstrap/dist/css/bootstrap.min.css"|absURL}}"> | |||||
{{"<!-- Animate.css -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"plugins/animate-css/animate.css"|absURL}}"> | |||||
{{"<!-- Magnific popup css -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"plugins/magnific-popup/dist/magnific-popup.css"|absURL}}"> | |||||
{{"<!-- Slick Carousel -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick.css"|absURL}}"> | |||||
<link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick-theme.css"|absURL}}"> | |||||
{{"<!-- Main Stylesheet -->"|safeHTML}} | |||||
<link rel="stylesheet" href="{{"css/style.css"|absURL}}"> | |||||
</head> | |||||
{{"<!-- body start -->" | safeHTML}} | |||||
<body id="body" data-spy="scroll" data-target=".navbar" data-offset="50"></body> |
{{ if .Site.Params.banner.enable }} | |||||
{{"<!-- Welcome Slider-->" | safeHTML}} | |||||
<section class="hero-area" style='background-image: url("{{ .Site.Params.banner.bgImage | absURL }}");'> | |||||
<div class="block"> | |||||
<div class="video-button"> | |||||
{{with .Site.Params.banner.icon}} <i class="{{ . }}"></i> {{ end }} | |||||
</div> | |||||
{{with .Site.Params.banner.heading}} <h1>{{ . }}</h1>{{ end }} | |||||
{{with .Site.Params.banner.content}} <p>{{ . }}</p> {{ end }} | |||||
{{ if .Site.Params.banner.btn}} | |||||
<a data-scroll href="{{ .Site.Params.banner.btnURL}}" class="btn btn-transparent">{{ .Site.Params.banner.btnText}}</a> | |||||
{{ end }} | |||||
</div> | |||||
</section> | |||||
{{"<!-- /Welcome Slider-->" | safeHTML}} | |||||
{{end}} |
{{"<!-- Fixed Navigation -->" | safeHTML}} | |||||
<header id="navigation" class="navbar navigation"> | |||||
<div class="container"> | |||||
<div class="navbar-header"> | |||||
{{"<!-- responsive nav button -->" | safeHTML}} | |||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |||||
<span class="sr-only">Toggle navigation</span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
</button> | |||||
{{"<!-- /responsive nav button -->" | safeHTML}} | |||||
{{"<!-- logo -->" | safeHTML}} | |||||
<a class="navbar-brand logo" href="{{ .Site.BaseURL | absURL }}"> | |||||
<img src="{{ .Site.Params.logo | absURL }}" alt="Logo" /> | |||||
</a> | |||||
{{"<!-- /logo -->" | safeHTML}} | |||||
</div> | |||||
{{"<!-- main nav -->" | safeHTML}} | |||||
<nav class="collapse navbar-collapse navbar-right" role="Navigation"> | |||||
<ul id="nav" class="nav navbar-nav navigation-menu"> | |||||
<li><a data-scroll href="#body">{{ with .Site.Params.home }}{{ . }}{{ end }}</a></li> | |||||
{{ range .Site.Menus.nav }} | |||||
<li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
{{"<!-- /main nav -->" | safeHTML}} | |||||
</div> | |||||
</header> | |||||
{{"<!-- End Fixed Navigation -->" | safeHTML}} |
{{ if .Site.Data.portfolio.enable}} | |||||
{{"<!-- Portfolio Section -->" | safeHTML}} | |||||
<section class="portfolio section" id="portfolio"> | |||||
<div class="container"> | |||||
<div class="row "> | |||||
<div class="col-lg-12"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center"> | |||||
<h2> {{ with .Site.Data.portfolio.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.portfolio.headingSpan }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
</div> | |||||
</div> | |||||
<div class="row"> | |||||
<div class="col-md-12"> | |||||
<div class="portfolio-filter"> | |||||
<button type="button" data-filter="all">All</button> | |||||
{{ range .Site.Data.portfolio.filterList }} | |||||
<button type="button" data-filter=".{{ .filterType }}">{{ .filterTitle }}</button> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="row portfolio-items-wrapper"> | |||||
{{"<!-- portfolio item -->" | safeHTML}} | |||||
{{ range .Site.Data.portfolio.portfolioItem }} | |||||
<div class="mix col-md-4 {{ .types }}"> | |||||
<div class="portfolio-block"> | |||||
<img class="img-responsive" src="{{ .image | absURL}}" alt="work-image"> | |||||
<div class="caption"> | |||||
<a class="search-icon image-popup" data-effect="mfp-with-zoom" href="{{ .image | absURL}}" | |||||
data-lightbox="image-1"> | |||||
<i class="{{ .icon }}"></i> | |||||
</a> | |||||
<h4><a href="{{ .URL | absURL }}">{{ .title }}</a></h4> | |||||
<p>{{ .description }}</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /Portfolio -->" | safeHTML}} | |||||
{{ end }} |
{{"<!-- Start Preloader -->"| safeHTML}} | |||||
<div id="preloader"> | |||||
<div class="preloader"> | |||||
<div class="sk-cube-grid"> | |||||
<div class="sk-cube sk-cube1"></div> | |||||
<div class="sk-cube sk-cube2"></div> | |||||
<div class="sk-cube sk-cube3"></div> | |||||
<div class="sk-cube sk-cube4"></div> | |||||
<div class="sk-cube sk-cube5"></div> | |||||
<div class="sk-cube sk-cube6"></div> | |||||
<div class="sk-cube sk-cube7"></div> | |||||
<div class="sk-cube sk-cube8"></div> | |||||
<div class="sk-cube sk-cube9"></div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{"<!-- End Preloader -->"| safeHTML}} |
{{ if .Site.Data.pricing.enable}} | |||||
{{"<!-- Start Pricing section -->" | safeHTML}} | |||||
<section id="pricing" class="pricing section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center wow fadeInDown" data-wow-duration="500ms"> | |||||
<h2>{{ with .Site.Data.pricing.heading }} {{ . }} {{ end }}<span class="color"> {{ with .Site.Data.pricing.headingSpan }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
{{ range .Site.Data.pricing.pricingTable }} | |||||
{{"<!-- single pricing table -->" | safeHTML}} | |||||
<div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInUp" data-wow-duration="200ms"> | |||||
<div class="price-item"> | |||||
{{"<!-- plan name & value -->" | safeHTML}} | |||||
<div class="price-title"> | |||||
<h3>{{ .title }}</h3> | |||||
<p><strong class="value">{{ .price }}</strong>/ {{ .time }}</p> | |||||
</div> | |||||
{{"<!-- plan description -->" | safeHTML}} | |||||
<ul> | |||||
{{ range .plan }} | |||||
<li>{{ .planDetails }}</li> | |||||
{{ end }} | |||||
</ul> | |||||
{{"<!-- signup button -->" | safeHTML}} | |||||
<a class="btn btn-transparent" href="{{ .btnURL | absURL}}">{{ .btnText }}</a> | |||||
</div> | |||||
</div> | |||||
{{"<!-- end single pricing table -->" | safeHTML}} | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /pricing -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Data.service.enable}} | |||||
{{"<!-- service -->" | safeHTML }} | |||||
<section id="services" class="bg-one section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML }} | |||||
<div class="title text-center wow fadeIn" data-wow-duration="500ms"> | |||||
<h2>{{ with .Site.Data.service.heading }} {{ . }} {{ end }}<span class="color">{{ with .Site.Data.service.headingSpan }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML }} | |||||
{{ range .Site.Data.service.serviceItem}} | |||||
{{"<!-- Single Service Item -->" | safeHTML }} | |||||
<article class="col-md-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="500ms"> | |||||
<div class="service-block text-center"> | |||||
<div class="service-icon text-center"> | |||||
<i class="{{ .icon }}"></i> | |||||
</div> | |||||
<h3>{{ .title }}</h3> | |||||
<p>{{ .content }}</p> | |||||
</div> | |||||
</article> | |||||
{{"<!-- End Single Service Item -->" | safeHTML }} | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /service -->" | safeHTML }} | |||||
{{ end }} |
{{ if .Site.Data.skill.enable }} | |||||
{{"<!-- Skills -->" | safeHTML }} | |||||
<section id="team-skills" class="parallax-section section section-bg overly"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML }} | |||||
<div class="col-md-12"> | |||||
<div class="title text-center"> | |||||
<h2>{{ with .Site.Data.skill.heading}} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.skill.headingSpan }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML }} | |||||
</div> | |||||
<div class="row"> | |||||
<div class="col-md-6"> | |||||
{{ with .Site.Data.skill.title }} <h2> {{ . }} </h2> {{ end }} | |||||
{{ with .Site.Data.skill.content }} <p> {{ . }} </p> {{ end }} | |||||
<img class="img-responsive" src="{{ .Site.Data.skill.image | absURL }}" alt="image"> | |||||
</div> | |||||
<div class="col-md-6"> | |||||
<ul class="skill-bar"> | |||||
{{ range .Site.Data.skill.skillItem }} | |||||
<li> | |||||
<p><span>{{ .itemNumber }}</span>{{ .itemName }}</p> | |||||
<div class="progress"> | |||||
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" | |||||
aria-valuemax="100" style="width:{{ .itemPercent }}"> | |||||
</div> | |||||
</div> | |||||
</li> | |||||
{{ end }} | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /skill -->" | safeHTML }} | |||||
{{ end }} |
{{ if .Site.Data.team.enable}} | |||||
{{"<!-- Start Our Team -->" | safeHTML}} | |||||
<section id="our-team" class="section"> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
{{"<!-- section title -->" | safeHTML}} | |||||
<div class="title text-center wow fadeInUp" data-wow-duration="500ms"> | |||||
<h2>{{ with .Site.Data.team.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.team.headingSpan }} {{ . }} {{ end }}</span></h2> | |||||
<div class="border"></div> | |||||
</div> | |||||
{{"<!-- /section title -->" | safeHTML}} | |||||
{{ range .Site.Data.team.teamMember}} | |||||
{{"<!-- team member -->" | safeHTML}} | |||||
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeInDown" data-wow-duration="500ms"> | |||||
<div class="team-member"> | |||||
<div class="member-photo"> | |||||
{{"<!-- member photo -->" | safeHTML}} | |||||
<img class="img-responsive" src="{{ .image | absURL }}" alt="Meghna"> | |||||
{{"<!-- member social profile -->" | safeHTML}} | |||||
<div class="mask"> | |||||
<ul class="list-inline"> | |||||
{{ range .socialIcon }} | |||||
<li><a href="#"><i class="{{ .icon }}"></i></a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
{{"<!-- member name & designation -->" | safeHTML}} | |||||
<div class="member-meta"> | |||||
<h4>{{ .name }}</h4> | |||||
<span>{{ .designation }}</span> | |||||
<p>{{ .description }}</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{"<!-- end team member -->" | safeHTML}} | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /team -->" | safeHTML}} | |||||
{{ end }} |
{{ if .Site.Data.testimonial.enable }} | |||||
{{"<!-- Start Testimonial -->" | safeHTML}} | |||||
<section id="testimonial" class="testimonial overly section bg-2" style='background-image: url("{{ .Site.Data.testimonial.bgImage | absURL }}")'> | |||||
<div class="container"> | |||||
<div class="row"> | |||||
<div class="col-lg-12"> | |||||
{{"<!-- testimonial wrapper -->" | safeHTML}} | |||||
<div id="testimonials" class="wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms"> | |||||
{{ range .Site.Data.testimonial.testimonialItem }} | |||||
{{"<!-- testimonial single -->" | safeHTML}} | |||||
<div class="item text-center"> | |||||
{{"<!-- client photo -->" | safeHTML}} | |||||
<div class="client-thumb"> | |||||
<img src="{{ .image | absURL }}" class="img-responsive" alt="Meghna"> | |||||
</div> | |||||
{{"<!-- client info -->" | safeHTML}} | |||||
<div class="client-info"> | |||||
<div class="client-meta"> | |||||
<h3>{{ .name }}</h3> | |||||
<span>{{ .date }}</span> | |||||
</div> | |||||
<div class="client-comment"> | |||||
<p>{{ .content }}</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{"<!-- /testimonial single -->" | safeHTML}} | |||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</section> | |||||
{{"<!-- /testimonial -->" | safeHTML}} | |||||
{{ end }} |
jQuery(function ($) { "use strict"; | |||||
/* ========================================================================= */ | |||||
/* Page Preloader | |||||
/* ========================================================================= */ | |||||
window.onload = function () { | |||||
document.getElementById('preloader').style.display = 'none'; | |||||
} | |||||
/* ========================================================================= */ | |||||
/* Post image slider | |||||
/* ========================================================================= */ | |||||
$("#post-thumb, #gallery-post").slick({ | |||||
infinite: true, | |||||
arrows:false, | |||||
autoplay: true, | |||||
autoplaySpeed: 4000 | |||||
}); | |||||
$("#features").slick({ | |||||
infinite: true, | |||||
arrows:false, | |||||
autoplay: true, | |||||
autoplaySpeed: 4000 | |||||
}); | |||||
/* ========================================================================= */ | |||||
/* Menu item highlighting | |||||
/* ========================================================================= */ | |||||
$("#navigation").sticky({ | |||||
topSpacing : 0 | |||||
}); | |||||
/* ========================================================================= */ | |||||
/* Magnific popup | |||||
/* ========================================================================= */ | |||||
$('.image-popup').magnificPopup({ | |||||
type: 'image', | |||||
removalDelay: 160, //delay removal by X to allow out-animation | |||||
callbacks: { | |||||
beforeOpen: function () { | |||||
// just a hack that adds mfp-anim class to markup | |||||
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); | |||||
this.st.mainClass = this.st.el.attr('data-effect'); | |||||
} | |||||
}, | |||||
closeOnContentClick: true, | |||||
midClick: true, | |||||
fixedContentPos: false, | |||||
fixedBgPos: true | |||||
}); | |||||
/* ========================================================================= */ | |||||
/* Portfolio Filtering Hook | |||||
/* ========================================================================= */ | |||||
var mixer = mixitup('.portfolio-items-wrapper'); | |||||
/* ========================================================================= */ | |||||
/* Testimonial Carousel | |||||
/* ========================================================================= */ | |||||
//Init the carousel | |||||
$("#testimonials").slick({ | |||||
infinite: true, | |||||
arrows:false, | |||||
autoplay: true, | |||||
autoplaySpeed: 4000 | |||||
}); | |||||
/* ========================================================================= */ | |||||
/* Contact Form Validating | |||||
/* ========================================================================= */ | |||||
$('#contact-submit').click(function (e) { | |||||
//stop the form from being submitted | |||||
e.preventDefault(); | |||||
/* declare the variables, var error is the variable that we use on the end | |||||
to determine if there was an error or not */ | |||||
var error = false; | |||||
var name = $('#name').val(); | |||||
var email = $('#email').val(); | |||||
var subject = $('#subject').val(); | |||||
var message = $('#message').val(); | |||||
/* in the next section we do the checking by using VARIABLE.length | |||||
where VARIABLE is the variable we are checking (like name, email), | |||||
length is a JavaScript function to get the number of characters. | |||||
And as you can see if the num of characters is 0 we set the error | |||||
variable to true and show the name_error div with the fadeIn effect. | |||||
if it's not 0 then we fadeOut the div( that's if the div is shown and | |||||
the error is fixed it fadesOut. | |||||
The only difference from these checks is the email checking, we have | |||||
email.indexOf('@') which checks if there is @ in the email input field. | |||||
This JavaScript function will return -1 if no occurrence have been found.*/ | |||||
if (name.length == 0) { | |||||
var error = true; | |||||
$('#name').css("border-color", "#D8000C"); | |||||
} else { | |||||
$('#name').css("border-color", "#666"); | |||||
} | |||||
if (email.length == 0 || email.indexOf('@') == '-1') { | |||||
var error = true; | |||||
$('#email').css("border-color", "#D8000C"); | |||||
} else { | |||||
$('#email').css("border-color", "#666"); | |||||
} | |||||
if (subject.length == 0) { | |||||
var error = true; | |||||
$('#subject').css("border-color", "#D8000C"); | |||||
} else { | |||||
$('#subject').css("border-color", "#666"); | |||||
} | |||||
if (message.length == 0) { | |||||
var error = true; | |||||
$('#message').css("border-color", "#D8000C"); | |||||
} else { | |||||
$('#message').css("border-color", "#666"); | |||||
} | |||||
//now when the validation is done we check if the error variable is false (no errors) | |||||
if (error == false) { | |||||
//disable the submit button to avoid spamming | |||||
//and change the button text to Sending... | |||||
$('#contact-submit').attr({ | |||||
'disabled': 'false', | |||||
'value': 'Sending...' | |||||
}); | |||||
/* using the jquery's post(ajax) function and a lifesaver | |||||
function serialize() which gets all the data from the form | |||||
we submit it to send_email.php */ | |||||
$.post("sendmail.php", $("#contact-form").serialize(), function (result) { | |||||
//and after the ajax request ends we check the text returned | |||||
if (result == 'sent') { | |||||
//if the mail is sent remove the submit paragraph | |||||
$('#cf-submit').remove(); | |||||
//and show the mail success div with fadeIn | |||||
$('#mail-success').fadeIn(500); | |||||
} else { | |||||
//show the mail failed div | |||||
$('#mail-fail').fadeIn(500); | |||||
//re enable the submit button by removing attribute disabled and change the text back to Send The Message | |||||
$('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message'); | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
}); | |||||
// End Jquery Function | |||||
/* ========================================================================= */ | |||||
/* Animated section | |||||
/* ========================================================================= */ | |||||
var wow = new WOW( | |||||
{ | |||||
offset: 100, // distance to the element when triggering the animation (default is 0) | |||||
mobile: false // trigger animations on mobile devices (default is true) | |||||
} | |||||
); | |||||
wow.init(); | |||||
/* ========================================================================= */ | |||||
/* Smooth Scroll | |||||
/* ========================================================================= */ | |||||
var scroll = new SmoothScroll('a[href*="#"]'); | |||||
/* ========================================================================= */ | |||||
/* Google Map Customization | |||||
/* ========================================================================= */ | |||||
function initialize() { | |||||
var latitude = $('#map-canvas').attr('data-latitude'); | |||||
var longitude = $('#map-canvas').attr('data-longitude'); | |||||
var myLatLng = new google.maps.LatLng(latitude, longitude); | |||||
var roadAtlasStyles = [{ | |||||
"featureType": "landscape", | |||||
"elementType": "geometry.fill", | |||||
"stylers": [{ | |||||
"color": "#2F3238" | |||||
}] | |||||
}, { | |||||
"elementType": "labels.text.fill", | |||||
"stylers": [{ | |||||
"color": "#FFFFFF" | |||||
}] | |||||
}, { | |||||
"elementType": "labels.text.stroke", | |||||
"stylers": [{ | |||||
"visibility": "off" | |||||
}] | |||||
}, { | |||||
"featureType": "road", | |||||
"elementType": "geometry.fill", | |||||
"stylers": [{ | |||||
"color": "#50525f" | |||||
}] | |||||
}, { | |||||
"featureType": "road", | |||||
"elementType": "geometry.stroke", | |||||
"stylers": [{ | |||||
"visibility": "on" | |||||
}, { | |||||
"color": "#808080" | |||||
}] | |||||
}, { | |||||
"featureType": "poi", | |||||
"elementType": "labels", | |||||
"stylers": [{ | |||||
"visibility": "off" | |||||
}] | |||||
}, { | |||||
"featureType": "transit", | |||||
"elementType": "labels.icon", | |||||
"stylers": [{ | |||||
"visibility": "off" | |||||
}] | |||||
}, { | |||||
"featureType": "poi", | |||||
"elementType": "geometry", | |||||
"stylers": [{ | |||||
"color": "#808080" | |||||
}] | |||||
}, { | |||||
"featureType": "water", | |||||
"elementType": "geometry.fill", | |||||
"stylers": [{ | |||||
"color": "#3071a7" | |||||
}, { | |||||
"saturation": -65 | |||||
}] | |||||
}, { | |||||
"featureType": "road", | |||||
"elementType": "labels.icon", | |||||
"stylers": [{ | |||||
"visibility": "off" | |||||
}] | |||||
}, { | |||||
"featureType": "landscape", | |||||
"elementType": "geometry.stroke", | |||||
"stylers": [{ | |||||
"color": "#bbbbbb" | |||||
}] | |||||
}]; | |||||
var mapOptions = { | |||||
zoom: 14, | |||||
center: myLatLng, | |||||
disableDefaultUI: true, | |||||
scrollwheel: false, | |||||
navigationControl: false, | |||||
mapTypeControl: false, | |||||
scaleControl: false, | |||||
draggable: false, | |||||
mapTypeControlOptions: { | |||||
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas'] | |||||
} | |||||
}; | |||||
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); | |||||
var marker = new google.maps.Marker({ | |||||
position: myLatLng, | |||||
map: map, | |||||
title: '', | |||||
}); | |||||
google.maps.event.addListener(marker, 'click', function () { | |||||
infowindow.open(map, marker); | |||||
}); | |||||
var styledMapOptions = { | |||||
name: 'US Road Atlas' | |||||
}; | |||||
var usRoadMapType = new google.maps.StyledMapType( | |||||
roadAtlasStyles, styledMapOptions); | |||||
map.mapTypes.set('roadatlas', usRoadMapType); | |||||
map.setMapTypeId('roadatlas'); | |||||
} | |||||
google.maps.event.addDomListener(window, "load", initialize); | |||||
// Sticky Plugin v1.0.3 for jQuery | |||||
// ============= | |||||
// Author: Anthony Garand | |||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) | |||||
// Improvements by Leonardo C. Daronco (daronco) | |||||
// Created: 02/14/2011 | |||||
// Date: 07/20/2015 | |||||
// Website: http://stickyjs.com/ | |||||
// Description: Makes an element on the page stick on the screen as you scroll | |||||
// It will only set the 'top' and 'position' of your element, you | |||||
// might need to adjust the width in some cases. | |||||
(function (factory) { | |||||
if (typeof define === 'function' && define.amd) { | |||||
// AMD. Register as an anonymous module. | |||||
define(['jquery'], factory); | |||||
} else if (typeof module === 'object' && module.exports) { | |||||
// Node/CommonJS | |||||
module.exports = factory(require('jquery')); | |||||
} else { | |||||
// Browser globals | |||||
factory(jQuery); | |||||
} | |||||
}(function ($) { | |||||
var slice = Array.prototype.slice; // save ref to original slice() | |||||
var splice = Array.prototype.splice; // save ref to original slice() | |||||
var defaults = { | |||||
topSpacing: 0, | |||||
bottomSpacing: 0, | |||||
className: 'is-sticky', | |||||
wrapperClassName: 'sticky-wrapper', | |||||
center: false, | |||||
getWidthFrom: '', | |||||
widthFromWrapper: true, // works only when .getWidthFrom is empty | |||||
responsiveWidth: false | |||||
}, | |||||
$window = $(window), | |||||
$document = $(document), | |||||
sticked = [], | |||||
windowHeight = $window.height(), | |||||
scroller = function() { | |||||
var scrollTop = $window.scrollTop(), | |||||
documentHeight = $document.height(), | |||||
dwh = documentHeight - windowHeight, | |||||
extra = (scrollTop > dwh) ? dwh - scrollTop : 0; | |||||
for (var i = 0, l = sticked.length; i < l; i++) { | |||||
var s = sticked[i], | |||||
elementTop = s.stickyWrapper.offset().top, | |||||
etse = elementTop - s.topSpacing - extra; | |||||
//update height in case of dynamic content | |||||
s.stickyWrapper.css('height', s.stickyElement.outerHeight()); | |||||
if (scrollTop <= etse) { | |||||
if (s.currentTop !== null) { | |||||
s.stickyElement | |||||
.css({ | |||||
'width': '', | |||||
'position': '', | |||||
'top': '' | |||||
}); | |||||
s.stickyElement.parent().removeClass(s.className); | |||||
s.stickyElement.trigger('sticky-end', [s]); | |||||
s.currentTop = null; | |||||
} | |||||
} | |||||
else { | |||||
var newTop = documentHeight - s.stickyElement.outerHeight() | |||||
- s.topSpacing - s.bottomSpacing - scrollTop - extra; | |||||
if (newTop < 0) { | |||||
newTop = newTop + s.topSpacing; | |||||
} else { | |||||
newTop = s.topSpacing; | |||||
} | |||||
if (s.currentTop !== newTop) { | |||||
var newWidth; | |||||
if (s.getWidthFrom) { | |||||
newWidth = $(s.getWidthFrom).width() || null; | |||||
} else if (s.widthFromWrapper) { | |||||
newWidth = s.stickyWrapper.width(); | |||||
} | |||||
if (newWidth == null) { | |||||
newWidth = s.stickyElement.width(); | |||||
} | |||||
s.stickyElement | |||||
.css('width', newWidth) | |||||
.css('position', 'fixed') | |||||
.css('top', newTop); | |||||
s.stickyElement.parent().addClass(s.className); | |||||
if (s.currentTop === null) { | |||||
s.stickyElement.trigger('sticky-start', [s]); | |||||
} else { | |||||
// sticky is started but it have to be repositioned | |||||
s.stickyElement.trigger('sticky-update', [s]); | |||||
} | |||||
if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) { | |||||
// just reached bottom || just started to stick but bottom is already reached | |||||
s.stickyElement.trigger('sticky-bottom-reached', [s]); | |||||
} else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) { | |||||
// sticky is started && sticked at topSpacing && overflowing from top just finished | |||||
s.stickyElement.trigger('sticky-bottom-unreached', [s]); | |||||
} | |||||
s.currentTop = newTop; | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
resizer = function() { | |||||
windowHeight = $window.height(); | |||||
for (var i = 0, l = sticked.length; i < l; i++) { | |||||
var s = sticked[i]; | |||||
var newWidth = null; | |||||
if (s.getWidthFrom) { | |||||
if (s.responsiveWidth) { | |||||
newWidth = $(s.getWidthFrom).width(); | |||||
} | |||||
} else if(s.widthFromWrapper) { | |||||
newWidth = s.stickyWrapper.width(); | |||||
} | |||||
if (newWidth != null) { | |||||
s.stickyElement.css('width', newWidth); | |||||
} | |||||
} | |||||
}, | |||||
methods = { | |||||
init: function(options) { | |||||
var o = $.extend({}, defaults, options); | |||||
return this.each(function() { | |||||
var stickyElement = $(this); | |||||
var stickyId = stickyElement.attr('id'); | |||||
var stickyHeight = stickyElement.outerHeight(); | |||||
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName; | |||||
var wrapper = $('<div></div>') | |||||
.attr('id', wrapperId) | |||||
.addClass(o.wrapperClassName); | |||||
stickyElement.wrapAll(wrapper); | |||||
var stickyWrapper = stickyElement.parent(); | |||||
if (o.center) { | |||||
stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); | |||||
} | |||||
if (stickyElement.css("float") === "right") { | |||||
stickyElement.css({"float":"none"}).parent().css({"float":"right"}); | |||||
} | |||||
stickyWrapper.css('height', stickyHeight); | |||||
o.stickyElement = stickyElement; | |||||
o.stickyWrapper = stickyWrapper; | |||||
o.currentTop = null; | |||||
sticked.push(o); | |||||
}); | |||||
}, | |||||
update: scroller, | |||||
unstick: function(options) { | |||||
return this.each(function() { | |||||
var that = this; | |||||
var unstickyElement = $(that); | |||||
var removeIdx = -1; | |||||
var i = sticked.length; | |||||
while (i-- > 0) { | |||||
if (sticked[i].stickyElement.get(0) === that) { | |||||
splice.call(sticked,i,1); | |||||
removeIdx = i; | |||||
} | |||||
} | |||||
if(removeIdx !== -1) { | |||||
unstickyElement.unwrap(); | |||||
unstickyElement | |||||
.css({ | |||||
'width': '', | |||||
'position': '', | |||||
'top': '', | |||||
'float': '' | |||||
}) | |||||
; | |||||
} | |||||
}); | |||||
} | |||||
}; | |||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): | |||||
if (window.addEventListener) { | |||||
window.addEventListener('scroll', scroller, false); | |||||
window.addEventListener('resize', resizer, false); | |||||
} else if (window.attachEvent) { | |||||
window.attachEvent('onscroll', scroller); | |||||
window.attachEvent('onresize', resizer); | |||||
} | |||||
$.fn.sticky = function(method) { | |||||
if (methods[method]) { | |||||
return methods[method].apply(this, slice.call(arguments, 1)); | |||||
} else if (typeof method === 'object' || !method ) { | |||||
return methods.init.apply( this, arguments ); | |||||
} else { | |||||
$.error('Method ' + method + ' does not exist on jQuery.sticky'); | |||||
} | |||||
}; | |||||
$.fn.unstick = function(method) { | |||||
if (methods[method]) { | |||||
return methods[method].apply(this, slice.call(arguments, 1)); | |||||
} else if (typeof method === 'object' || !method ) { | |||||
return methods.unstick.apply( this, arguments ); | |||||
} else { | |||||
$.error('Method ' + method + ' does not exist on jQuery.sticky'); | |||||
} | |||||
}; | |||||
$(function() { | |||||
setTimeout(scroller, 0); | |||||
}); | |||||
})); |
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. | |||||
require('../../js/transition.js') | |||||
require('../../js/alert.js') | |||||
require('../../js/button.js') | |||||
require('../../js/carousel.js') | |||||
require('../../js/collapse.js') | |||||
require('../../js/dropdown.js') | |||||
require('../../js/modal.js') | |||||
require('../../js/tooltip.js') | |||||
require('../../js/popover.js') | |||||
require('../../js/scrollspy.js') | |||||
require('../../js/tab.js') | |||||
require('../../js/affix.js') |
(function ($) { | |||||
$.fn.countTo = function (options) { | |||||
options = options || {}; | |||||
return $(this).each(function () { | |||||
// set options for current element | |||||
var settings = $.extend({}, $.fn.countTo.defaults, { | |||||
from: $(this).data('from'), | |||||
to: $(this).data('to'), | |||||
speed: $(this).data('speed'), | |||||
refreshInterval: $(this).data('refresh-interval'), | |||||
decimals: $(this).data('decimals') | |||||
}, options); | |||||
// how many times to update the value, and how much to increment the value on each update | |||||
var loops = Math.ceil(settings.speed / settings.refreshInterval), | |||||
increment = (settings.to - settings.from) / loops; | |||||
// references & variables that will change with each update | |||||
var self = this, | |||||
$self = $(this), | |||||
loopCount = 0, | |||||
value = settings.from, | |||||
data = $self.data('countTo') || {}; | |||||
$self.data('countTo', data); | |||||
// if an existing interval can be found, clear it first | |||||
if (data.interval) { | |||||
clearInterval(data.interval); | |||||
} | |||||
data.interval = setInterval(updateTimer, settings.refreshInterval); | |||||
// initialize the element with the starting value | |||||
render(value); | |||||
function updateTimer() { | |||||
value += increment; | |||||
loopCount++; | |||||
render(value); | |||||
if (typeof(settings.onUpdate) == 'function') { | |||||
settings.onUpdate.call(self, value); | |||||
} | |||||
if (loopCount >= loops) { | |||||
// remove the interval | |||||
$self.removeData('countTo'); | |||||
clearInterval(data.interval); | |||||
value = settings.to; | |||||
if (typeof(settings.onComplete) == 'function') { | |||||
settings.onComplete.call(self, value); | |||||
} | |||||
} | |||||
} | |||||
function render(value) { | |||||
var formattedValue = settings.formatter.call(self, value, settings); | |||||
$self.text(formattedValue); | |||||
} | |||||
}); | |||||
}; | |||||
$.fn.countTo.defaults = { | |||||
from: 0, // the number the element should start at | |||||
to: 0, // the number the element should end at | |||||
speed: 1000, // how long it should take to count between the target numbers | |||||
refreshInterval: 100, // how often the element should be updated | |||||
decimals: 0, // the number of decimal places to show | |||||
formatter: formatter, // handler for formatting the value before rendering | |||||
onUpdate: null, // callback method for every time the element is updated | |||||
onComplete: null // callback method for when the element finishes updating | |||||
}; | |||||
function formatter(value, settings) { | |||||
return value.toFixed(settings.decimals); | |||||
} | |||||
}(jQuery)); |
/* | |||||
* jQuery One Page Nav Plugin | |||||
* http://github.com/davist11/jQuery-One-Page-Nav | |||||
* | |||||
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net) | |||||
* Dual licensed under the MIT and GPL licenses. | |||||
* Uses the same license as jQuery, see: | |||||
* http://jquery.org/license | |||||
* | |||||
* @version 3.0.0 | |||||
* | |||||
* Example usage: | |||||
* $('#nav').onePageNav({ | |||||
* currentClass: 'current', | |||||
* changeHash: false, | |||||
* scrollSpeed: 750 | |||||
* }); | |||||
*/ | |||||
;(function($, window, document, undefined){ | |||||
// our plugin constructor | |||||
var OnePageNav = function(elem, options){ | |||||
this.elem = elem; | |||||
this.$elem = $(elem); | |||||
this.options = options; | |||||
this.metadata = this.$elem.data('plugin-options'); | |||||
this.$win = $(window); | |||||
this.sections = {}; | |||||
this.didScroll = false; | |||||
this.$doc = $(document); | |||||
this.docHeight = this.$doc.height(); | |||||
}; | |||||
// the plugin prototype | |||||
OnePageNav.prototype = { | |||||
defaults: { | |||||
navItems: 'a', | |||||
currentClass: 'current', | |||||
changeHash: false, | |||||
easing: 'swing', | |||||
filter: '', | |||||
scrollSpeed: 750, | |||||
scrollThreshold: 0.5, | |||||
begin: false, | |||||
end: false, | |||||
scrollChange: false | |||||
}, | |||||
init: function() { | |||||
// Introduce defaults that can be extended either | |||||
// globally or using an object literal. | |||||
this.config = $.extend({}, this.defaults, this.options, this.metadata); | |||||
this.$nav = this.$elem.find(this.config.navItems); | |||||
//Filter any links out of the nav | |||||
if(this.config.filter !== '') { | |||||
this.$nav = this.$nav.filter(this.config.filter); | |||||
} | |||||
//Handle clicks on the nav | |||||
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this)); | |||||
//Get the section positions | |||||
this.getPositions(); | |||||
//Handle scroll changes | |||||
this.bindInterval(); | |||||
//Update the positions on resize too | |||||
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this)); | |||||
return this; | |||||
}, | |||||
adjustNav: function(self, $parent) { | |||||
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass); | |||||
$parent.addClass(self.config.currentClass); | |||||
}, | |||||
bindInterval: function() { | |||||
var self = this; | |||||
var docHeight; | |||||
self.$win.on('scroll.onePageNav', function() { | |||||
self.didScroll = true; | |||||
}); | |||||
self.t = setInterval(function() { | |||||
docHeight = self.$doc.height(); | |||||
//If it was scrolled | |||||
if(self.didScroll) { | |||||
self.didScroll = false; | |||||
self.scrollChange(); | |||||
} | |||||
//If the document height changes | |||||
if(docHeight !== self.docHeight) { | |||||
self.docHeight = docHeight; | |||||
self.getPositions(); | |||||
} | |||||
}, 250); | |||||
}, | |||||
getHash: function($link) { | |||||
return $link.attr('href').split('#')[1]; | |||||
}, | |||||
getPositions: function() { | |||||
var self = this; | |||||
var linkHref; | |||||
var topPos; | |||||
var $target; | |||||
self.$nav.each(function() { | |||||
linkHref = self.getHash($(this)); | |||||
$target = $('#' + linkHref); | |||||
if($target.length) { | |||||
topPos = $target.offset().top; | |||||
self.sections[linkHref] = Math.round(topPos); | |||||
} | |||||
}); | |||||
}, | |||||
getSection: function(windowPos) { | |||||
var returnValue = null; | |||||
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold); | |||||
for(var section in this.sections) { | |||||
if((this.sections[section] - windowHeight) < windowPos) { | |||||
returnValue = section; | |||||
} | |||||
} | |||||
return returnValue; | |||||
}, | |||||
handleClick: function(e) { | |||||
var self = this; | |||||
var $link = $(e.currentTarget); | |||||
var $parent = $link.parent(); | |||||
var newLoc = '#' + self.getHash($link); | |||||
if(!$parent.hasClass(self.config.currentClass)) { | |||||
//Start callback | |||||
if(self.config.begin) { | |||||
self.config.begin(); | |||||
} | |||||
//Change the highlighted nav item | |||||
self.adjustNav(self, $parent); | |||||
//Removing the auto-adjust on scroll | |||||
self.unbindInterval(); | |||||
//Scroll to the correct position | |||||
self.scrollTo(newLoc, function() { | |||||
//Do we need to change the hash? | |||||
if(self.config.changeHash) { | |||||
window.location.hash = newLoc; | |||||
} | |||||
//Add the auto-adjust on scroll back in | |||||
self.bindInterval(); | |||||
//End callback | |||||
if(self.config.end) { | |||||
self.config.end(); | |||||
} | |||||
}); | |||||
} | |||||
e.preventDefault(); | |||||
}, | |||||
scrollChange: function() { | |||||
var windowTop = this.$win.scrollTop(); | |||||
var position = this.getSection(windowTop); | |||||
var $parent; | |||||
//If the position is set | |||||
if(position !== null) { | |||||
$parent = this.$elem.find('a[href$="#' + position + '"]').parent(); | |||||
//If it's not already the current section | |||||
if(!$parent.hasClass(this.config.currentClass)) { | |||||
//Change the highlighted nav item | |||||
this.adjustNav(this, $parent); | |||||
//If there is a scrollChange callback | |||||
if(this.config.scrollChange) { | |||||
this.config.scrollChange($parent); | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
scrollTo: function(target, callback) { | |||||
var offset = $(target).offset().top; | |||||
$('html, body').animate({ | |||||
scrollTop: offset | |||||
}, this.config.scrollSpeed, this.config.easing, callback); | |||||
}, | |||||
unbindInterval: function() { | |||||
clearInterval(this.t); | |||||
this.$win.unbind('scroll.onePageNav'); | |||||
} | |||||
}; | |||||
OnePageNav.defaults = OnePageNav.prototype.defaults; | |||||
$.fn.onePageNav = function(options) { | |||||
return this.each(function() { | |||||
new OnePageNav(this, options).init(); | |||||
}); | |||||
}; | |||||
})( jQuery, window , document ); |
/* Magnific Popup CSS */ | |||||
.mfp-bg { | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1042; | |||||
overflow: hidden; | |||||
position: fixed; | |||||
background: #0b0b0b; | |||||
opacity: 0.8; } | |||||
.mfp-wrap { | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1043; | |||||
position: fixed; | |||||
outline: none !important; | |||||
-webkit-backface-visibility: hidden; } | |||||
.mfp-container { | |||||
text-align: center; | |||||
position: absolute; | |||||
width: 100%; | |||||
height: 100%; | |||||
left: 0; | |||||
top: 0; | |||||
padding: 0 8px; | |||||
box-sizing: border-box; } | |||||
.mfp-container:before { | |||||
content: ''; | |||||
display: inline-block; | |||||
height: 100%; | |||||
vertical-align: middle; } | |||||
.mfp-align-top .mfp-container:before { | |||||
display: none; } | |||||
.mfp-content { | |||||
position: relative; | |||||
display: inline-block; | |||||
vertical-align: middle; | |||||
margin: 0 auto; | |||||
text-align: left; | |||||
z-index: 1045; } | |||||
.mfp-inline-holder .mfp-content, | |||||
.mfp-ajax-holder .mfp-content { | |||||
width: 100%; | |||||
cursor: auto; } | |||||
.mfp-ajax-cur { | |||||
cursor: progress; } | |||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { | |||||
cursor: -moz-zoom-out; | |||||
cursor: -webkit-zoom-out; | |||||
cursor: zoom-out; } | |||||
.mfp-zoom { | |||||
cursor: pointer; | |||||
cursor: -webkit-zoom-in; | |||||
cursor: -moz-zoom-in; | |||||
cursor: zoom-in; } | |||||
.mfp-auto-cursor .mfp-content { | |||||
cursor: auto; } | |||||
.mfp-close, | |||||
.mfp-arrow, | |||||
.mfp-preloader, | |||||
.mfp-counter { | |||||
-webkit-user-select: none; | |||||
-moz-user-select: none; | |||||
user-select: none; } | |||||
.mfp-loading.mfp-figure { | |||||
display: none; } | |||||
.mfp-hide { | |||||
display: none !important; } | |||||
.mfp-preloader { | |||||
color: #CCC; | |||||
position: absolute; | |||||
top: 50%; | |||||
width: auto; | |||||
text-align: center; | |||||
margin-top: -0.8em; | |||||
left: 8px; | |||||
right: 8px; | |||||
z-index: 1044; } | |||||
.mfp-preloader a { | |||||
color: #CCC; } | |||||
.mfp-preloader a:hover { | |||||
color: #FFF; } | |||||
.mfp-s-ready .mfp-preloader { | |||||
display: none; } | |||||
.mfp-s-error .mfp-content { | |||||
display: none; } | |||||
button.mfp-close, | |||||
button.mfp-arrow { | |||||
overflow: visible; | |||||
cursor: pointer; | |||||
background: transparent; | |||||
border: 0; | |||||
-webkit-appearance: none; | |||||
display: block; | |||||
outline: none; | |||||
padding: 0; | |||||
z-index: 1046; | |||||
box-shadow: none; | |||||
touch-action: manipulation; } | |||||
button::-moz-focus-inner { | |||||
padding: 0; | |||||
border: 0; } | |||||
.mfp-close { | |||||
width: 44px; | |||||
height: 44px; | |||||
line-height: 44px; | |||||
position: absolute; | |||||
right: 0; | |||||
top: 0; | |||||
text-decoration: none; | |||||
text-align: center; | |||||
opacity: 0.65; | |||||
padding: 0 0 18px 10px; | |||||
color: #FFF; | |||||
font-style: normal; | |||||
font-size: 28px; | |||||
font-family: Arial, Baskerville, monospace; } | |||||
.mfp-close:hover, | |||||
.mfp-close:focus { | |||||
opacity: 1; } | |||||
.mfp-close:active { | |||||
top: 1px; } | |||||
.mfp-close-btn-in .mfp-close { | |||||
color: #333; } | |||||
.mfp-image-holder .mfp-close, | |||||
.mfp-iframe-holder .mfp-close { | |||||
color: #FFF; | |||||
right: -6px; | |||||
text-align: right; | |||||
padding-right: 6px; | |||||
width: 100%; } | |||||
.mfp-counter { | |||||
position: absolute; | |||||
top: 0; | |||||
right: 0; | |||||
color: #CCC; | |||||
font-size: 12px; | |||||
line-height: 18px; | |||||
white-space: nowrap; } | |||||
.mfp-arrow { | |||||
position: absolute; | |||||
opacity: 0.65; | |||||
margin: 0; | |||||
top: 50%; | |||||
margin-top: -55px; | |||||
padding: 0; | |||||
width: 90px; | |||||
height: 110px; | |||||
-webkit-tap-highlight-color: transparent; } | |||||
.mfp-arrow:active { | |||||
margin-top: -54px; } | |||||
.mfp-arrow:hover, | |||||
.mfp-arrow:focus { | |||||
opacity: 1; } | |||||
.mfp-arrow:before, | |||||
.mfp-arrow:after { | |||||
content: ''; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
margin-top: 35px; | |||||
margin-left: 35px; | |||||
border: medium inset transparent; } | |||||
.mfp-arrow:after { | |||||
border-top-width: 13px; | |||||
border-bottom-width: 13px; | |||||
top: 8px; } | |||||
.mfp-arrow:before { | |||||
border-top-width: 21px; | |||||
border-bottom-width: 21px; | |||||
opacity: 0.7; } | |||||
.mfp-arrow-left { | |||||
left: 0; } | |||||
.mfp-arrow-left:after { | |||||
border-right: 17px solid #FFF; | |||||
margin-left: 31px; } | |||||
.mfp-arrow-left:before { | |||||
margin-left: 25px; | |||||
border-right: 27px solid #3F3F3F; } | |||||
.mfp-arrow-right { | |||||
right: 0; } | |||||
.mfp-arrow-right:after { | |||||
border-left: 17px solid #FFF; | |||||
margin-left: 39px; } | |||||
.mfp-arrow-right:before { | |||||
border-left: 27px solid #3F3F3F; } | |||||
.mfp-iframe-holder { | |||||
padding-top: 40px; | |||||
padding-bottom: 40px; } | |||||
.mfp-iframe-holder .mfp-content { | |||||
line-height: 0; | |||||
width: 100%; | |||||
max-width: 900px; } | |||||
.mfp-iframe-holder .mfp-close { | |||||
top: -40px; } | |||||
.mfp-iframe-scaler { | |||||
width: 100%; | |||||
height: 0; | |||||
overflow: hidden; | |||||
padding-top: 56.25%; } | |||||
.mfp-iframe-scaler iframe { | |||||
position: absolute; | |||||
display: block; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||||
background: #000; } | |||||
/* Main image in popup */ | |||||
img.mfp-img { | |||||
width: auto; | |||||
max-width: 100%; | |||||
height: auto; | |||||
display: block; | |||||
line-height: 0; | |||||
box-sizing: border-box; | |||||
padding: 40px 0 40px; | |||||
margin: 0 auto; } | |||||
/* The shadow behind the image */ | |||||
.mfp-figure { | |||||
line-height: 0; } | |||||
.mfp-figure:after { | |||||
content: ''; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 40px; | |||||
bottom: 40px; | |||||
display: block; | |||||
right: 0; | |||||
width: auto; | |||||
height: auto; | |||||
z-index: -1; | |||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||||
background: #444; } | |||||
.mfp-figure small { | |||||
color: #BDBDBD; | |||||
display: block; | |||||
font-size: 12px; | |||||
line-height: 14px; } | |||||
.mfp-figure figure { | |||||
margin: 0; } | |||||
.mfp-bottom-bar { | |||||
margin-top: -36px; | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
width: 100%; | |||||
cursor: auto; } | |||||
.mfp-title { | |||||
text-align: left; | |||||
line-height: 18px; | |||||
color: #F3F3F3; | |||||
word-wrap: break-word; | |||||
padding-right: 36px; } | |||||
.mfp-image-holder .mfp-content { | |||||
max-width: 100%; } | |||||
.mfp-gallery .mfp-image-holder .mfp-figure { | |||||
cursor: pointer; } | |||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { | |||||
/** | |||||
* Remove all paddings around the image on small screen | |||||
*/ | |||||
.mfp-img-mobile .mfp-image-holder { | |||||
padding-left: 0; | |||||
padding-right: 0; } | |||||
.mfp-img-mobile img.mfp-img { | |||||
padding: 0; } | |||||
.mfp-img-mobile .mfp-figure:after { | |||||
top: 0; | |||||
bottom: 0; } | |||||
.mfp-img-mobile .mfp-figure small { | |||||
display: inline; | |||||
margin-left: 5px; } | |||||
.mfp-img-mobile .mfp-bottom-bar { | |||||
background: rgba(0, 0, 0, 0.6); | |||||
bottom: 0; | |||||
margin: 0; | |||||
top: auto; | |||||
padding: 3px 5px; | |||||
position: fixed; | |||||
box-sizing: border-box; } | |||||
.mfp-img-mobile .mfp-bottom-bar:empty { | |||||
padding: 0; } | |||||
.mfp-img-mobile .mfp-counter { | |||||
right: 5px; | |||||
top: 3px; } | |||||
.mfp-img-mobile .mfp-close { | |||||
top: 0; | |||||
right: 0; | |||||
width: 35px; | |||||
height: 35px; | |||||
line-height: 35px; | |||||
background: rgba(0, 0, 0, 0.6); | |||||
position: fixed; | |||||
text-align: center; | |||||
padding: 0; } } | |||||
@media all and (max-width: 900px) { | |||||
.mfp-arrow { | |||||
-webkit-transform: scale(0.75); | |||||
transform: scale(0.75); } | |||||
.mfp-arrow-left { | |||||
-webkit-transform-origin: 0; | |||||
transform-origin: 0; } | |||||
.mfp-arrow-right { | |||||
-webkit-transform-origin: 100%; | |||||
transform-origin: 100%; } | |||||
.mfp-container { | |||||
padding-left: 6px; | |||||
padding-right: 6px; } } |
{ | |||||
"name": "magnific-popup", | |||||
"version": "1.1.0", | |||||
"title": "Magnific Popup", | |||||
"description": "Lightbox and modal dialog plugin. Can display inline HTML, iframes (YouTube video, Vimeo, Google Maps), or an image gallery. Animation effects are added with CSS3 transitions. For jQuery or Zepto.", | |||||
"keywords": [ | |||||
"ecosystem:jquery", | |||||
"jquery-plugin", | |||||
"zepto", | |||||
"lightbox", | |||||
"popup", | |||||
"modal", | |||||
"window", | |||||
"dialog", | |||||
"gallery", | |||||
"jquery", | |||||
"photo", | |||||
"responsive", | |||||
"mobile" | |||||
], | |||||
"author": { | |||||
"name": "Dmitry Semenov", | |||||
"email": "diiiimaaaa@gmail.com", | |||||
"web": "http://dimsemenov.com" | |||||
}, | |||||
"license": "MIT", | |||||
"bugs": { | |||||
"url": "https://github.com/dimsemenov/Magnific-Popup/issues" | |||||
}, | |||||
"main": "dist/jquery.magnific-popup.js", | |||||
"style": "dist/magnific-popup.css", | |||||
"homepage": "http://dimsemenov.com/plugins/magnific-popup/", | |||||
"engines": { | |||||
"node": ">= 0.8.0" | |||||
}, | |||||
"scripts": { | |||||
"test": "grunt jshint" | |||||
}, | |||||
"devDependencies": { | |||||
"grunt": "~0.4.5", | |||||
"grunt-contrib-clean": "~0.6.0", | |||||
"grunt-contrib-concat": "^0.5.1", | |||||
"grunt-contrib-copy": "~0.8.1", | |||||
"grunt-contrib-cssmin": "^0.14.0", | |||||
"grunt-contrib-jshint": "~0.11.3", | |||||
"grunt-contrib-uglify": "~0.9.2", | |||||
"grunt-contrib-watch": "~0.6.1", | |||||
"grunt-jekyll": "~0.4.2", | |||||
"grunt-sass": "~1.0.0" | |||||
}, | |||||
"repository": { | |||||
"type": "git", | |||||
"url": "https://github.com/dimsemenov/Magnific-Popup.git" | |||||
} | |||||
} |
css_dir = "." | |||||
sass_dir = "." | |||||
images_dir = "." | |||||
fonts_dir = "fonts" | |||||
relative_assets = true | |||||
output_style = :compact | |||||
line_comments = false | |||||
preferred_syntax = :scss |
<?xml version="1.0" standalone="no"?> | |||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |||||
<svg xmlns="http://www.w3.org/2000/svg"> | |||||
<metadata>Generated by Fontastic.me</metadata> | |||||
<defs> | |||||
<font id="slick" horiz-adv-x="512"> | |||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/> | |||||
<missing-glyph horiz-adv-x="512" /> | |||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> | |||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> | |||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> | |||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/> | |||||
</font></defs></svg> |
@charset 'UTF-8'; | |||||
/* Slider */ | |||||
.slick-loading .slick-list | |||||
{ | |||||
background: #fff url('./ajax-loader.gif') center center no-repeat; | |||||
} | |||||
/* Icons */ | |||||
@font-face | |||||
{ | |||||
font-family: 'slick'; | |||||
font-weight: normal; | |||||
font-style: normal; | |||||
src: url('./fonts/slick.eot'); | |||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); | |||||
} | |||||
/* Arrows */ | |||||
.slick-prev, | |||||
.slick-next | |||||
{ | |||||
font-size: 0; | |||||
line-height: 0; | |||||
position: absolute; | |||||
top: 50%; | |||||
display: block; | |||||
width: 20px; | |||||
height: 20px; | |||||
padding: 0; | |||||
-webkit-transform: translate(0, -50%); | |||||
-ms-transform: translate(0, -50%); | |||||
transform: translate(0, -50%); | |||||
cursor: pointer; | |||||
color: transparent; | |||||
border: none; | |||||
outline: none; | |||||
background: transparent; | |||||
} | |||||
.slick-prev:hover, | |||||
.slick-prev:focus, | |||||
.slick-next:hover, | |||||
.slick-next:focus | |||||
{ | |||||
color: transparent; | |||||
outline: none; | |||||
background: transparent; | |||||
} | |||||
.slick-prev:hover:before, | |||||
.slick-prev:focus:before, | |||||
.slick-next:hover:before, | |||||
.slick-next:focus:before | |||||
{ | |||||
opacity: 1; | |||||
} | |||||
.slick-prev.slick-disabled:before, | |||||
.slick-next.slick-disabled:before | |||||
{ | |||||
opacity: .25; | |||||
} | |||||
.slick-prev:before, | |||||
.slick-next:before | |||||
{ | |||||
font-family: 'slick'; | |||||
font-size: 20px; | |||||
line-height: 1; | |||||
opacity: .75; | |||||
color: white; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
.slick-prev | |||||
{ | |||||
left: -25px; | |||||
} | |||||
[dir='rtl'] .slick-prev | |||||
{ | |||||
right: -25px; | |||||
left: auto; | |||||
} | |||||
.slick-prev:before | |||||
{ | |||||
content: '←'; | |||||
} | |||||
[dir='rtl'] .slick-prev:before | |||||
{ | |||||
content: '→'; | |||||
} | |||||
.slick-next | |||||
{ | |||||
right: -25px; | |||||
} | |||||
[dir='rtl'] .slick-next | |||||
{ | |||||
right: auto; | |||||
left: -25px; | |||||
} | |||||
.slick-next:before | |||||
{ | |||||
content: '→'; | |||||
} | |||||
[dir='rtl'] .slick-next:before | |||||
{ | |||||
content: '←'; | |||||
} | |||||
/* Dots */ | |||||
.slick-dotted.slick-slider | |||||
{ | |||||
margin-bottom: 30px; | |||||
} | |||||
.slick-dots | |||||
{ | |||||
position: absolute; | |||||
bottom: -25px; | |||||
display: block; | |||||
width: 100%; | |||||
padding: 0; | |||||
margin: 0; | |||||
list-style: none; | |||||
text-align: center; | |||||
} | |||||
.slick-dots li | |||||
{ | |||||
position: relative; | |||||
display: inline-block; | |||||
width: 20px; | |||||
height: 20px; | |||||
margin: 0 5px; | |||||
padding: 0; | |||||
cursor: pointer; | |||||
} | |||||
.slick-dots li button | |||||
{ | |||||
font-size: 0; | |||||
line-height: 0; | |||||
display: block; | |||||
width: 20px; | |||||
height: 20px; | |||||
padding: 5px; | |||||
cursor: pointer; | |||||
color: transparent; | |||||
border: 0; | |||||
outline: none; | |||||
background: transparent; | |||||
} | |||||
.slick-dots li button:hover, | |||||
.slick-dots li button:focus | |||||
{ | |||||
outline: none; | |||||
} | |||||
.slick-dots li button:hover:before, | |||||
.slick-dots li button:focus:before | |||||
{ | |||||
opacity: 1; | |||||
} | |||||
.slick-dots li button:before | |||||
{ | |||||
font-family: 'slick'; | |||||
font-size: 6px; | |||||
line-height: 20px; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 20px; | |||||
height: 20px; | |||||
content: '•'; | |||||
text-align: center; | |||||
opacity: .25; | |||||
color: black; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
.slick-dots li.slick-active button:before | |||||
{ | |||||
opacity: .75; | |||||
color: black; | |||||
} |
/* Slider */ | |||||
.slick-slider | |||||
{ | |||||
position: relative; | |||||
display: block; | |||||
box-sizing: border-box; | |||||
-webkit-user-select: none; | |||||
-moz-user-select: none; | |||||
-ms-user-select: none; | |||||
user-select: none; | |||||
-webkit-touch-callout: none; | |||||
-khtml-user-select: none; | |||||
-ms-touch-action: pan-y; | |||||
touch-action: pan-y; | |||||
-webkit-tap-highlight-color: transparent; | |||||
} | |||||
.slick-list | |||||
{ | |||||
position: relative; | |||||
display: block; | |||||
overflow: hidden; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.slick-list:focus | |||||
{ | |||||
outline: none; | |||||
} | |||||
.slick-list.dragging | |||||
{ | |||||
cursor: pointer; | |||||
cursor: hand; | |||||
} | |||||
.slick-slider .slick-track, | |||||
.slick-slider .slick-list | |||||
{ | |||||
-webkit-transform: translate3d(0, 0, 0); | |||||
-moz-transform: translate3d(0, 0, 0); | |||||
-ms-transform: translate3d(0, 0, 0); | |||||
-o-transform: translate3d(0, 0, 0); | |||||
transform: translate3d(0, 0, 0); | |||||
} | |||||
.slick-track | |||||
{ | |||||
position: relative; | |||||
top: 0; | |||||
left: 0; | |||||
display: block; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
.slick-track:before, | |||||
.slick-track:after | |||||
{ | |||||
display: table; | |||||
content: ''; | |||||
} | |||||
.slick-track:after | |||||
{ | |||||
clear: both; | |||||
} | |||||
.slick-loading .slick-track | |||||
{ | |||||
visibility: hidden; | |||||
} | |||||
.slick-slide | |||||
{ | |||||
display: none; | |||||
float: left; | |||||
height: 100%; | |||||
min-height: 1px; | |||||
} | |||||
[dir='rtl'] .slick-slide | |||||
{ | |||||
float: right; | |||||
} | |||||
.slick-slide img | |||||
{ | |||||
display: block; | |||||
} | |||||
.slick-slide.slick-loading img | |||||
{ | |||||
display: none; | |||||
} | |||||
.slick-slide.dragging img | |||||
{ | |||||
pointer-events: none; | |||||
} | |||||
.slick-initialized .slick-slide | |||||
{ | |||||
display: block; | |||||
} | |||||
.slick-loading .slick-slide | |||||
{ | |||||
visibility: hidden; | |||||
} | |||||
.slick-vertical .slick-slide | |||||
{ | |||||
display: block; | |||||
height: auto; | |||||
border: 1px solid transparent; | |||||
} | |||||
.slick-arrow.slick-hidden { | |||||
display: none; | |||||
} |
/*! | |||||
* smooth-scroll v12.1.5: Animate scrolling to anchor links | |||||
* (c) 2017 Chris Ferdinandi | |||||
* MIT License | |||||
* http://github.com/cferdinandi/smooth-scroll | |||||
*/ | |||||
(function (root, factory) { | |||||
if ( typeof define === 'function' && define.amd ) { | |||||
define([], (function () { | |||||
return factory(root); | |||||
})); | |||||
} else if ( typeof exports === 'object' ) { | |||||
module.exports = factory(root); | |||||
} else { | |||||
root.SmoothScroll = factory(root); | |||||
} | |||||
})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, (function (window) { | |||||
'use strict'; | |||||
// | |||||
// Feature Test | |||||
// | |||||
var supports = | |||||
'querySelector' in document && | |||||
'addEventListener' in window && | |||||
'requestAnimationFrame' in window && | |||||
'closest' in window.Element.prototype; | |||||
// | |||||
// Default settings | |||||
// | |||||
var defaults = { | |||||
// Selectors | |||||
ignore: '[data-scroll-ignore]', | |||||
header: null, | |||||
// Speed & Easing | |||||
speed: 500, | |||||
offset: 0, | |||||
easing: 'easeInOutCubic', | |||||
customEasing: null, | |||||
// Callback API | |||||
before: function () {}, | |||||
after: function () {} | |||||
}; | |||||
// | |||||
// Utility Methods | |||||
// | |||||
/** | |||||
* Merge two or more objects. Returns a new object. | |||||
* @param {Object} objects The objects to merge together | |||||
* @returns {Object} Merged values of defaults and options | |||||
*/ | |||||
var extend = function () { | |||||
// Variables | |||||
var extended = {}; | |||||
var deep = false; | |||||
var i = 0; | |||||
var length = arguments.length; | |||||
// Merge the object into the extended object | |||||
var merge = function (obj) { | |||||
for (var prop in obj) { | |||||
if (obj.hasOwnProperty(prop)) { | |||||
extended[prop] = obj[prop]; | |||||
} | |||||
} | |||||
}; | |||||
// Loop through each object and conduct a merge | |||||
for ( ; i < length; i++ ) { | |||||
var obj = arguments[i]; | |||||
merge(obj); | |||||
} | |||||
return extended; | |||||
}; | |||||
/** | |||||
* Get the height of an element. | |||||
* @param {Node} elem The element to get the height of | |||||
* @return {Number} The element's height in pixels | |||||
*/ | |||||
var getHeight = function (elem) { | |||||
return parseInt(window.getComputedStyle(elem).height, 10); | |||||
}; | |||||
/** | |||||
* Escape special characters for use with querySelector | |||||
* @param {String} id The anchor ID to escape | |||||
* @author Mathias Bynens | |||||
* @link https://github.com/mathiasbynens/CSS.escape | |||||
*/ | |||||
var escapeCharacters = function (id) { | |||||
// Remove leading hash | |||||
if (id.charAt(0) === '#') { | |||||
id = id.substr(1); | |||||
} | |||||
var string = String(id); | |||||
var length = string.length; | |||||
var index = -1; | |||||
var codeUnit; | |||||
var result = ''; | |||||
var firstCodeUnit = string.charCodeAt(0); | |||||
while (++index < length) { | |||||
codeUnit = string.charCodeAt(index); | |||||
// Note: there’s no need to special-case astral symbols, surrogate | |||||
// pairs, or lone surrogates. | |||||
// If the character is NULL (U+0000), then throw an | |||||
// `InvalidCharacterError` exception and terminate these steps. | |||||
if (codeUnit === 0x0000) { | |||||
throw new InvalidCharacterError( | |||||
'Invalid character: the input contains U+0000.' | |||||
); | |||||
} | |||||
if ( | |||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is | |||||
// U+007F, […] | |||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || | |||||
// If the character is the first character and is in the range [0-9] | |||||
// (U+0030 to U+0039), […] | |||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || | |||||
// If the character is the second character and is in the range [0-9] | |||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […] | |||||
( | |||||
index === 1 && | |||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 && | |||||
firstCodeUnit === 0x002D | |||||
) | |||||
) { | |||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point | |||||
result += '\\' + codeUnit.toString(16) + ' '; | |||||
continue; | |||||
} | |||||
// If the character is not handled by one of the above rules and is | |||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or | |||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to | |||||
// U+005A), or [a-z] (U+0061 to U+007A), […] | |||||
if ( | |||||
codeUnit >= 0x0080 || | |||||
codeUnit === 0x002D || | |||||
codeUnit === 0x005F || | |||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 || | |||||
codeUnit >= 0x0041 && codeUnit <= 0x005A || | |||||
codeUnit >= 0x0061 && codeUnit <= 0x007A | |||||
) { | |||||
// the character itself | |||||
result += string.charAt(index); | |||||
continue; | |||||
} | |||||
// Otherwise, the escaped character. | |||||
// http://dev.w3.org/csswg/cssom/#escape-a-character | |||||
result += '\\' + string.charAt(index); | |||||
} | |||||
return '#' + result; | |||||
}; | |||||
/** | |||||
* Calculate the easing pattern | |||||
* @link https://gist.github.com/gre/1650294 | |||||
* @param {String} type Easing pattern | |||||
* @param {Number} time Time animation should take to complete | |||||
* @returns {Number} | |||||
*/ | |||||
var easingPattern = function (settings, time) { | |||||
var pattern; | |||||
// Default Easing Patterns | |||||
if (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration | |||||
// Custom Easing Patterns | |||||
if (!!settings.customEasing) pattern = settings.customEasing(time); | |||||
return pattern || time; // no easing, no acceleration | |||||
}; | |||||
/** | |||||
* Determine the document's height | |||||
* @returns {Number} | |||||
*/ | |||||
var getDocumentHeight = function () { | |||||
return Math.max( | |||||
document.body.scrollHeight, document.documentElement.scrollHeight, | |||||
document.body.offsetHeight, document.documentElement.offsetHeight, | |||||
document.body.clientHeight, document.documentElement.clientHeight | |||||
); | |||||
}; | |||||
/** | |||||
* Calculate how far to scroll | |||||
* @param {Element} anchor The anchor element to scroll to | |||||
* @param {Number} headerHeight Height of a fixed header, if any | |||||
* @param {Number} offset Number of pixels by which to offset scroll | |||||
* @returns {Number} | |||||
*/ | |||||
var getEndLocation = function (anchor, headerHeight, offset) { | |||||
var location = 0; | |||||
if (anchor.offsetParent) { | |||||
do { | |||||
location += anchor.offsetTop; | |||||
anchor = anchor.offsetParent; | |||||
} while (anchor); | |||||
} | |||||
location = Math.max(location - headerHeight - offset, 0); | |||||
return location; | |||||
}; | |||||
/** | |||||
* Get the height of the fixed header | |||||
* @param {Node} header The header | |||||
* @return {Number} The height of the header | |||||
*/ | |||||
var getHeaderHeight = function (header) { | |||||
return !header ? 0 : (getHeight(header) + header.offsetTop); | |||||
}; | |||||
/** | |||||
* Bring the anchored element into focus | |||||
* @param {Node} anchor The anchor element | |||||
* @param {Number} endLocation The end location to scroll to | |||||
* @param {Boolean} isNum If true, scroll is to a position rather than an element | |||||
*/ | |||||
var adjustFocus = function (anchor, endLocation, isNum) { | |||||
// Don't run if scrolling to a number on the page | |||||
if (isNum) return; | |||||
// Otherwise, bring anchor element into focus | |||||
anchor.focus(); | |||||
if (document.activeElement.id !== anchor.id) { | |||||
anchor.setAttribute('tabindex', '-1'); | |||||
anchor.focus(); | |||||
anchor.style.outline = 'none'; | |||||
} | |||||
window.scrollTo(0 , endLocation); | |||||
}; | |||||
/** | |||||
* Check to see if user prefers reduced motion | |||||
* @param {Object} settings Script settings | |||||
*/ | |||||
var reduceMotion = function (settings) { | |||||
if ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) { | |||||
return true; | |||||
} | |||||
return false; | |||||
}; | |||||
// | |||||
// SmoothScroll Constructor | |||||
// | |||||
var SmoothScroll = function (selector, options) { | |||||
// | |||||
// Variables | |||||
// | |||||
var smoothScroll = {}; // Object for public APIs | |||||
var settings, anchor, toggle, fixedHeader, headerHeight, eventTimeout, animationInterval; | |||||
// | |||||
// Methods | |||||
// | |||||
/** | |||||
* Cancel a scroll-in-progress | |||||
*/ | |||||
smoothScroll.cancelScroll = function () { | |||||
// clearInterval(animationInterval); | |||||
cancelAnimationFrame(animationInterval); | |||||
}; | |||||
/** | |||||
* Start/stop the scrolling animation | |||||
* @param {Node|Number} anchor The element or position to scroll to | |||||
* @param {Element} toggle The element that toggled the scroll event | |||||
* @param {Object} options | |||||
*/ | |||||
smoothScroll.animateScroll = function (anchor, toggle, options) { | |||||
// Local settings | |||||
var animateSettings = extend(settings || defaults, options || {}); // Merge user options with defaults | |||||
// Selectors and variables | |||||
var isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false; | |||||
var anchorElem = isNum || !anchor.tagName ? null : anchor; | |||||
if (!isNum && !anchorElem) return; | |||||
var startLocation = window.pageYOffset; // Current location on the page | |||||
if (animateSettings.header && !fixedHeader) { | |||||
// Get the fixed header if not already set | |||||
fixedHeader = document.querySelector( animateSettings.header ); | |||||
} | |||||
if (!headerHeight) { | |||||
// Get the height of a fixed header if one exists and not already set | |||||
headerHeight = getHeaderHeight(fixedHeader); | |||||
} | |||||
var endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof animateSettings.offset === 'function' ? animateSettings.offset() : animateSettings.offset), 10)); // Location to scroll to | |||||
var distance = endLocation - startLocation; // distance to travel | |||||
var documentHeight = getDocumentHeight(); | |||||
var timeLapsed = 0; | |||||
var start, percentage, position; | |||||
/** | |||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page) | |||||
* @param {Number} position Current position on the page | |||||
* @param {Number} endLocation Scroll to location | |||||
* @param {Number} animationInterval How much to scroll on this loop | |||||
*/ | |||||
var stopAnimateScroll = function (position, endLocation) { | |||||
// Get the current location | |||||
var currentLocation = window.pageYOffset; | |||||
// Check if the end location has been reached yet (or we've hit the end of the document) | |||||
if ( position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight )) { | |||||
// Clear the animation timer | |||||
smoothScroll.cancelScroll(); | |||||
// Bring the anchored element into focus | |||||
adjustFocus(anchor, endLocation, isNum); | |||||
// Run callback after animation complete | |||||
animateSettings.after(anchor, toggle); | |||||
// Reset start | |||||
start = null; | |||||
return true; | |||||
} | |||||
}; | |||||
/** | |||||
* Loop scrolling animation | |||||
*/ | |||||
var loopAnimateScroll = function (timestamp) { | |||||
if (!start) { start = timestamp; } | |||||
timeLapsed += timestamp - start; | |||||
percentage = (timeLapsed / parseInt(animateSettings.speed, 10)); | |||||
percentage = (percentage > 1) ? 1 : percentage; | |||||
position = startLocation + (distance * easingPattern(animateSettings, percentage)); | |||||
window.scrollTo(0, Math.floor(position)); | |||||
if (!stopAnimateScroll(position, endLocation)) { | |||||
window.requestAnimationFrame(loopAnimateScroll); | |||||
start = timestamp; | |||||
} | |||||
}; | |||||
/** | |||||
* Reset position to fix weird iOS bug | |||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45 | |||||
*/ | |||||
if (window.pageYOffset === 0) { | |||||
window.scrollTo( 0, 0 ); | |||||
} | |||||
// Run callback before animation starts | |||||
animateSettings.before(anchor, toggle); | |||||
// Start scrolling animation | |||||
smoothScroll.cancelScroll(); | |||||
window.requestAnimationFrame(loopAnimateScroll); | |||||
}; | |||||
/** | |||||
* Handle has change event | |||||
*/ | |||||
var hashChangeHandler = function (event) { | |||||
// Only run if there's an anchor element to scroll to | |||||
if (!anchor) return; | |||||
// Reset the anchor element's ID | |||||
anchor.id = anchor.getAttribute('data-scroll-id'); | |||||
// Scroll to the anchored content | |||||
smoothScroll.animateScroll(anchor, toggle); | |||||
// Reset anchor and toggle | |||||
anchor = null; | |||||
toggle = null; | |||||
}; | |||||
/** | |||||
* If smooth scroll element clicked, animate scroll | |||||
*/ | |||||
var clickHandler = function (event) { | |||||
// Don't run if the user prefers reduced motion | |||||
if (reduceMotion(settings)) return; | |||||
// Don't run if right-click or command/control + click | |||||
if (event.button !== 0 || event.metaKey || event.ctrlKey) return; | |||||
// Check if a smooth scroll link was clicked | |||||
toggle = event.target.closest(selector); | |||||
if (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return; | |||||
// Only run if link is an anchor and points to the current page | |||||
if (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return; | |||||
// Get the sanitized hash | |||||
var hash; | |||||
try { | |||||
hash = escapeCharacters(decodeURIComponent(toggle.hash)); | |||||
} catch(e) { | |||||
hash = escapeCharacters(toggle.hash); | |||||
} | |||||
// If the hash is empty, scroll to the top of the page | |||||
if (hash === '#') { | |||||
// Prevent default link behavior | |||||
event.preventDefault(); | |||||
// Set the anchored element | |||||
anchor = document.body; | |||||
// Save or create the ID as a data attribute and remove it (prevents scroll jump) | |||||
var id = anchor.id ? anchor.id : 'smooth-scroll-top'; | |||||
anchor.setAttribute('data-scroll-id', id); | |||||
anchor.id = ''; | |||||
// If no hash change event will happen, fire manually | |||||
// Otherwise, update the hash | |||||
if (window.location.hash.substring(1) === id) { | |||||
hashChangeHandler(); | |||||
} else { | |||||
window.location.hash = id; | |||||
} | |||||
return; | |||||
} | |||||
// Get the anchored element | |||||
anchor = document.querySelector(hash); | |||||
// If anchored element exists, save the ID as a data attribute and remove it (prevents scroll jump) | |||||
if (!anchor) return; | |||||
anchor.setAttribute('data-scroll-id', anchor.id); | |||||
anchor.id = ''; | |||||
// If no hash change event will happen, fire manually | |||||
if (toggle.hash === window.location.hash) { | |||||
event.preventDefault(); | |||||
hashChangeHandler(); | |||||
} | |||||
}; | |||||
/** | |||||
* On window scroll and resize, only run events at a rate of 15fps for better performance | |||||
*/ | |||||
var resizeThrottler = function (event) { | |||||
if (!eventTimeout) { | |||||
eventTimeout = setTimeout((function() { | |||||
eventTimeout = null; // Reset timeout | |||||
headerHeight = getHeaderHeight(fixedHeader); // Get the height of a fixed header if one exists | |||||
}), 66); | |||||
} | |||||
}; | |||||
/** | |||||
* Destroy the current initialization. | |||||
*/ | |||||
smoothScroll.destroy = function () { | |||||
// If plugin isn't already initialized, stop | |||||
if (!settings) return; | |||||
// Remove event listeners | |||||
document.removeEventListener('click', clickHandler, false); | |||||
window.removeEventListener('resize', resizeThrottler, false); | |||||
// Cancel any scrolls-in-progress | |||||
smoothScroll.cancelScroll(); | |||||
// Reset variables | |||||
settings = null; | |||||
anchor = null; | |||||
toggle = null; | |||||
fixedHeader = null; | |||||
headerHeight = null; | |||||
eventTimeout = null; | |||||
animationInterval = null; | |||||
}; | |||||
/** | |||||
* Initialize Smooth Scroll | |||||
* @param {Object} options User settings | |||||
*/ | |||||
smoothScroll.init = function (options) { | |||||
// feature test | |||||
if (!supports) return; | |||||
// Destroy any existing initializations | |||||
smoothScroll.destroy(); | |||||
// Selectors and variables | |||||
settings = extend(defaults, options || {}); // Merge user options with defaults | |||||
fixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header | |||||
headerHeight = getHeaderHeight(fixedHeader); | |||||
// When a toggle is clicked, run the click handler | |||||
document.addEventListener('click', clickHandler, false); | |||||
// Listen for hash changes | |||||
window.addEventListener('hashchange', hashChangeHandler, false); | |||||
// If window is resized and there's a fixed header, recalculate its size | |||||
if (fixedHeader) { | |||||
window.addEventListener('resize', resizeThrottler, false); | |||||
} | |||||
}; | |||||
// | |||||
// Initialize plugin | |||||
// | |||||
smoothScroll.init(options); | |||||
// | |||||
// Public APIs | |||||
// | |||||
return smoothScroll; | |||||
}; | |||||
return SmoothScroll; | |||||
})); |
/*! smooth-scroll v12.1.5 | (c) 2017 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */ | |||||
!(function(e,t){"function"==typeof define&&define.amd?define([],(function(){return t(e)})):"object"==typeof exports?module.exports=t(e):e.SmoothScroll=t(e)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(e){"use strict";var t="querySelector"in document&&"addEventListener"in e&&"requestAnimationFrame"in e&&"closest"in e.Element.prototype,n={ignore:"[data-scroll-ignore]",header:null,speed:500,offset:0,easing:"easeInOutCubic",customEasing:null,before:function(){},after:function(){}},o=function(){for(var e={},t=0,n=arguments.length;t<n;t++){var o=arguments[t];!(function(t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(o)}return e},a=function(t){return parseInt(e.getComputedStyle(t).height,10)},r=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");t>=1&&t<=31||127==t||0===a&&t>=48&&t<=57||1===a&&t>=48&&t<=57&&45===i?r+="\\"+t.toString(16)+" ":r+=t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r},i=function(e,t){var n;return"easeInQuad"===e.easing&&(n=t*t),"easeOutQuad"===e.easing&&(n=t*(2-t)),"easeInOutQuad"===e.easing&&(n=t<.5?2*t*t:(4-2*t)*t-1),"easeInCubic"===e.easing&&(n=t*t*t),"easeOutCubic"===e.easing&&(n=--t*t*t+1),"easeInOutCubic"===e.easing&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e.easing&&(n=t*t*t*t),"easeOutQuart"===e.easing&&(n=1- --t*t*t*t),"easeInOutQuart"===e.easing&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e.easing&&(n=t*t*t*t*t),"easeOutQuint"===e.easing&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e.easing&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),e.customEasing&&(n=e.customEasing(t)),n||t},u=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},c=function(e,t,n){var o=0;if(e.offsetParent)do{o+=e.offsetTop,e=e.offsetParent}while(e);return o=Math.max(o-t-n,0)},s=function(e){return e?a(e)+e.offsetTop:0},l=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))},f=function(t){return!!("matchMedia"in e&&e.matchMedia("(prefers-reduced-motion)").matches)};return function(a,d){var m,h,g,p,v,b,y,S={};S.cancelScroll=function(){cancelAnimationFrame(y)},S.animateScroll=function(t,a,r){var f=o(m||n,r||{}),d="[object Number]"===Object.prototype.toString.call(t),h=d||!t.tagName?null:t;if(d||h){var g=e.pageYOffset;f.header&&!p&&(p=document.querySelector(f.header)),v||(v=s(p));var b,y,E,I=d?t:c(h,v,parseInt("function"==typeof f.offset?f.offset():f.offset,10)),O=I-g,A=u(),C=0,w=function(n,o){var r=e.pageYOffset;if(n==o||r==o||(g<o&&e.innerHeight+r)>=A)return S.cancelScroll(),l(t,o,d),f.after(t,a),b=null,!0},Q=function(t){b||(b=t),C+=t-b,y=C/parseInt(f.speed,10),y=y>1?1:y,E=g+O*i(f,y),e.scrollTo(0,Math.floor(E)),w(E,I)||(e.requestAnimationFrame(Q),b=t)};0===e.pageYOffset&&e.scrollTo(0,0),f.before(t,a),S.cancelScroll(),e.requestAnimationFrame(Q)}};var E=function(e){h&&(h.id=h.getAttribute("data-scroll-id"),S.animateScroll(h,g),h=null,g=null)},I=function(t){if(!f()&&0===t.button&&!t.metaKey&&!t.ctrlKey&&(g=t.target.closest(a))&&"a"===g.tagName.toLowerCase()&&!t.target.closest(m.ignore)&&g.hostname===e.location.hostname&&g.pathname===e.location.pathname&&/#/.test(g.href)){var n;try{n=r(decodeURIComponent(g.hash))}catch(e){n=r(g.hash)}if("#"===n){t.preventDefault(),h=document.body;var o=h.id?h.id:"smooth-scroll-top";return h.setAttribute("data-scroll-id",o),h.id="",void(e.location.hash.substring(1)===o?E():e.location.hash=o)}h=document.querySelector(n),h&&(h.setAttribute("data-scroll-id",h.id),h.id="",g.hash===e.location.hash&&(t.preventDefault(),E()))}},O=function(e){b||(b=setTimeout((function(){b=null,v=s(p)}),66))};return S.destroy=function(){m&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",O,!1),S.cancelScroll(),m=null,h=null,g=null,p=null,v=null,b=null,y=null)},S.init=function(a){t&&(S.destroy(),m=o(n,a||{}),p=m.header?document.querySelector(m.header):null,v=s(p),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),p&&e.addEventListener("resize",O,!1))},S.init(d),S}})); |