Installation
Follow the steps below to get started with your Site Template:
- Open the
Package/HTMLFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
HTML/css- Stylesheets folderHTML/fonts– Icon fonts folderHTML/images- Images folderHTML/js- Javacripts folderHTML/video– Video filesHTML/php– Contact form PHP files
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
HTML Structure
Mondeo follows a simple and easy to customize coding structure. Here is the sample for your reference:
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- title -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<!-- favicon -->
<!-- style -->
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default navbar-fixed navbar-transparent white bootsnav on no-full">
...
</nav>
<!-- end navigation -->
<!-- slider -->
<section class="home-slider">
<div class="default-slider slick">
<!-- slider item -->
...
<!-- end slider item -->
</div>
</section>
<!-- end slider -->
<!-- content section -->
<section class="white-bg">
<div class="container">
...
</div>
</section>
<!-- end content section -->
<!-- footer -->
<footer class="footer dark-block">
<div class="footer-main">
<div class="container">
...
</div>
</div>
<div class="footer-copyright">
<div class="container">
...
</div>
</div>
</footer>
<!-- end footer -->
<!-- scroll to top -->
<a href="javascript:;" id="return-to-top"><i class="icofont icofont-arrow-up"></i></a>
<!-- end scroll to top -->
<!-- javascript plugins -->
</body>
</html>
Logo Settings
The Logo Container can be found in the Nav Container - .navbar
<!--== Start Header Navigation ==--> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="tr-icon ion-android-menu"></i> </button> <div class="logo"> <a href="index.html"> <img class="logo logo-display" src="images/logo-white.png" alt=""> <img class="logo logo-scrolled" src="images/logo-black.png" alt=""> </a> </div> </div> <!--== End Header Navigation ==-->
Note The Logo Image's maximum height can be 60px.
Image & Favicon Settings
Image Settings
Mondeo download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like images/yourimage.jpg
<img src="http://placehold.it/350x150">
NoteYour image size should be the same as per placeholder image url.
Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Changing Fonts
Mondeo uses 3 fonts: Raleway, Montserrat, Open Sans from the Google Fonts Library. You can change the fonts from /css/master.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/master.css file as per your fonts used.
/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Playfair+Display:400,700,900|Livvic:400,500,600,700|Roboto:300,400,500,700|Herr+Von+Muellerhoff');
Optimization Tips
Now a days fast & optimized website is must, so we would like to represent some optimization tips below which can affect your overall website speed:
gZip Compression & Browser Caching
This is probably one of the mostly used techniques you should definitely implement in order to increase your website's loading speed. gZip Compression is used to compress the Files that are delivered when loading a website. It includes HTML, CSS, Javascript & Font files along with other miscellaneous text files. This is used to save the static data in your browser itself so that when you open the next pages on the same website, the content does not gets downloaded again and hence further pages loads fast.
gZip compression & browser caching can be enabled using the .htaccess file on an Apache web server. You can use the codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/ to enable these modules on your server.
Image Compression & Optimization
We normally use lots of images on our websites to make it look beautiful as well as easily understandable but it can make the website slow if we do not take care of image size. It is important to resize, optimize & compress your images before using it on your website. Here are some tips which can be helpful:
- Resize your images: Resize your images before using it on your website. Do not just download an image & place it as it is in your website. The size/resolution of the image matters since it is not recommended to use an Image size of 1200px x 800px in a content size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px.
- Image formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a flat background use JPEG images, for images with a transparent background use PNG images and for images with animations use GIF images.
- Compressing images: Images compression is important as it considerably reduces the size without losing the quality. There are several FREE image optimization tools available to download.
For MAC use ImageOptim
For windows use riot for compressing JPEG images & PNG Gauntlet for PNG images.
CSS & jQuery Minifications
It is also a best practice to combine & minify all your CSS files to a single CSS file & all Javascript files to a single JS file as it reduces the size of the file and combining the files helps in reducing the number of HTTP requests made to the server. There are several tools available online to Minify your CSS & JS files.
We recommend to use CSS Minifier for CSS and use Javascript Minifier for JS.
Customize Header Expiry/Caching
By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and definitely help in serving the page faster.
Disable ETags
Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file:
FileETags none
Note that this rule applies to sites that are in a server farm. If you’re using a shared host, you could skip this step, but we recommend that you do it regardless.
Content Delivery Network
You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.
Note CDN setup requires extra monthly recurring fees to setup.
Fast Web Hosting Servers
Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & a fast hosting service. You can refer some recommended hosting Services here: http://themeforest.net/get_hosting.
Home Page Demos
Mondeo template provide a full range of digital strategy services for businesses of all sizes. From UX design to content strategy, WordPress web development, and search engine optimization
Columns & Grid
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
.col-md-4.col-md-4.col-md-4Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
.col-md-3.col-md-6.col-md-3Two columns
Get two columns starting at desktops and scaling to large desktops.
.col-md-8.col-md-4Full width, single column
.col-md-12Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
.col-md-8
.col-md-6.col-md-6.col-md-4Mixed: mobile and desktop
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
.col-xs-12 .col-md-8.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6.col-xs-6Mixed: mobile, tablet, and desktop
.col-xs-12 .col-sm-6 .col-lg-8.col-xs-6 .col-lg-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4Column clearing
Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3.col-xs-6 .col-sm-3.col-xs-6 .col-sm-3Offset, push, and pull resets
Reset offsets, pushes, and pulls at specific breakpoints.
.col-sm-5 .col-md-6.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0.col-sm-6 .col-md-5 .col-lg-6.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0Grid Structure
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-2.col-md-2.col-md-2.col-md-2.col-md-2.col-md-2.col-md-3.col-md-3.col-md-3.col-md-3.col-md-4.col-md-4.col-md-4.col-md-5.col-md-5.col-md-5.col-md-6.col-md-6.col-md-1.col-md-11.col-md-2.col-md-10.col-md-3.col-md-9.col-md-4.col-md-8.col-md-5.col-md-7Helper Classes
We have created some really useful helper classes for you. Here are a few of them:
Font Size
.font-12px.font-14px.font-16px.font-18px.font-18px.font-20px.font-26px.font-30px.font-35px.font-40px.font-50px.font-60px.font-70px.font-80px.font-90px.font-100px.font-110px.font-120px.font-130px
Font Color
.white-color- For white color text.dark-Color- For dark color text.default-color- For red color text.secondary-color- For deep purple color text.yellow-color- For yellow color text.grey-color- For grey color text
Font Family
.livvic-font- Livvic.play-font- Playfair.roboto-font- Roboto.kaushan-font- Kaushan.herr-font- Herr Von Muellerhoff
Text Align
.text-left- For text align left.text-right- For text align right.text-center- For text align center.text-justify- For text align justify
Text Transform
.text-lowercase- For text to lowercase.text-uppercase- For text to uppercase
Letter Spacing
.letter-spacing-0- For letter spacing of none.letter-spacing-1- For letter spacing of 1 pixel.letter-spacing-2- For letter spacing of 2 pixel.letter-spacing-3- For letter spacing of 3 pixel.letter-spacing-4- For letter spacing of 4 pixel.letter-spacing-5- For letter spacing of 5 pixel.letter-spacing-6- For letter spacing of 6 pixel.letter-spacing-7- For letter spacing of 7 pixel.letter-spacing-8- For letter spacing of 8 pixel.letter-spacing-9- For letter spacing of 9 pixel.letter-spacing-10- For letter spacing of 10 pixel
Font Weight
.font-100- For font weight of 100.font-300- For font weight of 300.font-400- For font weight of 400.font-600- For font weight of 600.font-700- For font weight of 700.font-800- For font weight of 800
Line Heights
.line-height-15- For line height of 15.line-height-20- For line height of 20.line-height-22- For line height of 22.line-height-24- For line height of 24.line-height-25- For line height of 25.line-height-26- For line height of 26.line-height-30- For line height of 30.line-height-35- For line height of 35.line-height-40- For line height of 40.line-height-45- For line height of 45.line-height-50- For line height of 50.line-height-60- For line height of 60.line-height-70- For line height of 70.line-height-80- For line height of 80.line-height-90- For line height of 90.line-height-100- For line height of 100.line-height-110- For line height of 110.line-height-120- For line height of 120
Background Color
.white-bg- For background color of white.transparent-bg- For background color of white transparent.bordered-bg- For background color of bordered.dark-bg- For background color of dark.dark-grey-bg- For background color of dark grey.lighten-grey-bg- For background color of smoke.yellow-bg- For background color of yellow.bordered-bg.white-bg- For background color of white border.pattern-bg-dark- For background pattern of dark.pattern-bg-light- For background pattern of light.pattern-bg-colored- For background pattern of memphis.default-bg- For background color of red.secondary-bg- For background color of purple
Background Image
.fixed-bg- For background image attachment fixed
Overlay
.parallax-overlay- For parallax overlay of dark.parallax-overlay-white- For parallax overlay of light.color-overlay-bg- For parallax overlay of red.secondary-color-overlay-bg- For parallax overlay of purple
Box Shadows
.box-shadow- For Box Shadow.box-shadow-hover- For Box Shadow on hover
All Margins
.remove-margin- Margin 0px of each side.all-margin-10- Margin 10px of each side.all-margin-20- Margin 20px of each side.all-margin-30- Margin 30px of each side.all-margin-40- Margin 40px of each side.all-margin-50- Margin 50px of each side.all-margin-60- Margin 60px of each side.all-margin-70- Margin 70px of each side.all-margin-80- Margin 80px of each side.all-margin-90- Margin 90px of each side.all-margin-100- Margin 100px of each side.all-margin-110- Margin 110px of each side.all-margin-120- Margin 120px of each side
Margins Auto
.margin-left-auto- Margin Left Auto.margin-right-auto- Margin Right Auto
Margin Left
.ml-0- Margin Left 0px of Left.ml-10- Margin Left 10px of Left.ml-20- Margin Left 20px of Left.ml-30- Margin Left 30px of Left.ml-40- Margin Left 40px of Left.ml-50- Margin Left 50px of Left.ml-60- Margin Left 60px of Left.ml-70- Margin Left 70px of Left.ml-80- Margin Left 80px of Left.ml-90- Margin Left 90px of Left.ml-100- Margin Left 100px of Left.ml-110- Margin Left 110px of Left.ml-120- Margin Left 120px of Left
Margin Top
.mt-0- Margin Top 0px of Top.mt-10- Margin Top 10px of Top.mt-20- Margin Top 20px of Top.mt-30- Margin Top 30px of Top.mt-40- Margin Top 40px of Top.mt-50- Margin Top 50px of Top.mt-60- Margin Top 60px of Top.mt-70- Margin Top 70px of Top.mt-80- Margin Top 80px of Top.mt-90- Margin Top 90px of Top.mt-100- Margin Top 100px of Top.mt-110- Margin Top 110px of Top.mt-120- Margin Top 120px of Top
Margin Right
.mr-0- Margin Top 0px of Right.mr-10- Margin Top 10px of Right.mr-20- Margin Top 20px of Right.mr-30- Margin Top 30px of Right.mr-40- Margin Top 40px of Right.mr-50- Margin Top 50px of Right.mr-60- Margin Top 60px of Right.mr-70- Margin Top 70px of Right.mr-80- Margin Top 80px of Right.mr-90- Margin Top 90px of Right.mr-100- Margin Top 100px of Right.mr-110- Margin Top 110px of Right.mr-120- Margin Top 120px of Right
Margin Bottom
.mb-0- Margin Top 0px of Bottom.mb-10- Margin Top 10px of Bottom.mb-20- Margin Top 20px of Bottom.mb-30- Margin Top 30px of Bottom.mb-40- Margin Top 40px of Bottom.mb-50- Margin Top 50px of Bottom.mb-60- Margin Top 60px of Bottom.mb-70- Margin Top 70px of Bottom.mb-80- Margin Top 80px of Bottom.mb-90- Margin Top 90px of Bottom.mb-100- Margin Top 100px of Bottom.mb-110- Margin Top 110px of Bottom.mb-120- Margin Top 120px of Bottom
All Padding
.remove-padding- Padding 0px of each side.all-padding-10- Padding 10px of each side.all-padding-20- Padding 20px of each side.all-padding-30- Padding 30px of each side.all-padding-40- Padding 40px of each side.all-padding-50- Padding 50px of each side.all-padding-60- Padding 60px of each side.all-padding-70- Padding 70px of each side.all-padding-80- Padding 80px of each side.all-padding-90- Padding 90px of each side.all-padding-100- Padding 100px of each side.all-padding-110- Padding 110px of each side.all-padding-120- Padding 120px of each side
Padding Left
.pl-0- Padding Left 0px of Left.pl-10- Padding Left 10px of Left.pl-20- Padding Left 20px of Left.pl-30- Padding Left 30px of Left.pl-40- Padding Left 40px of Left.pl-50- Padding Left 50px of Left.pl-60- Padding Left 60px of Left.pl-70- Padding Left 70px of Left.pl-80- Padding Left 80px of Left.pl-90- Padding Left 90px of Left.pl-100- Padding Left 100px of Left.pl-110- Padding Left 110px of Left.pl-120- Padding Left 120px of Left
Padding Top
.pt-0- Padding Top 0px of Top.pt-10- Padding Top 10px of Top.pt-20- Padding Top 20px of Top.pt-30- Padding Top 30px of Top.pt-40- Padding Top 40px of Top.pt-50- Padding Top 50px of Top.pt-60- Padding Top 60px of Top.pt-70- Padding Top 70px of Top.pt-80- Padding Top 80px of Top.pt-90- Padding Top 90px of Top.pt-100- Padding Top 100px of Top.pt-110- Padding Top 110px of Top.pt-120- Padding Top 120px of Top
Padding Right
.pr-0- Padding Right 0px of Right.pr-10- Padding Right 10px of Right.pr-20- Padding Right 20px of Right.pr-30- Padding Right 30px of Right.pr-40- Padding Right 40px of Right.pr-50- Padding Right 50px of Right.pr-60- Padding Right 60px of Right.pr-70- Padding Right 70px of Right.pr-80- Padding Right 80px of Right.pr-90- Padding Right 90px of Right.pr-100- Padding Right 100px of Right.pr-110- Padding Right 110px of Right.pr-120- Padding Right 120px of Right
Padding Bottom
.pb-0- Padding Bottom 0px of Bottom.pb-10- Padding Bottom 10px of Bottom.pb-20- Padding Bottom 20px of Bottom.pb-30- Padding Bottom 30px of Bottom.pb-40- Padding Bottom 40px of Bottom.pb-50- Padding Bottom 50px of Bottom.pb-60- Padding Bottom 60px of Bottom.pb-70- Padding Bottom 70px of Bottom.pb-80- Padding Bottom 80px of Bottom.pb-90- Padding Bottom 90px of Bottom.pb-100- Padding Bottom 100px of Bottom.pb-110- Padding Bottom 110px of Bottom.pb-120- Padding Bottom 120px of Bottom
Float
.pull-left- Float DIV to left.pull-right- Float DIV to right
Display
.display-block- For display block.display-inline-block- For display inline-block.display-inline- For display inline.display-table- For display table.display-table-cell- For display table-cell.display-none- For display none
Position
.relative- For element position relative.absolute- For element position absolute.fixed- For element position fixed.static- For element position static
Position Top
.top-0For element position top 0 from the top of the parent element/div.top-1For element position 1px down from the top of the parent element/div.top-2For element position 2px down from the top of the parent element/div.top-3For element position 3px down from the top of the parent element/div.top-4For element position 4px down from the top of the parent element/div.top-5For element position 5px down from the top of the parent element/div.top-6For element position 6px down from the top of the parent element/div.top-7For element position 7px down from the top of the parent element/div.top-8For element position 8px down from the top of the parent element/div.top-9For element position 9px down from the top of the parent element/div.top-10For element position 10px down from the top of the parent element/div
Position Right
.right-0For element position right 0 from the right of the parent element/div.right-1For element position 1px right from the right of the parent element/div.right-2For element position 2px right from the right of the parent element/div.right-3For element position 3px right from the right of the parent element/div.right-4For element position 4px right from the right of the parent element/div.right-5For element position 5px right from the right of the parent element/div.right-6For element position 6px right from the right of the parent element/div.right-7For element position 7px right from the right of the parent element/div.right-8For element position 8px right from the right of the parent element/div.right-9For element position 9px right from the right of the parent element/div.right-10For element position 10px right from the right of the parent element/div
Position Bottom
.bottom-0For element position bottom 0 from the bottom of the parent element/div.bottom-1For element position 1px up from the bottom of the parent element/div.bottom-2For element position 2px up from the bottom of the parent element/div.bottom-3For element position 3px up from the bottom of the parent element/div.bottom-4For element position 4px up from the bottom of the parent element/div.bottom-5For element position 5px up from the bottom of the parent element/div.bottom-6For element position 6px up from the bottom of the parent element/div.bottom-7For element position 7px up from the bottom of the parent element/div.bottom-8For element position 8px up from the bottom of the parent element/div.bottom-9For element position 9px up from the bottom of the parent element/div.bottom-10For element position 10px up from the bottom of the parent element/div
Position Left
.left-0For element position left 0 from the left of the parent element/div.left-1For element position 1px left from the left of the parent element/div.left-2For element position 2px left from the left of the parent element/div.left-3For element position 3px left from the left of the parent element/div.left-4For element position 4px left from the left of the parent element/div.left-5For element position 5px left from the left of the parent element/div.left-6For element position 6px left from the left of the parent element/div.left-7For element position 7px left from the left of the parent element/div.left-8For element position 8px left from the left of the parent element/div.left-9For element position 9px left from the left of the parent element/div.left-10For element position 10px left from the left of the parent element/div
.top-minus-1For element position 1px up from the top of the parent element/div.top-minus-2For element position 2px up from the top of the parent element/div.top-minus-3For element position 3px up from the top of the parent element/div.top-minus-4For element position 4px up from the top of the parent element/div.top-minus-5For element position 5px up from the top of the parent element/div.top-minus-6For element position 6px up from the top of the parent element/div.top-minus-7For element position 7px up from the top of the parent element/div.top-minus-8For element position 8px up from the top of the parent element/div.top-minus-9For element position 9px up from the top of the parent element/div.top-minus-10For element position 10px up from the top of the parent element/div
Width
.width-10-percent- For width of 10% on DIV/Text.width-20-percent- For width of 20% on DIV/Text.width-30-percent- For width of 30% on DIV/Text.width-40-percent- For width of 40% on DIV/Text.width-50-percent- For width of 50% on DIV/Text.width-60-percent- For width of 60% on DIV/Text.width-70-percent- For width of 70% on DIV/Text.width-80-percent- For width of 80% on DIV/Text.width-90-percent- For width of 90% on DIV/Text.width-100-percent- For width of 100% on DIV/Text.width-auto- For width of auto on DIV/Text.max-width- For max width of width on DIV/Text
Height
.height-10-percent- For height of 10% on DIV/Text.height-20-percent- For height of 20% on DIV/Text.height-30-percent- For height of 30% on DIV/Text.height-40-percent- For height of 40% on DIV/Text.height-50-percent- For height of 50% on DIV/Text.height-60-percent- For height of 60% on DIV/Text.height-70-percent- For height of 70% on DIV/Text.height-80-percent- For height of 80% on DIV/Text.height-90-percent- For height of 90% on DIV/Text.height-100-percent- For height of 100% on DIV/Text.height-auto- For height of auto on DIV/Text.max-height- For max height of height on DIV/Text
Useful Tips
You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: page-scroll and href should be the ID of the section as per the example shown below:
<a href="#home" class="page-scroll">Home</a>
NotePlease note that destination section should have valid ID.
Slider Types & Options
There are two types of sliders as mentioned below:
Slick Slider - Full Screen
<!-- Hero Slider Start --> <section class="home-slider no-direction" id="home"> <div class="default-slider slick"> <div class="slide"> <div class="slide-img" style="background:url(assets/images/slides/home-bg-7.jpg) center center / cover scroll no-repeat;"></div> <div class="hero-text-wrap"> <div class="hero-text white-color"> <div class="container"> <div class="white-color text-center"> <h1 class="white-color font-700 text-uppercase font-100px line-height-90">Digital <br>Creations</h1> <h4 class="white-color roboto-font font-300">Your expectise of this is critical to your success</h4> <p class="text-center mt-30"><a class="btn btn-light-outline btn-lg radius-0">Purchase Theme</a> <a class="btn btn-color btn-lg radius-0">Start a Project</a> </p> </div> </div> </div> </div> </div> <div class="slide"> <div class="slide-img" style="background:url(assets/images/slides/home-bg-8.jpg) center center / cover scroll no-repeat;"></div> <div class="hero-text-wrap"> <div class="hero-text white-color"> <div class="container"> <div class="white-color text-center"> <h1 class="white-color font-700 text-uppercase font-100px line-height-90">Innovate <br>Transform</h1> <h4 class="white-color roboto-font font-300">Core to the success of what we achieve for our clients</h4> <p class="text-center mt-30"><a class="btn btn-light-outline btn-lg radius-0">Purchase Theme</a> <a class="btn btn-light-outline btn-lg radius-0">Start a Project</a> </p> </div> </div> </div> </div> </div> <div class="slide"> <div class="slide-img" style="background:url(assets/images/slides/home-bg-9.jpg) center center / cover scroll no-repeat;"></div> <div class="hero-text-wrap"> <div class="hero-text white-color"> <div class="container"> <div class="white-color text-center"> <h1 class="white-color font-700 text-uppercase font-100px line-height-90">Introducing <br>New Trends</h1> <h4 class="white-color roboto-font font-300">Design thinking guides every digital product we create.</h4> <p class="text-center mt-30"><a class="btn btn-color btn-lg radius-0">Purchase Theme</a> <a class="btn btn-light-outline btn-lg radius-0">Start a Project</a> </p> </div> </div> </div> </div> </div> </div> </section> <!-- Hero Slider End -->
Javascript
<script>
function mainSlider(){
$(".default-slider").slick({
dots: true,
infinite: true,
centerMode: true,
autoplay: true,
autoplaySpeed: 7000,
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '0',
responsive: [
{
breakpoint: 480,
settings: {
arrows: false,
}
}
]
});
}
</script>
Note You can find Slick Slider - Thumb Image code in index.html page and above is the code for your reference.You can find the slick slider related documentation here.
Read Slick Slider Document
Revolution Slider
<!-- Home Slider Start --> <div class="remove-padding transition-none" id="home"> <div id="rev_slider_1078_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classic4export" data-source="gallery" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;"> <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode --> <div id="rev_slider_1078_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1"> <ul> <!-- SLIDE --> <li data-index="rs-3045" data-transition="zoomout" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="assets/images/slides/home-bg-1-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <!-- MAIN IMAGE --> <img src="assets/images/slides/home-bg-1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="hero-text-wrap"> <div class="tp-caption NotGeneric-Title tp-resizeme" id="slide-3045-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','70','45']" data-lineheight="['70','70','70','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1000,"split":"chars","splitdelay":0.05,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[10,10,10,10]" data-paddingright="[0,0,0,0]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[0,0,0,0]" style="z-index: 5; white-space: nowrap;font-family: 'Livvic', sans-serif;">Better. Best. Awesome!</div> <!-- LAYER NR. 2 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme" id="slide-3045-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['52','52','52','51']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 6; white-space: nowrap;font-family: 'Livvic', sans-serif;letter-spacing: 0px;font-size:18px;">We may be strong as individuals but together we are invincible. </div> <!-- LAYER NR. 3 --> <div class="tp-caption NotGeneric-Icon tp-resizeme" id="slide-3045-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['120','120','120','120']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 7; white-space: nowrap;cursor:default;"><a class="btn btn-color btn-lg btn-default" tabindex="0">Learn Now</a> </div> </div> </li> <!-- SLIDE --> <li data-index="rs-3046" data-transition="zoomout" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="assets/images/slides/home-bg-2-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <!-- MAIN IMAGE --> <img src="assets/images/slides/home-bg-2.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="hero-text-wrap"> <div class="tp-caption NotGeneric-Title tp-resizeme" id="slide-3045-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','70','45']" data-lineheight="['70','70','70','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1000,"split":"chars","splitdelay":0.05,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[10,10,10,10]" data-paddingright="[0,0,0,0]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[0,0,0,0]" style="z-index: 5; white-space: nowrap;font-family: 'Livvic', sans-serif;">Think. Explore.Know.</div> <!-- LAYER NR. 2 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme" id="slide-3045-layer-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['52','52','52','51']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 6; white-space: nowrap;font-family: 'Livvic', sans-serif;letter-spacing: 0px;font-size:18px;">Only advertising would take a word most people run from and treat it as a good thing. </div> <!-- LAYER NR. 3 --> <div class="tp-caption NotGeneric-Icon tp-resizeme" id="slide-3045-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['120','120','120','120']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 7; white-space: nowrap;cursor:default;"><a class="btn btn-light-outline btn-lg btn-default" tabindex="0">Start a Project</a> </div> </div> </li> <!-- SLIDE --> <li data-index="rs-3047" data-transition="zoomout" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="assets/images/slides/home-bg-3-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <!-- MAIN IMAGE --> <img src="assets/images/slides/home-bg-3.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="hero-text-wrap"> <div class="tp-caption NotGeneric-Title tp-resizeme" id="slide-3045-layer-7" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','70','45']" data-lineheight="['70','70','70','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1000,"split":"chars","splitdelay":0.05,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[10,10,10,10]" data-paddingright="[0,0,0,0]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[0,0,0,0]" style="z-index: 5; white-space: nowrap;font-family: 'Livvic', sans-serif;">Digital Development </div> <!-- LAYER NR. 2 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme" id="slide-3045-layer-8" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['52','52','52','51']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 6; white-space: nowrap;font-family: 'Livvic', sans-serif;letter-spacing: 0px;font-size:18px;">The path from good idea to great product starts </div> <!-- LAYER NR. 3 --> <div class="tp-caption NotGeneric-Icon tp-resizeme" id="slide-3045-layer-9" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['120','120','120','120']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]' data-textAlign="['left','left','left','left']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 7; white-space: nowrap;cursor:default;"><a class="btn btn-color btn-lg btn-default" tabindex="0">What We Do</a> </div> </div> </li> <!-- SLIDE --> </ul> <div class="tp-bannertimer" style="height: 3px; background-color: rgba(255, 255, 255, 0.25);"></div> </div> </div> </div> <!-- Home Slider End -->
Javascript
<script>
if(tpj("#rev_slider_1078_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_1078_1");
}else{
$("#rev_slider_1078_1").show().revolution({
sliderType:"standard",
jsFileLocation:"revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
,
arrows: {
style:"zeus",
enable:true,
hide_onmobile:true,
hide_under:600,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:' ',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
}
,
bullets: {
enable:false,
hide_onmobile:false,
hide_under:600,
style:"metis",
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
direction:"horizontal",
h_align:"center",
v_align:"bottom",
h_offset:0,
v_offset:30,
space:5,
tmp:' '
}
},
viewPort: {
enable:false,
outof:"pause",
visible_area:"80%",
presize:false
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[600,600,500,400],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50,47,48,49,50,51,55],
type:"mouse",
},
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
</script>
Note You can find revolution slider - full screen code in index-main.html page and above is the code for your reference.Read Revolution Slider Document
Form Settings
Mondeo contains different types of ready to use forms in overall template files as mentioned below:
Contact Us
Contact us form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open Folderphp/contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
NoteYou will get contact us form code from contact.html page. Follow above same steps for other templates, you will have other email template files under folder /php.
Credits
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Mondeo a really beautiful theme for our awesome users:
Images and Videos
jQuery Libraries
Version 1.0 - Initial Release
Released on 30 Dec 2019