UonCorp

Uon Corps. | Business Solutions Companies


We made another html template documentation with ♥ by themezinho

Image

UonCorp is developed for business and finance consultation sector to present theirselves more attractive. Now with UonCorp you can create your own business website very easily and quickly. UonCorp based on Bootstrap framework and all files and codes has been well organized.

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

Markup Markup customization and highlights

This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!doctype html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Uon Corps. | Business Solutions Companies</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Uon Corps. | Business Solutions Companies">
<meta name="keywords" content="business, corporate, uon, corps, template, carousel, parallax, office, team">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Uon Corps. | Business Solutions Companies">
<meta property="og:image" content="http://www.themezinho.net/uon/preview.png">
<meta property="og:site_name" content="uon">
<meta property="og:title" content="uon">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.themezinho.net/uon">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@uon">
<meta name="twitter:creator" content="@uon">
<meta name="twitter:title" content="uon">
<meta name="twitter:description" content="Uon Corps. | Business Solutions Companies">
<meta name="twitter:image" content="http://www.themezinho.net/uon/preview.png">

<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon">
<link href="ico/favicon.png" rel="shortcut icon">

<!-- CSS FILES -->
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/flipbox.min.css">
<link rel="stylesheet" href="css/timeline.css">
<link rel="stylesheet" href="css/odometer.min.css">
<link rel="stylesheet" href="css/fancybox.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
content goes here
</body>
</html>

How to customize sandwich menu

It is very easy to change main color or size of hamburger

/* SANDWICH BUTTON */
.sandwich-btn {
  width: 46px;
  height: 46px;
  float: right;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  border-radius: 50%;
}
.sandwich-btn span {
  display: block;
  height: 2px;
  width: 22px;
  background: #405089;
  opacity: 1;
  position: absolute;
  right: 12px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
  top: 18px;
}
.sandwich-btn span:nth-child(2) {
  top: 22px;
  opacity: 0;
}
.sandwich-btn span:nth-child(3) {
  top: 26px;
}
.sandwich-btn:hover span {
  width: 22px;
  right: 12px;
  background: #f65935;
}
.sandwich-btn.open span:nth-child(1) {
  top: 22px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
  opacity: 0;
  right: -10px;
}
.sandwich-btn.open span:nth-child(3) {
  top: 22px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* SANDWICH MENU */
.sandwich-menu {
  width: 400px;
  height: 100%;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: -100%;
  top: 0;
  background: #262d57;
  z-index: 9;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  padding: 30px 40px;
}
.sandwich-menu .logo {
  width: 100%;
  float: left;
  margin-bottom: 40px;
}
.sandwich-menu .logo img {
  height: 41px;
}
.sandwich-menu .nav-menu {
  display: none;
}
.sandwich-menu p {
  display: block;
  margin-bottom: 30px;
  color: #fff;
}
.sandwich-menu address {
  display: block;
}
.sandwich-menu address a {
  color: #fff;
  opacity: 0.7;
  text-decoration: underline;
}
.sandwich-menu .photo-gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0;
}
.sandwich-menu .photo-gallery li {
  flex: 1;
  margin: 0;
  padding: 0;
  margin-right: 4px;
  list-style: none;
}
.sandwich-menu .photo-gallery li:last-child {
  margin-right: 0;
}
.sandwich-menu .photo-gallery li a {
  float: left;
  border: 1px solid #fff;
}
.sandwich-menu .social-media {
  display: inline-block;
  margin-bottom: 40px;
  padding: 0;
}
.sandwich-menu .social-media li {
  float: left;
  margin-right: 16px;
  padding: 0;
  list-style: none;
}
.sandwich-menu .social-media li a {
  color: #fff;
  float: left;
  font-size: 12px;
}
.sandwich-menu .social-media li a:hover {
  opacity: 0.7;
}
.sandwich-menu .copyright {
  display: block;
  color: #fff;
  opacity: 0.7;
  font-size: 11px;
}
.sandwich-menu.open {
  left: 0;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.1);
}
.sandwich-menu .nav-menu {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.sandwich-menu .nav-menu li {
  width: 100%;
  float: left;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.sandwich-menu .nav-menu li a {
  width: 100%;
  float: left;
  color: #fff;
  font-weight: 600;
}
.sandwich-menu .nav-menu li a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.sandwich-menu .nav-menu li .dropdown {
  display: none;
  margin: 0;
  padding-left: 20px;
}

Change Site Header

Here is the css style for site header.

/* HEADER */
.header{ width: 100%; position: absolute; left: 0; top: -100%; z-index: 5; padding: 30px 100px; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; } 
.header .logo{float: left; margin-right: 20px;}
.header .logo img{ width: 35px;}
.header .phone{float: left; color: #fff; line-height: 32px; font-family: "Fjalla One";}
.header .language{ float: right; margin-right: 30px; margin-bottom: 0;}
.header .language li{ float: left; list-style: none; margin: 0; margin-left: 20px; font-family: "Fjalla One";}
.header .language li a{float: left; color: #fff; line-height: 35px;}
.header .language li a:hover{text-decoration: none; opacity: 0.8;}
.header .hamburger{float: right; margin-top: -5px;}
.header .equalizer{float: right; margin-top: 5px; margin-right: 20px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}




/* DROPDOWN */
.hamburger-navigation li:hover ul{display: block;}
.hamburger-navigation li ul{ width: 100%; float: left; margin: 0; padding: 0; text-align: center; display: none;}
.hamburger-navigation li ul li{width: auto; float: none; display: inline-block; padding: 0; margin: 0; position: relative;}
.hamburger-navigation li ul li:after{content: ""; width: 6px; height: 6px; background: #fff; position: absolute; right: -5px; top: 7px; border-radius: 50%;}
.hamburger-navigation li ul li:last-child:after{display: none;}
.hamburger-navigation li ul li a{font-size: 15px; padding: 0 10px;}

Edit loading and page transition

Here is the css style for loading elements and classes.

/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}




/* PRELOADER */
.preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#f50c1a; }
.preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;  }
.preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;} 
.preloader img{ width: 80px; height: 80px; position: absolute; left: 50%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;}




/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; transition-delay: 0.60s;}
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;}
.page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;}
.page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}

