Onovo - Creative Portfolio Agency HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──assets/
│──│──│──css/
│──│──│──sass/
│──│──│──│──settings.scss
│──│──│──│──style.scss
│──│──│──│──skin-options.scss
│──│──│──images/
│──│──│──fonts/
│──│──│──js/
│──│──│──│──bootstrap.js
│──│──│──│──common.js
│──│──│──│──imagesloaded.pkgd.js
│──│──│──│──isotope.pkgd.js
│──│──│──│──jquery.easy_number_animate.js
│──│──│──│──jquery.min.js
│──│──│──│──jquery.pagepiling.js
│──│──│──│──jquery.validate.min.js
│──│──│──│──magnific-popup.js
│──│──│──│──parallax.js
│──│──│──│──skrollr.js
│──│──│──│──splitting.js
│──│──│──│──swiper.js
│──│──mailer/
│──│──│──feedback.php
│──│──│──form_setting.php
│──│──index.html
│──│──home-digital-agency.html
│──│──home-showcase.html
│──│──home-parallax.html
│──│──about-us.html
│──│──blog.html
│──│──blog-list.html
│──│──blog-detail.html
│──│──contact-us.html
│──│──faq.html
│──│──gallery.html
│──│──pricing-plans.html
│──│──projects.html
│──│──projects-list.html
│──│──projects-side.html
│──│──projects-masonry.html
│──│──projects-3-column.html
│──│──project-detail.html
│──│──services.html
│──│──services-detail.html
│──│──team.html
│──│──team-detail.html
-
css/ - compiled css styles for template
-
scss/ - main .scss styles for template
-
js/ - all JS library for template
- common.js - main JS for template
-
mailer/ - PHP forms and mail settings for template
- form_setting.php - email settings for forms
- feedback.php - contact form settings
Settings
Template Settings
For editing styling, colors, sizes, etc of the template you can use following settings, folder "/sass/_settings.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".
/* ---
Settings Begin
---*/
/* --Fonts Family */
$text_font_family: "Epilogue"; /* - paragraphs font */
$heading_font_family: "Epilogue"; /* - headings font */
$btn_font_family: "Epilogue"; /* - buttons font */
/* --Template Colors */
$theme_bg_color: #ffffff; /* - background color */
$theme_color: #D8FF36; /* - accent color */
$text_color: #1B252E; /* - paragraphs color */
$heading_color: #000000; /* - headings color */
$btn_color: #000000; /* - buttons bg color */
$btn_hover_color: #D8FF36; /* - buttons bg color on Hover */
$intro_color: #ffffff; /* - intro heading color */
$intro_subtitle_color: #ffffff; /* - intro description color */
$intro_bread_color: #ffffff; /* - intro breadcrumbs color */
/* --Heading h1 */
$heading_font_size: 70px; /* - font size */
$heading_font_weight: 600; /* - font weight */
$heading_letter_spacing: 0px; /* - letter spacing */
$heading_font_transform: unset; /* - font transform */
/* --Heading h2 */
$heading2_font_size: 60px; /* - font size */
$heading2_font_weight: 600; /* - font weight */
$heading2_letter_spacing: 0px; /* - letter spacing */
$heading2_font_transform: unset; /* - font transform */
/* --Heading h3 */
$heading3_font_size: 40px; /* - font size */
$heading3_font_weight: 600; /* - font weight */
$heading3_letter_spacing: 0px; /* - letter spacing */
$heading3_font_transform: unset; /* - font transform */
/* --Heading h4 */
$heading4_font_size: 30px; /* - font size */
$heading4_font_weight: 600; /* - font weight */
$heading4_letter_spacing: 0px; /* - letter spacing */
$heading4_font_transform: unset; /* - font transform */
/* --Heading h5 */
$heading5_font_size: 20px; /* - font size */
$heading5_font_weight: 600; /* - font weight */
$heading5_letter_spacing: 0px; /* - letter spacing */
$heading5_font_transform: unset; /* - font transform */
/* --Heading h6 */
$heading6_font_size: 18px; /* - font size */
$heading6_font_weight: 600; /* - font weight */
$heading6_letter_spacing: 0px; /* - letter spacing */
$heading6_font_transform: unset; /* - font transform */
/* --Paragraphs */
$text_font_size: 18px; /* - font size */
$text_font_weight: 400; /* - font weight */
$text_line_height: 1.7; /* - line height */
$text_letter_spacing: 0px; /* - letter spacing */
/* --Buttons */
$btn_font_size: 16px; /* - font size */
$btn_font_weight: 700; /* - font weight */
$btn_letter_spacing: 0px; /* - letter spacing */
$btn_font_transform: unset; /* - text transform */
$btn_border_radius: 66px; /* - border radius */
/* --Preloader */
$preloader_bg_color: #000000; /* - prelaoder background color */
$preloader_color: #D8FF36; /* - preloader figure color */
/* ---
Settings End
---*/
Include of fonts
To use fonts, you must add one tag 'link' from section below to head section.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto..." type="text/css" media="all" />
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/v5/search, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
Contact Form PHP
To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"
HTML structure
<!doctype html>
<html lang="en-US">
<head>
<title>Onovo - Creative Portfolio Agency HTML5 Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="author" content="bslthemes" />
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Epilogue..." type="text/css" media="all" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<!-- CSS STYLES -->
<link rel="stylesheet" href="assets/css/vendors/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/magnific-popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/splitting.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/swiper.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/animate.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/jquery.pagepiling.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Page -->
<div class="onovo-page footer--fixed">
<!-- Preloader -->
<div class="preloader">
<div class="preloader__spinner">
<span class="preloader__double-bounce"></span>
<span class="preloader__double-bounce preloader__double-bounce--delay"></span>
</div>
</div>
<!-- Header -->
<header class="onovo-header header--white">
...
</header>
<!-- Wrapper -->
<div class="wrapper">
...
</div>
<!-- Footer -->
<footer class="onovo-footer footer--dark">
...
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/splitting.js"></script>
<script src="assets/js/scroll-out.js"></script>
<script src="assets/js/jquery.pagepiling.js"></script>
<script src="assets/js/jquery.easy_number_animate.js"></script>
<script src="assets/js/magnific-popup.js"></script>
<script src="assets/js/imagesloaded.pkgd.js"></script>
<script src="assets/js/isotope.pkgd.js"></script>
<script src="assets/js/common.js"></script>
</body>
</html>
HTML structure of "Wrapper"
<!-- Wrapper -->
<div class="wrapper">
<!-- Onovo Hero -->
<section class="onovo-section onovo-hero">
...
</section>
<!-- Onovo Services -->
<section class="onovo-section gap-top-140 gap-bottom-140">
...
</section>
<!-- Onovo About -->
<section class="onovo-section gap-bottom-140">
...
</section>
<!-- Onovo Ticker -->
<section class="onovo-section gap-bottom-140">
...
</section>
<!-- Onovo Showcase -->
<section class="onovo-section gap-bottom-140" style="border-bottom: 1px solid #555;">
...
</section>
<!-- Onovo Team -->
<section class="onovo-section gap-top-140 gap-bottom-140">
...
</section>
<!-- Onovo Reviews -->
<section class="onovo-section gap-bottom-140">
...
</section>
<!-- Onovo Video -->
<section class="onovo-section">
...
</section>
<!-- Onovo Numbers -->
<section class="onovo-section gap-top-140 gap-bottom-140">
...
</section>
<!-- Onovo CTA -->
<section class="onovo-section gap-top-140 gap-bottom-140" style="background-image: url(assets/images/cta-bg-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
...
</section>
<!-- Onovo Blog -->
<section class="onovo-section gap-top-140 gap-bottom-140">
...
</section>
<!-- Onovo Brands -->
<section class="onovo-section">
...
</section>
</div>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/v5/search
Source & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.