Materialize Documentation

Material design based mutipurpose HTML Template

Last Update: 11/27/2018
Created: 08/03/2016
By: Trendy Theme
trendytheme.net/
email: trendytheme.net@gmail.com

Thank you very much for purchasing our template! If you have any questions that aren't covered in this documentation, please feel free to email us.

Materialize is a material design based multi-purpose responsive html template.

By utilizing elements and principles of Material Design, Materialize comes with 200+ HTML pages and over 150+ unique content blocks.

Materialize empowers you to build sites under Corporate, Creative, Agency, Restaurant, Blog, Charity, Consulting Firm, Portfolio, Construction, Parallax, App Landing, Book Opening and much more categories. Moreover Materialize comfortably suits all common website styles.

Materialize is fully responsive and built with bootstrap framework, be sure that it will fit any viewing device.

Let's have a quick look on features that Materialize have:

5 Full Website Demo
14 Pre-defined Home Layouts
5 Powerful Slide Designs
5 Unique Text Rotator Slider
3 Static Hero Unit
2 Cloud and html Video Background
10 Unique Header Styles
12 Unique Navigation Styles
15 Icon Feature Styles
10 Unique Blog Layouts
16 CTA Styles
8 Content Tabs Styles
8 Client Testimonial Styles
5 Unique Footer Styles
5 Unique Alert Style
4 Unique Accordion Style
4 Unique Portfolio Styles
4 Unique Team Member Styles
4 Client/Brand Logo Styles
3 Counter Styles
2 Progress Styles
2 Dynamic Contact Form
2 login Page Layouts
2 404 Error Page Layouts
Unlimited Button Style
Parallax and video Sections
Multi-column "Mega Menu" and multi-level "Drop-Down" menus
Based on Bootstrap, the familiar grid mark-up you know and love!
Cross Browser Compatible

and much more…

Premium Features

===========================

1. Premium Revolution Slider ($14 Value)

2. Premium Menuzord - Responsive Megamenu ($7 Value)

3. Free Update

4. Excellent Customer Support

1. Unzip the file and find out the folder Materialize HTML. There are all html template files in this folder.

2. Folder Structure is as follows

assets (all assets/required file of this template)
--/bootstrap (bootstrap core files)
--/css (all css files)
--/flexSlider (flexSlider plugin)
--/fonts (font-awesome font icon set )
--/img (all images)
--/js (all javascript files)
--/magnific-popup (plugin for light-box)
--/materialize (material css and js)
--/owl-carousel (owl-carousel core files)
--/slider-revolution (all slider-revolution files are here)
--/videos (html5 video formats)
email-templates (a basic email template functional with contact form)
index.html (Home page)
sendemail.php (PHP file for functional contact form)

3. You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.

4. Now enjoy the theme and adding section/feature according to your need.

Being based on Bootstrap, Materialize inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  meta tag -->
    <meta charset="utf-8">
    <title>Title goes here</title>
    <!--  favicon -->
    <link rel="shortcut icon" href="assets/img/ico/favicon.png">    
    <!--common style-->
   ...
</head>

<body id="top" >

    <!--header start-->
    <header id="header" class="tt-nav transparent-header">
       ...
    </header>
    <!--header end-->

    <!--slider revolution start-->
    <section class="slider-revolution-wrapper">
        ...
    </section>
    <!--slider revolution end-->

    <!--body content start-->
    <section class="section-padding">
        <div class="container">
            <div class="row">
                ...
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <!--body content end-->

    <!--footer start -->
    <footer class="footer footer-four">
        <!--primary footer-->
        <div class="primary-footer">
            ...
        </div>
        <!--primary footer end-->
        <!--secondary footer-->
        <div class="secondary-footer">
            ...
        </div>
        <!--secondary footer end-->
    </footer>
    <!--footer end-->

    <!-- Preloader -->
    <div id="preloader">
        <div class="preloader-position"> 
            ...
        </div>
    </div>
    <!-- End Preloader -->

<!-- Placed js at the end of the document so the pages load faster -->

....

</body>
</html>

You can find LOGO container into header section

