Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /bro folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
2. Below is the folder structure and needs to be uploaded to your website root directory:
   1. bro/css - Stylesheet files
   2. bro/js - Javacript files
   3. bro/img - Image files
3. You should upload all or specific HTML files as per your need.
4. You are ready ;)

Here are the Template Structure:

Note

The Logo should be used inside

                        <nav class="navbar navbar-expand-lg"></nav>

You can choose between 8 Types of headers while creating your Pages. The list of various header types & its descriptions are provided below for your reference:

Hosting

Application

Design

SEO

Support

Crypto

Domain

Portfolio

Server Builder Configurations, all what do you need to update just the prices to suit your prices

js/plugins.js

To update the iphone mockup you need to replace the image in this path (Soruce file is included)

img/app/iphone.png

To update the domain extensions,Prices and order link:

1. open domain.html
2. go to line 248 or search for "<!-- Domains Price -->"
3. you will find the extensions also each extension in a custom block so you can update it easily

To update scripts faq please follow next instructions:

1. open support.html
2. go to line 101 or search for "<!-- WordPress -->"
3. you will find each questions separate so you can update it easily

Note

each question should be inside <div class="item"></div>

To Create Portfolio copy this code

                    <!-- Portfolio -->
                    <section class="design-portfolio">
                        <!-- Items -->
                        <div class="bro-button-group filters-button-group">
                            <button class="button is-checked" data-filter="*">Show all</button>
                            <button class="button" data-filter=".website">Websites</button>
                            <button class="button" data-filter=".apps">Mobile Apps</button>
                            <button class="button" data-filter=".logos">Logos</button>
                            <button class="button" data-filter=".print">Print design</button>
                        </div>
                        <!-- Elements -->
                        <div class="grid">
                            <!-- Item -->
                            <div class="element-item website">
                                <a href="portfolio-item.html" class="img-link">
                                    <img src="img/design/portfolio/1.jpg" alt="portfolio">
                                </a>
                                <!-- Information -->
                                <div class="hvr-effect">
                                    <div class="information"></div>
                                    <div class="info">
                                        <h1>Project Title</h1>
                                        <i class="fas fa-plus plus-icon"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- Item -->
                            <div class="element-item apps">
                                <a href="portfolio-item.html" class="img-link">
                                    <img src="img/design/portfolio/2.jpg" alt="portfolio">
                                </a>
                                <!-- Information -->
                                <div class="hvr-effect">
                                    <div class="information"></div>
                                    <div class="info">
                                        <h1>Project Title</h1>
                                        <i class="fas fa-plus plus-icon"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- Item -->
                            <div class="element-item logos">
                                <a href="portfolio-item.html" class="img-link">
                                    <img src="img/design/portfolio/3.jpg" alt="portfolio">
                                </a>
                                <!-- Information -->
                                <div class="hvr-effect">
                                    <div class="information"></div>
                                    <div class="info">
                                        <h1>Project Title</h1>
                                        <i class="fas fa-plus plus-icon"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- Item -->
                            <div class="element-item print">
                                <a href="portfolio-item.html" class="img-link">
                                    <img src="img/design/portfolio/4.jpg" alt="portfolio">
                                </a>
                                <!-- Information -->
                                <div class="hvr-effect">
                                    <div class="information"></div>
                                    <div class="info">
                                        <h1>Project Title</h1>
                                        <i class="fas fa-plus plus-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

Note

you need to add the type of category at each item <div class="element-item print"></div>

Note

to make the grid 1/2 change the item div to <div class="element-item bro-half"></div>

Note

Portfolio Item: You need to duplicate portfolio-item.html for each project

To update Carousel please follow next instructions:

1. open crypto.html
2. go to line 128 or search for "<!-- Carousel -->"
3. you will find each slide separate in <div class="carousel-item"></div> so you can update it easily

To update Video please follow next instructions:

1. open crypto.html
2. go to line 207 or search for <div data-type="youtube" data-video-id="Gc2en3nHxA4">
3. change data-video-id to your Youtube Video id data-video-id="YourId"

To update Google Map please follow next instructions:

1. open contact.html
2. search for "<!-- Google Map -->"
3. you will find

                           <script type="text/javascript"
                           src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY">
                           </script>

   YOUR_GOOGLE_API_KEY replace it with your api key

Note

to change map location, open js/map.js go to line 12 and change the latitude values

Bro follows a simple and easy to customize coding structure. Here is the sample for your reference: please follow next instructions:

1. create pagename.html
2. add the below starting HTML Structure

                    <!doctype html>
                    <html lang="en">
                    
                    <head>
                        <!-- Required meta tags -->
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <!-- Fonts -->
                        <link href="https://fonts.googleapis.com/css?family=
                        Playfair+Display:400,700%7COpen+Sans:400,600,700%7CRaleway:200,400,600,700
                        %7CMontserrat:400,600,700"
                            rel="stylesheet">
                        <!-- Bootstrap CSS -->
                        <link rel="stylesheet" href="css/bootstrap.min.css">
                        <!-- Style CSS -->
                        <link rel="stylesheet" href="css/style.css">
                        <!-- Responsive CSS -->
                        <link rel="stylesheet" href="css/responsive.css">
                    
                        <title>Bro - New Page</title>
                    </head>
                    
                    <body>
                    <!-- Your Content Here -->
                    </body>

                    <!-- jQuery JS -->
                    <script src="js/jquery.min.js"></script>
                    <!-- Bootstrap JS -->
                    <script src="js/popper.min.js"></script>
                    <script src="js/bootstrap.min.js"></script>
                    <!-- Font Awesome Icons -->
                    <script defer src="js/fontawesome-all.min.js"></script>

                </body>

                </html>

Note

Images are only for demo purpose and not included with the download bundle.

1. pixabay
2. sketchappsources
3. plyr

1. Bootstrap
2. Font-Awesome (Font Icons)
3. Google Fonts

1. jQuery
2. Isotope
3. Countdown
4. Google map
5. Modernizr
6. Owl Carousel

Note

Released on -

Note

You can request for support via email or themeforest comments