Oyo - Template

Available in 6 Classic Versions

By: Hencework
Support: contact@hencework.com

Thank you for purchasing our theme. If you have any questions that aren’t covered in this article, please mail us at contact@hencework.com

ERIC is a Responsive CV / Resume / V-Card / Personal Website / Portfolio Template made with latest technologies Html5, Bootstrap, Sass & Angular js. Introduce yourself like a professional with this unique beautiful design. Provide every important information with awesome design components to your clients or employers.

It is highly customizable because of it's code quality & off course bootstrap Sass. It is smartly responsive that makes it look flexible & crisp on any mobile or tab device.

FEATURES

Fullpage slider
Kenburns Image Background
Kenburns Image Slider Background
constellation Background
Youtube Video Background
Parallax Image/Slider Background
Rotational Portfolio Slider
All in one LightGallery(image,Html5 video,Vimeo video, Youtube Video)
Owl Slider
Angular JS & Bootstrap SASS
CSS3 and JQuery Animations
Working Contact Form
Working Mailchimp Form
Google Webfonts
Fontawesome Icons
ET Line Icons
Responsive Layout
W3C HTML Valid code
Multi-Browser Support
Well Documented

Files

All site files are divided into following folders.

css folder - Contains css files
scss folder - Contains sass file
js folder - Contains Javascript files
img folder - Contains all images
phpmailer folder - Contains all Contact Form related files.
lib folder - Contains mailchimp.php file
fonts folder - Contains "Font-Awesome" fonts plugin

For more details please go through 'Read Me' text file present inside root directory.

Add New Section

Copy section inside div with fullpage ID

...

In Init.js File find below snippet add new anchor name (section ID) and Nav tooltip

					/*Fullpage JS*/
					$('#fullpage').fullpage({
						menu: '#menu',
						scrollBar:true,
						anchors: ['home_sec', 'about_sec', 'services_sec','features_sec','video_sec','portfolio_sec','team_sec','contact_sec','googlemap_sec'],
						navigation: true,
						navigationPosition: 'right',
						navigationTooltips: ['home', 'about', 'services','features','video','portfolio','team','contact','google map'],
						responsiveWidth: 1347
					});

Color styles

We provided 4 standerd color pink,orange,blue,green.

As per your requrement add color class(pink-color) to body tag