<!--logo start-->
<a href="index.html" class="logo-brand">

  <img src="assets/img/logo.png" alt=""/>

</a>
<!--logo end-->

We've multi types of logo style - logo light, logo dark, logo colored like img/logo.png, img/logo-dark.png img/logo-colored.png. logo-dark should be used in light navigation.

You can use any kind of logo adjusting with Navigation Bar.

Materialize uses google font. So you can feel free to use any google font what you like best.

Materialize used "Raleway" google font for main demo, "Lora" and "Raleway" combined in Digital Agency demo and "Roboto" and "Raleway" combined in Resturent Demo.

You can find the Link to the <head> tag of all the .html files like this

<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,500,700,900' rel='stylesheet' type='text/css'>

And you have to add the font name into css file like

font-family: 'Raleway', sans-serif !important;

You can choose any one of the menu from our 12 menu style for your website navigation.

Light/White menu
Dark menu
Transparent menu
Semi Transparent menu
Floating menu
Center Menu
Bottom position menu
Border Bottom menu
Box menu
Border Box menu
Brand Color Menu
Toggole Menu

Light Menu:

====================

Html structure of Light Menu.

<!--header start-->
<header id="header" class="tt-nav">
    <div class="header-sticky light-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">

                <!--logo start-->
                <a href="index.html" class="logo-brand">
                    <img src="assets/img/logo.png" alt=""/>
                </a>
                <!--logo end-->

                <!--mega menu start-->
                <ul class="menuzord-menu pull-right">
                    <li><a href="#">Home</a> </li>
                    ...
                </ul>
                <!--mega menu end-->

            </div>
        </div>
    </div>
</header>
<!--header end-->

Drak Menu :

===================

Html structure of Dark Menu. Just add class name dark-header into <div class="header-sticky dark-header">

<!--header start-->
<header id="header" class="tt-nav">
    <div class="header-sticky dark-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>
</header>
<!--header end-->

Transparent Menu :

====================

Html structure of Transparent Menu. Just add class name transparent-header into header tag

<!--header start-->
<header id="header" class="tt-nav transparent-header">

    <div class="header-sticky light-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>

</header>
<!--header end-->

Semi Transparent Menu :

==========================

Html structure of Semi Transparent Menu. In semi transparent menu should class name transparent-header into header tag. And class name semi-transparent into header-sticky tag. And need class name light into <ul class="menuzord-menu pull-right light"> tag for white color menu.

<!--header start-->
<header id="header" class="tt-nav transparent-header">

    <div class="header-sticky semi-transparent">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                <ul class="menuzord-menu pull-right light">
                ...
                </ul>
            </div>
        </div>
    </div>

</header>
<!--header end-->

Floating Menu:

==================

Html structure of Floating Menu. In scrolling page of floating menu apper alternate menu.

Structure as follows..

<!--header start-->
<header id="header" class="tt-nav transparent-header floating-menu">

    <div class="header-sticky ">
        <div class="container mainmenu light-nav ">
            <div id="materialize-menu" class="menuzord">
                <ul class="menuzord-menu pull-right" id="menu-list">
                ...
                </ul>
            </div>
        </div>

        <!--alternate menu appear start-->
        <div class="menu-appear-alt" >
            <div class="container">
                <div id="materialize-menu-alt" class="menuzord" >
                    <!--alternate menu appearing here ... -->
                </div>
            </div>
        </div>
        <!--alternate menu appear end-->

    </div>
</header>
<!--header end-->

Center Menu:

================

Html structure of Center Menu.

<!--header start-->
<header id="header" class="tt-nav nav-center-align">
    <div class="light-header">
        <div class="container mainmenu">
            <div id="materialize-menu" class="menuzord">
                <!--logo start-->
                <a href="index.html" class="logo-brand">
                    <img class="retina" src="img/logo.png" alt=""/>
                </a>
                <!--logo end-->

                <!--mega menu start-->
                <ul class="menuzord-menu border-tb" id="menu-list">
                    ...
                </ul>
                <!--mega menu end-->
            </div>
        </div>
        <!--alternate menu appear start-->

        <div class="menu-appear-alt" >
            <div class="container">
                <div id="materialize-menu-alt" class="menuzord" >
                    <!--alternate menu appearing here ... -->
                </div>
            </div>
        </div>
        <!--alternate menu appear end-->
    </div>
