FLATRICA

Flatrica | Material CV/Resume

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form Here. Thanks!

Structure

We used SCSS to generate style.css. All SCSS components can be found on sass folder. Here materialize.css is a bit customized we disabled some components like grid system. Template uses Bootstrap grid system plus various Material Design feature from Materialize to form a perfect Material CV template. we also included 12 different color styles in the stylesheet folder. style.css is very well structured, changing css will be easy. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

<!DOCTYPE html>
<html lang="en">
<head>
  ............................................
</head>
<body>

<!--==========================================
                  PRE-LOADER
===========================================-->
<div id="loading">
   .............................................
</div>

<!--==========================================
                  HEADER
===========================================-->
<header id="home">
    ................................
</header>


<!--==========================================
                  V-CARD
===========================================-->
<div id="v-card-holder" class="section">
    ...........................................
</div>


<!--==========================================
                  ABOUT
===========================================-->
<div id="about" class="section">
    ...........................................
</div>


<!--==========================================
                  EDUCATION
===========================================-->
<section id="education" class="section">
    ..........................................
</section>


<!--==========================================
                  SKILLS
===========================================-->
<section id="skills" class="section">
    ..........................................
</section>


<!--==========================================
                  EXPERIENCE
===========================================-->
<section id="experience" class="section">
    ...........................................
</section>

<!--==========================================
                  MODALS
===========================================-->
<section>
    ..........................................
</section>
<!--==========================================
                  PORTFOLIOS
===========================================-->
<section id="portfolios" class="section">
   ...........................................
</section>


<!--==========================================
                  INTEREST
===========================================-->
<section id="interest" class="section">
   ...........................................
</section>


<!--==========================================
            TESTIMONIALS AND CLIENTS
===========================================-->
<section id="testimonials" class="section">
    ..........................................
</section>

<!--==========================================
                 PRICING TABLE
===========================================-->
<section id="pricing-table" class="section">
    ..........................................
</section>

<!--==========================================
                 BLOG
===========================================-->
<section id="blog" class="section">
   ...........................................
</section>

<!--==========================================
                CONTACT
===========================================-->
<section id="contact" class="section">
    ..........................................
</section>

<!--==========================================
              SCROLL TO TOP
===========================================-->
<div id="scroll-top">
    .........................................
</div>

<!--==========================================
                FOOTER
===========================================-->

<footer>
   ..........................................
</footer>

<!--==========================================
                SCRIPTS
===========================================-->
...............................................
</body>
</html>

CSS Files and Structure

CSS Vendors

  1. bootstrap.min.css
  2. materialize.css
  3. animate.min.css
  4. font-awesome.min.css
  5. magnific-popup.css
  6. swiper.min.css
  7. material icons(cdn)

Main Stylesheets

  1. style.css(Green)
  2. style_blue.css
  3. style_brown.css
  4. style_gray.css
  5. style_green.css
  6. style_pink.css
  7. style_purple.css
  8. style_red.css
  9. style_teal.css
  10. style_blue_blend.css
  11. style_green_blend.css
  12. style_dark_dark.css
  13. style_dark_gray.css

Fonts

Two Google fonts are used

<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

SASS/SCSS

SCSS Structure

  1. _abstracts
    • _variables.scss
  2. _base
    • _base.scss
    • _toc.scss
    • _typography.scss
    • _utility.scss
  3. _components
    • _card.scss
    • _modal.scss
    • _pre-loader.scss
    • _scrolltop.scss
    • _video.scss
  4. _layout
    • _single-page.scss
  5. _mixins
    • _mediamixins.scss
  6. _sections
    • _header.scss
    • _v-card.scss
    • _about.scss
    • _skills.scss
    • _timeline.scss
    • _portfolios.scss
    • _interest.scss
    • _pricing.scss
    • _blog.scss
    • _testimonials.scss
    • _contact.scss
    • _footer.scss

JS

JavaScript Vendors

  1. jquery-2.1.3.min.js
  2. bootstrap.min.js
  3. materialize.min.js
  4. jquery.magnific-popup.min.js
  5. markerwithlabel.min.js
  6. scrollreveal.min.js
  7. swiper.jquery.min.js
  8. retina.min.js

Main JavaScripts

  1. custom.js
  2. single-page.js [for Single Blog and Portfolio Page]

Customization

Color Change

Change color by just adding ur desired color stylesheet in <head>. Plus you can have your own color by changing primary and accent color in _variables.scss

<head>
<!-- Custom Style -->
    <link href="stylesheets/preferred_stylesheet.css" rel="stylesheet">
</head>

Menu

To Customize menu item just edit the anchor tags and other properties