Styles Styles customization and highlights

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.min.css Detault bootstrap css file
datepicker.css Select date css file
flaticon.css Flat font icons
font-awesome.min.css Font Awesome font icons
jquery.fancybox.css Litebox plug-in css
odometer.css Counter for odometer
owl.carousel.min.css OWL Carousel plug-in css
style.css Template main css

Table of contents

The second file contains all of the specific stylings for the page. The file is separated into sections using:

01.	GOOGLE FONTS
	02.	BODY
	03.	CONTAINER
	04. CUSTOM HTML
	05.	LINKS
	06.	HTML TAGS
	07.	ALERTS
	08.	FORM ELEMENTS
	09.	ODOMETER
	10. ACCORDION
	11.	PROGRESS BAR
	12.	PAGINATION
	13.	PRELOADER
	14.	SECTION TITLE
	15.	CLOSE BUTTON
	16.	SANDWICH BUTTON
	17.	SANDWICH MENU
	18.	HEADER
	19.	SLIDER
	20.	PAGE HEADER
	21.	CONTENT
	22.	FEATURED SERVICES
	23.	IMAGE CONTENT BOX
	24.	SIDE IMAGE CONTENT
	25.	ICON CONTENT BOX
	26. IMAGE CONTENT OVER BOX
	27.	HOME CASES
	28.	TESTIMONIALS
	29.	TEAM MEMBERS
	30.	LATEST NEWS
	31.	INFO BOX
	32.	REQUEST FORM
	33.	SOLUTIONS
	34.	BLOG
	35.	PRICES
	36.	CLIENTS
	37.	HISTORY TIMELINE
	38.	CAREER
	39.	PRESS RELEASES
	40.	OUR OFFICES
	41.	ERROR PAGE 404
	42.	FAQ
	43.	CONTACT
	44.	SCROLL UP
	45.	FOOTER
	46.	RESPONSIVE MEDIUM FIXES
	47.	RESPONSIVE TABLET FIXES
	48. REPSONSIVE MOBILE FIXES

JavaScript JavaScript customization and highlights

JavaScript Files

This is the list of all the jquery files are we used for our theme.

Tag Description
bootstrap-datepicker.min.js Datepicker jQuery
bootstrap-min.js Bootstrap min
google-maps.js Customized Google Maps
instagram.js Instagram API plugin
isotope.js Masonry grid jquery
jquery.dateFormat.js Date format jQuery file
jquery.fancybox.js Litebox jQuery
jquery.min.js jQuery library
jquery.stellar.js Parallax backgrounds - elements
npm.js Bootstrap plug-in
odometer.min.js Counter plugin
owl.carousel.min.js Carousel plugin
scripts.js All the plug-ins initializing

Equalizer

If you want to change the equalizer, open up the file scripts.js and change the following code: 

	// EQUALIZER TOGGLE
			var source = "http://themezinho.net/UonCorp/audio/audio.mp3";
			var audio = new Audio(); // use the constructor in JavaScript, just easier that way
			audio.addEventListener("load", function() {
			  audio.play();
			}, true);
			audio.src = source;
			audio.autoplay = true;
			audio.volume = 0.2;

			$('.equalizer').click();		
			var playing = true;		
			$('.equalizer').click(function() {
				if (playing == false) {
			  audio.play();
					playing = true;

				} else {
					audio.pause();
					playing = false;
				}
			});
			
	// EQUALIZER
			function randomBetween(range) {
				var min = range[0],
					max = range[1];
				if (min < 0) {
					return min + Math.random() * (Math.abs(min)+max);
				}else {
					return min + Math.random() * max;
				}
			}

			$.fn.equalizerAnimation = function(speed, barsHeight){
				var $equalizer = $(this);
				setInterval(function(){
					$equalizer.find('span').each(function(i){
					  $(this).css({ height:randomBetween(barsHeight[i])+'px' });
					});
				},speed);
				$equalizer.on('click',function(){
					$equalizer.toggleClass('paused');
				});
			}

			var barsHeight = [
			  [2, 10],
			  [5, 14],
			  [11, 8],
			  [4, 18],
			  [8, 3]
			];
			$('.equalizer').equalizerAnimation(180, barsHeight);

Counter

If you want to change values of counter, open up the file scripts.ks and change the numbers.

// COUNTER 
			if (!document.getElementById("counter")) {
			} 
			else {

			var lastWasLower = false;
				$(document).scroll(function(){

				var p = $( "#counter" );
				var position = p.position();
				var position2 = position.top;

				if ($(document).scrollTop() > position2-300){
				if (!lastWasLower)
					$('#1').html('21');
					$('#2').html('37');
					$('#3').html('78');

				lastWasLower = true;
					} else {
				lastWasLower = false;
				}
				});		
			};

Photoshop Files Photoshop customization and highlights

There is no included psd file with this item:

Credits Files Some of your credits and sources

I've used the following images, icons or other files as listed.

JavaScript

  1. Revolution Slider
  2. Bootstrap
  3. Isotope
  4. Fancybox
  5. Odometer
  6. Swiper Carousel
  7. Stellar Parallax

Images

  1. http://www.istockphoto.com/ — Some of images we used from here
  2. http://www.shutterstock.com/ — Some of images we used from here

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.