</header>
<!--header end-->

Bottom Possition Menu:

==========================

Html structure of Bottom Menu. add class name nav-bottom into header tag

<!--header start-->
<header id="header" class="tt-nav nav-bottom">
    <div class="light-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                <!--logo start-->
                <a href="index.html" class="logo-brand">
                    <img src="img/logo.png" alt=""/>
                </a>
                <!--logo end-->

                <!--mega menu start-->
                <ul class="menuzord-menu dark pull-right">
                    ...
                </ul>    
                <!--mega menu end-->
            </div>
        </div>
    </div>
</header>
<!--header end-->

Border Bottom Menu:

==========================

Html structure of Border Bottom Menu. In Border Bottom Menu add class name nav-border-bottom into header tag.

<!--header start-->
<header id="header" class="tt-nav nav-border-bottom">
    <div class="header-sticky light-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>
</header>
<!--header end-->

Box Menu:

===========

Html structure of Box Menu. Just add class name nav-boxed-color into <div class="header-sticky light-header">

<!--header start-->
<header id="header" class="tt-nav">
    <div class="header-sticky light-header nav-boxed-color">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>
</header>
<!--header end-->

Border Box Menu:

=================

Html structure of Border Box Menu. Just add class name nav-boxed-box into <div class="header-sticky light-header">

<!--header start-->
<header id="header" class="tt-nav">
    <div class="header-sticky light-header nav-border-box">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>
</header>
<!--header end-->

Brand Color Menu:

=================

Html structure of Brand Color Menu. Just add class name brand-header into <div class="header-sticky">

Brand Header color is changeable, you can change brand-header color by replacing your own brand color from header.css

<!--header start-->
<header id="header" class="tt-nav">
    <div class="header-sticky brand-header">
        <div class="container">
            <div id="materialize-menu" class="menuzord">
                ...
            </div>
        </div>
    </div>
</header>
<!--header end-->

Toggole Menu:

=================

Toggole Menu used in Digital Agency Demo. You have to write some css and little javascript code for toggle menu. You will find all css in style.css and javascript code in script.js of Digital Agency Demo.

Html structure is like:

<header>
  <a class="tt-logo" href="index.html">
      <img src="assets/img/logo.png" alt="Logo">
  </a>

  <div class="nav-wrapper" id="toggle">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
  </div>

  <div class="nav-overlay" id="overlay">

   <nav class="overlay-menu">
     <ul>
        <li><a href="index.html">Home</a></li>
     </ul>
   </nav>
  </div>

</header>

JavaScript code is like:

