optimize page speed

assets/css/style.css

 Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive, html5, css3
 */
 /*=== MEDIA QUERY ===*/
-@import url("https://fonts.googleapis.com/css?family=Anaheim|Quattrocento+Sans:400,700");
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400,600");
-
 html {
   background-color: #353b43;
   color: #737f8a;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #292F36;
+  background-color: #2c2f36;
   z-index: 9999;
   display: flex;
   align-items: center;

assets/js/script.js

 		$('.preloader').fadeOut(100);
 	});
 
+
+	// lazy load initialize
+	const observer = lozad(); // lazy loads elements with default selector as ".lozad"
+	observer.observe();
+
+
+
 	/* ========================================================================= */
 	/*	Magnific popup
 	/* =========================================================================  */
 	/* ========================================================================= */
 	/*	Portfolio Filtering Hook
 	/* =========================================================================  */
-
+  function filter(){
 	var containerEl = document.querySelector('.shuffle-wrapper');
 	if (containerEl) {
 		var Shuffle = window.Shuffle;
 				myShuffle.filter(input.value);
 			}
 		});
-	}
+	}}
+	$(window).on('scroll', function () {
+		filter();
+	});
 	/* ========================================================================= */
 	/*	Testimonial Carousel
 	/* =========================================================================  */
 		counter();
 	});
 
