GodLike - Gaming Bootstrap 4 Template
Skip

Documentation for GodLike Gaming Template

Getting Started

This is HTML template. To getting started you need only Browser to run HTML files. Better upload files to web server and run the site there.

If template is opened from local file system, some functions may not work. For example functions, that required PHP - Instagram, Twitter, Contact Form.

To customize template you can edit CSS and HTML files. Also if you are developer, there are available source files SCSS and JS (required ES6 transpiller). All used plugins added from Bower.

For each pages available blank CSS file for your customizations. See it here - assets/css/custom.css.

Also note that all features described in template html files and not in documentation (don't need to twice describe things).

JS Options

To set up some script things, there is available init script, where you can change default options - assets/js/godlike-init.js.


;(function() {
'use strict';

/*------------------------------------------------------------------

  Theme Options

-------------------------------------------------------------------*/
var options = {
    enableSearchAutofocus: true,
    enableActionLikeAnimation: true,
    enableShortcuts: true,
    enableFadeBetweenPages: true,
    enableMouseParallax: true,
    enableCookieAlert: true,
    scrollToAnchorSpeed: 700,
    parallaxSpeed: 0.6,
    backgroundMusic: 'assets/mp3/purpleplanetmusic-desolation.mp3',
    backgroundMusicVolume: 100,

    templates: {
        secondaryNavbarBackItem: 'Back',

        likeAnimationLiked: 'Liked!',
        likeAnimationDisliked: 'Disliked!',

        cookieAlert: '<span class="nk-cookie-alert-close"><span class="nk-icon-close"></span></span>\n            Cookie alert are ready to use. You can simply change content inside this alert or disable it in javascript theme options. <a href="#">Cookies policy</a>.\n            <div class="nk-gap"></div>\n            <span class="nk-cookie-alert-confirm nk-btn link-effect-4 nk-btn-bg-white nk-btn-color-dark-1">Confirm</span>',

        plainVideoIcon: '<span class="nk-video-icon"><i class="fa fa-play pl-5"></i></span>',
        fullscreenVideoClose: '<span class="nk-icon-close"></span>',
        gifIcon: '<span class="nk-gif-icon"><i class="fa fa-hand-pointer-o"></i></span>',

        audioPlainButton: '<div class="nk-audio-plain-play-pause">\n                <span class="nk-audio-plain-play">\n                    <span class="ion-play ml-3"></span>\n                </span>\n                <span class="nk-audio-plain-pause">\n                    <span class="ion-pause"></span>\n                </span>\n            </div>',

        instagram: '<div class="col-xs-4">\n                <a href="" target="_blank">\n                    <img src="" alt="" class="nk-img-stretch">\n                </a>\n            </div>',
        instagramLoadingText: 'Loading...',
        instagramFailText: 'Failed to fetch data',
        instagramApiPath: 'php/instagram/instagram.php',

        twitter: '<div class="nk-twitter">\n                <span class="nk-twitter-icon fa fa-twitter"></span>\n                <div class="nk-twitter-text">\n                   \n                </div>\n                <div class="nk-twitter-date">\n                    <span></span>\n                </div>\n            </div>',
        twitterLoadingText: 'Loading...',
        twitterFailText: 'Failed to fetch data',
        twitterApiPath: 'php/twitter/tweet.php',

        countdown: '<div>\n                <span>%D</span>\n                Days\n            </div>\n            <div>\n                <span>%H</span>\n                Hours\n            </div>\n            <div>\n                <span>%M</span>\n                Minutes\n            </div>\n            <div>\n                <span>%S</span>\n                Seconds\n            </div>'
    },

    shortcuts: {
        toggleSearch: 's',
        showSearch: '',
        closeSearch: 'esc',

        closeFullscreenVideo: 'esc',

        postLike: 'l',
        postDislike: 'd',
        postScrollToComments: 'c',

        toggleSideLeftNavbar: 'alt+l',
        openSideLeftNavbar: '',
        closeSideLeftNavbar: 'esc',

        toggleSideRightNavbar: 'alt+r',
        openSideRightNavbar: '',
        closeSideRightNavbar: 'esc',

        toggleFullscreenNavbar: 'alt+f',
        openFullscreenNavbar: '',
        closeFullscreenNavbar: 'esc'
    },
    events: {
        actionHeart: function actionHeart(params) {
            params.updateIcon();

            // fake timeout for demonstration
            // Change on AJAX request or something
            setTimeout(function () {
                var result = params.currentNum + (params.type === 'like' ? 1 : -1);
                params.updateNum(result);
            }, 300);
        },
        actionLike: function actionLike(params) {
            params.updateIcon();

            // fake timeout for demonstration
            // Change on AJAX request or something
            setTimeout(function () {
                var additional = 0;
                if (params.type === 'like') {
                    if (params.isLiked) {
                        additional = -2;
                    }
                    if (params.isDisliked) {
                        additional = 1;
                    }
                }
                if (params.type === 'dislike') {
                    if (params.isLiked) {
                        additional = -1;
                    }
                    if (params.isDisliked) {
                        additional = 2;
                    }
                }
                var result = params.currentNum + (params.type === 'like' ? 1 : -1) + additional;
                params.updateNum(result);
            }, 300);
        }
    }
};

if (typeof Godlike !== 'undefined') {
    Godlike.setOptions(options);
    Godlike.init();
}
}());

Commented Code

All code in GodLike commented and easy to edit things in HTML, CSS and JS files.

HTML Example:

<!DOCTYPE html>
<!--
  Name: GODLIKE - Gaming Template
  Version: 1.0.0
  Author: _nK
  Website: https://nkdev.info
  Purchase: https://nkdev.info
  Support: https://nk.ticksy.com
  License: You must have a valid license purchased only from ThemeForest (the above link) in order to legally use the theme for your project.
  Copyright 2016.
-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="_nK">
    <title>GODLIKE | Gaming Template</title>
    <link rel="icon" type="image/png" href="assets/images/favicon.png">

    <!-- START: Styles -->

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300i,400,700%7cMarcellus+SC" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- FontAwesome -->
    <link rel="stylesheet" href="assets/bower_components/fontawesome/css/font-awesome.min.css">

    <!-- IonIcons -->
    <link rel="stylesheet" href="assets/bower_components/ionicons/css/ionicons.min.css">

    <!-- Revolution Slider -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/settings.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/layers.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/navigation.css">

    <!-- Flickity -->
    <link rel="stylesheet" href="assets/bower_components/flickity/dist/flickity.min.css">

    <!-- Photoswipe -->
    <link rel="stylesheet" type="text/css" href="assets/bower_components/photoswipe/dist/photoswipe.css">
    <link rel="stylesheet" type="text/css" href="assets/bower_components/photoswipe/dist/default-skin/default-skin.css">

    <!-- DateTimePicker -->
    <link rel="stylesheet" type="text/css" href="assets/bower_components/datetimepicker/build/jquery.datetimepicker.min.css">

    <!-- Revolution Slider -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/settings.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/layers.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/revolution/css/navigation.css">

    <!-- Prism -->
    <link rel="stylesheet" type="text/css" href="assets/bower_components/prism/themes/prism-tomorrow.css">

    <!-- Summernote -->
    <link rel="stylesheet" type="text/css" href="assets/bower_components/summernote/dist/summernote.css">

    <!-- GODLIKE -->
    <link rel="stylesheet" href="assets/css/godlike.css">

    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/custom.css">

    <!-- END: Styles -->

    <!-- jQuery -->
    <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
</head>

<!--
    Additional Classes:
        .nk-page-boxed
-->
<body>
    <!-- START: Page Preloader -->
    <div class="nk-preloader">
        <!--
         Preloader animation
         data-close-... data used for closing preloader
         data-open-...  data used for opening preloader
    -->
        <div class="nk-preloader-bg" style="background-color: #000;" data-close-frames="23" data-close-speed="1.2" data-close-sprites="./assets/images/preloader-bg.png" data-open-frames="23" data-open-speed="1.2" data-open-sprites="./assets/images/preloader-bg-bw.png">
        </div>

        <div class="nk-preloader-content">
            <div>
                <img class="nk-img" src="assets/images/logo.png" alt="GodLike - Gaming Bootstrap 4 Template" width="170">
                <div class="nk-preloader-animation"></div>
            </div>
        </div>

        <div class="nk-preloader-skip">Skip</div>
    </div>
    <!-- END: Page Preloader -->

    <!-- START: Page Background -->
    <div class="nk-page-background op-5" data-bg-mp4="assets/video/bg-2.mp4" data-bg-webm="assets/video/bg-2.webm" data-bg-ogv="assets/video/bg-2.ogv" data-bg-poster="assets/video/bg-2.jpg"></div>
    <!-- END: Page Background -->

    <!-- START: Page Border -->
    <div class="nk-page-border">
        <div class="nk-page-border-t"></div>
        <div class="nk-page-border-r"></div>
        <div class="nk-page-border-b"></div>
        <div class="nk-page-border-l"></div>
    </div>
    <!-- END: Page Border -->

...
CSS Example:

/*!-----------------------------------------------------------------
  Name: GODLIKE - Gaming Template
  Version: 1.0.0
  Author: _nK
  Website: https://nkdev.info
  Purchase: https://nkdev.info
  Support: https://nk.ticksy.com
  License: You must have a valid license purchased only from ThemeForest (the above link) in order to legally use the theme for your project.
  Copyright 2016.
-------------------------------------------------------------------*/
@charset "UTF-8";
/*------------------------------------------------------------------
  [Typography]

  Body:     16px/1.7 Roboto Condensed, sans-serif;
  Headings: Marcellus SC, serif

  Note: Most of font sizes are relative to the base font size (rem)
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------
  [Color codes]

  Main 1:    #e08821
  Main 2:    #39a228
  Main 3:    #2953b1
  Main 4:    #7c34a8
  Main 5:    #c82e2e

  Dark 1:    #0e0e0e
  Dark 2:    #181818
  Dark 3:    #222222
  Dark 4:    #2d2d2d

  Gray 1:    #FAFAFA
  Gray 2:    #f7f7f7
  Gray 3:    whitesmoke
  Gray 4:    #f2f2f2

  Bootstrap Primary:  #0275D8
  Bootstrap Success:  #5CB85C
  Bootstrap Info:     #5BC0DE
  Bootstrap Warning:  #F0AD4E
  Bootstrap Danger:   #D9534F
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------
  [Table of contents]

  1. Base
  2. Page Preloader
  3. Typography
  4. Bootstrap
  5. Helpers
  6. Cookie Alert
  7. Page Border
  8. Navbar
  9. Navbar Side
  10. Navbar Full
  11. Search
  12. Header Title
  13. Footer
  14. Side Buttons
  15. Share Buttons
  16. Page Nav
  17. Widgets
  18. Elements
    - Element Buttons
    - Element Progress
    - Element Tabs
    - Element Accordion
    - Element Icon Boxes
    - Element Content Boxes
    - Element Counters
    - Element Dividers
    - Element Breadcrumbs
    - Element Dropcaps
    - Element Pagination
    - Element Pricing
    - Element Testimonials
    - Element Blockquotes
    - Element Info Boxes
    - Element Carousels
    - Element Image Boxes
    - Element Team Members
    - Element Video
    - Element Gif
    - Element Forms
    - Element Audio Player
    - Element Countdown
    - Element Text Typed
    - Element Link Effects
    - Element Icons
    - Element Isotope
    - Element Action Like
  19. Blog
  20. Media Gallery
  21. Store
  22. Forum
  23. Documentation
  24. Plugins
    - Plugin NanoScroller
    - Plugin PhotoSwipe
    - Plugin Summernote
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------

  Base

 -------------------------------------------------------------------*/
body {
    color: #fff;
    background-color: #0e0e0e;
}

.nk-main {
    overflow: hidden;
}

body.nk-page-boxed {
    max-width: 1200px;
    margin: 0 auto;
}

a {
    color: #e08821;
}

a:focus,
a:hover {
    color: #b56d19;
}

::-moz-selection {
    color: #2d2d2d;
    background: rgba(255, 255, 255, 0.9);
}

::selection {
    color: #2d2d2d;
    background: rgba(255, 255, 255, 0.9);
}

...
JS Example:

/*!-----------------------------------------------------------------
  Name: GODLIKE - Gaming Template
  Version: 1.0.0
  Author: _nK
  Website: https://nkdev.info
  Purchase: https://nkdev.info
  Support: https://nk.ticksy.com
  License: You must have a valid license purchased only from ThemeForest (the above link) in order to legally use the theme for your project.
  Copyright 2016.
-------------------------------------------------------------------*/
;(function() {
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*------------------------------------------------------------------

  Theme Options

-------------------------------------------------------------------*/
var options = {
    ...
};

/*------------------------------------------------------------------

  Utility

-------------------------------------------------------------------*/
var $ = jQuery;
var tween = window.TweenMax;
var isIOs = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var isMobile = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/g.test(navigator.userAgent || navigator.vendor || window.opera);
var isFireFox = typeof InstallTrigger !== 'undefined';
var isTouch = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;

// add 'is-mobile' or 'is-desktop' classname to html tag
$('html').addClass(isMobile ? 'is-mobile' : 'is-desktop');

/**
 * window size
 */
var $wnd = $(window);
var $doc = $(document);
var wndW = 0;
var wndH = 0;
var docH = 0;
function getWndSize() {
    wndW = $wnd.width();
    wndH = $wnd.height();
    docH = $doc.height();
}
getWndSize();
$wnd.on('resize load orientationchange', getWndSize);

/**
 * Debounce resize
 */
var resizeArr = [];
var resizeTimeout = void 0;
$wnd.on('load resize orientationchange', function (e) {
    if (resizeArr.length) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            for (var k = 0; k < resizeArr.length; k++) {
                resizeArr[k](e);
            }
        }, 50);
    }
});
function _debounceResize(func) {
    if (typeof func === 'function') {
        resizeArr.push(func);
    } else {
        window.dispatchEvent(new Event('resize'));
    }
}

