Mobile App Landing HTML Template

## Introduction

- Created : 16/03/2023
- By : Webduck
- Email : webduck.business@gmail.com

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Getting Started

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here,

## File and Folder Structure

Whole template is divided in to several folders and their content defines by the folder names easily. all the css files in the css folder, and all the js files in the js folder. but here some basics essential files are mention. other all is for plugins, you can fine in the css & js folder.

- HTML Template

- - Index.html ( Landing Page or Homepage )
- - Index.html2 ( Landing Page or Homepage )
- - Index.html3 ( Landing Page or Homepage )
- - About.html
- - Contact.html
- - Blog.html ( Blog Listing )
- - Blog-details.html
- - Lightboxes ( Login & Sign Up)

- Images all (images and backgrounds/patterns) in the images folder
- CSS
  - - bootstrap.min.css
  - - media.css
  - - owl.carousel.min.css
  - - style.css
- js
  - - bootstrap.bundle.min.js
  - - jquery-3.6.0.min.js
  - - main.js
  - - owl.carousel.min.js
- Figma File
  - - Onir_Main.fig

All html pages are in the root of template folder. You can change its css, color, alignemnts in just paste or edit in particular code files

#### The image blow will give you a clear idea of the html structure and the commenting.

## Grid System

#### Bootstrap Grid System

These templates are based upon Twitter Bootstrap css framework that is very easy to use and adapt. It follows the mobile first approach to make the website readily available for all devices and screen sizes. Bootstrap grid is based upon 12 columns that are well defined in the bootstrap.min.css file inside the css folder. You can get to know about the grid system in detail from this url http://getbootstrap.com/css/#grid

#### Example

     < div class="col-lg-4 col-sm-12">
         < div class="work-card  in-touch">
         < div class="work-img ">
         < img src="images/work-vector-1.png" alt="work-img">
         < /div>

            < h6 class="work-steps">Get in Touch< /h6>

             < p class="steps-para">
              Nullam tincidunt, purus sit amet viverra auctor, quam neque dapibus dui,
             < /p>
         < /div>
         < div class="work-card review">
            < div class="work-img">
                < img src="images/work-vector-2.png" alt="work-img">
             < /div>

             < h6 class="work-steps">Review and Confirm< /h6>

                < p class="steps-para">
                 Nullam tincidunt, purus sit amet viverra auctor, quam neque dapibus dui,
                < /p>
            < /div>
            < /div>
             < div class="col-lg-4 col-sm-12">
                < div class="work-center">< /div>
                 < div class="work-center-img">
                    < img src="images/work-phone-screenshot.png" alt="screenshots">
                 < /div>
            < /div>
            < div class="col-lg-4 col-sm-12">
                < div class="work-card demo">
                < div class="work-img">
                 < img src="images/work-vector-3.png" alt="work-img">
                 < /div>

                    < h6 class="work-steps">Receive Demo screens< /h6>

                    < p class="steps-para">
                     Nullam tincidunt, purus sit amet viverra auctor, quam neque dapibus dui,
                     < /p>
            < /div>
            < div class="work-card setup">
                < div class="work-img">
                    < img src="images/work-vector-4.png" alt="work-img">
                < /div>

                < h6 class="work-steps">Setup & Launch< /h6>

                < p class="steps-para">
                    Nullam tincidunt, purus sit amet viverra auctor, quam neque dapibus dui,
                < /p>
             < /div>
     < /div>

## Changing Fonts

There are 5 different font options included in the these templates and their CSS files can be found in css/style.css. To use one of the included fonts, make sure the font css link points to the correct font css file you wish to use in all HTML files as shown below.

#### HTML

    < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
    < link rel="stylesheet" href="css/owl.carousel.min.css" />

To use a custom font, copy the font link from its Google Fonts page and paste it before closing head tag in your HTML files.Make sure to include font css link along with the font link, as shown below.

#### CSS

`.body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: #1F1F39;
}`

Then add the font name to your CSS styles in css/style.css

## Color Chaning for Text and Link

We have written css for beaultiful color for text and link for each template already but if you want to change it with a new color scheme can be defined very easily just open css file in css/style.css folder and change its color hex code in the file to your liking. You can check example below as mentioned.

#### HTML

     < link rel="stylesheet" href="css/style.css" />

#### CSS

###### For Text

`body {
background-color: #fff;
color: #1F1F39;
font-size: 20px;
font-family: 'Roboto', sans-serif;
}`

###### For Link

