SEOMAX - Digital Marketing Agency HTML Template

SEOMAX

- Welcome
- Main File Structure
- HTML Structure
- CSS Structure
- Sources & Credits
- Support

Copyright © 2024. SEOMAX All Rights Reserved.

# SEOMAX Digital Marketing Agency HTML Template

Created: 11 Sep 2024
Latest Update: 11 Sep 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. SEOMAX - Digital Marketing Agency HTML 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 "SEOMAX " 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 5 directories, css, js, fonts, logo, 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/
                        |           ├── aos.css
                        |           ├── bootstrap.min.css
                        |           ├── fontawesome.css
                        |           ├── fonts.css
                        |           ├── owl.carousel.min.css
                        |           ├── magnific-popup.css
                        |           ├── mobile-menu.css
                        |           ├── modal-video.min.css
                        |           ├── nice-select.css
                        |           ├── owl.carousel.min.css
                        |           ├── slick-slider.css
                        |           ├── main.css
                        |
                        ├── style.css
                        |
                        |
                        ├── assets/fonts
                        |
                        ├── assets/js/
                        │           ├── jquery-3.6.0.min.js
                        │           ├── aos.js
                        │           ├── bootstrap.min.js
                        │           ├── fontawesome.js
                        │           ├── jquery.lineProgressbar.js
                        │           ├── jquery.countup.js
                        │           ├── jquery.magnific-popup.min.js
                        |           ├── jquery.nice-select.js
                        |           ├── main.js
                        |           ├── gsam-animation.js
                        |           ├── gsam.min.js
                        |           ├── mobile-meanmenu.js
                        |           ├── mobile-menu.js
                        |           ├── modal-video.min.js
                        |           ├── owl.carousel.min.js
                        |           ├── slick-slider.js
                        │
                        ├── index.html
                        ├── index2.html
                        ├── index3.html
                        ├── index4.html
                        ├── index5.html
                        ├── about.html
                        ├── service1.html
                        ├── service2.html
                        ├── service-details1.html
                        ├── service-details2.html
                        ├── service-details3.html
                        ├── service-details4.html
                        ├── service-details5.html
                        ├── service-details6.html
                        ├── service-details7.html
                        ├── service-details8.html
                        ├── case.html
                        ├── case-details-left.html
                        ├── case-details-right.html
                        ├── case-details.html
                        ├── pricing.html
                        ├── Testimonial.html
                        ├── faq.html
                        ├── Team.html
                        ├── blog.html
                        ├── blog-sidebar-left.html
                        ├── blog-sidebar-right.html
                        ├── blog-details-sidebar-left.html
                        ├── blog-details-sidebar-right.html
                        ├── blog-details.html
                        ├── error.html
                        ├── contact.html
                        ├── single-index1.html
                        ├── single-index2.html
                        ├── single-index3.html
                        ├── single-index4.html
                        ├── single-index5.html

# 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 Coffee Star</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

- Fonts Outfit
- Icons
  - Fontawesome 6.4.2
- Bootstrap Bootstrap 5

# 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.

VikingLab