Material Portfolio is a modern looking free material design portfolio template built with the Material Design Light framework. It has clean material look which is ideal for showcasing portfolio of a person or a company website.

When you download this free template, you will get templates for Home page (index.html), Portfolio page (portfolio.html), Portfolio item description page (portfolio-page.html), About page (about.html) and a Contact Page (contact.html), all designed with Material design.

The Home Page features a large Welcome Card with a call to action button, followed by a placeholder for displaying an intro video to your visitors. It also has a preview of your portfolio which links to the actual portfolio page. At the bottom, you will find sections for customer testimonials as well as a calendar card to display details of events, conferences, deals etc.

The contact page included with the template has a working contact form integrated with Formspree and works with static sites (without PHP) too. All you need to do is change the email address in form’s action URL and you will start receiving e-mails from contact form submissions. (You may need to verify your e-mail with Formspree first, Formspree is a free service).

Thanks to the MDL framework, you will find Material style ripple effect animations on all buttons. All the pages also contain a floating action button (FAB) at the bottom in Material design style to help your visitor quickly reach out to you using the contact page.

The template is completely responsive and displays well with all screen sizes including mobile devices. You can change the color scheme by changing the MDL css URL used in the template. Refer to the MDL customizer tool to select your color scheme.

We have also included all the demo images (courtsey: Pixabay) as well as the Logo (in SVG and PNG formats) used in the demo website.


Material Design

The template design is inspired by Google’s Material design and uses MDL framework which offers a lot of material components, layouts and interactions.

Modern Portfolio Template

A modern portfolio template featuring card layout and Material design colors (Indigo and Pink) which can be customized using the MDL customizer.

Additional Page Templates

A website is not complete without about and contact pages and we have included them with the template along with a unique homepage and portfolio page.

Easy to Understand Code

The template is based on MDL and has an easy to understand code which you can modify to suit your own needs.

Sample Content & Images

All images included in the demo are included with the template download file. The logo shown in demo is provided in SVG and PNG formats.


The template is provided to you at no cost. It’s CCA3 licensed and you are free to do any modification to it as long as you provide credit to

Download Options

Free Download

  • Must keep backlink in footer
  • Use in personal projects
  • Source SCSS files
  • Support via e-mail
  • CCA3 license

Buy License

  • Remove footer backlink
  • Use in personal or commercial projects
  • Source SCSS files
  • Support via e-mail
  • Premium license

