Papi App HTML Template

Papi App HTML Template

  • Version: 1.0.0
  • Last Updated: 20/07/2016
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Boxed or Wide layout
  • Ajax Contact Form
  • Home Page
  • Blog
  • Blog Single
  • Parallax Effect
  • & much more...

HTML Structure

Papi is a premium HTML Template with its design particularly regards to construction companies as well as it enables you to build a wide variety of business websites.

Based on many shortocde we supply available, You can easily build a website with full functionality, Unlimited color, Team member, Custom designed 2,3,4 columns easily

Get Papi now along with our whole-hearted support!

Below is Papi basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Papi Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Theme Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	

	<!-- Slider -->

    <!-- Section -->
    <section class="flat-row"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-angle-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="javascript/jquery.min.js"></script>
   <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
   <script type="text/javascript" src="javascript/jquery.easing.js"></script>
   <script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
   <script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
   <script type="text/javascript" src="javascript/owl.carousel.js"></script>
   <script type="text/javascript" src="javascript/jquery.fancybox.js"></script>
   <script type="text/javascript" src="javascript/jquery-waypoints.js"></script>   
   <script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>   
   <script type="text/javascript" src="javascript/jquery-countTo.js"></script>   
   <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
   <script type="text/javascript" src="javascript/jquery.magnific-popup.min.js"></script>
   <script type="text/javascript" src="javascript/parallax.js"></script>
   <script type="text/javascript" src="javascript/jquery.countdown.js"></script>
   <script type="text/javascript" src="javascript/switcher.js"></script>
   <script type="text/javascript" src="javascript/main.js"></script>
</body>

</html>

CSS System

The Papi CSS System contains 3 parts:
  • Theme style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Theme style )


/**
  *	Reset
  *	Repeatable Patterns
  *	Top 
  *	Social-links
  *	Header
  *	Mobile navigation
  *	Page title
  *	Breadcrumbs
  *	Blog
  *	Blog Single
  *	Pagination
  *	Gird for page single
  *	Sidebar
  *	GoTop Button
  *	Footer
  *	Footer widget
  *	Page About
  *	Bottom
  *	Revolution Slider
  *	Preload
  *	Parallax
  *	Switcher
  *	Boxed
  *	Site-off-canvas
  *	Porfolio Detail
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/** 
  *	Flat button
  * Row
  * Title-section 
  * Grid
  * Empy space
  * Requestform
  * IconBox
  * Flat-iconbox-carosuel
  * Blog-carosuel
  * Images hover
  * Flat-qoute
  * More-info
  * Flat portfolio
  * Flat map
  * Flat-testimonials-slider
  * Flat-client
  * flat-team
  * Testimonial
  * Flat-list
  * flat-accordion
  * Flat-Tabs v1
  * Contact Form
  * Flat-contact-info
*/

Javascript - Fonts - Animation - Bootstrap style


/**  
  * font-awesome.css
  * magnific-popup.css

  * owl.carousel.css
  * flexslider.css  

  * animate.css
  * shortcodes.css

  * bootstrap.css 
  * revolution-slider.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( javascript/main.js )


/**
  * isMobile
  * responsiveMenu
  * headerFixed
  * ajaxContactForm
  * alertBox
  * blog_slider
  * detectViewport
  * flatIconboxCarousel
  * blogCarousel
  * flatClient
  * flatTeam
  * googleMap
  * testimonialSlide
  * flatTestimonials_1
  * portfolioIsotope
  * onepage_nav
  * flatClient
  * flatAccordion
  * tabs
  * responsiveVideo
  * swClick
  * goTop
  * toggleExtramenu
  * retinaLogos
  * parallax
  * removePreloader
*/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/** 
  *	Flat button
  * Row
  * Title-section 
  * Grid
  * Empy space
  * Requestform
  * IconBox
  * Flat-iconbox-carosuel
  * Blog-carosuel
  * Images hover
  * Flat-qoute
  * More-info
  * Flat portfolio
  * Flat map
  * Flat-testimonials-slider
  * Flat-client
  * flat-team
  * Testimonial
  * Flat-list
  * flat-accordion
  * Flat-Tabs v1
  * Contact Form
  * Flat-contact-info
*/

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Change Logo For Map

To replace the logo for map, you can look for the main.js You need to edit icon: 'http://themesflat.com/html/arch/images/icon/marker.png' to your Logo.

1: Upload your logo on Hosting get url

2: Replace url at file main.js ( folder_themes/javascript/main.js ) Line 359


				icon: 'http://themesflat.com/html/arch/images/icon/marker.png'

Credits