`.onir-stories .stories-card .story-card .story-content a {
color: #0E7DFF;
font-size: 0.7em;
font-weight: 700;
text-decoration: none;
transition: 0.3s all; }
.onir-stories .stories-card .story-card .story-content a:hover{
color: #005fcf;
text-decoration: underline;
}`

## Chaning Button Style

We have already code for btn style in css if you need changes in btn style you have to make changes in css file as mentioned blow. Just open style.css file in CSS folder and change its hex code as per your requirements.

#### HTML

     < link rel="stylesheet" href="css/style.css" />

the below mention code is the sample for changing the required color, size and hover effect..

#### CSS

`.homepage-2 .banner-section .banner-buttons .get-started {
font-size: 30px;
font-weight: 700;
max-width: 280px;
width: 100%;
border: 2px solid #000;
border-radius: 20px;
padding: 23px 44px;
transition: 0.3s all;
}
.homepage-2 .banner-section .banner-buttons .get-started:hover {
transform: scale(1.05); }
.homepage-2 .banner-section .banner-buttons .watch-now .btn-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
font-size: 16px;
}`

## Navigation

An example of a header menu item without dropdown can be seen as below.

#### Html

    < nav>
       < div class="nav-menu">
        < ul class="nav-links">
            < li>< a href="#how-works" class="nav-link ">How It Works< /a>< /li>
            < li>< a href="#features" class="nav-link">Features< /a>< /li>
            < li>< a href="#pricing" class="nav-link">Pricing< /a>< /li>
            < li>< a href="blog.html" class="nav-link">Blog< /a>< /li>
            < li>< a href="contact.html" class="nav-link">Contact< /a>< /li>
            < li>< a href="about.html" class="nav-link">About< /a>< /li>
            < li>< a href="#" class="nav-link login" data-bs-toggle="modal"data-bs-target="#login">Login< /a>< /li>
            < li class="btn-sign-up">< a href=" " data-bs-toggle="modal"data-bs-target="#existingUser">Sign Up< /a>< /li>
        < /ul>

    < /div>
        < div class="nav-mobile-menu">
            < span class="line line1">< /span>
            < span class="line line2">< /span>
            < span class="line line3">< /span>
        < /div>
    < /nav>

## Changing Dummy Images with real Images

These templates doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders.

You can easily repace these place holders images with your real images by just putting the same size image that you find in the live demo of the placeholder or replace the image in the folder "images/imagename.jpg" in the HTML.

It just replace the image in the image folder with the current name and size

#### Example

      < img src="images/feature-ss-1.png" alt="screenshots">

#### Fevicon Icon Image

In order to display a high resolution image on devices for fevicon icon image, we have created a different sizes for different devices or browser like andriod, apple etc. here are example of images as mentioned below. you need to replace with your images using photoshop or any online image editor.

#### HTML

      < link rel="shortcut icon" type="image/x-icon" href="images/icons/favicon.ico" />
      < link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
      < link rel="icon" href="images/icons/favicon-16x16.png" sizes="16x16" />
      < link rel="icon" href="images/icons/favicon-32x32.png" sizes="32x32" />
      < link rel="icon" href="images/icons/android-chrome-192x192.png" sizes="192x192" />
      < link rel="icon" href="images/icons/android-chrome-512x512.png" sizes="512x512" />
      < link rel="manifest" href="site.webmanifest">

#### Example

`android-chrome 192x192.png
android-chrome 512x512.png
apple-touch-icon.png 180x180.png
favicon.icon 48x48.ico
favicon.icon 32x32.ico
favicon.icon 16x16.ico
`

## Files & Sources

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included CSS codes under rootfolder/css/

- 1. style.css - Primary stylesheet
- 2. bootstrap.min.css - Bootstrap stylesheet
- 3. owl.carousel.min.css - OWL Carousel
- 4. media.css - styles for different media types/devices

Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under rootfolder/js/

- 1. bootstrap.bundle.min.js - Bootstrap JavaScript
- 2. main.js - All JavaScript Plugins
- 3. jquery-3.6.0.min.js - Base JavaScript
- 4. owl.carousel.min.js - Lightbox JavaScript

## Credit

Our life is made much easier we have special thanks to the following.

#### Javascript

- jQuery
- Google Fonts
- fontawesome
- Bootstrap
- OWL Carousel

#### Images

- pexels
- unsplash
- pixabay

#### Icons

- simple-line-icons-webfont/

#### Google Fonts

- Roboto

Please be aware the we do not provide customer support through the comments section on themeforest and will redirect all questions to our support team. Please email us if you have any concern regarding template or support we make sure that it is dealt with in a timely manner.

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

## Copyright and license

These Template are designed and Developed by Webduck.

It is Exclusively available on Envato for purchase.