/* ======= Full Screen Menu ======= */
$('#toggle').on('click', function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

There is a search button in right corner of every menu. You can add or remove it vary easily. Add <div class="search-wrapper"> div with it's all inner content just before <div class="menuzord"> into container section. And add .has-header-search class in <body id="top" > tag for proper alignment of search button.

<body id="top" class="has-header-search">

 <!--header start-->
 <header id="header" class="tt-nav">
   <div class="header-sticky light-header">
    <div class="container">

     <div class="search-wrapper">
      <div class="search-trigger pull-right">
        <div class='search-btn'></div>
         <i class="material-icons">search</i>
       </div>

      <!-- Modal Search Form -->
      <i class="search-close material-icons">close</i>
      <div class="search-form-wrapper solid-bg">

     <form action="#">
      <div class="input-field">
      <input type="text" name="search" id="search">
      <label for="search" class="">Search Here...</label>
      </div>
      <button class="btn pink search-button waves-effect waves-light" type="submit">
       <i class="material-icons">search</i>
    </button>
   </form>

   </div>
  </div><!-- /.search-wrapper -->

   <div id="materialize-menu" class="menuzord">

    <!--mega menu start-->
     <ul class="menuzord-menu pull-right">
       <li><a href="#">Home</a> </li>
       ...
     </ul>
    <!--mega menu end-->

    </div>
   </div>
   </div>
 </header>
 <!--header end-->

</body>

There are two kinds of font icons used in this template.

FontAwesome
Material Icon

Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example:

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

Material Icons
====================

Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects, hosted by Google.

Material Icon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.

There are two options to add a material icon in your web site. You can simply add <i class="material-icons">layers</i> icon name with material-icons class. Which is supported by all modern browser.

If you want to show all icons in Internet Explorar 9 or below you should add icons unicode like this <i class="material-icons"></i>

<!-- For modern browsers. -->
<i class="material-icons">layers</i>

<!-- For IE9 or below. -->
<i class="material-icons">&#xE53B;</i>

For IE9 compatibility reason we used second option(with Unicode). You can simply use the first option.

Here https://design.google.com/icons/ you will get 900+ Material Icons and it's unicodes.

Just click on a icon, a popup window will appear from bottom then click on ICON FONT from right top corner you will get both versions of each icon.

Materialize have 10 different page title

Default Title
Background Title
Background Transparent Title
Parallax Transparent Title
No Background Title
Pattern Title
Center Align Title
Right Align Title
Dark Title
Mini Title

1. Default Title

==================

Default Page Title style with Text Left aligned & Breadcrumbs Right aligned.

<!--page title start-->
<section class="page-title ptb-50">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Default Page Title</h2>
                <ol class="breadcrumb">
                    <li><a href="#">Shortcodes</a></li>
                    <li class="active">Page Title</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<!--page title end-->

2. Background Title

==================

<section class="page-title page-title-bg overlay ptb-190">
    ....
</section>

3. Fixed Background

=====================

<section class="page-title page-title-bg fixed-bg overlay ptb-190">
    ....
</section>

4. Page Title Center

=====================

<section class="page-title page-title-center ptb-90">
    ....
</section>

5. Page Title Dark

=====================

<section class="page-title dark-bg ptb-90">
    ....
</section>

6. Page Title Parallax

=======================

<section class="page-title parallax-bg page-title-bg overlay ptb-190" data-stellar-background-ratio="0.1">
    ....
</section>

7. Page Title No BG

=======================

<section class="page-title ptb-50 no-bg">
    ....
</section>

8. Page Title Pattern BG

=======================

<section class="page-title pattern-bg ptb-50">
    ....
</section>

9. Page Title Right

=======================

<section class="page-title page-title-right ptb-50">
    ....
</section>

10. Page Title Mini

=======================

<section class="page-title ptb-30">
    ....
</section>

The standard page section has the following...

<section class="section-padding">
    <div class="container">
      <div class="text-center mb-80">
          <h2 class="section-title text-uppercase">Who we are</h2>
          <p class="section-sub">Quisque non erat mi. Etiam congue et augue sed tempus.</p>
      </div>
    </div><!-- /.container -->
</section>

Section Background color change

=================================

You can change the section background color. like gray-bg/dark-bg.

For gray background color please add extra class name gray-bg and For dark background color add class name dark-bg .

<section class="section-padding gray-bg">
    <div class="container">

    </div><!-- /.container -->
</section>

Parallax Section

=========================

For parallax section add class name parallax-bg with banner-wrapper banner-wrapper class and chose a banner number for background image. Add data-stellar-background-ratio="0.1 to 0.9"

You can change background Image from CSS.

<section class="section-padding banner-wrapper parallax-bg overlay banner-7" data-stellar-background-ratio="0.5">
    <div class="container">

    </div><!-- /.container -->
</section>

We have created some useful helper classes for you. Here are a few of them:

.radius-2 to .radius-4 (for border radious)
.font-20 to .font-40 (for inline font-size)
.line-height-40 (for inline line-height)
.text-light (for light(300) text)
.text-regular (for regular(400) text)
.text-medium (for medium(500) text)
.text-bold (for bold(700) text)
.text-extrabold (for extra bold(900) text)

.brand-color (for theme primary color)
.brand-bg (for theme primary background color)

.full-height (for device full height)
.half-height(for device half height)

For Margin Classes:

.no-margin {
    margin: 0 !important;
}

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}
.no-padding {
    padding: 0 !important;
}
.section-padding {
    padding: 110px 0;
}