Share this →


  1. Rucha Kadam says:

    It’s an amazing template. I used it to build my portfolio website ( and I’m impressed by the quality of the TemplateFlip’s work. They have got a nice documentation too.

  2. Taneal Bhandari says:

    This would perfectly suit my needs. I downloaded the free version to play around with. If you can resolve two issues, I’ll pay for the upgrade:

    1) How can I make the header/banner not go full-width? I only want it maybe 80%. I couldn’t find where in the CSS to edit this.

    2) What about sub-menus? Is that possible with this layout?


    1. TemplateFlip Team says:

      Hi Taneal,

      1) You can add the following style in the CSS file to make the header banner 80%

      .site-header {
        max-width: 80%;
        margin: 0 auto;

      2) You can create sub-menus using mdl-menu. Refer to the documentation here:

      Note that, this is a template built with Google’s official Material Design Light (MDL) Framework and hence you can add anything that MDL supports.

      1. Taneal Bhandari says:

        Oh cheers! That did it for the header issue!

        Where can I make a donation?

        I’m looking at the documentation right now. They have some clear examples of menu layouts, but none of the examples show incorporating nested sub-menus (like if I have a top-level menu item called “About” that links to a page, but also has a couple of sub-menu items under it). Any idea about that?


        1. TemplateFlip Team says:

          Hi Taneal,

          Glad to know the header worked. Regarding the sub-menu. All you need to do is replace the icon part in the dropdown button and instead add your menu text like ‘About’. We have created a codepen here to show you how:

          Note that, the sub-menu will activate only upon clicking hence we don’t recommend linking a page to your top level menu item. Instead you can give the top level menu a generic name like “About Us” and then have the About page as submenu item.

          We don’t have a donation page, but you can simply purchase the premium version of this template to show your support. Thanks!

          1. Taneal Bhandari says:

            Cheers again! Just bought the license!

            I’m still having a slight issue with implementing your solution for the sub-menu. I can get your example to work by itself, but when I try to apply your changes to the portfolio template, it doesn’t seem to work quite right.

            I can’t seem to include the section of the sub-menu after the ‘a’ tag for the About page (nothing happens). It works if I move the section after the closing tag, however, then the pop-up opens up in the wrong location on the screen (not underneath the About link).

            Any idea on that?


          2. TemplateFlip Team says:

            Thank you for buying the license.

            You may have missed adding ‘mdl-js-button’ class on the ‘a’ tag for the About page which makes the drop-down work.

            If that is not the case then, we would need to look at your actual code in order to be able to help. Please provide us with a URL of your live site or give access to the zip file containing your code.


  3. Taneal Bhandari says:

    Hi! I just checked and I did include the ‘mdl-js-button’ class on the ‘a’ tag.

    OK. So I’ll send you the GitHub link. Basically, I started with the Portfolio template here:

    I made a couple of tweaks using your Material Portfolio template.

    The end product works well for what I’m trying to do except this sub-menu issue. Here’s the link to the GitHub repo:

    It’s weird. The sub-menu effect works and the menu pops up, just not close to the ‘About’ menu item and I can’t figure out why.

    1. TemplateFlip Team says:

      Hi Teneal, we checked your repo. Actually the submenu does gets shown but it gets hidden as the header element is restricting overflow of elements. In order to fix this, we have to move the menu out of the header and add a few styles to make it centered outside the header. We have prepared a demo for you here:

      You can see the code changes in About.html and style.css using the following links:!/ubiquitous-microwave?path=about.html:64:14!/ubiquitous-microwave?path=css/styles.css:18:25

      Let us know when you have used the code from the above demo so that we can delete the demo instance on


      1. Taneal Bhandari says:

        Awesome! That totally did the trick! Thanks again!

        Btw, how do you go about debugging CSS issues? I normally do backend development and haven’t been able to figure out a good way to troubleshoot frontend CSS issues.

        1. TemplateFlip Team says:

          Glad to know it worked. Mozilla has good write-up about CSS debugging:

  4. Taneal Bhandari says:

    Hi! Quick question, just to see what it looks like, is there a way to make the header NOT stay fixed and to remove the waterfall feature? I’d like that section to scroll off screen.

    Also, I want to see large logo for large screen, and small logo for small screen since I’d like to see what it would look like without that waterfall effect.

    I see that removing the “mdl-layout__header–waterfall” class gets rid of the waterfall effect. I just couldn’t tell how to make the header section not fixed and to be able to scroll off screen.


    1. TemplateFlip Team says:

      Hi Taneal,

      Please note that, our support does not include template customization job/assistance. We have to draw a fine line between template support and template customization like the one’s you are asking. You can easily hire a freelance web developer for such customizations which changes the look and behavior of the original template.

      We will be happy to help you in any support query regarding our template, which include fixing anything that doesn’t work as expected and helping you in replacing the demo data with your own data.


      1. Taneal Bhandari says:

        Got it. That totally makes sense. Do you guys offer such a service? I figure why not ask you guys since you’re themost familiar with the code.

        1. TemplateFlip Team says:

          Unfortunately, we don’t offer it at this point. We may consider it in future.

          1. Taneal Bhandari says:

            Doh! OK. Cool. Do you have any referrals?

            How about the large versus small logo issue? Currently, everything looks great on a desktop/laptop browser, but on mobile, the logo section looks too large until you begin to scroll. After scrolling, it resizes and looks great. It’s just the initial page load where the logo section looks too large. Any idea here?


          2. TemplateFlip Team says:

            We don’t have any referrals, however you can check on sites like
            Regarding the header on mobile, that is the intended behavior of the waterfall header.

Leave a Reply

Your email address will not be published. Required fields are marked *