<!--MENU-->
<div id="menu-options" class="menu-wrap">
    <!--PERSONAL LOGO-->
    <div class="logo-flat">
        <img alt="img-demo" class="img-responsive" src="...........">
    </div>
    <!--OPTIONS-->
    <a  href="#home"><i class="title-icon fa fa-user"></i>Home</a>
    <a  href="#about"><i class="title-icon fa fa-dashboard"></i>About</a>
    .....................
</div>

V-Card

Change various attribute of the V-Card by editing following structure.

<!-- V-CARD -->
<div id="v-card" class="card">
    <!-- PROFILE PICTURE -->
    <div id="profile" class="right">
        <img alt="..." class="...." src=".....">
        ....
    </div>
    <div class="card-content">
        <!-- NAME & STATUS -->
        <div class="info-headings">
            <h4>JOHN DOE</h4>
            <h6>.................</h6>
        </div>
        <!-- CONTACT INFO -->
        <div class="infos">
            <ul class="profile-list">
                <li>
                    <strong class="title"><i class="material-icons">....................</i></strong>
                    <span class="content">......................</span>
                </li>
                .....................
            </ul>
            <div class="links">
                <!-- FACEBOOK-->
                <a href="#"><i class="fa fa-facebook"></i></a>
                ..........
            </div>
        </div>
    </div>
</div>

Now to enable VIDEO in V-Card just uncomment/add the VIDEO PLAY BUTTON, VIDEO CLOSE BUTTON & HTML 5 VIDEO’s HTML and comment/remove the EMPTY PLUS BUTTON. If you don’t want to use VIDEO just do the Opposite.

<!-- V-CARD -->
 ...........................
    <!--EMPTY PLUS BUTTON-->
    <div class="btn-floating btn-large add-btn"><i class="material-icons">add</i></div> 

    <!--VIDEO PLAY BUTTON-->
    <div id="button-holder" class="btn-holder">
        <div id="play-btn" class="btn-floating btn-large btn-play">
            <i id="icon-play" class="material-icons">play_arrow</i>
        </div>
    </div>


<!--VIDEO CLOSE BUTTON-->
<div id="close-btn" class="btn-floating icon-close">
    <i class="fa fa-close"></i>
</div>

<div class="card-content">

    <!-- NAME & STATUS -->
   .......................

    <!-- CONTACT INFO -->
    ......................
    </div>
</div>

<!--HTML 5 VIDEO-->
<video id="html-video" class="video" poster="videos/Demo%20Resume.jpg" controls>
    <source src="videos/..............webm" type="video/webm">
    <source src="videos/...............m4v" type="video/mp4">
</video>

How to Comment HTML ? Find out below :

<!-- Here Goes HTML -->

How to add videos :

<!--HTML 5 VIDEO-->
<video id="html-video" class="video" poster="videos/Demo%20Resume.jpg" controls>
    <source src="videos/............webm" type="video/webm">
    <source src="videos/...........m4v" type="video/mp4">
</video>

If you are using video from server you need to convert the video in mp4 format. Additionally you can add another format which is webm which will ensure further support but mp4 covers most of the modern browsers. Check out some converter Here

Check Out Some Intro/Cv Videos Here For Inspiration

Skills

Change skill title and skill bar by changing the structure attribute below

Note: Make sure both percentage are same.

<!-- FIRST SKILL SECTION -->
<div class="skills-title">
    <h6 class="text-center">Professional</h6>
</div>
<!-- FIRST SKILL BAR -->
<div class="skillbar clearfix " data-percent="20%">
    <div class="skillbar-title"><span>HTML5</span></div>
    <div class="skillbar-bar"></div>
    <div class="skill-bar-percent">20%</div>
</div>
.............

Timeline

Change timeline letter,title and infos by changing the structure attribute below

Note: You can use icon instead of letter in timeline-dot.

<!-- TIMELINE -->
<div class="timeline-block">
    <!-- DOT -->
    <div class="timeline-dot"><h6>P</h6></div>
    <!-- TIMELINE CONTENT -->
    <div class="card timeline-content">
        <div class="card-content">
            <!-- TIMELINE TITLE -->
            <h6 class="timeline-title">Preparatory Education</h6>
            <!-- TIMELINE TITLE INFO -->
            <div class="timeline-info">
                <h6>
                   ........................
                </h6>
                <h6>
                    .......................
                </h6>
            </div>
            <!-- TIMELINE PARAGRAPH -->
            <p>
               ...................................
            </p>
            <!-- BUTTON TRIGGER MODAL -->
            <a href="#" class="modal-dot" data-toggle="modal" data-target="#myModal-1">
                <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>
.............

Here BUTTON TRIGGER MODAL adds a ... to your timeline block and it will trigger a modal which include further details about the timeline block. To add a modal to any timeline block Just add the anchor tag under timeline paragraph and give it a data-target that matches modal id of a modal in modal section, like below:

