MADRIN LAW

Law firm HTML5 Boostrap Template


We would happily welcome feedback from you on how, if anywhere, you would like this documentation improved. If you would find anything a little bit easier and more helpful if we went into more detail, or explained something a little better - we'd be happy to hear it. We want MADRIN LAW to be the best theme! If you have any comments, please mail us via the form on http://www.themeforest.net/user/themeroyal

After unzip the download pack, you'll found a Template Folder with all the files.

You can view this Template in any browser, you can display or edit the Template without an internet connection.

The only section that will not work is the Contact Section which contains PHP code and requires a server enviroment for send messages.

Now open your FTP Client (like Filezilla) and upload the content of the Template on your server root.

Once the files are done uploading go to www.yourdomainname.com/index.html

Document Structure:

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit GetBootstrap.

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

These are the css files that are loaded into templates in Head Section.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>MADRIN LAW - LAW FIRM HTML5 WEBSITE TEMPLATE</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.png">
    <!-- vendor css -->
    <link rel="stylesheet" href="vendors/bootstrap-3.2.0-dist/css/bootstrap.min.css">          <!-- enable when need bootstrap theme -->
    <!-- font awesome larva-icon -->
    <link rel="stylesheet" href="assets/fonts/styles.css">
    <!-- main css -->
    <link rel="stylesheet" href="assets/styles/main.css">
    <!-- modernizr need to put in top to best performer -->
    <script src="vendors/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

Google Web Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best. You can change the font into assets/styles/main.css

@import url("http://fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700");

Remember change 

