Wave Documentation

Image

We are here again with our new item Parada Creative Agency & Portfolio template. New modern design layout builded on most popular HTML-CSS framework Bootstrap. Now you can easily create your own agency & portfolio page with Parada.

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!

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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>Parada | Creative Portfolio Template</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Parada | Creative Portfolio Template">
<meta name="keywords" content="parada, digital, creative, agency, portfolio, slider, hero, website, design">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Parada | Creative Portfolio Template">
<meta property="og:image" content="http://www.themezinho.net/parada/preview.png">
<meta property="og:site_name" content="PARADA">
<meta property="og:title" content="PARADA">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.themezinho.net/parada">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@PARADA">
<meta name="twitter:creator" content="@PARADA">
<meta name="twitter:title" content="PARADA">
<meta name="twitter:description" content="Parada | Creative Portfolio Template">
<meta name="twitter:image" content="http://www.themezinho.net/parada/preview.png">

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

<!-- CSS FILES -->
<link href="revolution/css/settings.css" rel="stylesheet" type="text/css" >
<link href="revolution/css/layers.css" rel="stylesheet" type="text/css" >
<link href="revolution/css/navigation.css" rel="stylesheet" type="text/css" >
<link href="css/fa.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/odometer.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
content goes here
</body>
</html>

How to edit link hover color

It is very easy to change main color of ghost link

/* LINKS */
a{ color:#2f312f;}
a:hover{ text-decoration:underline;}
a:focus{ text-decoration:none;}

Change Preloader

Here is the css style for site preloader.

/* PRELOADER */
.preloader{ width:100%; height:100%; background:url(../images/preloader.gif) center no-repeat #f9f9f9; background-size:auto 20%; position:fixed; left:0; top:0; z-index:10; transition-delay:3s;}
.preloader{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;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)}

Edit hamburger menu navigation

Here is the css style for 3 lines hamburger menu.

/* MENU BTN*/
.menu-btn {width: 49px;height: 49px;float:right;cursor: pointer;position:relative;}
.menu-btn .menu-circle-wrap {position: absolute;width: 49px;height: 49px;left: 0;top: 0;transition: all 0.3s;}
.menu-btn .menu-circle {position: absolute;width: 49px;height: 49px;left: 0;top: 0;transition: all 0.6s;}
.menu-btn .menu-circle path {fill: none;stroke-width: 2px;stroke: #dad9e0;stroke-dashoffset: 157;stroke-dasharray: 157;transition: all 0.6s;}
.menu-btn.active .menu-circle {-ms-transform: rotate(-135deg);transform: rotate(-135deg);}
.menu-btn.active .menu-circle path {stroke-dashoffset: 0;}
.menu-btn.active:hover .menu-circle-wrap {-ms-transform: scale(0.95);transform: scale(0.95);}
.menu-btn .menu-circle-wrap .wave {position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;border-radius: 50%;-ms-transform: scale(1);transform: scale(1);box-shadow: 0px 0px 0px 0px #5f6a72;opacity: 0;}
.menu-btn .bars {position: absolute;width: 30px;height: 24px;left: 0;top: 0px;right: 0;bottom: 0;margin: auto;}
.menu-btn .bar {position: absolute;width: 100%;height: 3px;background: #5f6a62;transition: background 0.2s;}
.menu-btn .b1 {top: 2px;}
.menu-btn .b2 {top: 11px;}
.menu-btn .b3 {top: 20px;}
.menu-btn .b1, .header .menu-btn .b3 {transition: all 0.2s;}
.menu-btn.active .b1.rotated { -ms-transform: translateY(9px) rotate(-135deg); transform: translateY(9px) rotate(-135deg);background:#fff;}
.menu-btn.active .b2 {opacity: 0;}
.menu-btn.active .b3.rotated {-ms-transform: translateY(-9px) rotate(-225deg);transform: translateY(-9px) rotate(-225deg);background:#fff;}

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
animate.css For other animations and progress bar
bootstrap.min.css Detault bootstrap css file
fa.min.css FontAwesome font icons
jquery.fancybox.css Litebox plug-in css
odometer.css Counter scripts 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:

TABLE OF CONTENTS
	
	1. 	BODY
	2.	LINKS
	3.	HTML ELEMENTS
	4.	SPACING
	5.	ALIGNED DIVS
	6.	PRELOADER
	7.	TRANSITION OVERLAY
	8.	PAGE LOADED
	9.	MENU BUTTON
	10.	NAVIGATION
	11.	SECTIONS
	12.	HEADER
	13.	MAIN HERO
	14.	INTERNAL HEADER
	15.	INTRO
	16.	HOME SERVICES
	17.	CLIENTS
	18.	SERVICES
	19.	SOLUTIONS
	20.	WORKS
	21.	TEAM MEMBERS
	22.	STUDIO
	23.	INTRODUCTION
	24.	SERVICES INTRO
	25.	LATEST NEWS
	26.	AWARDS
	27.	SUPPORT
	28.	CONTACT
	29.	FOOTER
	30.	MEDIUM FIXES
	31.	TABLET FIXES
	32. MOBILES FIXES
					

JavaScript Files

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

Tag Description
bootstrap-min.js Bootstrap min
google-maps.js Styled Google Maps
isotope.min.js Portfolio filter
jquery.fancybox.js Litebox plugin
jquery.min.js jQuery library
npm.js Bootstrap framework
odometer.min.js Odometer counter plug in
scripts.js All the plug-ins initializing
wow.js Scroll animation load plug-in

Main typewriter effect

If you want to change the texts of header typewriter animation, open up the file scripts.js and change the following code:

	// Fancybox
		$(".fancybox").fancybox({
		helpers: {
		overlay: {
		  locked: false
			}
		  }
		});

About contact form

ajax contact form is very easy to setup , open up the file process.php and change the your@domain.com part.

< ?php

    $to = "your@domain.com";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
	$subject = $_REQUEST['subject'];
    $headers = "From: $from";
    

    $fields = array();
    $fields{"name"} = "Name";
    $fields{"email"} = "E-mail";
    $fields{"subject"} = "Subject";
    $fields{"message"} = "Message";

    $body = "Here is the message from conceito:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

    $send = mail($to, $subject, $body, $headers);

? >

Error messages

Also it is easy to change contact form messages.

<div id="success">

         <p>Your message was sent successfully! We will be in touch as soon as we can.</p>
       </div>
        <div id="error">
          <p>Something went wrong, try refreshing and submitting the form again.</p>
        </div>

There is no included psd file with this item:

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

JavaScript

  1. Revolution Slider
  2. Bootstrap
  3. Isotope
  4. Fancybox
  5. Stellar
  6. Waypoints
  7. Counter Up
  8. OWL Carousel
  9. Qty Increase
  10. Reveal Animations WOW

Images

  1. http://thestocks.im/ — 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.