Porto is the complete package that was built to help you create a custom and unique user interface for your project.

With Porto you’re not limited to creating a single web page. You’ll have over many pre-built page templates to choose from, covering many popular scenarios and content types. All the page templates are highly customizable.

Porto comes with 10 different pages and helper pages. Porto is a responsive HTML template that is based on the CSS framework Bootstrap 5 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Porto and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Porto is packed with pages that come complete with documented code to simplify the customization process.

• HTML5 & SCSS
• Bootstrap v5.2.2
• Gulp
• Font-awesome
• Simple Line Icon
• jQuery
• 15 Homepage
• 16 Bonus Page's
• Responsive Design
• Contact Us form integrated with PHP
• All form with validation
• Best Coding Standard followed
• Pixel Perfect Design
• Clean Code & Unique Design
• Easy to Customize
• Blog Details Page
• Project Portfolio Page

After unzip the download pack, you'll found a Template Folder(app) with all the files (HTML Files + Assets).

You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).

After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.

Once the files are done uploading go to www.yourdomainname.com/index.html

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

• app ├──

  • assets ├──

    • ├── dist/

      • ├── css

      • ├── js

    • ├── fonts/

    • ├── images/

    • ├── vendors/

    • ├── scss/

  • HTML files

  • gulpfile.js

  • package.json

You need to install SASS and Gulp as Dependencies for this project if you want to customize it. To do this, you must have Node in your computer. We have setup GULP and Package file in the folder just you need to follow the steps.

Download node.js from Here

Follow below steps after node/npm installation:-

1. Navigate to root folder where package.json placed.

2. Run command npm install. It will install all the dependencies in your current project.

3. To compile sass file run command Gulp Watch. It will compile the scss file and watch the scss file also.

4. To combine/concate all js file into one run command CONCATJS.

5. To combine/concate all css file into one run command CONCATCSS.

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the all template's. Here is the general structure of all the pages.

                                    
<!--=========== Preloader start ===============-->
<div id='preloader'></div>
<!--=========== scroll to top button ===============-->
<div class="scroll-top-btn" data-scroll-goto="0">
    <a href="#" class="scroll-top">
        <span class="scroll-top-icon"></span>
    </a>
</div>
<!--=========== Main content area start ===============-->
<div class="page-wrapper">
    <!-- **************************************-->
    <!-- **************Header**************-->
    <!-- **************************************-->
    <header class="header arrow-header gred-bg">
        <!-- **************************************-->
        <!-- **************Nav Bar*****************-->
        <!-- **************************************-->
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <!------- Logo Area ------->
                <div class="navbar-header">
                    <!------- Logo ------->
                    <a class="navbar-brand" href="#">
                        <img src="assets/images/logo.png" alt="Porto">
                    </a>
                    <!------- Hamburg Menu Button ------->
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <!------- Main Menu ------->
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="navbar-nav ml-auto align-items-center">
                        <a class="scroll-item nav-link active" data-scroll-nav="0" href="#home">Home</a>
                        <a class="scroll-item nav-link" data-scroll-nav="1" href="#about-us">About</a>
                        <a class="scroll-item nav-link" data-scroll-nav="2" href="#works">Work</a>
                        <a class="scroll-item nav-link" data-scroll-nav="3" href="#pricing">Pricing</a>
                        <a class="scroll-item nav-link" data-scroll-nav="4" href="#team">Team</a>
                        <a class="scroll-item nav-link" data-scroll-nav="5" href="#blog">Blog</a>
                        <a class="scroll-item nav-link" data-scroll-nav="6" href="#contact-us">Contact</a>
                        <span class="menu-arrow"></span>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- ========= Banner/Slider Area=========== -->
    <section></section>
    
    <!-- =========About Us Area=========== -->
    <section></section>

    <!-- =========Service Area=========== -->
    <section></section>
    
    <!-- =========Counter Area=========== -->
    <section></section>

    <!-- =========Portfolio details Area=========== -->
    <section></section>

    <!-- =========Portfolio Area=========== -->
    <section></section>

    <!-- =========Testimonial Area=========== -->
    <section></section>
    
    <!-- =========Pricing Area=========== -->
    <section></section>
    
    <!-- =========Blog Area=========== -->
    <section></section>
    
    <!-- =========Contact us=========== -->
    <section></section>
    
    <!-- =========Client=========== -->
    <div></div>