body {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #444444;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
 

Only Modernizr.js is loaded in Head Section.

<!-- modernizr need to put in top to best performer -->
<script src="vendors/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script>

 

These are the JS files that are loaded into templates in end of the Body Section.

<!-- plugin-js -->
<script src="vendors/jquery/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendors/stellar/jquery.stellar.min.js"></script>
<script src="vendors/owl.carousel2/owl.carousel.min.js"></script>
<script src="vendors/easy.piechart/jquery.easypiechart.min.js"></script>
<script src="vendors/FitText/jquery.fittext.js"></script>
<!-- enable when need bootstap js -->
<script src="vendors/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<!-- main-js -->
<script src="assets/scripts/main.js"></script>

 

This is the complete code for main.js, is responsible for all events in the Template. You can edit the following file according to your requirements.

jQuery(document).ready(function($) {

    'use strict';

    // ========================================================================================

    // ==================================Function Suport=======================================

    // ========================================================================================


    $.fn.onScreen = function() {

        if ($(this).length) {

            var thisToTop = $(this).offset().top;

            var navHeight = $('#nav-fix').outerHeight();

            var height = $(this).height();

            var windowToTop = $(window).scrollTop();


            if (windowToTop >= (thisToTop - navHeight) && windowToTop <= (thisToTop + height - navHeight)) {

                return true;

            } else {

                return false;

            }

        }

    };


    $.fn.itemOnScreen = function() {

        var thisToTop = $(this).offset().top;

        var height = $(this).height();

        var windowToTop = $(window).scrollTop();


        if ((windowToTop + $(window).height() > thisToTop + 200) && (windowToTop < thisToTop + height)) {

            return true;

        } else {

            return false;

        }

    };


    $.fn.appearAnimation = function() {

        $(this).each(function() {

            var $this = $(this);

            var animationMenthod = $this.data('animation');

            var animationTime = 700;

            if ($this.data('animation-time')) {

                animationTime = $this.data('animation-time');

            }

            var animationDelay = 0;

            if ($this.data('animation-delay')) {

                animationDelay = $this.data('animation-delay');

            }


            function aFun() {


                $this.not('.item-appeared').css({

                    'animation': 'fadeOut 10ms forwards'

                });


                if (!$this.hasClass('item-appeared') && $this.itemOnScreen()) {

                    $this.delay(animationDelay).queue(function() {

                        $this.css({

                            'animation': animationMenthod + ' ' + animationTime + 'ms forwards'

                        }).addClass('item-appeared').dequeue();

                    });

                }

            }


            setTimeout(aFun(), 500);


            $(window).scroll(function() {

                aFun();

            });

        });

    };


    setInterval(function() {

        if ($(window).width() > 992) {

            $('.full-height').outerHeight($(window).height());

        } else {

            $('.full-height').outerHeight('auto');

        }

    }, 200);


    setInterval(function() {

        $('.full-height-xs').outerHeight($(window).height());

    }, 200);


    // ========================================================================================

    //apeared animation

    if ($(window).width() > 992) {

        $('.appear-animation').appearAnimation();

    }


    //Config header


    $('#hamburger , #second-hamburger').click(function() {

        $(this).toggleClass('active');

        $('#main-wrapper').toggleClass('move-left');

        $('#nav-fix').toggleClass('active');

    });



    function hamburgerConfig() {

        if ($(window).scrollTop() < $('#home').outerHeight() - 45) {

            if (($('#main-wrapper').width() > 992 - 6)) //sub the scrollbar-width

            {

                $('#hamburger').addClass('hide').removeClass('active').removeClass('attention');

                if(!($('#nav-fix').hasClass('none-auto-collapse'))){

                    $('#main-wrapper').removeClass('move-left');

                    $('#nav-fix').removeClass('active');

                }

            }

            else {

                $('#hamburger').removeClass('hide').addClass('on-home').addClass('attention');

            }

        }

        else {

            $('#hamburger').removeClass('hide').removeClass('on-home').addClass('attention');

        }

    }


    hamburgerConfig();


    function navUpdate() {

        $('#nav-fix a').each(function() {

            var thisItem = $($(this).attr('href'));


            if (thisItem.onScreen()) {

                $(this).addClass('active');

            } else {

                $(this).removeClass('active');

            }

        });

    }


    navUpdate();


    $(window).scroll(function() {

        navUpdate();

        hamburgerConfig();

    });

    $(window).resize(function() {

        hamburgerConfig();

    });


    //fade home content


    $(window).scroll(function() {

        if ($(window).scrollTop() < 300) {

            $('.home-content , .home-footer').css('animation', 'fadeIn 1500ms forwards');

        } else {

            $('.home-content , .home-footer').css('animation', 'fadeOut 1500ms forwards');

        }

    });


    //easing scroll in page


    $('.easing-click-group a , .easing-click').click(function() {

        var posi = $($(this).attr('href')).offset().top;


        $('html,body').animate({

            scrollTop: posi

        }, 700);

        return false;

    });


    // modal


    $('.modal').each(function() {

        var $this = $(this);

        $(this).children().find('.close-modal').click(function() {

            $this.modal('hide');

        });

    });


    // video api


    var $videoIframeTarget = $('#popup-video').children().find('iframe');

    var videoIframeSrc = $videoIframeTarget.attr('src');


    $('#popup-video').on('show.bs.modal', function(event) {

        $videoIframeTarget.attr('src', videoIframeSrc + '&autoplay=1');

    });

    $('#popup-video').on('hide.bs.modal', function(event) {

        $videoIframeTarget.attr('src', videoIframeSrc);

    });



    //active pie chart


    function activePiechart() {

        $('.chart').easyPieChart({

            easing: 'easeOutBounce',

            onStep: function(from, to, percent) {

                $(this.el).find('.percent').text(Math.round(percent));

            },

            barColor: '#FFD953',

            trackColor: 'rgba(255,255,255,0.4)',

            lineWidth: '6',

            size: 160,

            lineCap: 'butt',

            animate:({duration: 2000, enabled: true}),

            scaleColor: false,

        });

    }


    if ($('#skill').hasClass('skill')) {

        setInterval(function() {

            if ($(' .chart').itemOnScreen()) {

                activePiechart();

            }

        }, 200);

    }



    //home slider  carousel


    $('.slider-carousel').each(function() {

        $(this).owlCarousel({

            autoplay: true,

            singleItem: true,

            items: 1,

            dots: $(this).hasClass('has-dots'),

            nav: $(this).hasClass('has-nav'),

            smartSpeed: 800,

            loop: true,

        });

    });


    function responsiveCaption() {

        $('.slider-carousel .slider-caption').each(function() {

            var $this = $(this);

            var baseFontsize = parseInt($this.css('font-size'));


            setInterval(function() {

                var resizeRate = $this.parents('.caption-container').width() / 1140;

                $this.css("font-size", (baseFontsize * resizeRate) + 'px');

            }, 200);

        });

    }

    responsiveCaption();



    $('.normal-carousel').each(function() {

        $(this).owlCarousel({

            autoplay: true,

            singleItem: true,

            items: 1,

            dots: $(this).hasClass('has-dots'),

            nav: $(this).hasClass('has-nav'),

            smartSpeed: 800,

            loop: true,

        });

    });


    //text slider


    $('.text-slider').each(function() {

        var $this = $(this);


        $this.owlCarousel({

            autoplay: true,

            singleItem: true,

            // autoHeight:true,

            items: 1,

            dots: true,

            nav: $this.hasClass('has-nav'),

            animateIn: 'text-slider-in',

            animateOut: 'text-slider-out',

            smartSpeed: 800,

            loop: true,


            onTranslated: updateSliderIndex,

        });


        $this.prepend('<span class="indexInfo"></span>');

        var $indexInfo = $this.children('.indexInfo');


        function updateSliderIndex(event) {

            var items = $this.children().find('.owl-dots .owl-dot').length;

            var index = $this.children().find('.owl-dots .owl-dot.active').index() + 1;

            $indexInfo.text(index + "/" + items);

        }

        updateSliderIndex();

    });


    //brand carousel


    $('.brand-carousel').each(function() {

        $(this).owlCarousel({

            smartSpeed: 300,

            loop: true,

            dots: false,

            nav: true,

            responsive: {

                320: {

                    items: 2,

                },

                480: {

                    items: 3,

                },

                768: {

                    items: 4,

                },

                992: {

                    items: 5,

                },

                1200: {

                    items: 6,

                },

            }

        });

    });





    function processConfig() {

        $('.process-bar .icon-wrapper').on('click', function() {

            $(this).prevAll().addBack().addClass('active').children('.active .super-icon').removeClass('dark-icon');

            $(this).nextAll().removeClass('active').children('.super-icon').addClass('dark-icon');

        });

        $('.process-bar-style2 .icon-wrapper').on('click', function() {

            $(this).prevAll().addBack().addClass('active').children('.active .super-square-icon').removeClass('dark-icon');

            $(this).nextAll().removeClass('active').children('.super-square-icon').addClass('dark-icon');

        });

    }

    processConfig();



    //Stellar parallax


    if ($(window).width() > 768) {

        $(window).stellar({

            scrollProperty: 'scroll',

            positionProperty: 'position',

            horizontalScrolling: false,

            verticalScrolling: true,

            horizontalOffset: 0,

            verticalOffset: 0,

            responsive: true,

            parallaxBackgrounds: true,

            parallaxElements: true,

            hideDistantElements: true,

            hideElement: function($elem) {

                $elem.css('opacity', '0');

            },

            showElement: function($elem) {

                $elem.css('opacity', '1');

            }

        });

    }


});

I've included 8 psds with this theme:

All SCSS included into assets/scss. 

These are the scripts used in the template with their related link for documentation.

 

Scripts

Again, thank you for purchasing this Template!