Perfo - Professional App Landing Page.

Bootstrap 4 Landing Page.

Thank you for purchasing My product. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Introduction

Perfo is a modern clean HTML App Landing Page, It perfectly fits Saas, Marketing, Apps, Landing page, Business and even for a personal portfolio, it can be used by freelancers and agencies alike. Perfo provides a great customization experience, you'll barely need to go through editing CSS file, a bunch of helpers is pre-created for you.

Features

HTML Structure

Perfo is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments.

Head Section Structure: Here is the example code of section 

  1. <!DOCTYPE html>
  2. <html lang="zxx">
  3.    <head>
  4.       <meta charset="utf-8">
  5.  
  6.       <!-- Responsive meta -->
  7.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9.       <!-- IE Compatibility meta -->
  10.       <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11.  
  12.       <!-- Description meta -->
  13.       <meta name="description" content="...">
  14.  
  15.       <!-- Author meta -->
  16.       <meta name="author" content="...">
  17.  
  18.       <!-- Page Title -->
  19.       <title>Perfo - Professional App Landing Page</title>
  20.  
  21.       <!-- Favicon -->
  22.       <link rel="shortcut icon" href="img/favicon.ico">
  23.  
  24.       <!-- Font Awesome Stylesheet -->
  25.       <link rel="stylesheet" href="css/font-awesome.css">
  26.  
  27.       <!-- Bootstrap Stylesheet -->
  28.       <link rel="stylesheet" href="css/bootstrap.css">
  29.  
  30.       <!-- Mockup Stylesheet -->
  31.       <link rel="stylesheet" href="css/device-mockups.min.css">
  32.  
  33.       <!-- Owl Carousel Stylesheet -->
  34.       <link rel="stylesheet" href="css/owl.carousel.min.css">
  35.  
  36.       <!-- Animate.CSS Stylesheet -->
  37.       <link rel="stylesheet" href="css/animate.css">
  38.  
  39.       <!-- Animate.CSS Stylesheet -->
  40.       <link rel="stylesheet" href="css/preloader.css">
  41.  
  42.       <!-- Custom Stylesheet -->
  43.       <link rel="stylesheet" href="css/style.default.css">
  44.    </head>
  45.
Body Section Structure: Here is the example code of section 
  1. <body>
  2.  
  3.     <div class="page-header">
  4.         <!--=============== Navbar ===============-->
  5.         <nav class="navbar fixed-top navbar-toggleable-md">
  6.             <div class="container">
  7.  
  8.                 <div class="navbar-header">
  9.                     <!-- Navbar Brand -->
  10.                     <a href="#" class="navbar-brand">
  11.                         <strong class="brand-text">PERFO</strong>
  12.                     </a>
  13.  
  14.                   <!-- Toggle Button -->
  15.                     <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation">
  16.                         MENU
  17.                     </button>
  18.                 </div>
  19.  
  20.                 <div class="collapse navbar-collapse" id="navbarcollapse">
  21.                     <!-- Navbar Menu -->
  22.                     <ul class="navbar-nav ml-auto">
  23.                         <li class="nav-item">
  24.                             <a href="#about" class="nav-link link-scroll">About</a>
  25.                         </li>
  26.                         <li class="nav-item">
  27.                             <a href="#services" class="nav-link link-scroll">Services</a>
  28.                         </li>
  29.                         <li class="nav-item">
  30.                             <a href="#screens" class="nav-link link-scroll">Screens</a>
  31.                         </li>
  32.                         <li class="nav-item">
  33.                             <a href="#features" class="nav-link link-scroll">Features</a>
  34.                         </li>
  35.                         <li class="nav-item">
  36.                             <a href="#testimonials" class="nav-link link-scroll">Testimonials</a>
  37.                         </li>
  38.                     </ul>
  39.                 </div>
  40.  
  41.             </div>
  42.         </nav><!--=============== /. Navbar ===============-->
  43.  
  44.  
  45.         <!--=============== Hero Section ===============-->
  46.         <section id="hero" class="hero has-bg-map has-gradient">
  47.             <div class="container">
  48.                 <div class="row">
  49.                     <!-- Heading Area -->
  50.                     <div class="col-md-6">
  51.                         <h1 class="has-text-shadow">Seeking <br> Technical <br> Optimizing</h1>
  52.                         <a href="#about" class="btn btn-template link-scroll">Continue</a>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.  
  57.             <!-- Mockup Image -->
  58.             <div class="image" style="background: url(img/hero-mac.png);"></div>
  59.         </section>
  60.         <!--=============== /. Hero Section ===============-->
  61.
How to customize HTML page:

You can use the pre-made helpers that the template provides, for example, if you need to addd a gradient background to a specific section, include the class .has-gradient

  1. <section id="testimonials" class="testimonials has-background-text-gray"></section>