/*margin top*/
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-100 {
    margin-top: 100px;
}
/*margin bottom*/
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}
.mb-80 {
    margin-bottom: 80px !important;
}
.mb-100 {
    margin-bottom: 100px !important;
}
.mtb-50 {
    margin: 50px 0 !important;
}
/*margin right*/
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}

For Padding Classes:

/*padding-top*/
.padding-top-50 {
    padding-top: 50px;
}
.padding-top-70 {
    padding-top: 70px;
}
.padding-top-90 {
    padding-top: 90px;
}
.padding-top-100 {
    padding-top: 100px;
}
.padding-top-110 {
    padding-top: 110px;
}
.padding-top-120 {
    padding-top: 120px;
}
.padding-top-160 {
    padding-top: 160px;
}
/*padding-bottom*/
.padding-bottom-20 {
    padding-bottom: 20px;
}
.padding-bottom-30 {
    padding-bottom: 30px;
}
.padding-bottom-50 {
    padding-bottom: 50px;
}
.padding-bottom-70 {
    padding-bottom: 70px;
}
.padding-bottom-80 {
    padding-bottom: 80px;
}
.padding-bottom-90 {
    padding-bottom: 90px;
}
.padding-bottom-100 {
    padding-bottom: 100px;
}

.padding-bottom-110 {
    padding-bottom: 110px;
}
.padding-bottom-120 {
    padding-bottom: 120px;
}

@media screen and (min-width: 992px) {
    /*padding left*/
    .pl-100 {
        padding-left: 100px;
    }
}

/*padding top bottom*/
.ptb-30 {
    padding: 30px 0;
}
.ptb-50 {
    padding: 50px 0;
}
.ptb-70 {
    padding: 70px 0;
}
.ptb-90 {
    padding-top: 90px;
    padding-bottom: 90px;
}
.ptb-110 {
    padding-top: 110px;
    padding-bottom: 110px;
}

.ptb-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}
.ptb-150 {
    padding: 150px 0;
}
.ptb-190 {
    padding: 190px 0;
}

/*Margin for small devices*/
@media (max-width: 991px) {
    .mb-sm-30 {
        margin-bottom: 30px;
    }
    .mb-sm-50 {
        margin-bottom: 50px;
    }
    .mt-sm-50 {
        margin-top: 50px;
    }
}

Portfolio filter structure is following..

<div class="portfolio-container text-center">
    <ul class="portfolio-filter brand-filter">
        <li class="active waves-effect waves-light" data-group="all">All</li>
        <li class="waves-effect waves-light" data-group="websites">Websites</li>
        <li class="waves-effect waves-light" data-group="branding">Branding</li>
        <li class="waves-effect waves-light" data-group="marketing">Marketing</li>
        <li class="waves-effect waves-light" data-group="photography">Photography</li>
    </ul>
</div>

Portfolio Item structure is following...

<div class="portfolio col-4 gutter">
  <div class="portfolio-item" data-groups='["all", "branding", "photography"]'>
    <div class="portfolio-wrapper">
      <div class="thumb">
        <div class="bg-overlay"></div>
        <img src="assets/img/portfolio/portfolio-1.jpg" alt="">
        <div class="portfolio-intro">
          <div class="action-btn">
            <a href="assets/img/portfolio/portfolio-5.jpg" class="tt-lightbox" title=""><i class="fa fa-search"></i></a>
          </div>
          <h2><a href="#">Portfolio Title</a></h2>
          <p><a href="#">Branding</a></p>
        </div>
      </div><!-- thumb -->
    </div><!-- /.portfolio-wrapper -->
  </div><!-- /.portfolio-item -->
</div>

We have 5 column option (2 column, 3 column, 4 column, 5 column and 6 column) with gutter and gutter less.

If you want to show 3 column portfolio items then code as follows

<div class="portfolio col-3">

</div>

Here just added class name col-3 into portfolio tag like <div class="portfolio col-3 ">

Similarly you can set

column 2 col-2

column 4 col-4

column 5 col-5

column 6 col-6

