Wave creative agency & freelancer portfolio theme will fit all kind of digital purposes. Also amazing css animations makes item more attractive and unique.
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="width=device-width, initial-scale=1">
<title>Wave | Agency & Freelancer Portfolio</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Agency & Freelancer Portfolio HTML Template">
<meta name="keywords" content="wave, creatve, portfolio, html, template, carousel, theme, agency, html5">
<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Wave | Agency & Freelancer Portfolio">
<meta property="og:image" content="http://www.acrocapoeira.com/wave/preview.png">
<meta property="og:site_name" content="WAVE">
<meta property="og:title" content="WAVE">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.acrocapoeira.com/wave">
<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@WAVE">
<meta name="twitter:creator" content="@WAVE">
<meta name="twitter:title" content="WAVE">
<meta name="twitter:description" content="Wave | Agency & Freelancer Portfolio">
<meta name="twitter:image" content="http://www.acrocapoeira.com/wave/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="css/main.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:#1d1d1d;}
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
a:hover{text-decoration:underline;}
a:focus{text-decoration:none;}
Here is the css style for site general title typography.
/* TITLE BOX */
.title-box{ width:100%; float:left; text-align:center; margin-bottom:40px;}
.title-box h2{font-size:90px; font-family:jaapokki; margin:0;}
.title-box h5{font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;}
.title-box .shape{font-family:jaapokki; font-size:30px; margin:40px 0; color:#ee3643;}
Here is the css style for loading elements and classes.
/* LOADING */
.loading{ width:100%; height:100%; position:fixed; left:0; top:0; background:#1d1d1d; z-index:9999;}
.loading .loader{ width:100%; height:100%; float:left; text-align:center; position:relative;}
.loading .loading-image{ position:absolute; left:50%; margin-left:-40px; top:50%; margin-top:-40px; width:80px; height:80px;}
.loading .loading-image.dissappear{ top:44%; opacity:0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; -ms-transition: .35s ease-in-out; -o-transition: .35s ease-in-out; transition: .35s ease-in-out; transition-delay: 0.30s;}
.loading .loading-image img{ height:80px;}
.loading .loading-text{ width:100%; float:left; position:absolute; left:0; top:51%; text-align:center; color:#fff; font-size:12px; font-weight:700; letter-spacing:1px;}
.loading .loading-text.dissappear{ top:44%; opacity:0; -webkit-transition: .45s ease-in-out; -moz-transition: .45s ease-in-out; -ms-transition: .45s ease-in-out; -o-transition: .45s ease-in-out; transition: .45s ease-in-out; transition-delay: 0.40s;}
.loading-text-dissappear{margin-top:-140px; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; -ms-transition: .35s ease-in-out; -o-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.loading .loader{ display:inline-block; margin-top:10px; -moz-animation: fadeInUp 0.2s forwards; -webkit-animation: fadeInUp 0.2s forwards; -o-animation: fadeInUp 0.2s forwards; animation: fadeInUp 0.2s forwards;}
.loading .loader-hide{ -moz-animation: fadeInOut 0.2s forwards; -webkit-animation: fadeInOut 0.2s forwards; -o-animation: fadeInOut 0.2s forwards; animation: fadeInOut 0.2s forwards;}
.fade-out{ opacity:0; visibility:hidden; -webkit-transition: .55s ease-in-out; -moz-transition: .55s ease-in-out; -ms-transition: .55s ease-in-out; -o-transition: .55s ease-in-out; transition: .55s ease-in-out; transition-delay: 1s;}
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-slider.css |
Bootstrap price range scroll |
bootstrap.css |
Detault bootstrap css file |
bootstrap.min.css |
Detault bootstrap min css file |
ionicons.css |
ION font icons |
jquery.fancybox.css |
Litebox plug-in css |
main.css |
All the css files included here |
owl.carousel.css |
OWL Carousel plug-in css |
settings.css |
Customized Rev Slider 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 1.1 Elements of body 1.2 Google Fonts 1.3 Links 1.4 Customized html elements 1.5 Form Elements 1.6 Table Middle 1.7 Transition Overlay 1.8 Loading 1.9 Sections 2. Showcase 2.1 Elements of showcase 2.2 Headlines 2.3 Masonry portfolio grids 2.4 Showcase thumb bg colors 3. Navbar 3.1 Elements of navbar 3.2 Transition 3.3 Logo 3.4 Navbar show 4. Slider 4.1 Elements of slider 4.2 Revolation Slider 4.3 Headlines 5. Hamburger Menu 5.1 Elements of hamburger menu 5.2 Transitions 5.3 Spans 5.4 Transform 6. Litebox Navigation 6.1 Elements of navigation 6.2 Transitions 6.3 Video backogrunds 6.4 Nav 7. Slider 7.1 Elements of slider 7.2 Inner 7.3 Headlines 8. Quote Bar 8.1 Elements of Quote 8.2 Headlines 8.3 Link 9. Internal Header 9.1 Elements of Int-Heaer 9.2 Headlines 9.3 Hero backgrounds 9.4 Transition 10. Home Features 10.1 Elements of features 10.2 Icons 10.3 Headlines 11. News 11.1 Elements of news 11.2 News image 11.3 Headlines 12. Title Box 11.1 Elements of title box 11.2 Headlines 11.3 Shape 13. About Us 13.1 Elements of about us 13.2 Headlines 13.3 Paragraph 13.4 Images 14. About Wave 14.1 Elements of about wave 14.2 Headlines 14.3 Paragraph 14.4 Images 15. Quote 15.1 Elements of quote 15.2 Colummns 15.3 Headlines 15.4 Blockquote 15.5 Background Image 16. Google Maps 16.1 Elements of maps 16.2 Map Pin 17. Contact Info 17.1 Elements of contact info 17.2 Headlines 17.3 Images 17.4 Paragraph 18. Contact Form 18.1 Elements of contact form 18.2 Labels 18.3 Inputs 18.4 Form 18.5 Alerts 19. Career 19.1 Elements of career 19.2 Headlines 19.3 Paragraph 19.4 Resume form 19.5 Form inputs 20. Wave Awards 20.1 Elements of wave awards 20.2 Headlines 20.3 Paragraph 20.4 Images 21. Features List 21.1 Elements of features list 21.2 List 22. Services 22.1 Elements of services 22.2 Icons 22.3 Headlines 22.4 Paragraph 22.5 Spacing 23. Services List 23.1 Elements of services list 23.2 Headlines 23.3 Paragraph 23.4 List 24. Project Detail 24.1 Elements of project detail 24.2 Headlines 24.3 Paragraph 24.4 Spacing 25. Process 25.1 Elements of process 25.2 Headlines 25.3 Video background 25.4 Numbers 25.5 Paragraph 26. Wave Things 26.1 Elements of wave things 26.2 Headlines 26.3 Paragraph 27. Logos 27.1 Elements of logos 27.2 Headlines 27.3 Paragraph 27.4 List 27.5 Images 28. Team Members 28.1 Elements of team members 28.2 Transitions 28.3 Images 28.4 Headlines 29. Footer 29.1 Elements of footer 29.2 Headlines 29.3 Logo 29.4 Subfooter 29.5 Footer Menu 30. Responsive Fixes 30.1 Tablet Fixes 20.2 Mobile Fixes
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap-slider.js |
Price range plug-in |
bootstrap.js |
Bootstrap main framework |
bootstrap-min.js |
Bootstrap min |
contact-form.js |
Ajax - php contact form |
counter.js |
Counting numbers plug-in |
google-maps.js |
Styled Google Maps |
isotope.min.js |
Portfolio filter |
jquery.form.js |
Default jquery form plugin |
jquery.min.js |
jQuery library |
jquery.stellar.js |
Parallax backgrounds - elements |
jquery.themepunch.revolution.min.js |
Revolution Slider plug-in |
jquery.themepunch.tools.min.js |
Revolution Slider tools plug-in |
jquery.validate.min.js |
Jquery validation plug-in |
masonry.js |
Masonry grid plug-in |
npm.js |
Bootstrap extention plug-in |
owl.carousel.js |
OWL Carousel jquery |
qty-increase.js |
Cart quantity increase plug-in |
scripts.js |
All the plug-ins initializing |
settings.js |
Revolution Slider setting jquery |
waypoints.min.js |
Scrolling to top jquery |
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:
// Counter for coming soon
$("#countdown").countdown({
date: "8 September 2020 09:00:00", // Change this to your desired date to countdown to
format: "on"
});
// Counter script
$('.counter').counterUp({
delay: 10,
time: 1000
});
// Page transition
$('.transition').on('click', function(e) {
$('.transition-overlay').toggleClass("show");
});
// Transition delay
$('.transition').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},1000);
});
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.