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'.
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>
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;}
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)}
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;}
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 |
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
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 |
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 } } });
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); ? >
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.
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.