You can also customize your template from data-text attribute. this attribute is used for two purposes, for adding bacground text for heading and for sections.

Example for using the attribute for adding background text to a section:

  1. <section id="testimonials" class="testimonials has-background-text-gray" data-text="Testimonials">

Example for using the attribute for adding background text to a h2:

  1. <h2 class="with-bg-text has-line-center" data-text="Features">Perfo's Specialities></h2>

CSS Files and Structure

I'm using latest CSS coding standard. Custom Style written into style.default.css which is override Bootstrap style somewhere else.

CSS Files included:

style.default.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label: 

  1. /* ===================================================================
  2.     Table of content:
  3.  
  4.     1.  General Styles
  5.  
  6.     2.  Navbar
  7.  
  8.     3.  Hero Section
  9.  
  10.     4.  About Section
  11.  
  12.     5.  Services Section
  13.  
  14.     6.  Separator Section
  15.  
  16.     7.  Screens Section
  17.  
  18.     8.  Features Section
  19.  
  20.     9. Testimonials Section
  21.  
  22.     10. Newsletter Section
  23.  
  24.     11. Clients Section
  25.  
  26.     12. Footer
  27.  
  28.     13. Scroll To Top Button
  29.  
  30.     14. Preloader
  31. ===================================================================  */
  32.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

If you change the style of Header section, find the following section in the stylesheet: 

  1. /* ===================================================================
  2. HERO SECTION
  3. ===================================================================  */
  4. section.hero {
  5.     padding: 0;
  6.     overflow: visible;
  7. }
  8.  
  9. /* Mockup image [set the image url from HTML page] */
  10. section.hero .image {
  11.     width: 100%;
  12.     height: 100%;
  13.     display: block;
  14.     position: absolute;
  15.     bottom: -20px;
  16.     left: 0;
  17.     max-width: 1900px;
  18.     background-repeat: no-repeat !important;
  19.     background-size: 80% !important;
  20.     background-position: 70% bottom !important;
  21.     z-index: 2;
  22. }
  23.  
  24. section.hero h1 {
  25.     margin-bottom: 30px;
  26. }
  27.  
  28. section.hero div[class*="col-"] {
  29.     padding: 200px 0;
  30. }
  31.  
  32. /* HERO SECTION MEDIA QUERY ---------------------------------------------- */
  33. @media (max-width: 576px) {
  34.     section.hero .row {
  35.         padding: 0 15px;
  36.     }
  37.     section.hero .image {
  38.         bottom: -10px;
  39.     }
  40. }
  41.

Style.default.css contains some helpers that help you to customize your template from the HTML page, for example: .btn-template class helps you to add the current button style to your buttons.

