Genox - Creative Agency & Digital Web Agency Multipurpose HTML Template with full of customization options and features.
GENOX is based on Bootstrap 4, So it give you more flexible for customize. All files are clearly organised we believe it will be easy to use and edit them. Design is very clean, elegant and modern. You can customize this template as his wishes.
Thank you for purchasing our GENOX Multi-Purpose Creative Agency HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user profile contact form here. Thanks so much!
<!DOCTYPE html>
<html lang="zxx" class="js">
<head>
<meta charset="utf-8">
<meta name="author" content="Softnio">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- Fav Icon -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- Site Title -->
<title>GENOX Multipurpose Creative Agency</title>
<!-- Bundle and Base CSS -->
<link rel="stylesheet" href="assets/css/vendor.bundle.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="body-wider">
<!-- Header -->
<header class="is-sticky is-shrink is-boxed header-s1" id="header">
<div class="header-box">
<div class="header-main">
<div class="header-wrap">
<!-- Logo -->
<div class="header-logo logo">
</div>
<!-- .Logo -->
<!-- Menu -->
<div class="header-navbar">
</div><!-- .header-navbar -->
</div>
</div>
<div class="banner tc-light">
</div>
<!-- .banner -->
</div>
</header>
<!-- end header -->
<!-- section -->
<div class="section section-x section-block">
</div>
<!-- .section -->
<!-- logo -->
<div class="section">
</div>
<!-- .logo -->
<!-- section counter -->
<div class="section section-x section-counter">
<!-- bg -->
<div class="bg-image overlay">
<img src="images/bg-b.jpg" alt="">
</div>
</div>
<!-- .section -->
<!-- section testimonial -->
<div class="section section-x">
</div>
<!-- .section -->
<!-- team -->
<div class="section section-x team bg-secondary">
</div>
<!-- .team -->
<!-- section-news -->
<div class="section section-x section-news">
</div>
<!-- .section-news -->
<!-- section/cta -->
<div class="section section-cta bg-primary tc-light section-x cta-s1">
<div class="container">
</div><!-- .container -->
</div>
<!-- .section/cta -->
<!-- footer -->
<footer class="section footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</footer>
<!-- .footer -->
<!-- JavaScript -->
<script src="assets/js/jquery.bundle.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
All CSS are located in the "assets/css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
To use above presets, at first keep a backup of your main 'theme.css' file and then rename your preferred stylsheet with a name of (theme.css).
/*!
* Theme Name: Genox - Creative Agency & Digital Web Agency Multipurpose HTML Template
* Author: Softnio
* Author URI: http://themeforest.net/user/softnio
* Version: 1.0.1
**/
/**
----------------------
## TABLE CONTNETS ##
01. Fonts
02. Utilities
-- 02.1 Reset
-- 02.2 Spacing
-- 02.3 Misc
-- 02.4 Preset
-- 02.5 Animate
03. layouts
-- 03.1 Header
-- 03.2 Menu
-- 03.3 Sections
-- 03.4 Footer
04. Override
05. Block
-- 05.1 Banner
-- 05.2 Feature
-- 05.3 Services
-- 05.4 Counter
-- 05.5 Project
-- 05.6 Testimonial
-- 05.7 Team
-- 05.8 Cta
-- 05.9 Post
-- 05.10 Career
-- 05.11 Contact
-- 05.12 form
---------------------- **/
/** IMPORTANT NOTE: DO NOT Edit this file. Best to write own code in css/custom.css file. It will helps you to easy update of the template. */
/** 01. Fonts */
@font-face {font-family: 'Roboto';src: url("../fonts/Roboto-Light.eot");src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");font-weight: 300;font-style: normal; }
@font-face {font-family: 'Roboto';src: url("../fonts/Roboto-Regular.eot");src: local("Roboto"), local("Roboto-Regular"), url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");font-weight: normal;font-style: normal; }
@font-face {font-family: 'Roboto';src: url("../fonts/Roboto-Medium.eot");src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");font-weight: 500;font-style: normal; }
@font-face {font-family: 'Poppins';src: url("../fonts/Poppins-Black.eot");src: url("../fonts/Poppins-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Black.woff2") format("woff2"), url("../fonts/Poppins-Black.woff") format("woff"), url("../fonts/Poppins-Black.ttf") format("truetype");font-weight: 900;font-style: normal; }
@font-face {font-family: 'Poppins';src: url("../fonts/Poppins-Bold.eot");src: url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"), url("../fonts/Poppins-Bold.ttf") format("truetype");font-weight: 700; font-style: normal; }
@font-face {font-family: 'Poppins'; src: url("../Poppins-SemiBold.eot"); src: url("../Poppins-SemiBold.eot?#iefix") format("embedded-opentype"), url("../Poppins-SemiBold.woff2") format("woff2"), url("../Poppins-SemiBold.woff") format("woff"), url("../Poppins-SemiBold.ttf") format("truetype");font-weight: 600;font-style: normal; }
/** 02. Utilities */
/** 02.1 Reset */
html, body {
font-family: "Roboto", sans-serif;
color: #131313;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
@media (min-width: 576px) {
html, body {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
}
}
article, aside, details, figcaption, figure,footer, header, hgroup, main, menu, nav, section {display: block; }
*[hidden] {display: none; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote::after, blockquote::before, q::after, q::before {content: none; }
table {
border-collapse: collapse;
border-spacing: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #131313;
font-weight: 700;
font-family: "Poppins", sans-serif;
line-height: 1.3;
margin-bottom: 0.5rem;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, .h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child {margin-bottom: 0;}
.tc-light h1, .tc-light h2, .tc-light h3, .tc-light h4, .tc-light h5, .tc-light h6, .tc-light .h1, .tc-light .h2, .tc-light .h3, .tc-light .h4, .tc-light .h5, .tc-light .h6 {color: #fff; }
p {margin-bottom: 1rem; }
p:last-child {margin-bottom: 0; }
ul, ol, table {margin: 0;padding: 0; }
strong, b {font-weight: 700; }
a, button {outline: 0 none;transition: all 0.5s;color: #ff4157; }
a:link, a:visited, button:link, button:visited {text-decoration: none; }
a:hover, a:focus, a:active, button:hover, button:focus, button:active {outline: 0;color: #ff4157; }
.bg-dark-alt a:hover, .bg-dark a:hover, .bg-dark-alt button:hover, .bg-dark button:hover {color: #ffffff; }
img { max-width: 100%; height: auto; }
h1, .h1, .fz-1 {font-size: 1.75rem; }
h2, .h2, .fz-2 {font-size: 1.375rem; }
h3, .h3, .fz-3 {font-size: 1.25rem; }
h4, .h4, .fz-4 {font-size: 1.125rem;line-height: 1.667; }
h5, .h5, .fz-5 {font-size: 1rem; }
h6, .h6, .fz-6 {font-size: 0.875rem; }
.fz-7 {font-size: 0.75rem; }
.fz-8 {font-size: 0.75rem; }
.lead {font-weight: 400; }
.l-font {font-size: 4.5rem; }
All CSS are located in the "assets/css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
/*!
* GENOX Multi-Purpose Creative Agency HTML Template
**/
var NioApp = (function (jQ, win, doc){
"use strict";
var NioApp = {AppInfo: {name: "GENOX", package: "1.5.0", version: "1.0.0", author: "Softnio"} },
components = {docReady: [], docReadyDefer: [], winLoad: [], winLoadDefer: []};
jQ(doc).ready(docReady);
jQ(win).on("load", winLoad);
NioApp.components = components;
NioApp.docReady = docReady;
NioApp.winLoad = winLoad;
return NioApp;
}(jQuery, window, document));
NioApp = function (NioApp, $, window, document) {
"use strict";
// Defined Variables
var $win = $(window),
// is exists @v1.0
$.fn.exists = function () {
return this.length > 0;
};
NioApp.components.docReady.push(NioApp.Util.classInit);
// Browser Check !Util @v1.0
NioApp.Util.browser = function() {
var isChrome = !!window.chrome,
isFirefox = typeof InstallTrigger !== 'undefined',
isIE = /*@cc_on!@*/false || !!document.documentMode,
isEdge = !isIE && !!window.StyleMedia,
isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
if(isChrome == true) {
$body.addClass('chrome');
} else if (isFirefox){
$body.addClass('firefox');
}
}
return NioApp;
}(NioApp, jQuery, window, document);
/* END @iO*/
First open the php file located into form folder. Files are 'contact.php', 'subscribe.php'. On the file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email.
// Enter Your Sitename $sitename = 'your site'; // Enter your email addresses: @required $emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
//$mail->isSMTP(); //$mail->SMTPDebug = 0; //$mail->Host = 'smtp_host'; //$mail->Port = 587; //$mail->SMTPAuth = true; //$mail->Username = 'smtp_user_name'; //$mail->Password = 'smtp_pass';
At first add a class .animated to your elmement. Then add data-animate="fadeInUp", data-animate="fadeInDown", data-animate="fadeInLeft", data-animate="fadeInRight" For animation direction. Also use data-delay=".3" for animation start delay time.
Get markup from index-dallas-dark-video.html page, Change value of data-video and data-cover attribute with your youtube video id, and falback cover image.