HTML Structure

Built on Bootstrap Framework

Used Bootstrap Grid (1170px)
                    col-lg-1, col-lg-2, col-lg-3, col-lg-4, col-lg-5, col-md-6, col-lg-7, col-lg-8, col-lg-9, col-lg-10, col-lg-11, col-lg-12

                    col-md-1, col-md-2, col-md-3, col-md-4, col-md-5, col-md-6, col-md-7, col-md-8, col-md-9, col-md-10, col-md-11, col-md-12

                    col-sm-1, col-sm-2, col-sm-3, col-sm-4, col-sm-5, col-sm-6, col-sm-7, col-sm-8, col-sm-9, col-sm-10, col-sm-11, col-sm-12

                    col-xs-1, col-xs-2, col-xs-3, col-xs-4, col-xs-5, col-xs-6, col-xs-7, col-xs-8, col-xs-9, col-xs-10, col-xs-11, col-xs-12
                    

Theme Header Logo Setting : You Can Use Text Logo [ two characters ] Or Your Personal Image

Your Text Logo
                    
                    
Your Personal Image Logo
                    
                    

Main Style And Theme Colors

Theme Main Style :
                    
                    
                    
Theme Blog Style :
                    
                    
                    
Theme Responsive Style :
                    
                    
                    

Theme colors style : you can put this code under blog style and change "yourcolor.css" with color needed .
  • Colors :
    • light-blue.css
    • green-blue.css
    • yellow.css
    • pink.css
    • green.css
                    
                    
                    

Home Page And Blog Setting

IF You Use Home Page Put This in <Body> Attribute
                    data-spy="scroll" data-target=".AH_Nav" data-offset="300" data-page="home"
                    
IF You Use Blog Page & Any Single Page Put This in <Body> Attribute
                    data-page="home"
                    
Blog Style File
                    
                    
                    

Home Header Full
                    // add this class into Header "full-height"
                    
                    

Boxed Design
                    // add this class into Body "full-height"
                    <body class="boxed"></body>

                    // add this class into Wrapper "boxed"
                    
// add this class into Nav "boxed"

Skills HTML Attribute Setting

                    disabled="disabled" // if you want disabled the input ?
                    class="skillRang" // class name
                    data-width="160" // width (px)
                    data-min="0" // min value
                    data-max="100" // max value
                    data-cursor=false // cursor
                    data-thickness=".03" // thickness
                    data-fgColor="#ff7f66" // color
                    data-bgColor="#ddd" // background
                    data-displayInput="true" // if you want display input ?
                    data-readOnly=true // if read only ?
                    value="99" // display value
                    

jQuery Structure

This Theme Imports Javascript Files