and if you need gutter of those column the just add a gutter class name , like this...

<div class="portfolio col-3 gutter">

</div>

Portfolio with Title

==========================

Portfolio with title structure are as follows

<div class="portfolio portfolio-with-title col-4">
    <div class="portfolio-item" data-groups='["all", "branding", "photography"]'>
      <div class="portfolio-wrapper">
        <div class="thumb">
          <div class="bg-overlay brand-overlay"></div>
          <img src="assets/img/portfolio/portfolio-1.jpg" alt="">
          <div class="portfolio-intro">
            <div class="action-btn">
              <a href="assets/img/portfolio/portfolio-1.jpg" class="tt-lightbox" title="iOS Game Design"> <i class="fa fa-search"></i></a>
            </div>
          </div>
        </div><!-- thumb -->
        <div class="portfolio-title">
            <h2><a href="#">Creative Design</a></h2>
            <p><a href="#">iOS Design</a> </p>
        </div>
      </div><!-- /.portfolio-wrapper -->
    </div><!-- /.portfolio-item -->
</div>

Portfolio Card Style

==========================

Portfolio card style structure are as follows

<div class="portfolio-item">
  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="assets/img/portfolio/portfolio-1.jpg" alt="image">
    </div>
    <div class="card-content">
      <span class="card-title activator">Portfolio Title <i class="fa fa-ellipsis-v right"></i> <i class="fa fa-heart-o right"></i></span>
      <p><a href="#">Photography</a></p>
    </div>

    <div class="card-reveal">
      <span class="card-title">Portfolio Title<i class="material-icons right">close</i></span>
      <p><a href="#">Photography</a></p>
      <p>Authoritatively grow quality technologies for strategic sources.</p>
      <a href="#" class="readmore">View full project</a>
    </div>
  </div><!-- /.card -->
</div><!-- /.portfolio-item -->

In Materialize you will get booth version (version 4 and version 5) of the Revolution Slider. You can use any one of them which you like most. (You will get Revolution Slider version 4 with Construction Demo.)

You will get full documentation with relevant folder.

Important: Some of the features of Revolution Slider (latest version 5.x) may not work in local server. If you want to work/test on local server you need to include extensions of revolution slider (You do not need to include on live server).

We used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.

First open script.js from assets/js/scripts.js find out /* ======= GOOGLE MAP ======= */ wrapper.

Put your latitude longitude, put your map marker at $marker_url.

Write your address in "contentString".

You can also change map color form "stylers" zoom options form "map_zoom"

If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/ you can easily generate.

In html put the map "id" in any section and give it a min-height(your desired height)

HTML Markup:
===================

<!-- map-section -->
<div id="myMap" class="height-350"></div>
<!-- /.map-section -->

JS Markup:
================

/* ======= GOOGLE MAP ======= */
    jQuery(document).ready(function($) {
        //set your google maps parameters
        var $latitude = 40.716304,
            $longitude = -73.995763,
            $map_zoom = 16; /* ZOOM SETTING */

        //google map custom marker icon 
        var $marker_url = 'assets/images/pin.png';

        //we define here the style of the map
        var style = [{
            "stylers": [{
                "hue": "#03a9f4"
            }, {
                "saturation": 10
            }, {
                "gamma": 2.15
            }, {
                "lightness": 12
            }]
        }];
        //set google map options
        var map_options = {
            center: new google.maps.LatLng($latitude, $longitude),
            zoom: $map_zoom,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            styles: style,
        }
        //inizialize the map
        var map = new google.maps.Map(document.getElementById('myMap'), map_options);
        //add a custom marker to the map                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($latitude, $longitude),
            map: map,
            visible: true,
            icon: $marker_url,
        });

        var contentString = '<div id="mapcontent">' + '<p>Materialize, 795 Folsom Ave, San Francisco.</p></div>';
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 320,
            content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map, marker);
         });
    });

In Materialize template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open "sendemail.php" file from root folder in any code editor .

Go to the line number 9. There is a line:

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via email.

Configuring and Set-up countdown time is extremely easy. To customize/change the countdown time, please open script.js from assets/js/scripts.js in any code editor. Find out /* === CountDown === */ wrapper, put your date in existing date.

