Yummy - Pizza Restaurant & Delivery
HTML template
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Ticksy Support System. Thanks so much!
The template has 46 HTML files:
blog_classic.html
blog_classic_sidebar.html
blog_masonry.html
blog_masonry_sidebar.html
blog_single.html
blog_single_sidebar.html
elements_accordions_toggles.html
elements_alert_boxes_buttons.html
elements_call_to_actions.html
elements_counters.html
elements_dropcaps_blockquotes.html
elements_headings_and_paragraphs.html
elements_highlights_tooltips_listings.html
elements_icon_boxes.html
elements_image_boxes.html
elements_pricing.html
elements_tables.html
elements_tabs.html
elements_team.html
elements_testimonials.html
gallery_grid.html
gallery_grid_full.html
gallery_masonry.html
gallery_masonry_full.html
home_2.html
home_3.html
home_4.html
index.html
menu_v1.html
menu_v2.html
menu_v3.html
pages_404.html
pages_about_v1.html
pages_about_v2.html
pages_booking.html
pages_coming_soon.html
pages_contact_v1.html
pages_contact_v2.html
pages_open_table.html
pages_order.html
shop_account.html
shop_checkout.html
shop_create.html
shop_front.html
shop_front_sidebar.html
shop_single.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--================ Basic page needs ================-->
<!--================ Mobile specific metas ================-->
<!--================ Favicon ================-->
<!--================ Google web fonts ================-->
<!--================ Vendor CSS ================-->
<!-- REVOLUTION STYLE SHEETS -->
<!--================ Theme CSS ================-->
<!--================ Vendor JS ================-->
</head>
<body>
<!--================ Popup ================-->
<!--================ /Popup ================-->
<!--================ Search Modal ================-->
<!--================ Search Form ================-->
<!--================ End of Search Form ================-->
<!--================ End of Search Modal ================-->
<!--================ Header ================-->
<!--================ Navigation ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Navigation ================-->
<!-- Product -->
<!-- product-info -->
<!--/ product-info -->
<!-- End of Product -->
<!-- Product -->
<!-- product-info -->
<!--/ product-info -->
<!-- End of Product -->
<!-- Product -->
<!-- product-info -->
<!--/ product-info -->
<!-- End of Product -->
<!-- Product -->
<!-- product-info -->
<!--/ product-info -->
<!-- End of Product -->
<!-- Product -->
<!-- product-info -->
<!--/ product-info -->
<!-- End of Product -->
<!--================ End of Header ================-->
<!-- START REVOLUTION SLIDER 5.4.8.1 auto mode -->
<!-- SLIDE -->
<!-- SLIDE -->
<!-- SLIDE -->
<!-- END REVOLUTION SLIDER -->
<!--================ Icon Boxes ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ End of Icon Boxes ================-->
<!--================ Icon Boxes ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ End of Icon Boxes ================-->
<!--================ Tabs ================-->
<!--================ Tabs Navigation ================-->
<!--================ End of Tabs Navigation ================-->
<!--================ Tabs Container ================-->
<!--================ Tab ================-->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!-- owl item -->
<!-- Product -->
<!-- product-desc -->
<!--/ product-desc -->
<!-- End of Product -->
<!-- / owl item -->
<!--================ End of Tab ================-->
<!--================ End of Tabs Container ================-->
<!--================ End of Tabs ================-->
<!--================ Testimonials ================-->
<!-- owl item -->
<!-- / owl item -->
<!-- owl item -->
<!-- / owl item -->
<!-- owl item -->
<!-- / owl item -->
<!-- owl item -->
<!-- / owl item -->
<!--================ End of Testimonials ================-->
<!--================ Image Boxes ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Footer ================-->
<!--================ Footer row ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ End of Footer row ================-->
<!--================ End of Footer ================-->
</body>
</html>
We use Google fonts
https://fonts.google.com/specimen/Josefin+Sans
https://fonts.google.com/specimen/Lato
https://fonts.google.com/specimen/Material+Icons
https://fonts.google.com/specimen/Material+Icons+Round
For sure you can change fonts. Select needed fonts, and copy embed code on our pages
You can see commented code
<!-- Google Web Fonts
================================================== -->
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900"
rel="stylesheet">
Replace our code with yours
After open css/style.css and make auto-replace
font-family: 'Josefin Sans', sans-serif;
with your font
Create a logo with logo.png or other logo and replace it at images folder. For better view see my logo width. Depend on header type you can use different logo
This template uses 7 css files:
-
animate.css
-
bootstrap.min.css
-
fontawesome-all.min.css
-
linearicons.css
-
owl.carousel.css
-
responsive.css
-
style.css
The main style.css has such structure:
/* ----------------------------------------
Stylesheet Guide
------------------------------------------
1. Base
2. Layout
3. Components
4. Pages
---------------------------------------------------------- */
This template includes 33 Javascript files.
mad.app.js
mad.alert-box.js
mad.contact-form.js
mad.events-calendar.js
mad.isotope.js
mad.newsletter-form.js
mad.sidebar-hidden.js
mad.sticky-header-section.js
elevatezoom.min.js
handlebars-v4.0.5.js
isotope.pkgd.min.js
jquery-3.3.1.min.js
jquery.easing.1.3.js
jquery.parallax-1.1.3.js
mad.customselect.js
modernizr.js
monkeysan.accordion.js
monkeysan.counters.js
monkeysan.jquery.nav.1.0.js
monkeysan.tabs.js
monkeysan.validator.min.js
retina.min.js
jquery.arcticmodal-0.3.min.js
jquery.countdown.js
jquery.plugin.js
jquery.fancybox.js
jquery-ui.js
monkeysan-jquery-tooltip.js
owl.carousel.js
jquery.themepunch.enablelog.js
jquery.themepunch.revolution.min.js
jquery.themepunch.tools.min.js
tweetie.min.js
If you want to change slider settings, for example, you want switch on/off autoslideshow or change time delay you can find all slider settings here js/mad.app.js
For carousels we use OwlCarousel. Full Documentation you can find here https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
For Slider we use Revolution Slider. Full documentation is here
https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/
If you are looking for global slider settings open js/mad.app.js and search
if($revSlider1.length && $.fn.revolution) {
revApi1 = $revSlider1.show().revolution({
dottedOverlay: 'mad',
disableProgressBar: "on",
spinner: 'spinner3',
gridwidth: [1440, 1024, 1024, 580],
gridheight: [1080, 1080, 1080, 1080],
responsiveLevels: [1440, 1024, 813, 580],
navigation: {
keyboardNavigation: 'on',
keyboard_direction: 'horizontal',
onHoverStop: 'false',
arrows: {
enable: false,
},
bullets: {
enable: true,
style: 'mad',
hide_onleave: false,
h_align: 'center',
v_align: 'bottom',
direction: 'horisontal',
h_offset: 0,
v_offset: 64
}
}
});
}
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. Read more here: http://imulus.github.io/retinajs/
if you want to remove preloader, open your HTML and remove <div class="mad-preloader"></div>
and open js/mad.app.js and search and remove Preloader function
Open js/mad.app.js and search
/* ----------------------------------------
Google Maps
---------------------------------------- */
if ($('#googleMap').length) {
function loadMap() {
var mapProp = {
center: { lat: 51.503454, lng: -0.124755 },
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'all', stylers: [{ saturation: -100 }, { gamma: 0.0 }] }]
};
var map = document.getElementById('googleMap');
if (map !== null) {
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
var marker = new google.maps.Marker({
position: { lat: 51.503454, lng: -0.124755 },
map: map,
icon: 'images/map_marker.png'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
Change coordinates. You can generate new coordinates here
https://www.gps-coordinates.net/
You have to generate and replace Google Map API key for your site.
This key you can find at the end of page. Generate own key and apply for your domain
It's free. Paid version is applied if you have more than 100 000 requests per month only
Read how to create key
https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
Very often customers ask me about the Best Hosting.
I recommend BlueHost.com
I've used the following scripts:
-
-
jquery-ui.min.js - a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library
-
jquery.modernizr.js - a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers
-
retina.min.js - an open source script that makes it easy to serve high-resolution images to devices with retina displays
-
mad.app.js - custom js with plugin's settings
-
audioplayer.js - Responsive and Touch-Friendly audio player
-
-
jquery.countdown.min.js - jQuery plugin that sets a div or span to show a countdown to a given time
-
jquery.nicescroll.js - Animated anchor navigation made easy with jQuery
-
-
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider
-
jquery.fancybox.js - a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
-
jquery.themepunch.revolution.min.js - the highly acclaimed slide-based displaying solution, thousands of businesses, theme developers and everyday people use and love!
-
-
-
mediaelement-and-player.js - HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.
-
moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
Clipart for the preview was bought from http://depositphotos.com and https://unsplash.com/
IMPORTANT: clipart is not included in the stock file.