Appside - App Landing page

Created: 30 March 2019
Latest Update: 29 Sep 2019
By: ir-tech
Email: ir-tech51@gmail.com

Thank you for purchasing our theme. Appside - App Landing page html5 template. If you have any question, please feel free to contact us.

Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Appside" folder.
You will find the two folder one is for lite version and other is for dark version file on the root that will be edited.
Also you will see 4 directories, css, js, fonts, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

                
                    appside/
                    ├── assets/css/
                    |    └── animate.css
                    |    └── bootstrap.min.css
                    |    └── flaticon.css
                    |    └── fontawesome.5.7.2.css
                    |    └── magnific-popup.css
                    |    └── owl.carousel.min.css
                    |    └── responsive.css
                    |    └── style.css
                    ├── assets/sass/main
                    |    └── _global.scss
                    |    └── _mixins.scss
                    |    └── _normalize.scss
                    |    └── _variables.scss
                    ├── assets/sass/sections
                    |    └── _counterup.scss
                    |    └── _featured_area.scss
                    |    └── _footer.scss
                    |    └── _header.scss
                    |    └── _footer.scss
                    |    └── _how_it_works.scss
                    |    └── _navbar.scss
                    |    └── _price_plan.scss
                    |    └── _screenshort.scss
                    |    └── _sidebar.scss
                    |    └── _team_memeber.scss
                    |    └── _testimonial.scss
                    |    └── _video_area.scss
                    |    └── _why_choose_us.scss
                    |
                    ├── assets/sass/pages
                    |    └── _blog.scss
                    |    └── _blog_details.scss
                    |
                    ├── assets/fonts
                    |
                    ├── assets/js/
                    │   ├── bootstrap.min.js
                    │   ├── contact.js
                    │   ├── goolg-map-activate.js
                    │   ├── waypoints.min.js
                    │   ├── jquery.counterup.min.js
                    │   ├── jquery.magnific-popup.js
                    │   ├── owl.carousel.min.js
                    │   ├── popper.min.js
                    │   ├── wow.min.js
                    │   ├── main.js
                    │   ├── jQuery.min.js
                    │   
                    ├── index.html
                    ├── index-2.html
                    ├── index-3.html
                    ├── index-4.html
                    ├── index-5.html
                    ├── index-6.html
                    ├── index-7.html
                    ├── index-8.html
                    ├── index-9.html
                    ├── index-10.html
                    ├── index-11.html
                    ├── index-12.html
                    ├── index-dark-1.html
                    ├── index-dark-2.html
                    ├── blog.html
                    ├── blog-dark.html
                    ├── blog-details.html
                    ├── blog-details-dark.html
                    ├── contact.php
                
                