The script is look like:

        /* === CountDown === */
        if ($('.countdown').length > 0) {
            $(".countdown").countdown({
                date: "31 december 2017 12:00:00",
                format: "on"
            });
        }

We used a dynamic full functional Mailchimp Newsletter Subscription form in this template. You can easily change your Mailchimp form post url.

Open "ajaxchimp-config.js" from assets/js/ folder.

Replace exsisting url with your own mailchimp form post url inside the url: "---".

        if ($('.project-carousel').length > 0) {
            $('.mailchimp').ajaxChimp({
                callback: mailchimpCallback,
                //replace bellow url with your own mailchimp form post url inside the url: "---".
                url: "http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&amp;id=c335e5ec53" 
            }); 
            function mailchimpCallback(resp) {
                 if (resp.result === 'success') {
                    $('.subscription-success').html('<i class="fa fa-check"></i>' + resp.msg).fadeIn(1000);
                    $('.subscription-error').fadeOut(500);
                } else if(resp.result === 'error') {

                    $('.subscription-error').html('<i class="fa fa-times"></i>' + resp.msg).fadeIn(1000);
                }  
            }
        }

VERSION 1.5

======================

Added:

1. Added dark and light alter logo for transparent navbar

Fixed:

===================

1. Optimaized some css

2. Minor issue fixed

Changed:

===================

1. Changed logo and template title for a copyright concern.

2. Replaced all .matrox and .matrox-* classes with .materialize class

Updated: Documentation

VERSION 1.4

======================

Added:

1. New Demo for SEO Agency (full website demo)

2. New Demo for Coffee Shop (full onepage demo)

3. Shortcode Pricing Table Page

4. Shortcode Food Menu Page

5. New shortcode featured services

6. Multiple Map in single page (in CoffeeShop Demo)

7. New Flaticon added in fonts folder(used in coffeeshop)

Fixed:

===================

1. Optimaized some css

2. Minor Slider issue fixed

3. Minor css issue fixed

Updated: Documentation

VERSION 1.3

======================

Added JS

1. ajaxchimp-config.js

Fixed:

===================

1. Mail Chimp javascript conflict

VERSION 1.2

======================

Added New Demo:

1. Event Landing Page

2. ComingSoon Page

Integrated:

====================

1. Mailchimp Subscription

2. Count Down Script

Fixed:

===================

1. Modified some section design

2. Modified alert design

3. Onepage menu issue fixed

4. Minor issue fixed

VERSION 1.0

======================

1. Initial release

Instructions for Previous (VERSION 1.0) user:

======================================================

If you want to use new features from updated file you need to replace your css folder and js folder with the updated css and js folder.

Warning: You should keep a backup of your all previous file, replacing folders and files may replace your custom css and javascript.

Image Credits:
================

Graphic Stock: https://www.graphicstock.com/

Freepik: http://www.freepik.com/

Nothingtochance: http://nothingtochance.co/

Photos and Videos:
===================

Important!

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.

End:
==============

Once again, thank you very much for purchasing this template; we'll be glad to help you if you have any questions.

If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.

Thanks,

Trendy Theme Team :)

Materialize Documentation

Material design based mutipurpose HTML Template

Overview

Installation

HTML Structure

Logo Format

Font Change

Navigation

Search Button

Icons

Page Title

Page Section

Section Extra Classes

Portfolio

Revolution Slider

Google Map

Contact Form

Adding Countdown Time

Mailchimp Subscription

Changelog

Sources & Credits

HTML/CSS
==============

Fonts
=============

JavaScripts
============

Materialize Documentation

Material design based mutipurpose HTML Template

Overview

Installation

HTML Structure

Logo Format

Font Change

Navigation

Search Button

Icons

Page Title

Page Section

Section Extra Classes

Portfolio

Revolution Slider

Google Map

Contact Form

Adding Countdown Time

Mailchimp Subscription

Changelog

Sources & Credits

HTML/CSS ==============

Fonts =============

JavaScripts ============

HTML/CSS
==============

Fonts
=============

JavaScripts
============