-	/* ========================================================================= */
-	/*	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)
 });

exampleSite/.forestry/front_matter/templates/author.yml

 - type: text
   name: title
   label: title
+- type: text
+  name: image
+  label: image
 - type: text
   name: email
   label: email
   - type: text
     name: icon
     label: icon
-    description: https://themify.me/themify-icons
   - type: text
     name: link
     label: link

exampleSite/.forestry/front_matter/templates/post.yml

 - type: datetime
   name: date
   label: date
+- type: text
+  name: author
+  label: author
+  description: 'Ex: John Doe'
+- type: file
+  name: image_webp
+  label: image webp
 - type: file
   name: image
   label: image
 - type: text
-  name: author
-  label: author
-- name: description
-  type: text
-  config:
-    required: false
+  name: description
   label: description
-  description: this is meta description
+  description: meta description

exampleSite/config.toml

 ############################# Plugins ##########################
 # css plugins
 [[params.plugins.css]]
-URL = "plugins/bootstrap/bootstrap.min.css"
+link = "plugins/bootstrap/bootstrap.min.css"
 [[params.plugins.css]]
-URL = "plugins/themify-icons/themify-icons.css"
+link = "plugins/themify-icons/themify-icons.css"
 [[params.plugins.css]]
-URL = "plugins/animate-css/animate.css"
+link = "plugins/animate-css/animate.css"
 [[params.plugins.css]]
-URL = "plugins/magnific-popup/magnific-popup.css"
+link = "plugins/magnific-popup/magnific-popup.css"
 [[params.plugins.css]]
-URL = "plugins/slick/slick.css"
+link = "plugins/slick/slick.css"
+[[params.plugins.css]]
+link = "https://fonts.googleapis.com/css?family=Anaheim|Quattrocento+Sans:400,700&display=swap"
 
 # js plugins
 [[params.plugins.js]]
-URL = "plugins/jquery/jquery.min.js"
+link = "plugins/jquery/jquery.min.js"
+[[params.plugins.js]]
+link = "plugins/bootstrap/bootstrap.min.js"
+[[params.plugins.js]]
+link = "plugins/slick/slick.min.js"
 [[params.plugins.js]]
-URL = "plugins/bootstrap/bootstrap.min.js"
+link = "plugins/shuffle/shuffle.min.js"
 [[params.plugins.js]]
-URL = "plugins/slick/slick.min.js"
+link = "plugins/magnific-popup/jquery.magnific-popup.min.js"
 [[params.plugins.js]]
-URL = "plugins/shuffle/shuffle.min.js"
+link = "plugins/wow/wow.min.js"
 [[params.plugins.js]]
-URL = "plugins/magnific-popup/jquery.magnific-popup.min.js"
+link = "plugins/lazy-load/lozad.min.js"
 [[params.plugins.js]]
-URL = "plugins/wow/wow.min.js"
+link = "plugins/google-map/map.js"
 
 ############################# Navigation ##################################
 [[menu.main]]
 description = "Responsive Multipurpose Parallax HTML5 Template"
 author = "Themefisher"
 # Google Analitycs
-googleAnalitycsID = "Your ID"
+google_analitycs_id = "Your ID"
 # post share
 postShare = true
 
 enable = true
 preloader = "images/logo.png"
 
+# google map
+[params.map]
+enable = true
+gmap_api = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"
+map_latitude = "51.5223477"
+map_longitude = "-0.1622023"
+map_marker = "images/marker.png"
+
 ############################# social icons ##########################
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-facebook" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-twitter-alt" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-youtube" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-linkedin" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-dribbble" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 
-[[params.social_Icon]]
+[[params.social]]
 icon = "ti-pinterest" # themify icon pack : https://themify.me/themify-icons
 link = "#"
 

exampleSite/content/english/author/john-doe.md

 ---
 title: "John Doe"
+image: ""
 email: "email2@example.org"
 social:
   - icon : "ti-facebook" # themify icon pack : https://themify.me/themify-icons

exampleSite/content/english/author/mark-dinn.md

 ---
 title: "Mark Dinn"
+image: ""
 email: "email2@example.org"
 social:
   - icon : "ti-facebook" # themify icon pack : https://themify.me/themify-icons

exampleSite/content/english/blog/installation.md

 title: "How To Setup Meghna Hugo"
 date: 2018-09-12T14:51:12+06:00
 author: Mark Dinn
+image_webp: images/blog/meghna.webp
 image: images/blog/meghna.jpg
 description : "This is meta description"
 ---

exampleSite/content/english/blog/simple-blog-post-1.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-3.webp
 image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post-2.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post-3.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-1.webp
 image: images/blog/blog-post-1.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post-4.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-3.webp
+image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post-5.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post-6.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-1.webp
 image: images/blog/blog-post-1.jpg
 author: Mark Dinn
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/simple-blog-post.md → exampleSite/content/english/blog/simple-blog-post-7.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-3.webp
+image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/english/blog/are-you-doing-the-right-way.md → exampleSite/content/english/blog/simple-blog-post-8.md

 ---
 title: "Are You Doing the Right Way"
 date: 2018-09-12T14:51:12+06:00
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
-image: images/blog/blog-post-3.jpg
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/author/john-doe.md

 ---
 title: "John Doe"
+image: ""
 email: "email2@example.org"
 social:
   - icon : "ti-facebook" # themify icon pack : https://themify.me/themify-icons

exampleSite/content/french/author/mark-dinn.md

 ---
 title: "Mark Dinn"
+image: ""
 email: "email2@example.org"
 social:
   - icon : "ti-facebook" # themify icon pack : https://themify.me/themify-icons

exampleSite/content/french/blog/installation.md

 title: "How To Setup Meghna Hugo"
 date: 2018-09-12T14:51:12+06:00
 author: Mark Dinn
+image_webp: images/blog/meghna.webp
 image: images/blog/meghna.jpg
 description : "This is meta description"
 ---

exampleSite/content/french/blog/simple-blog-post-1.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-3.webp
 image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post-2.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post-3.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-1.webp
 image: images/blog/blog-post-1.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post-4.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-3.webp
+image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post-5.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post-6.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
+image_webp: images/blog/blog-post-1.webp
 image: images/blog/blog-post-1.jpg
 author: Mark Dinn
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/simple-blog-post.md → exampleSite/content/french/blog/simple-blog-post-7.md

 ---
 title: "Simple Blog Post"
 date: 2018-09-12T12:52:36+06:00
-image: images/blog/blog-post-1.jpg
+image_webp: images/blog/blog-post-3.webp
+image: images/blog/blog-post-3.jpg
 author: John Doe
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/content/french/blog/are-you-doing-the-right-way.md → exampleSite/content/french/blog/simple-blog-post-8.md

 ---
 title: "Are You Doing the Right Way"
 date: 2018-09-12T14:51:12+06:00
+image_webp: images/blog/blog-post-2.webp
+image: images/blog/blog-post-2.jpg
 author: John Doe
-image: images/blog/blog-post-3.jpg
 description : "This is meta description"
 ---
 
-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.
+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.
 

exampleSite/data/en/about.yml

 about:
   enable : true
   title : About Us
-  about_Item :
+  about_item :
   - icon : ti-ruler-pencil # themify icon pack : https://themify.me/themify-icons
     title : We're Creative
     content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, perspiciatis eos provident laborum eum dignissimos.

exampleSite/data/en/banner.yml

 ############################### Banner ################################
 banner:
   enable : true
-  bg_Image : "images/slider/hero-area.jpg"
+  bg_image_webp : "images/backgrounds/hero-area.webp"
+  bg_image : "images/backgrounds/hero-area.jpg"
   icon : "" # themify icon pack : https://themify.me/themify-icons
   title : "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!"

exampleSite/data/en/contact.yml

   title : Contact Us
   subtitle : 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.
-  form_Action: "#" #contact form works with https://formspree.io
-  map:
-    enable : true
-    gmapAPI : "https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"
-    mapLatitude : 51.5223477
-    mapLongitude: -0.1622023
+  form_action: "#" #contact form works with https://formspree.io
 
-  contact_Details :
+  contact_details :
     - icon : ti-location-pin # themify icon pack : https://themify.me/themify-icons
       info : "Khaja Road, Bayzid, Chittagong, Bangladesh"
       

exampleSite/data/en/cta.yml

 ############################# call to action ##############################
 cta:
   enable : true
-  bg_Image : "images/backgrounds/bg-1.jpg"
+  bg_image : "images/backgrounds/bg-white-wall.jpg"
+  bg_image_webp : "images/backgrounds/bg-white-wall.webp"
   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."
   button:

exampleSite/data/en/feature.yml

 feature:
   enable : true
   image : images/about/about-business-man.jpg
+  image_webp : images/about/about-business-man.webp
   title : We’re A Digital Design Agency.
   content : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam tempora itaque, autem dolores culpa cum mollitia voluptate nesciunt voluptatibus quasi."
-  feature_Item : 
-    - icon : ti-world # themify icon pack : https://themify.me/themify-icons
-      title : SEO Optimized
+  feature_item : 
+      # feature item loop
+    - title : SEO Optimized
+      icon : ti-world # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
       
-    - icon : ti-panel # themify icon pack : https://themify.me/themify-icons
-      title : Easy Customization
+      # feature item loop
+    - title : Easy Customization
+      icon : ti-panel # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
 
-    - icon : ti-stats-up # themify icon pack : https://themify.me/themify-icons
-      title : SEO Optimized
+      # feature item loop
+    - title : SEO Optimized
+      icon : ti-stats-up # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
       
-    - icon : ti-announcement # themify icon pack : https://themify.me/themify-icons
-      title : Easy Customization
+      # feature item loop
+    - title : Easy Customization
+      icon : ti-announcement # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe

exampleSite/data/en/funfacts.yml

 ################################# funfacts ##################################
 funfacts:
   enable : true
-  bg_Image : "images/backgrounds/bg-1.jpg"
-  counter_Item:
+  bg_image : "images/backgrounds/bg-white-wall.jpg"
+  bg_image_webp : "images/backgrounds/bg-white-wall.webp"
+  counter_item:
     # counter item loop
     - title : "Happy Clients"
       icon : "ti-face-smile" # themify icon pack : https://themify.me/themify-icons

exampleSite/data/en/portfolio.yml

 portfolio:
   enable : true
   title : Our Works
-  filter_List :
-    - filter_Type : photography
-      filter_Title : Photography
-      
-    - filter_Type : design
-      filter_Title : Design
-      
-    - filter_Type : development
-      filter_Title : Development
-
-  portfolio_Item :
-    - types : ["design"]
+  portfolio_item :
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-1.jpg
-      URL : #
-      title : Tag Design
+      image_webp : images/portfolio/portfolio-1.webp
+      categories : ["design"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["development"]
+    # portfolio item loop
+    - name : Sound system
       image : images/portfolio/portfolio-2.jpg
-      URL : #
-      title : Sound system
+      image_webp : images/portfolio/portfolio-2.webp
+      categories : ["development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "development"]
+    # portfolio item loop
+    - name : Clock Product
       image : images/portfolio/portfolio-3.jpg
-      URL : #
-      title : Clock Product
+      image_webp : images/portfolio/portfolio-3.webp
+      categories : ["design", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["photography", "development"]
+    # portfolio item loop
+    - name : Bottol Label
       image : images/portfolio/portfolio-4.jpg
-      URL : #
-      title : Bottol Label
+      image_webp : images/portfolio/portfolio-4.webp
+      categories : ["photography", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design"]
+    # portfolio item loop
+    - name : Shopping Bag
       image : images/portfolio/portfolio-5.jpg
-      URL : #
-      title : Shopping Bag
+      image_webp : images/portfolio/portfolio-5.webp
+      categories : ["design"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["photography"]
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-6.jpg
-      URL : #
-      title : Tag Design
+      image_webp : images/portfolio/portfolio-6.webp
+      categories : ["photography"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["development"]
+    # portfolio item loop
+    - name : Business Card
       image : images/portfolio/portfolio-7.jpg
-      URL : #
-      title : Business Card
+      image_webp : images/portfolio/portfolio-7.webp
+      categories : ["development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "development"]
+    # portfolio item loop
+    - name : Stationary Design
       image : images/portfolio/portfolio-8.jpg
-      URL : #
-      title : Stationary Design
+      image_webp : images/portfolio/portfolio-8.webp
+      categories : ["design", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "photography"]
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-2.jpg
-      URL : #
-      title : Tag Design
-      content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      image_webp : images/portfolio/portfolio-2.webp
+      categories : ["design", "photography"]
+      content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"

exampleSite/data/en/pricing.yml

 pricing:
   enable : true
   title : Our Plans
-  pricing_Table :
+  pricing_table :
     # pricing table loop
-    - title : Free
+    - name : Free
       price : $99
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
       
     # pricing table loop
-    - title : Silver
+    - name : Silver
       price : $149
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
         
     # pricing table loop
-    - title : Gold
+    - name : Gold
       price : $199
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
         
     # pricing table loop
-    - title : Platinum
+    - name : Platinum
       price : $299
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
-        - 24/7 Tech Support
+        - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"

exampleSite/data/en/service.yml

 service:
   enable : true
   title : Our Services
-  service_Item :
-    - icon : ti-world # themify icon pack : https://themify.me/themify-icons
-      title : WordPress Theme
+  service_item :
+    # service item loop
+    - name : WordPress Theme
+      icon : ti-world # themify icon pack : https://themify.me/themify-icons
       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 : ti-layout # themify icon pack : https://themify.me/themify-icons
-      title : Responsive Design
+    # service item loop
+    - name : Responsive Design
+      icon : ti-layout # themify icon pack : https://themify.me/themify-icons
       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 : ti-blackboard # themify icon pack : https://themify.me/themify-icons
-      title : Media & Advertisement
+    # service item loop
+    - name : Media & Advertisement
+      icon : ti-blackboard # themify icon pack : https://themify.me/themify-icons
       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 : ti-palette # themify icon pack : https://themify.me/themify-icons
-      title : Graphic Design
+    # service item loop
+    - name : Graphic Design
+      icon : ti-palette # themify icon pack : https://themify.me/themify-icons
       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 : ti-package # themify icon pack : https://themify.me/themify-icons
-      title : Apps Development
+    # service item loop
+    - name : Apps Development
+      icon : ti-package # themify icon pack : https://themify.me/themify-icons
       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 : ti-pulse # themify icon pack : https://themify.me/themify-icons
-      title : Networking
+    # service item loop
+    - name : Networking
+      icon : ti-pulse # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur.

exampleSite/data/en/skill.yml

   title : Our Skills
   subtitle : 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
-  skill_Item :
+  image : images/about/company-growth.webp
+  skill_item :
+    # skill item loop
     - name :  Business Development
       percent : 90%
       
+    # skill item loop
     - name :  Analysis
       percent : 70%
       
+    # skill item loop
     - name :  Design
       percent : 80%
       
     - name :  IOS Development
       percent : 95%
       
+    # skill item loop
     - name :  Andriod Development
       percent : 75%

exampleSite/data/en/team.yml

 team:
   enable : true
   title : Our Team
-  team_Member :
+  team_member :
     # team member loop
-    - image : images/team/team-1.jpg
-      name : Abul Mal Muhit
+    - name : Abul Mal Muhit
+      image_webp : images/team/team-1.webp
+      image : images/team/team-1.jpg
       designation : CEO/Founder
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-2.jpg
-      name : Frank Miller
+    - name : Frank Miller
+      image_webp : images/team/team-2.webp
+      image : images/team/team-2.jpg
       designation : Manager
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-3.jpg
-      name : Michael Jonson
+    - name : Michael Jonson
+      image_webp : images/team/team-3.webp
+      image : images/team/team-3.jpg
       designation : Web Developer
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-4.jpg
-      name : Mo. Kha. Alamgir
+    - name : Mo. Kha. Alamgir
+      image_webp : images/team/team-4.webp
+      image : images/team/team-4.jpg
       designation : SEO Specialist
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons

exampleSite/data/en/testimonial.yml

 ################################# Testimonial #########################
 testimonial:
   enable : true
-  bg_Image : images/backgrounds/bg-2.jpg
-  testimonial_Item :
+  bg_image : images/backgrounds/bg-testimonial.jpg
+  bg_image_webp : images/backgrounds/bg-testimonial.webp
+  testimonial_item :
     # testimonial item loop
     - name : Jonathon Andrew
-      image : images/team/client-1.jpg
+      image : images/client/client-1.jpg
+      image_webp : images/client/client-1.webp
       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!
       
     # testimonial item loop
     - name : Mark Dinn
-      image : images/team/client-2.jpg
+      image : images/client/client-2.jpg
+      image_webp : images/client/client-2.webp
       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!
       
     # testimonial item loop
     - name : Lemos Kail
-      image : images/team/client-1.jpg
+      image : images/client/client-1.jpg
+      image_webp : images/client/client-1.webp
       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!

exampleSite/data/fr/about.yml

 about:
   enable : true
   title : About Us
-  about_Item :
+  about_item :
   - icon : ti-ruler-pencil # themify icon pack : https://themify.me/themify-icons
     title : We're Creative
     content : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, perspiciatis eos provident laborum eum dignissimos.

exampleSite/data/fr/banner.yml

 ############################### Banner ################################
 banner:
   enable : true
-  bg_Image : "images/slider/hero-area.jpg"
+  bg_image_webp : "images/backgrounds/hero-area.webp"
+  bg_image : "images/backgrounds/hero-area.jpg"
   icon : "" # themify icon pack : https://themify.me/themify-icons
-  title : "Découvrez la nouvelle réalité"
+  title : "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!"
   button:
     enable : true
-    label : "Explorez-nous"
+    label : "Explore Us"
     link : "#services"

exampleSite/data/fr/contact.yml

   title : Contact Us
   subtitle : 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.
-  form_Action: "#" #contact form works with https://formspree.io
+  form_action: "#" #contact form works with https://formspree.io
   map:
     enable : true
-    gmapAPI : "https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"
-    mapLatitude : 51.5223477
-    mapLongitude: -0.1622023
+    gmap_api : "https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"
+    map_latitude : 51.5223477
+    map_longitude: -0.1622023
 
-  contact_Details :
+  contact_details :
     - icon : ti-location-pin # themify icon pack : https://themify.me/themify-icons
       info : "Khaja Road, Bayzid, Chittagong, Bangladesh"
       

exampleSite/data/fr/cta.yml

 ############################# call to action ##############################
 cta:
   enable : true
-  bg_Image : "images/backgrounds/bg-1.jpg"
+  bg_image : "images/backgrounds/bg-white-wall.jpg"
+  bg_image_webp : "images/backgrounds/bg-white-wall.webp"
   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."
   button:

exampleSite/data/fr/feature.yml

 feature:
   enable : true
   image : images/about/about-business-man.jpg
+  image_webp : images/about/about-business-man.webp
   title : We’re A Digital Design Agency.
   content : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam tempora itaque, autem dolores culpa cum mollitia voluptate nesciunt voluptatibus quasi."
-  feature_Item : 
-    - icon : ti-world # themify icon pack : https://themify.me/themify-icons
-      title : SEO Optimized
+  feature_item : 
+      # feature item loop
+    - title : SEO Optimized
+      icon : ti-world # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
       
-    - icon : ti-panel # themify icon pack : https://themify.me/themify-icons
-      title : Easy Customization
+      # feature item loop
+    - title : Easy Customization
+      icon : ti-panel # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
 
-    - icon : ti-stats-up # themify icon pack : https://themify.me/themify-icons
-      title : SEO Optimized
+      # feature item loop
+    - title : SEO Optimized
+      icon : ti-stats-up # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe
       
-    - icon : ti-announcement # themify icon pack : https://themify.me/themify-icons
-      title : Easy Customization
+      # feature item loop
+    - title : Easy Customization
+      icon : ti-announcement # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus consectetur dolores repellendus eos saepe

exampleSite/data/fr/funfacts.yml

 ################################# funfacts ##################################
 funfacts:
   enable : true
-  bg_Image : "images/backgrounds/bg-1.jpg"
-  counter_Item:
+  bg_image : "images/backgrounds/bg-white-wall.jpg"
+  bg_image_webp : "images/backgrounds/bg-white-wall.webp"
+  counter_item:
     # counter item loop
     - title : "Happy Clients"
       icon : "ti-face-smile" # themify icon pack : https://themify.me/themify-icons

exampleSite/data/fr/portfolio.yml

 portfolio:
   enable : true
   title : Our Works
-  filter_List :
-    - filter_Type : photography
-      filter_Title : Photography
-      
-    - filter_Type : design
-      filter_Title : Design
-      
-    - filter_Type : development
-      filter_Title : Development
-
-  portfolio_Item :
-    - types : ["design"]
+  portfolio_item :
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-1.jpg
-      URL : #
-      title : Tag Design
+      image_webp : images/portfolio/portfolio-1.webp
+      categories : ["design"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["development"]
+    # portfolio item loop
+    - name : Sound system
       image : images/portfolio/portfolio-2.jpg
-      URL : #
-      title : Sound system
+      image_webp : images/portfolio/portfolio-2.webp
+      categories : ["development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "development"]
+    # portfolio item loop
+    - name : Clock Product
       image : images/portfolio/portfolio-3.jpg
-      URL : #
-      title : Clock Product
+      image_webp : images/portfolio/portfolio-3.webp
+      categories : ["design", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["photography", "development"]
+    # portfolio item loop
+    - name : Bottol Label
       image : images/portfolio/portfolio-4.jpg
-      URL : #
-      title : Bottol Label
+      image_webp : images/portfolio/portfolio-4.webp
+      categories : ["photography", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design"]
+    # portfolio item loop
+    - name : Shopping Bag
       image : images/portfolio/portfolio-5.jpg
-      URL : #
-      title : Shopping Bag
+      image_webp : images/portfolio/portfolio-5.webp
+      categories : ["design"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["photography"]
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-6.jpg
-      URL : #
-      title : Tag Design
+      image_webp : images/portfolio/portfolio-6.webp
+      categories : ["photography"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["development"]
+    # portfolio item loop
+    - name : Business Card
       image : images/portfolio/portfolio-7.jpg
-      URL : #
-      title : Business Card
+      image_webp : images/portfolio/portfolio-7.webp
+      categories : ["development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "development"]
+    # portfolio item loop
+    - name : Stationary Design
       image : images/portfolio/portfolio-8.jpg
-      URL : #
-      title : Stationary Design
+      image_webp : images/portfolio/portfolio-8.webp
+      categories : ["design", "development"]
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"
       
-    - types : ["design", "photography"]
+    # portfolio item loop
+    - name : Tag Design
       image : images/portfolio/portfolio-2.jpg
-      URL : #
-      title : Tag Design
-      content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      image_webp : images/portfolio/portfolio-2.webp
+      categories : ["design", "photography"]
+      content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, nemo!
+      link : "#"

exampleSite/data/fr/pricing.yml

 pricing:
   enable : true
   title : Our Plans
-  pricing_Table :
+  pricing_table :
     # pricing table loop
-    - title : Free
+    - name : Free
       price : $99
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
       
     # pricing table loop
-    - title : Silver
+    - name : Silver
       price : $149
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
         
     # pricing table loop
-    - title : Gold
+    - name : Gold
       price : $199
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
         - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"
         
     # pricing table loop
-    - title : Platinum
+    - name : Platinum
       price : $299
       unit : month
-      link : #
-      service:
+      services:
         - 1GB Disk Space
         - 10 Email Account
         - Script Installer
         - 1 GB Storage
         - 10 GB Bandwidth
-        - 24/7 Tech Support
+        - 24/7 Tech Support
+      button:
+        label : "Signup"
+        link : "#"

exampleSite/data/fr/service.yml

 service:
   enable : true
   title : Our Services
-  service_Item :
-    - icon : ti-world # themify icon pack : https://themify.me/themify-icons
-      title : WordPress Theme
+  service_item :
+    # service item loop
+    - name : WordPress Theme
+      icon : ti-world # themify icon pack : https://themify.me/themify-icons
       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 : ti-layout # themify icon pack : https://themify.me/themify-icons
-      title : Responsive Design
+    # service item loop
+    - name : Responsive Design
+      icon : ti-layout # themify icon pack : https://themify.me/themify-icons
       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 : ti-blackboard # themify icon pack : https://themify.me/themify-icons
-      title : Media & Advertisement
+    # service item loop
+    - name : Media & Advertisement
+      icon : ti-blackboard # themify icon pack : https://themify.me/themify-icons
       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 : ti-palette # themify icon pack : https://themify.me/themify-icons
-      title : Graphic Design
+    # service item loop
+    - name : Graphic Design
+      icon : ti-palette # themify icon pack : https://themify.me/themify-icons
       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 : ti-package # themify icon pack : https://themify.me/themify-icons
-      title : Apps Development
+    # service item loop
+    - name : Apps Development
+      icon : ti-package # themify icon pack : https://themify.me/themify-icons
       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 : ti-pulse # themify icon pack : https://themify.me/themify-icons
-      title : Networking
+    # service item loop
+    - name : Networking
+      icon : ti-pulse # themify icon pack : https://themify.me/themify-icons
       content : Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus.Nullam iaculis arcu at mauris dapibus consectetur.

exampleSite/data/fr/skill.yml

   title : Our Skills
   subtitle : 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
-  skill_Item :
+  image : images/about/company-growth.webp
+  skill_item :
+    # skill item loop
     - name :  Business Development
       percent : 90%
       
+    # skill item loop
     - name :  Analysis
       percent : 70%
       
+    # skill item loop
     - name :  Design
       percent : 80%
       
     - name :  IOS Development
       percent : 95%
       
+    # skill item loop
     - name :  Andriod Development
       percent : 75%

exampleSite/data/fr/team.yml

 team:
   enable : true
   title : Our Team
-  team_Member :
+  team_member :
     # team member loop
-    - image : images/team/team-1.jpg
-      name : Abul Mal Muhit
+    - name : Abul Mal Muhit
+      image_webp : images/team/team-1.webp
+      image : images/team/team-1.jpg
       designation : CEO/Founder
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-2.jpg
-      name : Frank Miller
+    - name : Frank Miller
+      image_webp : images/team/team-2.webp
+      image : images/team/team-2.jpg
       designation : Manager
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-3.jpg
-      name : Michael Jonson
+    - name : Michael Jonson
+      image_webp : images/team/team-3.webp
+      image : images/team/team-3.jpg
       designation : Web Developer
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons
           link : "#"
         
     # team member loop
-    - image : images/team/team-4.jpg
-      name : Mo. Kha. Alamgir
+    - name : Mo. Kha. Alamgir
+      image_webp : images/team/team-4.webp
+      image : images/team/team-4.jpg
       designation : SEO Specialist
       content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
-      social_Icon :
+      social :
         - icon : ti-facebook # themify icon pack : https://themify.me/themify-icons
           link : "#"
         - icon : ti-twitter-alt # themify icon pack : https://themify.me/themify-icons

exampleSite/data/fr/testimonial.yml

 ################################# Testimonial #########################
 testimonial:
   enable : true
-  bg_Image : images/backgrounds/bg-2.jpg
-  testimonial_Item :
+  bg_image : images/backgrounds/bg-testimonial.jpg
+  bg_image_webp : images/backgrounds/bg-testimonial.webp
+  testimonial_item :
     # testimonial item loop
     - name : Jonathon Andrew
-      image : images/team/client-1.jpg
+      image : images/client/client-1.jpg
+      image_webp : images/client/client-1.webp
       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!
       
     # testimonial item loop
     - name : Mark Dinn
-      image : images/team/client-2.jpg
+      image : images/client/client-2.jpg
+      image_webp : images/client/client-2.webp
       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!
       
     # testimonial item loop
     - name : Lemos Kail
-      image : images/team/client-1.jpg
+      image : images/client/client-1.jpg
+      image_webp : images/client/client-1.webp
       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!

exampleSite/i18n/en.yaml

   translation: About author
 - id: authorsPosts
   translation: Author's posts
+- id: submit
+  translation: Submit
+- id: all
+  translation: All
 - id: copyright
   translation: copyright © 2019 [gethugothemes](https://gethugothemes.com) all right reserved

exampleSite/i18n/fr.yaml

   translation: À propos de l'auteur
 - id: authorsPosts
   translation: Articles de l'auteur
+- id: submit
+  translation: Soumettre
+- id: all
+  translation: All
 - id: copyright
   translation: copyright et copie; 2019 [gethugothemes] (https://gethugothemes.com) tous droits réservés

layouts/_default/article.html

 <article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp mb-4" data-wow-duration="500ms">
   <div class="post-block">
     <div class="media-wrapper">
-      {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-fluid">{{ end }}
+      <img class="img-fluid lozad" data-src="{{ .Params.Image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .Params.Image | absURL }}'">
     </div>
 
     <div class="content">
-      <h3><a href="{{ .Permalink }}">{{ with .Params.name}}{{.}}{{else}}{{ .Title }}{{end}}</a></h3>
+      <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
       <p>{{ .Summary }}</p>
       <a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
     </div>

layouts/author/single.html

 				</div>
 				<div class="content text-center">
 					<figure>
-						{{ if .Params.Photo }}
-						<img class="rounded-circle img-fluid" src="{{.Params.Photo}}">
+						{{ if .Params.Image }}
+						<img class="rounded-circle img-fluid" src="{{.Params.Image | relURL }}">
 						{{else if .Params.Email}}
 						<img class="rounded-circle img-fluid"
 							src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
 						{{ end }}
 						<figcaption>
 							<h5 class="font-weight-bold">
-								{{ .Params.Name }}
+								{{ .Title }}
 							</h5>
 						</figcaption>
 					</figure>
 	</div>
 </section>
 
-
 <section class="section">
 	<div class="container">
 		<div class="row">

layouts/index.html

 {{ define "main" }}
 
-    {{ partial "banner.html" . }}
+{{ partial "banner.html" . }}
 
-    {{ partial "navigation.html" . }}
+{{ partial "navigation.html" . }}
 
-    {{ partial "about.html" . }}
+{{ partial "about.html" . }}
 
-    {{ partial "feature.html" . }}
+{{ partial "feature.html" . }}
 
-    {{ partial "cta.html" . }}
+{{ partial "cta.html" . }}
 
-    {{ partial "service.html" . }}
+{{ partial "service.html" . }}
 
-    {{ partial "skill.html" . }}
+{{ partial "skill.html" . }}
 
-    {{ partial "portfolio.html" . }}
+{{ partial "portfolio.html" . }}
 
-    {{ partial "funfacts.html" . }}
+{{ partial "funfacts.html" . }}
 
-    {{ partial "team.html" . }}
+{{ partial "team.html" . }}
 
-    {{ partial "pricing.html" . }}
+{{ partial "pricing.html" . }}
 
-    {{ partial "testimonial.html" . }}
+{{ partial "testimonial.html" . }}
 
-    {{ partial "blog.html" . }}
+{{ partial "blog.html" . }}
 
-    {{ partial "contact.html" . }}
+{{ partial "contact.html" . }}
+
+{{ partial "map.html" . }}
 
 {{ end }}

layouts/partials/about.html

 {{"<!-- Start About Section -->" | safeHTML}}
 <section class="bg-one about section" id="about">
 	<div class="container">
-		<div class="row">
+		<div class="row justify-content-center">
 			<div class="col-lg-12">
 				{{"<!-- section title -->" | safeHTML}}
 				<div class="title text-center wow fadeIn" data-wow-duration="1500ms">
 			</div>
 			{{"<!-- /section title -->" | safeHTML}}
 
-			{{ range .about_Item }}
+			{{ range .about_item }}
 			{{"<!-- About item -->" | safeHTML}}
 			<div class="col-lg-4 text-center wow fadeInUp" data-wow-duration="500ms">
 				<div class="block">
 					</div>
 					{{"<!-- Express About Yourself -->" | safeHTML}}
 					<div class="content text-center">
-						<h3 class="ddd">{{ .title }}</h3>
+						<h3>{{ .title }}</h3>
 						<p>{{ .content | markdownify }}</p>
 					</div>
 				</div>

layouts/partials/banner.html

 {{ if $data.banner.banner.enable }}
 {{ with $data.banner.banner }}
 {{"<!-- Welcome Slider-->" | safeHTML}}
-<section class="hero-area" style='background-image: url("{{ .bg_Image | absURL }}");'>
+<section class="hero-area" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
+	<!-- this image is for trigger this section fallback background image -->
+	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+
 	<div class="block">
 		{{ if .icon }}
 		<div class="video-button">

layouts/partials/blog.html

 {{"<!-- Start Blog Section -->" | safeHTML}}
 <section id="blog" class="section">
 	<div class="container">
-		<div class="row">
+		<div class="row justify-content-center">
 			<div class="col-lg-12">
 				{{"<!-- section title -->" | safeHTML}}
 				<div class="title text-center wow fadeInDown">
 			{{"<!-- /section title -->" | safeHTML}}
 
 			{{ range first 3 .Site.RegularPages }}
-			{{"<!-- single blog post -->" | safeHTML}}
-			<article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp" data-wow-duration="500ms">
-				<div class="post-block">
-					<div class="media-wrapper">
-						<img src="{{ .Params.Image | absURL }}" alt="post-image" class="img-fluid">
-					</div>
-
-					<div class="content">
-						<h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-						<p>{{ .Summary }}</p>
-						<a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
-					</div>
-				</div>
-			</article>
-			{{"<!-- /single blog post -->" | safeHTML}}
+			{{ .Render "article"}}
 			{{ end }}
 
 			<div class="all-post text-center col-lg-12">

layouts/partials/contact.html

 				<h3>{{ .subtitle | markdownify }}</h3>
 				<p> {{ .content | markdownify }} </p>
 				<div class="contact-details">
-					{{ range .contact_Details }}
+					{{ range .contact_details }}
 					<div class="con-info clearfix">
 						<i class="{{ .icon }}"></i>
 						<span>{{ .info }}</span>
 
 			{{"<!-- Contact Form -->" | safeHTML}}
 			<div class="col-lg-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
-				<form id="contact-form" class="form-meghna" method="post" action="{{ .form_Action | safeURL }}" role="form">
+				<form id="contact-form" class="form-meghna" method="post" action="{{ .form_action | safeURL }}" role="form">
 					<input name="e-mail" type="text" id="e-mail" autocomplete="off">
 					<div class="form-group">
 						<input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
 						<textarea rows="6" placeholder="Message" class="form-control" name="message" id="message"></textarea>
 					</div>
 					<div id="cf-submit">
-						<button type="submit" id="contact-submit" class="btn btn-transparent btn-block" value="Submit">Submit</button>
+						<button type="submit" id="contact-submit" class="btn btn-transparent btn-block" value="Submit">{{ i18n "submit" }}</button>
 					</div>
 				</form>
 			</div>
 		</div>
 	</div>
-
-	{{ if .map.enable }}
-	{{ with .map }}
-	{{"<!-- Google Map -->" | safeHTML}}
-	<div class="google-map">
-		<div id="map-canvas" data-latitude="{{ .mapLatitude }}" data-longitude="{{ .mapLongitude }}"></div>
-	</div>
-	{{ end }}
-	{{ end }}
 </section>
 {{"<!-- /contact -->" | safeHTML}}
 {{ end }}

layouts/partials/cta.html

 {{ if $data.cta.cta.enable}}
 {{ with $data.cta.cta}}
 {{"<!-- Start Call To Action -->" | safeHTML}}
-<section class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .bg_Image | absURL }}")'>
+<section class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
+	<!-- this image is for trigger this section fallback background image -->
+	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-12 text-center">

layouts/partials/feature.html

 <section class="section section-bg about-2 padding-0" id="feature">
 	<div class="container-fluid">
 		<div class="row">
-			<div class="col-lg-6 padding-0" style="background-image: url('{{ .image | absURL }}'); background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 400px;">
-				<!-- <img class="img-fluid" src="{{ .image | absURL }}" alt="image"> -->
+			<div class="col-lg-6 padding-0" style="background-image: url('{{ .image_webp | absURL }}'); background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 400px;">
+			<!-- this image is for trigger this section fallback background image -->
+			<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" src="{{ .image_webp | absURL }}" />
 			</div>
 			<div class="col-lg-6">
 				<div class="content-block">
 					<h2>{{ .title | markdownify }}</h2>
 					<p>{{ .content | markdownify }}</p>
 					<div class="row">
-						{{ range .feature_Item }}
+						{{ range .feature_item }}
 						<div class="col-lg-6">
 							<div class="media">
-								{{if .icon}}
+								{{with .icon}}
 								<div class="align-self-start mr-3">
-									<i class="{{ .icon }}"></i>
+									<i class="{{ . }}"></i>
 								</div>
 								{{ end }}
 								<div class="media-body">

layouts/partials/footer.html

 				{{"<!-- Footer Social Links -->" | safeHTML}}
 				<div class="social-icon">
 					<ul class="list-inline">
-						{{ range .Site.Params.social_Icon }}
+						{{ range .Site.Params.social }}
 						<li class="list-inline-item"><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
 						{{ end }}
 					</ul>
 
 				{{"<!-- copyright -->" | safeHTML}}
 				<div class="copyright text-center">
-					<a href="{{ .Site.BaseURL | absURL }}">
-						<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" />
+					<a href="{{ .Site.BaseURL | absLangURL }}">
+						<img src="{{ .Site.Params.logo | absURL }}" alt="{{ .Site.Title }}" />
 					</a>
 					<br>
 					<p>{{ i18n "copyright" | markdownify }}</p>
 </footer>
 {{"<!-- /footer -->" | safeHTML}}
 
-{{"<!-- Essential Scripts -->" | safeHTML}}
-{{"<!-- Google Map API -->" | safeHTML}}
-{{ $data := index .Site.Data .Site.Language.Lang }}
-{{ if $data.contact.contact.map.enable }}
-<script type="text/javascript"  src="{{ $data.contact.contact.map.gmapAPI | absURL }}"></script>
+{{ "<!-- Google Map API -->" | safeHTML }}
+{{ if .Site.Params.map.enable }}
+<script src="{{ .Site.Params.map.gmap_api | safeURL }}"></script>
 {{ end }}
+
 {{ "<!-- JS Plugins -->" | safeHTML }}
 {{ range .Site.Params.plugins.js}}
-<script src="{{ .URL | absURL }}"></script>
+<script src="{{ .link | absURL }}"></script>
 {{ end }}
+
 {{ "<!-- Main Script -->" | safeHTML }}
 {{ $script := resources.Get "js/script.js" | minify}}
 <script src="{{ $script.Permalink }}"></script>
+
 {{ "<!-- google analitycs -->" | safeHTML }}
-{{ if .Site.Params.googleAnalitycsID }}
+{{ with .Site.Params.google_analitycs_id }}
 <script>
   (function (i, s, o, g, r, a, m) {
     i['GoogleAnalyticsObject'] = r;
     a.src = g;
     m.parentNode.insertBefore(a, m)
   })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-  ga('create', '{{ .Site.Params.googleAnalitycsID }}', 'auto');
+  ga('create', '{{ . }}', 'auto');
   ga('send', 'pageview');
 </script>
 {{ end }}

layouts/partials/funfacts.html

 {{ if $data.funfacts.funfacts.enable }}
 {{ with $data.funfacts.funfacts }}
 {{"<!-- Start Counter Section -->" | safeHTML}}
-<section id="counter" class="parallax-section bg-1 section overly" style='background-image: url("{{ .bg_Image | absURL }}")'>
-    <div class="container">
-        <div class="row">
-            {{ range .counter_Item }}
-            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInDown" data-wow-duration="500ms">
-                <div class="counters-item">
-                    <i class="{{ .icon }}"></i>
-                    <span class="count" data-count="{{ .count }}">0</span>
-                    <h3>{{ .title | markdownify }}</h3>
-                </div>
-            </div>
-            {{ end }}
-        </div>
-    </div>
+<section id="counter" class="parallax-section bg-1 section overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
+	<!-- this image is for trigger this section fallback background image -->
+	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<div class="container">
+		<div class="row justify-content-center">
+			{{ range .counter_item }}
+			<div class="col-lg-3 col-md-6 col-12 text-center wow fadeInDown" data-wow-duration="500ms">
+				<div class="counters-item">
+					<i class="{{ .icon }}"></i>
+					<span class="count" data-count="{{ .count }}">0</span>
+					<h3>{{ .title | markdownify }}</h3>
+				</div>
+			</div>
+			{{ end }}
+		</div>
+	</div>
 </section>
 {{"<!-- /Counter Section -->" | safeHTML}}
 {{ end }}