<!--MODAL ONE-->
<div class="modal fade" id="myModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <!--MODAL HEADER-->
            <div class="modal-header  text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel-1" >EXPERIENCE AT BOOSTCOM </h4>
                <h6>
                ........................
                </h6>
            </div>
            <!--MODAL BODY-->
            <div class="modal-body">
                <p>
                    .............
                </p>
            </div>
            <!--MODAL FOOTER-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

In Modal Header and Modal Body you can put further details about timeline block. aria-labelledby in .modal and id in .modal-title must be Same and Unique for each modal.

Timeline Vertical Straight Line: If timeline vertical straight line become shorter or longer after entering content in timeline just adjust height in following css

#timeline-education::before {
    left: 50%;
    margin-left: -2px;
    height: 77.1%;
    ................
  }
  #timeline-experience::before {
    left: 50%;
    margin-left: -2px;
    height: 77.1%;
    ..........................
  }

Portfolios

To add a new menu option just add a new list in the CATEGORIES and give it a href inside anchor <a></a>. Now to define content of the added CATEGORY, add a new div in tab-content, give it a id matching href of the new CATEGORY.

<!--OPTIONS-->
<ul class="nav nav-tabs">
    <!--ALL CATEGORIES-->
    <li class="active waves-effect list-shuffle"><a id="all-sample" class="active" href="#all"
                                                    data-toggle="tab">ALL</a>
        <!--CATEGORIES-->
    <li class="waves-effect list-shuffle"><a class="cate" href="#a" data-toggle="tab">LOGO</a></li>
    <li class="waves-effect list-shuffle"><a class="cate" href="#b" data-toggle="tab">DRIBBLE</a></li>
    <li class="waves-effect list-shuffle"><a class="cate" href="#c" data-toggle="tab">WEBSITES</a></li>
</ul>

<!--CATEGORIES CONTENT-->
<div class="tab-content">

    <!--All CATEGORIES-->
    <div id="all"></div>

    <!--CATEGORY 1-->
    <div id="a">

        <!--CATEGORY CONTENT ONE BIG-->
        <div class="col-md-4 col-sm-12 col-xs-12 grid big inLeft">
            <figure class="port-effect-up">
                <img src="images/portfolios/big-1.jpg" class="img-responsive" alt="portfolio-demo"/>
                <figcaption>
                    <h2>Personal <span>LOGO</span></h2>
                    <p>Designed this logo in a competition. It was chosen as a winner.</p>
                    <a href="images/portfolios/big-1.jpg" class="popup-image" data-effect="mfp-3d-unfold">View more</a>
                </figcaption>
            </figure>
        </div>
            ................................
    </div>

There is two layout option,

  1. One Big Tile on Left and Two Small Tiles on Right
  2. All Small Tiles.

Check out the process of achieving these layout blow :

  1. To Make a One big TILE and Two Small TILE in the gallery. follow the below pattern : 
<!--CATEGORY 1-->
<div id="a">
<!--CATEGORY CONTENT ONE BIG-->
<div class="col-md-4 col-sm-12 col-xs-12 grid big inLeft">
.......
</div>
<!--CATEGORY CONTENT TWO SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
.....
</div>
<!--CATEGORY CONTENT THREE SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
........
</div>
</div>

Only one tile will have big class. You have to use big first and then other two tile. Make sure Big Image has equal width and height and big enough to fill the tile.

  1. If you want to have Only Small TILES follow below pattern :
<!--CATEGORY CONTENT ONE SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inLeft">
.........
</div>
<!--CATEGORY CONTENT TWO SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
............
</div>
<!--CATEGORY CONTENT THREE SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
..........
</div>
<!--CATEGORY CONTENT FOUR SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inLeft">
.........
</div>
<!--CATEGORY CONTENT FIVE SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
...........
</div>
<!--CATEGORY CONTENT SIX SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inLeft">
.....
</div>

To Initialize the Gallery add all your category ids in var all and add all category id except first one in var afterFirst in custom.js

 /***PORTFOLIO GALLERY***/
        var all = '#a,#b,#c';
        var afterFirst = '#b,#c';
      ......................

Portfolio Overlay Effects : Flatrica comes with two hover effects.

  1. port-effect-up
  2. port-effect-scale

Check’em out and use the one you like.

  <!--CATEGORY CONTENT ONE BIG-->
                     <div class="col-md-4 col-sm-12 col-xs-12 grid big inLeft">
                         <figure class="port-effect-up">
                            ............................
                     </div>

                     <!--CATEGORY CONTENT TWO SMALL-->
                     <div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
                         <figure class="port-effect-scale">
                          ...............................
                     </div>