Here is an Example for the included helpers:

  1. /** HELPERS **/
  2. .gray-bg {
  3.     background: #f4f4f4;
  4. }
  5.  
  6. .btn-template {
  7.     background-image: -webkit-linear-gradient(to left, #ff5f6d, #ffc371);
  8.     background-image: -webkit-gradient(linear, left top, left bottom, from(to left), color-stop(#ff5f6d), to(#ffc371));
  9.     background-image: linear-gradient(to left, #ff5f6d, #ffc371);
  10.     padding: 7px 40px;
  11.     color: #fff;
  12.     font-weight: 400;
  13.     border-radius: 50px;
  14.     position: relative;
  15.     z-index: 1;
  16.     overflow: hidden;
  17.     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  18.     border: none;
  19.     text-transform: uppercase;
  20. }
  21.  
  22. .btn-template:hover, .btn-template:focus {
  23.     color: #ff5f6d;
  24. }
  25.  
  26. .btn-template:hover::before, .btn-template:focus::before {
  27.     left: 0;
  28. }
  29.  
  30. .btn-template::before {
  31.     content: '';
  32.     display: block;
  33.     width: 100%;
  34.     height: 100%;
  35.     border-radius: 50px;
  36.     position: absolute;
  37.     top: 0;
  38.     left: calc(-100% - 10px);
  39.     transition: all 0.5s;
  40.     z-index: -1;
  41.     background: #fff;
  42. }
  43.  
  44. .btn-template-no-border:hover, .btn-template-no-border:focus {
  45.     border-color: #ff5f6d;
  46. }
  47.  
  48. .line {
  49.     width: 100%;
  50.     height: 1px;
  51.     border-bottom: 1px solid #eee;
  52.     -webkit-transform: translateY(150px);
  53.     -ms-transform: translateY(150px);
  54.     transform: translateY(150px);
  55. }
  56.  
  57. .has-text-shadow {
  58.     text-shadow: 0 0 35px rgba(0, 0, 0, 0.3);
  59. }
  60.  
  61. .has-shadow,
  62. section.services .row .item:hover,
  63. section.features .item:hover,
  64. section.testimonials .testimonials-slider,
  65. footer.main-footer .copyrights {
  66.     box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  67. }
  68.  
  69. .has-line::after, .has-line-center::after {
  70.     content: '';
  71.     display: block;
  72.     width: 100px;
  73.     height: 2px;
  74.     background: #b06ab3;
  75.     margin: 5px 0;
  76. }
  77.  
  78. .has-line-center::after {
  79.     margin: 5px auto;
  80. }
  81.  
  82. .limited-width {
  83.     max-width: 800px;
  84. }
  85.  
  86. .text-primary {
  87.     color: #b06ab3 !important;
  88. }
  89.  
  90. .no-padding-top {
  91.     padding-top: 0 !important;
  92. }
  93.  
  94. .no-padding-bottom {
  95.     padding-bottom: 20px !important;
  96. }
  97.  
  98. .padding-top-small {
  99.     padding-top: 100px !important;
  100. }
  101.  
  102. .padding-bottom-small {
  103.     padding-bottom: 100px !important;
  104. }
  105.  
  106. .margin-top-small {
  107.     margin-top: 100px !important;
  108. }
  109.  
  110. .margin-bottom-small {
  111.     margin-bottom: 100px !important;
  112. }
  113.  
  114. .no-margin-top {
  115.     margin-top: 0 !important;
  116. }
  117.  
  118. .no-margin-bottom {
  119.     margin-bottom: 20px !important;
  120. }
  121.  
  122. .margin-top-small {
  123.     margin-top: 100px !important;
  124. }
  125.  
  126. .margin-bottom-small {
  127.     margin-bottom: 100px !important;
  128. }
  129.  
  130. .has-gradient {
  131.     background-image: -webkit-linear-gradient(to right, #4b68da, #b06ab3);
  132.     background-image: -webkit-gradient(linear, left top, left bottom, from(to right), color-stop(#4b68da), to(#b06ab3));
  133.     background-image: linear-gradient(to right, #4b68da, #b06ab3);
  134.     color: #fff;
  135. }
  136.  
  137. .has-gradient h1, .has-gradient h2, .has-gradient p {
  138.     color: inherit;
  139. }
  140.  
  141.

Fonts

Template Uses two Google Fonts:

Images

All Images included are free and ready to use, at <section class="screens"> you don't have to remove the macbook mockup, only replace the current <img> with your image,

  1. <div class="device-mockup macbook_2015 portrait gold">
  2.     <div class="device">
  3.         <div class="screen">
  4.             <img src="img/screen.png" alt="..." class="img-fluid">
  5.         </div>
  6.     </div>
  7. </div>
  8.

All other images are entirely replaceable, The PSD included contains all editable freebies, that makes it easier for you to attain the desirable style.

Javascript

Perfo imports following Javascript files.

All code are beautifully written. You can customize easily. Just look at the js code.

Example: If you want to Configure the testimonials slider, just find the following block and play with the slider options: 

  1. // ------------------------------------------------------- //
  2. // Testimonials Slider
  3. // ------------------------------------------------------ //
  4. $('.testimonials-slider').owlCarousel({
  5.     loop: true,
  6.     margin: 20,
  7.     dots: true,
  8.     nav: true,
  9.     smartSpeed: 700,
  10.     navText: [
  11.         "<i class='fa fa-long-arrow-left'></i>",
  12.         "<i class='fa fa-long-arrow-right'></i>"
  13.     ],
  14.     responsiveClass: true,
  15.     responsive: {
  16.         0: {
  17.             items: 1,
  18.             nav: true
  19.         },
  20.         600: {
  21.             items: 1,
  22.             nav: true
  23.         },
  24.         1000: {
  25.             items: 1,
  26.             nav: true,
  27.             loop: false
  28.         }
  29.     }
  30. });
  31.

Changelog

  1. /*  =======================================================================
  2. This css file will over write bootstarp css
  3. ------------------------------------------------------------------------
  4.     * Template Name: Perfo
  5.     * Template URI: https://www.mohamdhasan.pro
  6.     * Author: Mohamed Hasan
  7.     * Author URI: https://www.mohamdhasan.pro
  8.     * Description: Perfo - Professional App Landing Page.
  9.     * Version: 1.0
  10.     * License: GPL v2 or later
  11.     * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
  12.     * Tags: html, template, app, marketing, saas, agency
  13. ----------------------------------------------------------------------
  14. ======================================================================= */
  15.

SASS Files

.scss files icluded:


All styles written in partials are automatically compiled to style.default.scss file.

Source & Credits

Thank You

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Mohamed Hasan.