/**
 * Throttle scroll
 * thanks: https://jsfiddle.net/mariusc23/s6mLJ/31/
 */
var hideOnScrollList = [];
var didScroll = void 0;
var lastST = 0;

$wnd.on('scroll load resize orientationchange', function () {
    if (hideOnScrollList.length) {
        didScroll = true;
    }
});

...

Files Structure

  • /dist/ - main template folder with all files to getting started:
    • /*.html - all html files;
    • /php/ - php files for Instagram, Twitter and AJAX Contact Form;
    • /assets/css/ - main template css files;
    • /assets/js/ - main template js files;
    • /assets/bower_components/ - all used 3rd-party plugins;
    • /assets/plugins/ - plugins, that not available via Bower (for example Revolution Slider);
    • /assets/images/ - all images used in template (note, in downloadable archive this is placeholder images);
    • /assets/mp3/ - audio files for player;
  • /src/ - source files:
    • /css/ - SCSS source files;
    • /js/ - JS source files (required ES6 transpiller);

Template Layouts

Below described main layout elements: Main Navigation, Mobile Navigation, Side Navigation, FullScreen Navigation, Search, Share, Header, Footer.

Main Navigation [top]

Main Navigation
HTML example:

<!--
    Additional Classes:
        .nk-header-opaque
-->
<header class="nk-header nk-header-opaque">

    <!--
        START: Top Contacts

        Additional Classes:
            .nk-contacts-top-light
    -->
    <div class="nk-contacts-top">
        <div class="container">
            <div class="nk-contacts-left">
                <div class="nk-navbar">
                    <ul class="nk-nav">
                        <li class="nk-drop-item">
                            <a href="#">Russia</a>
                            <ul class="dropdown">
                                <li><a href="#">Russia</a></li>
                                <li><a href="#">USA</a></li>
                                <li><a href="#">United Kingdom</a></li>
                                <li><a href="#">France</a></li>
                                <li><a href="#">Spain</a></li>
                                <li><a href="#">Germany</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="page-contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="nk-contacts-right">
                <div class="nk-navbar">
                    <ul class="nk-nav">
                        <li>
                            <a href="https://twitter.com/nkdevv" target="_blank">
                                <span class="ion-social-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/_nK" target="_blank">
                                <span class="ion-social-dribbble-outline"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ion-social-instagram-outline"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ion-social-pinterest"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Top Contacts -->

    <!--
        START: Navbar

        Additional Classes:
            .nk-navbar-sticky
            .nk-navbar-transparent
            .nk-navbar-autohide
            .nk-navbar-light
    -->
    <nav class="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-autohide">
        <div class="container">
            <div class="nk-nav-table">

                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo.png" alt="" width="90">
                </a>

                <ul class="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                    ...
                </ul>

                <ul class="nk-nav nk-nav-right nk-nav-icons">

                    <li class="single-icon hidden-lg-up">
                        <a href="#" class="no-link-effect" data-nav-toggle="#nk-nav-mobile">
                            <span class="nk-icon-burger">
                                <span class="nk-t-1"></span>
                                <span class="nk-t-2"></span>
                                <span class="nk-t-3"></span>
                            </span>
                        </a>
                    </li>

                    <li class="single-icon">
                        <a href="#" class="nk-search-toggle no-link-effect">
                            <span class="nk-icon-search"></span>
                        </a>
                    </li>

                    <li class="single-icon">
                        <a href="#" class="no-link-effect" data-nav-toggle="#nk-side">
                            <span class="nk-icon-burger">
                                <span class="nk-t-1"></span>
                                <span class="nk-t-2"></span>
                                <span class="nk-t-3"></span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- END: Navbar -->

</header>
    
Additional classes:
  • Navigation Header:
    • .nk-header-opaque - opaque background color for navbar and top contacts;
  • Top Contacts:
    • .nk-contacts-top-light - light background color;
  • Navigation:
    • .nk-navbar-light - light background color;
    • .nk-navbar-sticky - sticky navbar on page scroll;
    • .nk-navbar-transparent - transparent background color;
    • .nk-navbar-autohide - autohide navigation on page scroll down. Will show automatically when you scroll to top or when reaching the end of the page;

Main Navigation [left]

Main Navigation
HTML example:

<!--
    START: Navbar

    Additional Classes:
        .nk-navbar-lg
        .nk-navbar-align-center
        .nk-navbar-align-right
        .nk-navbar-overlay-content
        .nk-navbar-light
-->
<nav class="nk-navbar nk-navbar-side nk-navbar-left nk-navbar-lg nk-navbar-align-center nk-navbar-overlay-content" id="nk-navbar-left">
    <div class="nano">
        <div class="nano-content">
            <div class="nk-nav-table">
                <div class="nk-nav-row">
                    <a href="index.html" class="nk-nav-logo">
                        <img src="assets/images/logo.png" alt="" width="130">
                    </a>
                </div>
                <!--
                    START: Navigation

                    Additional Classes:
                        .nk-nav-row-top
                        .nk-nav-row-center
                        .nk-nav-row-bottom
                -->
                <div class="nk-nav-row nk-nav-row-full nk-nav-row-center">
                    <ul class="nk-nav" data-nav-mobile="#nk-nav-mobile">
                        ...
                    </ul>
                </div>
                <!--
                    END: Navigation
                -->
                <div class="nk-nav-row">
                    <div class="nk-nav-footer">
                        © 2016 nK Group Inc. Developed in association with LoremInc. IpsumCompany, SitAmmetGroup, CumSit and related logos are registered trademarks. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<!-- END: Navbar -->
    
Additional classes: .nk-navbar-lg .nk-navbar-align-center .nk-navbar-align-right .nk-navbar-overlay-content .nk-navbar-light
  • .nk-navbar-light - light background color;
  • .nk-navbar-lg - large size;
  • .nk-navbar-align-center - text align center;
  • .nk-navbar-align-right - text align right;
  • .nk-navbar-overlay-content - show content dark overlay when opened navigation;

Mobile Navigation

Mobile Navigation
Mobile navigation items will be created automatically from main navigation.
HTML example:

<!--
    START: Navbar Mobile

    Additional Classes:
        .nk-navbar-left-side
        .nk-navbar-right-side
        .nk-navbar-lg
        .nk-navbar-overlay-content
        .nk-navbar-light
-->
<div id="nk-nav-mobile" class="nk-navbar nk-navbar-side nk-navbar-left-side nk-navbar-overlay-content hidden-lg-up">
    <div class="nano">
        <div class="nano-content">
            <a href="index.html" class="nk-nav-logo">
                <img src="assets/images/logo.png" alt="" width="90">
            </a>
            <div class="nk-navbar-mobile-content">
                <ul class="nk-nav">
                    <!-- Here will be inserted menu from [data-mobile-menu="#nk-nav-mobile"] -->
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Navbar Mobile -->
    
Additional classes:
  • .nk-navbar-left-side - show on left side (if there is no another left side navigations);
  • .nk-navbar-right-side - show on right side (if there is no another right side navigations);
  • .nk-navbar-lg - large size;
  • .nk-navbar-overlay-content - show content dark overlay when opened navigation;
  • .nk-navbar-light - light background color;
Toggle button HTML example:

<div class="hidden-lg-up">
    <a href="#" data-nav-toggle="#nk-nav-mobile">
        <span class="nk-icon-burger">
            <span class="nk-t-1"></span>
            <span class="nk-t-2"></span>
            <span class="nk-t-3"></span>
        </span>
    </a>
</div>
    

Side Navigation

Side Navigation
HTML example:

<!--
    START: Right Navbar

    Additional Classes:
        .nk-navbar-right-side
        .nk-navbar-left-side
        .nk-navbar-lg
        .nk-navbar-align-center
        .nk-navbar-align-right
        .nk-navbar-overlay-content
        .nk-navbar-light
-->
<nav class="nk-navbar nk-navbar-side nk-navbar-right-side nk-navbar-lg nk-navbar-align-center nk-navbar-overlay-content" id="nk-side">

    <div class="nk-navbar-bg">
        <div class="bg-image" style="background-image: url('assets/images/bg-nav-side.jpg')"></div>
    </div>

    <div class="nano">
        <div class="nano-content">
            <div class="nk-nav-table">

                <div class="nk-nav-row">
                    <a href="index.html" class="nk-nav-logo">
                        <img src="assets/images/logo.png" alt="" width="150">
                    </a>
                </div>

                <div class="nk-nav-row nk-nav-row-full nk-nav-row-center">
                    <ul class="nk-nav">
                        ...
                    </ul>
                </div>
                <div class="nk-nav-row">
                    <div class="nk-nav-footer">
                        © 2016 nK Group Inc. Developed in association with LoremInc. IpsumCompany, SitAmmetGroup, CumSit and related logos are registered trademarks. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<!-- END: Right Navbar -->
    
Additional classes:
  • .nk-navbar-left-side - show on left side (if there is no another left side navigations);
  • .nk-navbar-right-side - show on right side (if there is no another right side navigations);
  • .nk-navbar-lg - large size;
  • .nk-navbar-overlay-content - show content dark overlay when opened navigation;
  • .nk-navbar-light - light background color;
Toggle button HTML example:

<a href="#" data-nav-toggle="#nk-side">
    <span class="nk-icon-burger">
        <span class="nk-t-1"></span>
        <span class="nk-t-2"></span>
        <span class="nk-t-3"></span>
    </span>
</a>
    

FullScreen Navigation

Side Navigation
HTML example:

<!--
    START: Fullscreen Navbar

    Additional Classes:
        .nk-navbar-align-center
        .nk-navbar-align-right
        .nk-navbar-light
-->
<nav class="nk-navbar nk-navbar-full nk-navbar-align-center" id="nk-full">
    <div class="nk-nav-table">
        <div class="nk-nav-row-full nk-nav-row">
            <div class="nano">
                <div class="nano-content">
                    <div class="nk-nav-table">
                        <div class="nk-nav-row nk-nav-row-full nk-nav-row-center">
                            <ul class="nk-nav">
                                ...
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-nav-row">
            <div class="nk-nav-social">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-9 text-sm-left">
                            <div class="nk-nav-footer">
                                © 2016 nK Group Inc. Developed in association with LoremInc. IpsumCompany, SitAmmetGroup, CumSit and related logos are registered trademarks. All Rights Reserved.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<!-- END: Fullscreen Navbar -->
    
Additional classes:
  • .nk-navbar-align-center - align items to the center;
  • .nk-navbar-align-right - align items to the right;
  • .nk-navbar-light - light background color;
Toggle button HTML example:

<a href="#" class="nk-navbar-full-toggle">
    <span class="nk-icon-burger">
        <span class="nk-t-1"></span>
        <span class="nk-t-2"></span>
        <span class="nk-t-3"></span>
    </span>
</a>
    

Preloader

Preloader
HTML example:

<!-- START: Page Preloader -->
<div class="nk-preloader">
    <!--
         Preloader animation
         data-close-... data used for closing preloader
         data-open-...  data used for opening preloader
    -->
    <div class="nk-preloader-bg"
         style="background-color: #000;"
         data-close-frames="23"
         data-close-speed="1.2"
         data-close-sprites="./assets/images/preloader-bg.png"
         data-open-frames="23"
         data-open-speed="1.2"
         data-open-sprites="./assets/images/preloader-bg-bw.png">
    </div>

    <div class="nk-preloader-content">
        <div>
            <img class="nk-img" src="assets/images/logo.png" alt="GodLike - Gaming Bootstrap 4 Template" width="170">
            <div class="nk-preloader-animation"></div>
        </div>
    </div>

    <div class="nk-preloader-skip">Skip</div>
</div>
<!-- END: Page Preloader -->
    
Data Attributes:
  • data-close-frames - frames count for close animation;
  • data-close-speed - frames transition speed for close animation;
  • data-close-sprites - url to image file with sprites for close animation;
  • data-open-frames - frames count for open animation;
  • data-open-speed - frames transition speed for open animation;
  • data-open-sprites - address to image file with sprites for open animation;

Background Video

HTML example:

<!-- START: Page Background -->
<div class="nk-page-background op-5" data-bg-mp4="assets/video/bg-2.mp4" data-bg-webm="assets/video/bg-2.webm" data-bg-ogv="assets/video/bg-2.ogv" data-bg-poster="assets/video/bg-2.jpg"></div>
<!-- END: Page Background -->
    
Data Attributes:
  • data-bg-mp4 - url to mp4 video file;
  • data-bg-webm - url to webm video file;
  • data-bg-ogv - url to ogv video file;
  • data-bg-poster - url to image poster;

Search

Search
HTML example:

<!--
    START: Search

    Additional Classes:
        .nk-search-light
-->
<div class="nk-search">
    <div class="container">
        <form action="#!">
            <fieldset class="form-group nk-search-field">
                <input type="text" class="form-control" id="searchInput" placeholder="Search..." name="s">
                <label for="searchInput"><i class="ion-ios-search"></i></label>
            </fieldset>
        </form>
    </div>
</div>
<!-- END: Search -->
    
Additional classes:
  • .nk-search-light - light background color;
Toggle button HTML example:

<a href="#" class="nk-search-toggle">
    <span class="nk-icon-search"></span>
</a>
    

Share

Share
HTML example:

<!--
    START: Share Buttons
        .nk-share-buttons-left
-->
<div class="nk-share-buttons nk-share-buttons-left">
    <ul>
        <li>
            <span class="nk-share-icon" title="Share page on Facebook" data-share="facebook">
                <span class="icon fa fa-facebook"></span>
            </span>
            <span class="nk-share-name">Facebook</span>
        </li>
        <li>
            <span class="nk-share-icon" title="Share page on Twitter" data-share="twitter">
                <span class="icon fa fa-twitter"></span>
            </span>
            <span class="nk-share-name">Twitter</span>
        </li>
        <li>
            <span class="nk-share-icon" title="Share page on Google+" data-share="google-plus">
                <span class="icon fa fa-google-plus"></span>
            </span>
            <span class="nk-share-name">Google Plus</span>
        </li>
        <!--
        <li>
            <span class="nk-share-icon" title="Share page on Pinterest" data-share="pinterest">
                <span class="icon fa fa-pinterest"></span>
            </span>
            <span class="nk-share-name">Pinterest</span>
        </li>
        <li>
            <span class="nk-share-icon nk-btn nk-btn-lg nk-btn-icon" title="Share page on LinkedIn" data-share="linkedin">
                <span class="icon fa fa-linkedin"></span>
            </span>
            <span class="nk-share-name">LinkedIn</span>
        </li>
        <li>
            <span class="nk-share-icon nk-btn nk-btn-lg nk-btn-icon" title="Share page on VK" data-share="vk">
                <span class="icon fa fa-vk"></span>
            </span>
            <span class="nk-share-name">Vkontakte</span>
        </li>
        -->
    </ul>
</div>
    

Page Border

HTML example:

<!-- START: Page Border -->
<div class="nk-page-border">
    <div class="nk-page-border-t"></div>
    <div class="nk-page-border-r"></div>
    <div class="nk-page-border-b"></div>
    <div class="nk-page-border-l"></div>
</div>
<!-- END: Page Border -->
    

Header

HTML example:

<!-- START: Header Title

    Additional Classes:
        .nk-header-title-sm
        .nk-header-title-md
        .nk-header-title-lg
        .nk-header-title-xl
        .nk-header-title-full
        .nk-header-title-parallax
        .nk-header-title-parallax-opacity
        .nk-header-title-boxed
-->
<div class="nk-header-title nk-header-title-parallax-opacity">
    <div class="bg-image">
        <div style="background-image: url('assets/images/image-1.jpg');"></div>
    </div>
    <div class="nk-header-table">
        <div class="nk-header-table-cell">
            <div class="container">
                <h2 class="nk-title-back op-1">Back Title</h2>
                <h1 class="nk-title">Title</h1>
                <h2 class="nk-sub-title">Sub Title</h2>

                <div class="nk-gap-2"></div>
                <a class="nk-video-fullscreen-toggle" href="https://www.youtube.com/watch?v=0wCC3aLXdOw">
                    <span class="nk-video-icon"><i class="fa fa-play pl-5"></i></span>
                </a>
            </div>
        </div>
    </div>
    <div class="nk-header-text-bottom">
        Optional Bottom Text
    </div>
</div>
<!-- END: Header Title -->
    
Additional classes:
  • .nk-header-title-sm - small size;
  • .nk-header-title-md - mid size;
  • .nk-header-title-lg - large size;
  • .nk-header-title-xl - x-large size;
  • .nk-header-title-full - fullscreen size;
  • .nk-header-title-parallax - parallax for background image;
  • .nk-header-title-parallax-opacity - opacity parallax for image;
  • .nk-header-title-boxed - boxed;

Footer

Footer
HTML example:

<!-- START: Footer -->
<!--
    Additional Classes:
        .nk-footer-parallax
        .nk-footer-parallax-opacity
-->
<footer class="nk-footer nk-footer-parallax nk-footer-parallax-opacity bg-black">
    <img class="nk-footer-top-corner" src="assets/images/footer-corner.png" alt="">

    <div class="container">
        <div class="nk-gap-2"></div>
        <div class="nk-footer-logos">
            <a href="https://themeforest.net/user/_nk/portfolio?ref=_nK" target="_blank">
                <img class="nk-img" src="assets/images/footer-logo-godlike.png" alt="" width="120">
            </a>
            <a href="https://themeforest.net/user/_nk/portfolio?ref=_nK" target="_blank">
                <img class="nk-img" src="assets/images/footer-logo-yp3.png" alt="" width="120">
            </a>
            <a href="https://themeforest.net/user/_nk/portfolio?ref=_nK" target="_blank">
                <img class="nk-img" src="assets/images/footer-logo-nk-team.png" alt="" width="150">
            </a>
            <a href="https://themeforest.net/user/_nk/portfolio?ref=_nK" target="_blank">
                <img class="nk-img" src="assets/images/footer-logo-pegi-18.png" alt="" width="46">
            </a>
            <a href="https://themeforest.net/user/_nk/portfolio?ref=_nK" target="_blank">
                <img class="nk-img" src="assets/images/footer-logo-18-restricted.png" alt="" width="160">
            </a>
        </div>
        <div class="nk-gap"></div>

        <p>
            © 2016 nK Group Inc. Developed in association with LoremInc. IpsumCompany, SitAmmetGroup, CumSit and related logos are registered trademarks. GodLike and related logos are registered trademarks or trademarks of id Software LLC in the U.S. and/or other countries. All other trademarks or trade names are the property of their respective owners. All Rights Reserved.
        </p>
        <p>
            GodLike ®: The Darkness™ is a fowl beginning there Over had moveth so land wherein, fruit very gathering of, female creepeth. Dominion above sea gathered unto whales. Subdue to, have Life fowl firmament wherein. Great air without for, great him he That let earth together thing sea fly gathering. Air whose. Green in face tree to spirit life. Place stars. It two. Deep seed man isn't third. Own he is may had darkness waters you'll forth fifth their don't also fruitful be years in spirit to tree. Sixth fourth open female.
        </p>

        <div class="nk-footer-links">
            <a href="#" class="link-effect">Terms of Service</a>
            <span>|</span> <a href="#" class="link-effect">Privacy Policy</a>
        </div>

        <div class="nk-gap-4"></div>
    </div>
</footer>
<!-- END: Footer -->
    
Additional classes:
  • .nk-footer-parallax - parallax for background image;
  • .nk-footer-parallax-opacity - opacity parallax for content;

Widgets

Live examples see here widgets.html

Twitter

Twitter feed should be configured in file php/twitter/config.php

Twitter Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Our Twitter</h4>
    <div>
        <div class="nk-twitter-list" data-twitter-count="2"></div>
    </div>
</div>
    
Available attributes:
  • data-twitter-count - Number of tweets (Default: 2);
  • data-twitter-hide-replies - Hide replies and show only your messages (Default: false);
  • data-twitter-hashtag - Show tweets by hashtag;
  • data-twitter-template - Template to show twitter feed
    Default:
    
    <div class="nk-twitter">
        <span class="nk-twitter-icon fa fa-twitter"></span>
        <div class="nk-twitter-date">
            <span>{{date}}</span>
        </div>
        <div class="nk-twitter-text">
           {{tweet}}
       </div>
    </div>
                

Instagram

Instagram feed should be configured in file php/instagram/config.php

Instagram Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Instagram</h4>
    <div>
        <div class="nk-instagram row sm-gap vertical-gap multi-column" data-instagram-count="6"></div>
    </div>
</div>
    
Available attributes:
  • data-instagram-count - Number of images (Default: 6);
  • data-instagram-quality - Quality of images (Default: sm), available: sm, md, lg;
  • data-instagram-template - Template to show instagram feed
    Default:
    
    <div class="col-xs-4">
        <a href="{{link}}" target="_blank">
            <img src="{{image}}" alt="{{caption}}" class="nk-img-stretch">
        </a>
    </div>
                

Facebook

Facebook Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Facebook</h4>
    <div>
        <div class="fb-page" data-href="http://www.facebook.com/kinfolkmag" data-width="700" data-height="350" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>
    </div>
</div>
    

Recent Posts

Recent Posts Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Recent Posts</h4>
    <div>
        
        <div class="nk-widget-post">
            <a href="news-single-image.html" class="nk-image-box-1 nk-post-image">
                <img src="assets/images/post-1-sm.jpg" alt="">
            </a>
            <h3 class="nk-post-title"><a href="news-single-image.html">Image Blog Post</a></h3>
            <div class="nk-post-meta-date">September 18, 2016</div>
        </div>
        
        <div class="nk-widget-post">
            <a href="news-single-video.html" class="nk-image-box-1 nk-post-image">
                <img src="assets/images/post-2-sm.jpg" alt="">
            </a>
            <h3 class="nk-post-title"><a href="news-single-video.html">Video Blog Post</a></h3>
            <div class="nk-post-meta-date">September 5, 2016</div>
        </div>
        
        <div class="nk-widget-post">
            <a href="news-single-quote.html" class="nk-image-box-1 nk-post-image">
                <img src="assets/images/post-3-sm.jpg" alt="">
            </a>
            <h3 class="nk-post-title"><a href="news-single-quote.html">Blockquote Blog Post</a></h3>
            <div class="nk-post-meta-date">August 27, 2016</div>
        </div>
        
    </div>
</div>
    

Popular Products

Popular Products Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Popular Products</h4>
    <div>
        
        <div class="nk-widget-post">
            <a href="store-product.html" class="nk-post-image">
                <img src="assets/images/product-1-sm.png" alt="Women Tshirt">
            </a>
            <h3 class="nk-post-title"><a href="store-product.html">Women Tshirt</a></h3>
            <div class="nk-product-rating" data-rating="4.5"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i></div>
            <div class="nk-product-price">$67.00</div>
        </div>
        
        <div class="nk-widget-post">
            <a href="store-product.html" class="nk-post-image">
                <img src="assets/images/product-2-sm.png" alt="Men Tshirt">
            </a>
            <h3 class="nk-post-title"><a href="store-product.html">Men Tshirt</a></h3>
            <div class="nk-product-rating" data-rating="2.5"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></div>
            <div class="nk-product-price">$67.00</div>
        </div>
        
        <div class="nk-widget-post">
            <a href="store-product.html" class="nk-post-image">
                <img src="assets/images/product-3-sm.png" alt="Women Hoodie">
            </a>
            <h3 class="nk-post-title"><a href="store-product.html">Women Hoodie</a></h3>
            <div class="nk-product-rating" data-rating="5"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div>
            <div class="nk-product-price">$125.00</div>
        </div>
        
    </div>
</div>
    

Tags

Tags Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Tags</h4>
    <div>
        <div class="nk-widget-tags">
            <a href="#">Creative</a>
            <a href="#">Responsive</a>
            <a href="#">Design</a>
            <a href="#">Bootstrap</a>
            <a href="#">Multi-Concept</a>
        </div>
    </div>
</div>
    

Search

Search Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Search</h4>
    <div>
        <form action="" class="nk-form nk-form-style-1" novalidate="novalidate">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Type something...">
                <span class="nk-input-group-btn">
                    <button class="nk-btn link-effect-4"><span class="ion-search"></span></button>
                </span>
            </div>
        </form>
    </div>
</div>
    

Categories

Categories Widget
HTML example:

<div class="nk-widget">
    <h4 class="nk-widget-title">Categories</h4>
    <div>
        <ul class="nk-widget-categories">
            <li>
                <a href="#">Business</a>
            </li>
            <li>
                <a href="#">Live News</a>
            </li>
            <li>
                <a href="#">Lifestyle</a>
            </li>
        </ul>
    </div>
</div>
    

Elements

All available elements (shortcodes) described and showed on separate pages. See in top navigraion Elements menu item.

Bootstrap

GodLike based on Bootstrap 4 framework and you can use all features from it. See Bootstrap 4 Documentation

Custom Bootstrap Features

Vertical Gap Row


<div class="row vertical-gap">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

No Gap Row


<div class="row no-gap">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

Small Gap Row


<div class="row sm-gap">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

Mid Gap Row


<div class="row md-gap">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

Large Gap Row


<div class="row lg-gap">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

Multi Columns Row


<div class="row multi-columns-row vertical-gap">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
</div>
        
.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4

Equal Height Columns


<div class="row equal-height">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
        
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6
.col-xs-6

Forms

Forms live examples you can find here - element-forms.html.

Contact AJAX Form

To configure contact form you should change file php/contact.php.

HTML Example:

<form action="php/contact.php" class="nk-form nk-form-ajax">
    <input type="email" class="form-control required" name="email" placeholder="Email *">
    <div class="nk-gap"></div>
    <input type="text" class="form-control required" name="name" placeholder="Name *">
    <div class="nk-gap"></div>
    <textarea class="form-control required" name="message" rows="5" placeholder="Message *"></textarea>
    <div class="nk-gap"></div>
    <div class="nk-form-response-success"></div>
    <div class="nk-form-response-error"></div>
    <button class="nk-btn nk-btn-effect-2-right nk-btn-color-dark-1">
        <span>Send</span>
        <span class="icon"><i class="ion-paper-airplane"></i></span>
    </button>
</form>
    

MailChimp AJAX Forms

HTML Example:

<!-- START: MailChimp Signup Form -->
<form action="//nkdev.us11.list-manage.com/subscribe/post?u=d433160c0c43dcf8ecd52402f&id=7eafafe8f0" method="post" class="nk-mchimp validate" target="_blank">
    <div class="input-group">
        <input type="email" value="" name="EMAIL" class="required email form-control text-xs-center" placeholder="Email *">
        <button class="nk-btn nk-btn-block nk-btn-color-dark-1">Subscribe</button>
    </div>
    <div class="nk-form-response-success"></div>
    <div class="nk-form-response-error"></div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d433160c0c43dcf8ecd52402f_7eafafe8f0" tabindex="-1" value=""></div>
</form>
<!-- END: MailChimp Signup Form -->
    

Mouse Animation

GidLike comes with smooth mouse animation. You can easily add it on any element on the page. Pages with mouse effects: Gallery, Store

Example:

z-8
z-6
z-4
z-2

<div class="row text-xs-center">
    <div class="col-md-3">
        <div class="nk-box-2 bg-dark-3">
            <div data-mouse-parallax-z="8">z-8</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="nk-box-2 bg-dark-3">
            <div data-mouse-parallax-z="6">z-6</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="nk-box-2 bg-dark-3">
            <div data-mouse-parallax-z="4">z-4</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="nk-box-2 bg-dark-3">
            <div data-mouse-parallax-z="2">z-2</div>
        </div>
    </div>
</div>

Audio Player

Audio player live example see here - news-single-audio.html.

Audio Player Plain
HTML Example:

<!--
    START: Plain Audio

    Available classes:
        .nk-audio-plain-dark
 -->
<div class="nk-audio-plain nk-audio-plain-dark" data-src="assets/mp3/purpleplanetmusic-molten-alloy.mp3">
    <div class="nk-audio-plain-title">
        <strong>purpleplanetmusic</strong> - Molten Alloy
        <div class="nk-audio-progress">
            <div class="nk-audio-progress-current"></div>
        </div>
    </div>
    <div class="nk-audio-plain-duration">
        05:34
    </div>
</div>

Shortcuts

GodLike have shortcuts on almost all features you can change it in godlike-init.js file.

Secondary Navbars

Right Navbar alt + R
Left Navbar alt + L Will work on mobile sidebar (resize you window)
Fullscreen Navbar alt + F See fullscreen navbar here - layout-nav-fullscreen-side.html

Search

Toggle Search S
Close Search Esc

Share

Toggle Share N
Close Share Esc

Single Post

Works for single post pages

Like L
Dislike D
Scroll to Comments C

Icons

The most of icons used from libraries IonIcons and FontAwesome. But some of icons created using CSS in GodLike, see it below.

Get Support      Purchase GodLike
Men Tshirt

Men Tshirt

$67.00 1 $67.00
Men Hoodie

Men Hoodie

$125.00 $145.00 2 $250.00
Total $317