You can create your own color style find below snippet in style.css change color code and class name add those name to body tag

					/****************************/
					/** Pink **/
					/****************************/
					.pink-color .la-anim-1 {
					  background: #f5245e; }
					.pink-color .btn {
					  background: #f5245e; }
					  .pink-color .btn:hover, .pink-color .btn:focus, .pink-color .btn:active {
						background: #f5245e !important; }
					.pink-color #fp-nav .active > span::after {
					  border-color: #f5245e; }
					.pink-color #fp-nav ul li .fp-tooltip:after {
					  background: #f5245e; }
					.pink-color .menu-wrap {
					  background: #f5245e none repeat scroll 0 0; }
					.pink-color .intro-sec #countdown {
					  color: #f5245e; }
					.pink-color .intro-sec .social-icons li .social-icon:hover {
					  color: #f5245e; }
					.pink-color .about-sec .icon {
					  color: #f5245e; }
					.pink-color .about-sec .icon-wrap:hover .icon {
					  color: #f5245e; }
					.pink-color .services-sec .services-item {
					  background: #f5245e; }
					.pink-color .features-sec .features-block .fb-table .fb-table-cell .icon {
					  color: #f5245e; }
					.pink-color .video-sec .video-gal a .play-vid {
					  background: #f5245e none repeat scroll 0 0; }
					.pink-color .team-sec .team-slider-wrap .expand-content .excont .social-icons li a:hover {
					  color: #f5245e; }
					.pink-color .contact-sec .social-links li a:hover {
					  color: #f5245e; }
					.pink-color .contact-sec p.form-msg {
					  color: #f5245e; }

Kenburn Image Slider Demo

Please find below snippet and add image link.

animated-color Demo

Please open animated_bg.js file. and find below snippet and change color code as per your interest.

					$.fn.animatedBG = function(options){
					var defaults = {
							colorSet: ['#6cdbc0', '#6cdb8e', '#dbc26c', '#db936c', '#6dbcd9'],
							speed: 2000
						},
					.....

youtube-bg Demo

Please open init.js and change Id, find below snippet.

					/* Youtube initialization js*/
					var options = { videoId: 'tQ-WuUHNIz8',repeat: true }; /* you tube video id goes here.*/

Counter

Please open init.js and find counter js and set time there.

					/*Counter JS*/
					$('#countdown').countdown({ 
						date: '10/24/2016',
					});

Text Ticker

Please open init.js and find Ticker js and set option there.

					/*Ticker JS*/
					var nt_title = $('#nt-title').newsTicker({
						row_height: 220,
						max_rows: 1,
						duration: 4000,
						speed: 400,
						pauseOnHover: 1
					});

Services Section

Services section is based on owl carousel you can find below snippet in index.html

					
					
						
						
							
								We provide solutions
making User Centered Designs.
							
							
								
									...

you can find carausel js code inside init.js

					$('.services-slider').owlCarousel({
						loop:true,
						margin:0,
						nav:true,
						navText: ["",""],
						dots:false,
						responsive:{
							0:{
								items:1,
								margin:0
							},
							768:{
								items:2
							},
							1401:{
								items:3
							}
						}
					});

Team Section

Team section is based on owl carousel you can find below snippet in index.html

					
					
						
						
							
								Our team of experts.
							
							
								
								
								
									
										
											
											
												
													
													"It always seems impossible until its done.
														
														
															
																
																	
																
															
															
																
																	
																
															
															
																
																	
																
															
														
														
													
											
											
												
													
												
												
													
												
											
											
										
											john doe, 
											executive
										
									
									
										
											
											
												
													
													"It always seems impossible until its done.
														
														
															
																
																	
																
															
															
																
																	
																
															
															
																
																	
																
															
														
														
													
											
											
												
													
												
												
													
												
											
											
										
											max tailor, 
											director
										
									
									
										
											
											
												
													
													"It always seems impossible until its done.
														
														
															
																
																	
																
															
															
																
																	
																
															
															
																
																	
																
															
														
														
													
											
											
												
													
												
												
													
												
											
											
										
											amanda grey, 
											creative head
										
									
									
										
											
											
												
													
													"It always seems impossible until its done.
														
														
															
																
																	
																
															
															
																
																	
																
															
															
																
																	
																
															
														
														
													
											
											
												
													
												
												
													
												
											
											
										
											johana d'souza, 
											executive

you can find carausel js code inside init.js

					$('.team-slider').owlCarousel({
					loop:true,
					margin:30,
					nav:true,
					navText: ["",""],
					dots:false,
					responsive:{
						0:{
							items:1,
							margin:0
						},
						768:{
							items:2
						},
						1024:{
							items:3
						},
						1401:{
							items:4
						}
					}
				});

Notify - Subscription Form

Notify content can be changed from the code below. Code is present inside index.html

					
					
						
							
								X
								Subscribe & Stay Updated
								Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

js is present inside the js/init.js folder.

				/***** Subscribe JS start *****/
				$("#notifyMe").notifyMe(); 
				/***** Subscribe JS end*****/

php is present inside the lib/MailChimp.php folder.

php code is present inside the notify-me.php file

				// Set to "mailchimp" to store contacts in MailChimp or "file" to store in a file.
				$STORE_MODE = "mailchimp";

				// Your MailChimp API Key
				$API_KEY =  "278a88c3a704d9e480408da866e42e0b-us11";

				// Your MailChimp List ID
				$LIST_ID =  "e6d9b98ecd";

Portfolio

					
					
						
						
							
								Our Portfolio.
							
							
								
								
								
									
										
											
												
												+
											
											Natural Life of Photographs, Instagram
										
										
											
												
												+
											
											Music for Class, Nativ Place
										
										
											
												
												+
											
											Inside Studio, Dog.inc
										
										
											
												
												+
											
											Fox in the Town, Viva
										
										
											
												
												+
											
											Oh Girls
										
										
											
												
												+
											
											Tattoo Diaries

For images in lightbox you have to provide data-src for image source and for caption data-sub-html has to be provide

Same for youtube and vimeo video in lightbox you have to provide data-src for video source(URL) and for caption data-sub-html has to be provide. In video data-poster is one more data element for video's poster image.

For Html video data-html data element should be present. which is id of hidden div

..

Hidden div

Video Sec

URL of vimeo video you can find in below snippet.

Contact Form

Contact content can be changed from the code below. Code is present inside index.html

					
					
						
						
							
								Hello , We'd love to
 hear from you.
								
									
									
									
										contact
										201, A, 25th street, suit 654, california, CA 105786
										creativehi@Oyo.com
										+75 58685 23645
									
									
									
									
									
										
											
												
													
													
											
											
												
													
													
											
											
										
											
												
													
													
											
											
										
											
												
											
										
										{{ resultMessage }}
									
									
									
									
									
										connect
										
										
										
											
												
													facebook
												
											
											
												
													twitter
												
											
											
												
													linkedin
												
											
										
										
										
										google map

php code is present inside the contact-form.php file

					//create an instance of PHPMailer
					$mail = new PHPMailer();

					$mail->From = $_POST['inputEmail'];
					$mail->FromName = $_POST['inputName'];
					$mail->AddAddress('hencework@gmail.com'); //recipient 
					$mail->Subject = 'Enquiry from hencework';
					$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']);

Please add below snippet in init.js for wow animation

					/*Wow animation*/
					var wow = new WOW(
					{
					boxClass: 'wow', // animated element css class (default is wow)
					animateClass: 'animated', // animation css class (default is animated)
					offset: 0, // distance to the element when triggering the animation (default is 0)
					mobile: false, // trigger animations on mobile devices (default is true)
					live: true // act on asynchronously loaded content (default is true)
					}
					);
					
					wow.init();

Sources & Credits

Twitter Bootstrap framework
http://getbootstrap.com/

Fonts
http://www.google.com/fonts

Icons
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
Pe-icon-7-stroke
http://themes-pixeden.com/font-demos/7-stroke/

LightGallery
http://sachinchoolur.github.io/lightGallery/

JQuery
http://jquery.com

Mailchimp
http://mailchimp.com/

Images
https://unsplash.com/
http://www.pexels.com/

Thanks

Once again, thank you so much for purchasing this theme.

If you have any questions that aren’t covered in this article, please feel free to contact us at hencework@gmail.com

Don’t forget to rate this template, it helps us improve our products.

Oyo - Template

Available in 6 Classic Versions

FEATURES

Files

Add New Section

Color styles

Kenburn Image Slider Demo

animated-color Demo

youtube-bg Demo

Counter

Text Ticker

Services Section

We provide solutionsmaking User Centered Designs.

Team Section

Our team of experts.

Notify - Subscription Form

Notify content can be changed from the code below. Code is present inside index.html

Subscribe & Stay Updated

Portfolio

Our Portfolio.

Natural Life of Photographs, Instagram

Music for Class, Nativ Place

Inside Studio, Dog.inc

Fox in the Town, Viva

Oh Girls

Tattoo Diaries

Video Sec

Contact Form

Contact content can be changed from the code below. Code is present inside index.html

Hello , We'd love to hear from you.

contact

connect

google map

Please add below snippet in init.js for wow animation

Sources & Credits

Thanks

We provide solutions
making User Centered Designs.

Hello , We'd love to
hear from you.