My Custom Scripts

                    /*---------- Abdo Hamoud FrameWork ---------*/
                    // animate function
                    function animated(elm, aimateVal) {
                        $(elm).addClass("hidden_scroll").viewportChecker({
                            classToAdd: 'visible_scroll animated ' + aimateVal, // Class to add to the elements when they are visible
                            offset: 100
                        });
                    }
                    // window load events - > show Wrapper after load and hide wrapperLoading
                    $(window).load(function () {
                        $('div.wrapperLoading').delay().fadeOut(300);
                        $('div.wrapperLoading').fadeOut(function () {
                            $('#Wrapper').css({"visibility": "visible"}).animate({opacity: "1"}, 500);
                           // run animate function
                           animated('#About .flickrSlider, .fellowUs .container', 'zoomIn');
                           animated('#Header .container, #Skills, #Portfolio .container, #Activity h2, #Activity .row, #Clients .container, #ContactUS h2, #ContactUS .row', 'fadeInDown');
                           animated('.AH_Nav #navbar-collapse, #About .profileBlock', 'fadeInLeft');
                           animated('.AH_Nav .scrollTop, #About .aboutMe', 'fadeInRight');
                        });
                        $(this).scroll();
                        // check if window has hash target
                        if (this.location.hash) {
                            var target = $(this.location.hash);
                            $('html,body').animate({
                                scrollTop: target.offset().top - 60
                            }, 1000);
                            this.location.hash = '';
                            return false;
                        }
                    });
                    // document ready events
                    $(document).ready(function () {
                        var page_type = $('body').attr('data-page');
                        var height = window.innerHeight;
                        var width = $(this).width();
                        var marginTop = height / 2;
                        // Header : height 100%
                        if (width >= 1170) {
                            if (page_type === 'home') {
                                $('#Header').css({"height": height + "px"});
                                $('#Header .container').css({"margin-top": marginTop - $('#Header .container').height() / 2 + "px"});
                            }
                        }
                        // heder_overlay : height 100%
                        $('#Header .heder_overlay').css({"height": height + "px"});
                        // .wrapperLoading alighn center
                        $('.wrapperLoading').each(function () {
                            var width = $(document).width();
                            $(this).css({"left": width / 2 - 50 + "px"});
                        });
                        // chose colors
                        $('.choseColors a.chose').on('click', function () {
                            if ($(this).hasClass('closed')) {
                                $(this).parent().animate({width: "400px"}, 250).find('li a').delay(200).animate({opacity: "1"}, 300);
                                $(this).removeClass('closed');
                            }
                            else {
                                $(this).parent().animate({width: "45px"}, 250).find('li a').css({"opacity": "0"});
                                $(this).addClass('closed');
                            }
                        });
                        // scroll top
                        $.fn.scrollToTop = function () {
                            $(this).hide().removeAttr("href");
                            if ($(window).scrollTop() != "0") {
                                $(this).fadeIn("slow");
                            }
                            var scrollDiv = $(this);
                            $(window).scroll(function () {
                                if ($(window).scrollTop() == "0") {
                                    $(scrollDiv).fadeOut("fast");
                                } else {
                                    $(scrollDiv).fadeIn(800);
                                }
                            });
                            $(this).on('click', function () {
                                $("html, body").animate({
                                    scrollTop: 0
                                }, "slow");
                            });
                        };
                        $(".scrollTop").scrollToTop();
                        // flickr slider
                        $(".flickrSlider .Slider").owlCarousel({
                            autoPlay: true,
                            stopOnHover: true,
                            navigation: false, // Show next and prev buttons
                            slideSpeed: 300,
                            paginationSpeed: 400,
                            singleItem: true
                        });
                        // portfolio slider
                        $("#Portfolio .Slider").owlCarousel({
                            items: 4, //10 items above 1000px browser width
                            itemsDesktop: [1000, 4], //5 items between 1000px and 901px
                            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                            itemsTablet: [600, 2], //2 items between 600 and 0
                            itemsMobile: true // itemsMobile disabled - inherit from itemsTablet option
                        });
                        $("#Portfolio h2 .prev").on('click', function () {
                            $("#Portfolio .Slider").trigger('owl.next');
                            return false;
                        });
                        $("#Portfolio h2 .next").on('click', function () {
                            $("#Portfolio .Slider").trigger('owl.prev');
                            return false;
                        });
                        // portfolio colorbox
                        $('#Portfolio .Slider .work a,.widgetSlider .owl-carousel a,.portfolioPage .portfolio-content .work a').colorbox({rel: 'colorbox', slideshow: false});
                        // portfolio page
                        if ($.isFunction($.fn.mixItUp)) {
                            $('.portfolioPage .portfolio-content').mixItUp({
                                animation: {
                                    enable: true,
                                    effects: 'fade scale'
                                }
                            });
                        }
                        // clients slider
                        $("#Clients .Slider").owlCarousel({
                            items: 5, //10 items above 1000px browser width
                            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
                            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                            itemsTablet: [600, 2], //2 items between 600 and 0
                            itemsMobile: true // itemsMobile disabled - inherit from itemsTablet option
                        });
                        // slideshow post
                        $("#Blog .ah_post .post_slideshow,#Blog .singleBlog .post_slideshow").owlCarousel({
                            autoPlay: false,
                            stopOnHover: true,
                            lazyEffect: 'fade',
                            transitionStyle: 'fadeUp',
                            navigation: false, // Show next and prev buttons
                            slideSpeed: 1000,
                            paginationSpeed: 1000,
                            singleItem: true,
                            pagination: true,
                            responsive: true
                        });
                        // widgetSlider portfolio
                        $("#Blog .sidebar .widgetSlider .owl-carousel").owlCarousel({
                            autoPlay: false,
                            stopOnHover: true,
                            lazyEffect: 'fade',
                            transitionStyle: 'fadeUp',
                            navigation: false, // Show next and prev buttons
                            slideSpeed: 1000,
                            paginationSpeed: 1000,
                            singleItem: true,
                            pagination: true,
                            responsive: true
                        });
                        // skill range
                        $("#Skills .skill input.skillRang").knob({'stopper': true});
                        // fixed nav when scroll
                        var top = $('.AH_Nav').offset().top;
                        $(window).scroll(function () {
                            var y = $(this).scrollTop();
                            if (y >= top) {
                                $('.AH_Nav').addClass('fixed_scroll');
                                $('#About,#Blog').css({"margin-top": "128px"});
                            }
                            else {
                                $('.AH_Nav').removeClass('fixed_scroll');
                                $('#About,#Blog').css({"margin-top": "60px"});
                            }
                        });
                        // smooth scrolling
                        $('.AH_Nav ul li a[href*=#]:not([href=#]),#Header a.moreData').on('click', function () {
                            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                                var target = $(this.hash);
                                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                                if (target.length) {
                                    $('html,body').animate({
                                        scrollTop: target.offset().top - 60
                                    }, 1000);
                                    return false;
                                }
                            }
                        });
                        // show wrapperLoading
                        $('div.wrapperLoading').show();
                        // ajax contact form
                        $('#ContactUS form').each(function () {
                            var form = $(this);
                            form.find('input').val('').removeAttr('required');
                            form.find('textarea').val('').removeAttr('required');
                            form.submit(function () {
                                form.find('button.sendContact').after('');
                                $.post('contact.php', $(this).serialize(), function (data) {
                                    form.find('div.error_message').remove();
                                    form.find('span.contact_load').remove();
                                    form.find('button.sendContact').after(data);
                                });
                                return false;
                            });
                        });
                    });
                    /*---------- Abdo Hamoud FrameWork ---------*/
                    

copyright 2015 Abdo-Host

Top