SCSS Structure

    
        /*--------------------------
        Pricing Plan Area
    ---------------------------*/
    .pricing-plan-area{
        padding: 112px 0 120px 0;
        &.pricing-plan-bg{
            background-image: url(../img/bg/pricing_plan.jpg);
            background-position: center;
            background-size: cover;
        }
    }
    
    .single-price-plan-01{
        text-align: center;
        background-color: rgba(#7947e0,.4);
        border: 1px solid rgba($white,.3);
        border-radius: 5px;
        padding: 52px 0 60px 0;
        @include transition($transition);
        &:hover{
            background-color: $white;
            .price-header{
                .name{
                    color: $heading-color;
                }
                .price-wrap{
                    .price{
                        color: $heading-color;
                    }
                    .month{
                        color: $descr-color;
                    }
                }
            }
            .price-body{
                ul{
                    li{
                        color: $descr-color;
                    }
                }
            }
        }
        .price-header{
            .name{
                font-size: 18px;
                line-height: 28px;
                text-transform: uppercase;
                font-weight: 600;
                margin-bottom: 15px;
                color: $white;
                @include transition($transition);
            }
            .price-wrap{
                margin-bottom: 36px;
                .price{
                    font-size: 48px;
                    line-height: 58px;
                    color: $white;
                    @include transition($transition);
                }
                .month{
                    color: rgba($white,.8);
                    @include transition($transition);
                }
            }
        }
        .price-body{
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
                li{
                    display: block;
                    margin: 15px 0;
                    color: rgba($white,.8);
                    @include transition($transition);
                    &:first-child{
                        margin-top: 0;
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
        .price-footer{
            margin-top: 48px;
            display: block;
        }
    }
    
    

HTML Structure

The base structure was organized by row, col-** class


  <!-- header area start  -->
  <header class="header-area header-bg-2 style-two" id="home">
    <div class="header-right-image">
        <img src="assets/img/mobile-image.png" alt="header right image">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="header-inner">
                    <h1 class="title wow fadeInDown">Make cool landing with appside</h1>
                    <p>Appside is the best app landing page which will help you showcase your business, lifestyle, social, or shopping app in the best possible manner.</p>
                    <div class="btn-wrapper wow fadeInUp">
                        <a href="#" class="boxed-btn btn-rounded">Download now</a>
                        <a href="#" class="boxed-btn btn-rounded blank">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end  -->

<!-- about us area start -->

<section class="about-us-area style-two">
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="section-title left-aligned"><!-- section title -->
                <span class="subtitle">About Appside</span>
                <h3 class="title extra">Bulit for everybody with unlimited unique features</h3>
                <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor  tempor incididunt ut labore dolore magna.</p>
            </div><!-- //. section title -->
        </div>
        <div class="col-lg-6">
            <div class="feature-area">
                <ul class="feature-list">
                    <li class="single-feature-list">
                        <div class="icon icon-bg-1">
                            <i class="flaticon-vector"></i>
                        </div>
                        <div class="content">
                            <h4 class="title"><a href="#">Clean Design</a></h4>
                            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor  tempor incididunt</p>
                        </div>
                    </li>
                    <li class="single-feature-list">
                        <div class="icon icon-bg-2">
                            <i class="flaticon-responsive"></i>
                        </div>
                        <div class="content">
                            <h4 class="title"><a href="#">Fully Respnosive</a></h4>
                            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor  tempor incididunt</p>
                        </div>
                    </li>
                    <li class="single-feature-list">
                        <div class="icon icon-bg-3">
                            <i class="flaticon-layers-2"></i>   
                        </div>
                        <div class="content">
                            <h4 class="title"><a href="#">Pixel Perfect</a></h4>
                            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor  tempor incididunt</p>
                        </div>
                    </li>
                    <li class="single-feature-list">
                        <div class="icon icon-bg-4">
                            <i class="flaticon-picture"></i>
                        </div>
                        <div class="content">
                            <h4 class="title"><a href="#">Retina Ready</a></h4>
                            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor  tempor incididunt</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</section>



CSS Structure

The base structure was organized by row, col-** class
				
                    /*------------------------------
                    Header Area
                ------------------------------*/
                .header-area {
                  padding: 352px 0 252px 0;
                  background-color: #fff;
                  position: relative; 
                }
                  .header-area .header-right-image {
                    position: absolute;
                    bottom: 0px;
                    right: 10%; 
                }
                  .header-area.header-bg {
                    background-color: #fff;
                    background-image: url(../img/bg/header-bg.png);
                    background-position: top right;
                    background-repeat: no-repeat;
                 }
                  .header-area.header-bg-2 {
                    background-color: #fff;
                    background-image: url(../img/bg/header-bg-3.png);
                    background-position: top right;
                    background-repeat: no-repeat; 
                }
                  .header-area.style-two .header-inner .title {
                    color: #fff; 
                }
                  .header-area.style-two .header-inner p {
                    color: rgba(255, 255, 255, 0.8); 
                }
                  .header-area .header-inner .title {
                    font-size: 60px;
                    font-weight: 700;
                    line-height: 70px;
                    color: #252a32;
                    margin-bottom: 22px; 
                }
                  .header-area .header-inner p {
                    font-size: 20px;
                    line-height: 32px;
                    color: #505b6d;
                    max-width: 520px; 
                }
                  .header-area .header-inner .btn-wrapper {
                    margin-top: 35px; 
                }
                    .header-area .header-inner .btn-wrapper .boxed-btn {
                      margin: 0 10px;
                      border: none;
                      width: 165px;
                      height: 60px;
                      line-height: 55px;
                      position: relative;
                      z-index: 1;
                      overflow: hidden;
                      font-size: 16px;
                      font-weight: 600;
                      border: 2px solid #fff;
                      background-image: -moz-linear-gradient(50deg, #5e2ced 0%, #9749f8 100%);
                      background-image: -webkit-linear-gradient(50deg, #5e2ced 0%, #9749f8 100%);
                      background-image: -ms-linear-gradient(50deg, #5e2ced 0%, #9749f8 100%);
                      -webkit-box-shadow: 0px 3px 20px 0px rgba(13, 21, 75, 0.3);
                      box-shadow: 0px 3px 20px 0px rgba(13, 21, 75, 0.3);
                      -webkit-transition: all 0.3s ease-in;
                      -moz-transition: all 0.3s ease-in;
                      -o-transition: all 0.3s ease-in;
                      transition: all 0.3s ease-in;
                      text-transform: capitalize; 
                    }
                      .header-area .header-inner .btn-wrapper .boxed-btn.blank {
                        background-color: #fff;
                        color: #252a32;
                        border: 2px solid #500ade;
                        background-image: -moz-linear-gradient(0deg, transparent 0%, transparent 100%);
                        background-image: -webkit-linear-gradient(0deg, transparent 0%, transparent 100%);
                        background-image: -ms-linear-gradient(0deg, transparent 0%, transparent 100%);
                        -webkit-transition: all 0.3s ease-in;
                        -moz-transition: all 0.3s ease-in;
                        -o-transition: all 0.3s ease-in;
                        transition: all 0.3s ease-in; 
                    }
                        .header-area .header-inner .btn-wrapper .boxed-btn.blank img {
                          margin-right: 3px;
                         }
                        .header-area .header-inner .btn-wrapper .boxed-btn.blank:hover {
                          background-image: -moz-linear-gradient(0deg, #5e2ced 0%, #9749f8 100%);
                          background-image: -webkit-linear-gradient(0deg, #5e2ced 0%, #9749f8 100%);
                          background-image: -ms-linear-gradient(0deg, #5e2ced 0%, #9749f8 100%);
                          border-color: #fff;
                          color: #fff; 
                        }
                      .header-area .header-inner .btn-wrapper .boxed-btn:first-child {
                        margin-left: 0; 
                    }
                      .header-area .header-inner .btn-wrapper .boxed-btn:hover {
                        background-image: -moz-linear-gradient(0deg, transparent 0%, transparent 100%);
                        background-image: -webkit-linear-gradient(0deg, transparent 0%, transparent 100%);
                        background-image: -ms-linear-gradient(0deg, transparent 0%, transparent 100%);
                        background-color: #fff;
                        color: #505b6d; 
                    }
				
			

Sources & Credits

Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

ir-tech