SREATIVE | Digital Agency html template has modern design and clean coded. Builded on most popular html-css framework BOOTSTRAP 3.3.4. Template can implament for all purpose of companies and freelancers. Amazing mockups and home page versions makes item more attractive and unique. As always responsive and retina ready.
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 three 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>SREATIVE | Digital Agency</title>
<meta name="author" content="Themezinho">
<meta name="description" content="SREATIVE | Digital Agency HTML Template">
<meta name="keywords" content="html, template, carousel, theme, themezinho, agency, html5">
<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="SREATIVE | Digital Agency">
<meta property="og:image" content="http://www.acrocapoeira.com/sreative/preview.png">
<meta property="og:site_name" content="SREATIVE">
<meta property="og:title" content="SREATIVE">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.acrocapoeira.com/sreative">
<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@SREATIVE">
<meta name="twitter:creator" content="@SREATIVE">
<meta name="twitter:title" content="SREATIVE">
<meta name="twitter:description" content="SREATIVE | Digital Agency">
<meta name="twitter:image" content="http://www.acrocapoeira.com/sreative/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/animate.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/jquery.fancybox.css?v=2.1.5" media="screen" rel="stylesheet" type="text/css" />
<link href="css/settings.css" rel="stylesheet">
<link href="css/ionicons.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>
It is very easy to change main link color
a{color:#fed20e;}
a:hover{text-decoration:underline;}
a:focus{text-decoration:none;}
Here is the css style for site general title typography.
.loading{ width:100%; height:100%; text-align:center; position:fixed; left:0; top:0; z-index:99999; }
.loading img{ height:14px; margin-bottom:30px; display:inline-block;}
.loading .spinner{ width:30px; height:30px; border:3px solid rgba(255,255,255,0.2); border-top:3px solid #fff; border-radius:30px; display:inline-block;}
.loading .spinner{-webkit-animation-name: spin;
-webkit-animation-duration: 400ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 400ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 400ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;}
.fade-out{ opacity:0; visibility:hidden; transition-duration: 700ms; -webkit-transition-duration: 700ms; transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);}
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 |
CSS animation effect |
bootstrap.css |
Framework css file |
bootstrap.min.css |
Framework min css file |
ionicons.css |
ION font icons |
jquery.fancybox.css |
Litebox css |
settings.css |
Slider setting css |
style.css |
Layout main css |
The second file contains all of the specific stylings for the page. The file is separated into sections using:
1. Body
1.1 Elements of body
1.2 Form Elements
1.3 Links
1.4 Spacing
1.5 Html Elements
1.6 Table Valign
2. Loading
2.1 Elements of Loading
2.2 Transition elements
2.3 Yellow Background
3. Side Menu
3.1 Elements of side menu
3.2 Form & Inputs
3.3 Social Media Icons
4. Header
4.1 Elements of header
4.2 Slide Content Box
4.3 Internal Header
5. Navigation
5.1 Elements of navigation
5.2 Site Logo
5.3 Navbar
5.4 Dropdown
5.5 Fixed Navigation
6. About Us
6.1 Elements of about us
6.2 Left side
6.3 Right side
7. Services
7.1 Elements of services
7.2 Box
7.3 Icon
7.4 Expand button
7.5 Expanded List
8. Team Members
8.1 Elements of team-members
8.2 Member Image
8.3 Member Info
9. Fun Facts
9.1 Elements of fun facts
9.2 Box
9.3 Icon
9.4 Counting numbers
10. Latest Work
10.1 Elements of works
10.2 Transition
10.3 Section title
10.4 Works Filter
10.5 List of works
10.6 Hover Caption
11. Works
11.1 Elements of works
11.2 Transition
11.3 Section title
11.4 Works Filter
11.5 List of works
11.6 Hover Caption
12. Logos
12.1 Elements of logos
12.2 Carousel
12.3 Controls - Arrows
13. Latest News
13.1 Elements of news
13.2 Section title
13.3 News box
14. Quote
14.1 Elements of quote
14.2 Section title
14.3 Paragraph
14.4 Button
15. Blog
15.1 Elements of blog
15.2 Transitions
14.3 Blog posts
14.4 Pagination
16. Side Bar
16.1 Elements of sidebar
16.2 Widgets
16.3 Social Media
16.4 Search
16.5 Tags
16.6 Categories
16.7 Gallery
17. Contact Info
17.1 Elements of contact info
17.2 Section Title
17.3 Form Elements
17.4 Map
18. Contact
18.1 Elements of contact
18.2 Icons
18.3 Spacing
19. Footer
19.1 Elements of footer
19.2 Transition
19.3 Section Titles
19.4 Gallery
19.5 Form elements
20. Sub Footer
20.1 Elements of sub-footer
21. Responsive Fixes
21.1 Tablet Fixes
21.2 Mobile Fixes
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap.js |
Bootstrap jquery framework |
bootstrap.min.js |
Bootstrap MIN jquery framework |
google-maps.js |
Google maps parameters |
isotope.min.js |
Popular filter jquery |
jquery.counterup.min.js |
Counter jquery |
jquery.min.js |
Jquery library |
jquery.stellar.js |
Parallax effect |
jquery.themepunch.revolution.min.js |
Revolution Slider jquery |
jquery.themepunch.tools.min.js |
Revolution Slider Tools jquery |
jquery.fancybox.js |
Litebox jquery |
npm.js |
Bootstrap scripts |
scripts.js |
All the jquery parameters |
settings.js |
Revolution Slider Setting jquery |
smoothscroll.js |
Smooth scrolling |
prefixfree.min.js |
Script for 3D typography |
wow.js |
Scroll load animations |
It's so easy to edit transition paramaters, open up the file scripts.js and change the following code:
// Services Toggles
$(".btn1").click(function() {
$(".services .box .list1").toggleClass("show-me");
});
$(".btn2").click(function() {
$(".services .box .list2").toggleClass("show-me");
});
$(".btn3").click(function() {
$(".services .box .list3").toggleClass("show-me");
});
$(".btn4").click(function() {
$(".services .box .list4").toggleClass("show-me");
});
$(".btn5").click(function() {
$(".services .box .list5").toggleClass("show-me");
});
$(".btn6").click(function() {
$(".services .box .list6").toggleClass("show-me");
});
$(".btn7").click(function() {
$(".services .box .list7").toggleClass("show-me");
});
$(".btn8").click(function() {
$(".services .box .list8").toggleClass("show-me");
});
There is no PSD file in this theme
I've used the following images, jquery 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. I'll do my best to assist you. 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.