</div>
<!-- **************************************-->
<!-- **************Footer Section**************-->
<!-- **************************************-->
<footer class="footer theme-1" data-scroll-index="6">
    <div class="container">
        <!------- Footer Text ------->
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <!------- Footer Logo ------->
                <div class="logo">
                    <a href="#">
                        <img src="assets/images/logo-blue.png" alt="Porto" />
                    </a>
                </div>
                <!------- Site Text ------->
                <p>Silo triple bottom line, optimism relief invest co-creation accessibility impact investing white
                    paper program area!</p>
                <!------- Footer Social Links ------->
                <div class="social-link social-white mt-15">
                    <a href="#" class="fb"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="tw"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="ln"><i class="fa fa-linkedin"></i></a>
                    <a href="#" class="gplus"><i class="fa fa-google-plus"></i></a>
                    <a href="#" class="dribble"><i class="fa fa-dribbble"></i></a>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <h5>Support </h5>
                <!------- Footer Nav ------->
                <nav>
                    <ul>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">FAQ's</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Support Forum</a></li>
                        <li><a href="#">Themes</a></li>
                        <li><a href="#">Account</a></li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-6 col-lg-3">
                <h5>Useful Links </h5>
                <!------- Footer Nav ------->
                <nav>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Blogs</a></li>
                        <li><a href="#">Plugins</a></li>
                        <li><a href="#">Customers</a></li>
                        <li><a href="#">Feedback</a></li>
                    </ul>
                </nav>
            </div>
            <!------- Slider ------->
            <div class="col-md-6 col-lg-3">
                <h5>Slider or Newsletter form</h5>
                <!------- Slider -------> 
                <!======= or ======> 
                <!------- Newsletter Form ------->
            </div>
            <!------- Copyright Text ------->
            <div class="copyright">
                <p>© Copyright 2020. LettstartDesign</p>
            </div>
        </div>
    </div>
</footer>
                                    
                                

CSS Files and Structure

These are the css files that are loaded into templates in head tag.

                                    
<!--=== Icon Fonts ===-->
<link rel="stylesheet" href="assets/vendors/fontAwesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/vendors/simple-line-icons/css/simple-line-icons.css">
<!--=== Vendors CSS===-->
<link rel="stylesheet" href="assets/dist/css/plugins.css">
<!--=== Porto css ===-->
<link rel="stylesheet" href="assets/dist/css/style.css">
<!--=== Porto Theme css ===-->
<link rel="stylesheet" href="assets/dist/css/theme-1.css">
                                    
                                

Javascript Files and Structure

These are the css files that are loaded into templates in the end of body tag.

                                    
<!--=== Vendors JS ===-->
<script src="assets/dist/js/plugins.js"></script>

<!--=== Common/General JS ===-->
<script src="assets/dist/js/general.js"></script>

<!--=== Page JS ===-->
<script src="assets/dist/js/custom.js"></script>

<!--=== Google Map JS ===-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQk5sH16DHsaUy-_kRltlAOfvZuNYzf50&callback=initMap"></script>
<script src="assets/dist/js/map.js"></script>
                                    
                                

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

                                    
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500|Poppins:200,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Barlow:300,500,600,700|Open+Sans:300,400|Roboto+Slab:300,400,700");
                                    
                                

Remember to change the font into style.scss If you are using SASS. Without using sass change in style.css

Font Awesome: <i class="fa fa-eye"></i>

Simple Line Icon: <i class="icon-eye"></i>

In this section we are represeting different version of text's, background's, button's. So I have used different classes because of one page. But in actual way, All the class name are same like text-primary, btn-primary, text-grediant etc. but you need to add different theme files like theme-1.css, theme-2.css etc. to experience the behaviour.

Header Classes

Text Color

Button Types

Background

If you encounter any problems or have questions once you purchased the theme feel free to contact me. You can also or generate ticket on Support or send us mail at support@lettstartdesign.com. Reply times can be up to 12 / 24 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+00:00) time zone.