Portfolio Anchor Link Options : There is three option available

  1. Lightbox Image
  2. Lightbox Video
  3. Single Portfolio Showcase Page

1. Lightbox Image : Link the image inside <a></a> and give it a class popup-image. You can Follow magnific popup documentation for more info.

<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
  <figure class="port-effect-up">
     ............................................................
      <figcaption>
          .......................................................
          <a href="images/portfolios/portfolio-5.png" class="popup-image" data-effect="mfp-move-horizontal">View more</a>
      </figcaption>
  </figure>
</div>

There are four lightbox effect. These are:

  1. mfp-move-horizontal
  2. mfp-3d-unfold
  3. mfp-move-from-top
  4. mfp-with-fade

Check them out in the demo and use your favourite one.

2. Lightbox Video : Follow the below structure to embed the video from youtube or vimeo. Anchor must have the class popup-vimeo. For youtube use popup-youtube. You can Follow magnific popup documentation for more info.

<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
    <figure class="port-effect-scale">
       ..................................
        <figcaption>
          ..................................................
            <a class="popup-vimeo" href="https://vimeo.com/45830194">View more</a>
        </figcaption>
    </figure>
</div>

3. Single Portfolio Showcase Page : Just link the specific single-portfolio.html file.

<!--CATEGORY CONTENT THREE SMALL-->
<div class="col-md-4 col-sm-6 col-xs-12 grid inRight">
  <figure class="port-effect-up">
     ...........................
         ................................
          <a href="single-portfolio.html">View more</a>
      </figcaption>
  </figure>
</div>

Blog Comments With DISQUS

<!--Universal Code-->
<div id="disqus_thread"></div>
<script>
/**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
   ...................................
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Past it in the single-blog.html like below :

<div class="disqus-comment card">

<!--PAST YOUR UNIVERSAL CODE HERE-->

</div>

Retina Image

retina.min.js plugin makes the theme retina ready. just add the retina image in images folder like below -

learn more about this at http://imulus.github.io/retinajs/

Slider Properties

To Add Autoplay in any Slider add autoplay in specific slider on custom.js like below :

 /***CLIENTS QUOTE SLIDER***/
new Swiper('.swiper-container-clients', {
   .............
    autoplay: 1000
   ..............
});

Learn more about Swiper Slider API Here

Icon Font & Icon PNG

Template comes with two Icon Font. Check out their doc for more info.

  1. Font Awesome - http://fontawesome.io
  2. Material Icons - https://design.google.com/icons/

Change icons in following pattern :

<!--Font Awesome-->
<i class="fa prefered icon"></i>
<!--Material Icon-->
<i class="material-icons">prefered icon</i>

icon folder in images contain lots of image icon for Section Title. Change icons by changing the name of the image :

 <!-- SECTION TITLE -->
<div class="section-title">
    <h4 class="text-uppercase text-center"><img src="images/icons/envelope.png" alt="demo">Contact</h4>
</div>

You can still use Icon Font in Section Title like following :

 <!-- SECTION TITLE -->
<div class="section-title">
    <h4 class="text-uppercase text-center"><i class="title-icon fa fa-graduation-cap"></i>Contact</h4>
</div>

Animation

For scroll animation we used scrollreveal.js you can learn more about this at Github

/***SCROLL ANIMATION***/
window.sr = ScrollReveal({reset: false}); // reset false stops repetition of animation
var commonCards = '#port-add-icon,#map-card,.interest-icon-even,.interest-icon,' +
    '.timeline-dot, .timeline-content,#add-more,#skills-card,#testimonials-card,' +
    '#portfolios-card,#interest-card,#p-one,#p-two,#p-three,#blog-card,#contact-card,#clients,.section-title img';
..............

To stop these animation at mobile screen u can do following : 

/***SCROLL ANIMATION***/
        window.sr = ScrollReveal({reset: false, mobile: false});
};

Map

Change map location in the custom.js , just replace the latitude & longitude in the mapOptions function. 

/*** GOOGLE MAP***/
var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(latitude, langitude),
    .........
};
/* ---------------------------------------------
         INITIALIZING ALL FUNCTIONS
 --------------------------------------------- */
  initMapsNormal();        // Enable For Normal Map
  //initMapsDark();        // Enable For Dark Map

Note: Make sure you provide an G-Maps API key in Script.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR KEY HERE"></script>

Contact

To Setup contact form just put your domain email in the mail_handler.php like following

/* Configuration */
/*your web-mail*/
$mailto  = 'yourmail@provider.com';

Sources and Credits

JAVASCRIPT / JQUERY PLUGINS

CSS PLUGINS

CREDITS

Images & Icon

Support