Intoduction


Archix - Architecture and Interior Design HTML Template

An HTML Template

Created : 04/11/2022
By : themexriver
Email : https://themexriver.helpviser.com/

Thank you for purchasing Archix - Architecture Agency HTML Templat. 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 or put a ticket at Support Center .
Thankyou so much!

HTML Structure


The html template uses Latest Bootstrap v5.0.0 with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes. 

           <!-- Start of header
           ============================================= -->
           <header>
           ...
           </header>
           <!-- End of header
           ============================================= -->

           <!-- Start of section name
           ============================================= -->
           <section id="section-name-id" class="section-name-class">
           ...
           </section>
           <!-- End section name
           ============================================= -->


           <!-- Start of footer
           ============================================= -->
           <footer>
           ...
           </footer>
           <!-- End of footer
           ============================================= -->

Main Slider Structure (Home 3)


To learn how to use Main Slider , here is the code or go to Slick Slider and check how does it work. 


        <div id="arck-slider-main_2" class="arck-main-slider-2">
        <div class="arck-main-slider-item-2 position-relative">
        <div class="arck-slider-img-2 position-absolute">
        <img src="assets/img/slider/s4.jpg" alt="">
        </div>
        <div class="slider-shape position-absolute">
        <img src="assets/img/slider/s-sh1.png" alt="">
        </div>
        <div class="container">
        <div class="arck-slider-main-text headline pera-content">
        <div class="slider-sub-text text-uppercase">
        Interior Design
        </div>
        <h1>We Are <span>Creative
        Interior</span> Designer.</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
        has been the dard dummy text ever since the 1500s.</p>
        <div class="arck-btn-2">
        <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
        </div>
        </div>
        </div>
        </div>
        <div class="arck-main-slider-item-2 position-relative">
        <div class="arck-slider-img-2 position-absolute">
        <img src="assets/img/slider/s5.jpg" alt="">
        </div>
        <div class="slider-shape position-absolute">
        <img src="assets/img/slider/s-sh1.png" alt="">
        </div>
        <div class="container">
        <div class="arck-slider-main-text headline pera-content">
        <div class="slider-sub-text text-uppercase">
        Interior Design
        </div>
        <h1>We Are <span>Creative
        Interior</span> Designer.</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
        has been the dard dummy text ever since the 1500s.</p>
        <div class="arck-btn-2">
        <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
        </div>
        </div>
        </div>
        </div>
        <div class="arck-main-slider-item-2 position-relative">
        <div class="arck-slider-img-2 position-absolute">
        <img src="assets/img/slider/s6.jpg" alt="">
        </div>
        <div class="slider-shape position-absolute">
        <img src="assets/img/slider/s-sh1.png" alt="">
        </div>
        <div class="container">
        <div class="arck-slider-main-text headline pera-content">
        <div class="slider-sub-text text-uppercase">
        Interior Design
        </div>
        <h1>We Are <span>Creative
        Interior</span> Designer.</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
        has been the dard dummy text ever since the 1500s.</p>
        <div class="arck-btn-2">
        <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
        </div>
        </div>
        </div>
        </div>
        </div>

Main Slider Structure (Home 4)


To learn how to use Main Slider , here is the code or go to Slick Slider and check how does it work. 


      <div id="arck-slider-main_1" class="arck-slider-area">
      <div class="arck-main-slider-item position-relative">
      <div class="arck-main-slider-img position-absolute img-zooming" data-background="assets/img/slider/s1.jpg"></div>
      <div class="container">
      <div class="arck-slider-main-text headline position-relative">
      <span class="line-shape position-absolute"></span>
      <div class="slider-sub-text text-uppercase">
      Architect Design
      </div>
      <h1>
      The Art Technique
      of Designing and
      Building.
      </h1>
      <div class="arck-btn">
      <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
      </div>
      </div>
      </div>
      </div>
      <div class="arck-main-slider-item position-relative">
      <div class="arck-main-slider-img position-absolute img-zooming" data-background="assets/img/slider/s2.jpg"></div>
      <div class="container">
      <div class="arck-slider-main-text headline position-relative">
      <span class="line-shape position-absolute"></span>
      <div class="slider-sub-text text-uppercase">
      Architect Design
      </div>
      <h1>
      The Art Technique
      of Designing and
      Building.
      </h1>
      <div class="arck-btn">
      <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
      </div>
      </div>
      </div>
      </div>
      <div class="arck-main-slider-item position-relative">
      <div class="arck-main-slider-img position-absolute img-zooming" data-background="assets/img/slider/s3.jpg"></div>
      <div class="container">
      <div class="arck-slider-main-text headline position-relative">
      <span class="line-shape position-absolute"></span>
      <div class="slider-sub-text text-uppercase">
      Architect Design
      </div>
      <h1>
      The Art Technique
      of Designing and
      Building.
      </h1>
      <div class="arck-btn">
      <a class="d-flex justify-content-center align-items-center text-uppercase" href="project.html">View Works</a>
      </div>
      </div>
      </div>
      </div>
      </div>

Before / After Image


To learn how to use Before/After Image , here is the code or go to and check how does it work. 


      <div  class="twentytwenty-container beforeafter-wrap">
      <div class="arck-before-item before-after-item position-relative">
      <img src="assets/img/about/ba1.jpg" alt="">
      </div>
      <div class="arck-after-item before-after-item position-relative">
      <img src="assets/img/about/ba2.jpg" alt="">
      </div>
      </div>

Portfolio Tab


To learn how to use Portfolio , here is the code or go to and check how does it work. 


   <div class="arck-project-top-content d-flex justify-content-between align-items-center">
   <div class="arck-project-filter-btn ul-li text-center">
   <div class="button-group  text-center clearfix">
   <button class="filter-button is-checked" data-filter="*">All </button>
   <button class="filter-button" data-filter=".interiors">Interiors</button>
   <button class="filter-button" data-filter=".design"> 3D Design</button>
   <button class="filter-button" data-filter=".building">Building</button>
   <button class="filter-button" data-filter=".house_exterior">House & Exterior </button>
   </div>
   </div>
   </div>


   <div class="arck-project-filter-content">
   <div class="filtr-container-area grid clearfix" data-isotope="{ "masonry": { "columnWidth": 0 } }">
   <div class="grid-sizer"></div>
   <div class="grid-item grid-size-50 interiors design" data-category="interiors design">
   <div class="arck-project-item-2 position-relative">
   <div class="inner-img">
   <img src="assets/img/project/prt1.jpg" alt="">
   </div>
   <div class="inner-text headline pera-content">
   <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
   <span class="port-cate text-uppercase"> <a href="project.html">Architecture</a></span>
   </div>
   </div>
   </div>
   <div class="grid-item grid-size-25 house_exterior design" data-category="house_exterior design">
   <div class="arck-project-item-2 position-relative">
   <div class="inner-img">
   <img src="assets/img/project/prt2.jpg" alt="">
   </div>
   <div class="inner-text headline pera-content">
   <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
   <span class="port-cate text-uppercase"> <a href="project.html">Architecture</a></span>
   </div>
   </div>
   </div>
   <div class="grid-item grid-size-25 building design" data-category="building design">
   <div class="arck-project-item-2 position-relative">
   <div class="inner-img">
   <img src="assets/img/project/prt5.jpg" alt="">
   </div>
   <div class="inner-text headline pera-content">
   <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
   <span class="port-cate text-uppercase"> <a href="project.html">Architecture</a></span>
   </div>
   </div>
   </div>
   <div class="grid-item grid-size-25 house_exterior building" data-category="house_exterior building">
   <div class="arck-project-item-2 position-relative">
   <div class="inner-img">
   <img src="assets/img/project/prt4.jpg" alt="">
   </div>
   <div class="inner-text headline pera-content">
   <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
   <span class="port-cate text-uppercase"> <a href="project.html">Architecture</a></span>
   </div>
   </div>
   </div>
   <div class="grid-item grid-size-50 interiors design" data-category="interiors design">
   <div class="arck-project-item-2 position-relative">
   <div class="inner-img">
   <img src="assets/img/project/prt3.jpg" alt="">
   </div>
   <div class="inner-text headline pera-content">
   <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
   <span class="port-cate text-uppercase"> <a href="project.html">Architecture</a></span>
   </div>
   </div>
   </div>
   </div>
   </div>

Team Member Slider Structure


To learn how to use Team Slider , here is the code or go to Slick Slider and check how does it work. 


    <div class="arck-team-slider">
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm1.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm2.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm3.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm1.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm2.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="arck-slider-inner-item">
    <div class="arck-team-item position-relative">
    <div class="inner-img">
    <img src="assets/img/team/tm3.jpg" alt="">
    </div>
    <div class="inner-text text-center headline pera-content">
    <h3><a href="team-single.html">Mrowni Rosen</a></h3>
    <span>Architect</span>
    </div>
    <div class="inner-social text-center ul-li">
    <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-behance"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

Counter Structure


Counter Up 


  <div class="arck-counter-inner-item headline pera-content text-center position-relative">
  <h3><span class="counter">30</span>k+</h3>
  <p>Happy Clients</p>
  </div>

Client Slider


To learn how to use Sponsor Slider , here is the code or go to Slick Slider and check how does it work. 


    <div class="arck-sponsor-slider">
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp1.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp2.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp3.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp4.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp5.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp1.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp2.png">
    </div>
    <div class="arck-sponsor-slider-item">
    <img src="assets/img/sponsor/sp3.png">
    </div>
    </div>

Video Popup


Video Popup Settings 


  <a class="video_box" href="Put your youtube video link here">Play</a<

Project Tab


Project Tab Settings 


    <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
    </div>

Skill Progress Bar


Skill Progress Bar Settings 


  <div class="skill-progress-bar">
  <div class="skill-set-percent headline">
  <h4>Write Your Progress Title Here</h4>
  <div class="progress">
  <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
  </div>
  </div>
  <div class="skill-set-percent headline">
  <h4>Write Your Progress Title Herep</h4>
  <div class="progress">
  <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
  </div>
  </div>
  <div class="skill-set-percent headline">
  <h4>Write Your Progress Title Here</h4>
  <div class="progress">
  <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
  </div>
  </div>
  <div class="skill-set-percent headline">
  <h4>Write Your Progress Title Here</h4>
  <div class="progress">
  <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
  </div>
  </div>
  </div>

FAQ Accordion


FAQ Accordion Settings 


    <div class="archx-faq-accordion-2">
    <div class="archx-faq-content-wrapper">
    <div class="accordion" id="accordionExample">
    <div class="accordion-item headline-2 pera-content wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
    <h2 class="accordion-header" id="headingOne">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Does wexy support both Elementor and WP Bakery Page Builder?
    </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">
    The other hand we denounce with righteou indg ation and dislike men who are so beguiled and demorali ed by the of pleasure of the moment.Dislike men who are so beguiled  demoraliz worlds ed by the charms of pleasure of the moment. Lorem ipsum dolor sit
    </div>
    </div>
    </div>
    <div class="accordion-item headline-2 pera-content wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">
    <h2 class="accordion-header" id="headingTwo">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    Does Hub support both Elementor and WP Bakery Page Builder?
    </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
    <div class="accordion-body">
    The other hand we denounce with righteou indg ation and dislike men who are so beguiled and demorali ed by the of pleasure of the moment.Dislike men who are so beguiled  demoraliz worlds ed by the charms of pleasure of the moment. Lorem ipsum dolor sit 
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

Portfolio Filter


Portfolio Filter Settings 


  <div class="arck-project-feed-content-2">
  <div class="filtr-container-area grid_2 clearfix">
  <div class="grid_2-sizer"></div>
  <div class="grid_2-item grid_2-size-40">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port1.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  <div class="grid_2-item grid_2-size-60">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port2.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  <div class="grid_2-item grid_2-size-60">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port3.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  <div class="grid_2-item grid_2-size-40">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port6.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  <div class="grid_2-item grid_2-size-60">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port5.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  <div class="grid_2-item grid_2-size-40">
  <div class="arck-project-feed-item-2">
  <div class="arck-project-item-2 position-relative">
  <div class="inner-img">
  <img src="assets/img/project/port4.jpg" alt="">
  </div>
  <div class="inner-text headline pera-content">
  <h3><a href="project-single.html">Kitchen Inspiration</a></h3>
  <span class="port-cate text-uppercase">Architecture</span>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

Project Slider


Project Slider Settings 


    <div class="archx-project-slider">
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro1.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    01
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro2.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    02
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro3.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    03
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro4.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    04
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro5.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    05
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro1.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    06
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="archx-project-item-2">
    <div class="archx-project-item-content  position-relative">
    <div class="archx-project-img-2">
    <img src="assets/img/project/ar-pro2.png" alt="">
    </div>
    <div class="serial-no d-flex justify-content-center align-items-center position-absolute">
    07
    </div>
    <div class="archx-project-text-2 d-flex justify-content-between headline-2 position-absolute align-items-center">
    <h3><a href="project-single.html">Book Printing Service</a></h3>
    <a class="more_btn d-flex align-items-center justify-content-center" href="project-single.html"> <i class="fal fa-long-arrow-right"></i></a>
    </div>
    </div>
    </div>
    </div>

Testiimoial Slider Settings


To learn how to use Testiimoial , here is the code check how does it work. 


    <div class="archx-testimonial-slider-2">
    <div class="archx-testimonial-slider-item-2">
    <div class="archx-testimonial-img-text-2 d-flex align-items-center">
    <div class="archx-testimonial-img-2 position-relative">
    <span class="archx-shape1 position-absolute"><img src="assets/img/testimonial/ar-tst-shape2.png" alt=""></span>
    <span class="archx-testimonial-quote position-absolute"><i class="fas fa-quote-right"></i></span>
    <div class="inner-img">
    <img src="assets/img/testimonial/ar-tst1.png" alt="">
    </div>
    <div class="testimonial-social ul-li">
    <ul>
    <li><a href="#" tabindex="0"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-behance"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    <div class="archx-shape2 position-absolute">
    <img src="assets/img/bg/dot-shape1.png" alt="">
    </div>
    </div>
    <div class="archx-textimonial-text-2 headline-2 pera-content">
    <h3>This Is Flexiable Theme</h3>
    <p>The other hand we denounce with righteou indg ation and dislike men who are so beguiled and demorali ed by the of pleasure of the moment.Dislike men who are so beguiled  demoraliz worlds ed by the charms of pleasure of the moment. Lorem ipsum dolor sit</p>
    <div class="archx-testimonial-author-2 d-flex align-items-center">
    <h4>Foqrul Saheb</h4>
    <span>Senior Artist Developer</span>
    </div>
    </div>
    </div>
    </div>
    <div class="archx-testimonial-slider-item-2">
    <div class="archx-testimonial-img-text-2 d-flex align-items-center">
    <div class="archx-testimonial-img-2 position-relative">
    <span class="archx-shape1 position-absolute"><img src="assets/img/testimonial/ar-tst-shape2.png" alt=""></span>
    <span class="archx-testimonial-quote position-absolute"><i class="fas fa-quote-right"></i></span>
    <div class="inner-img">
    <img src="assets/img/testimonial/ar-tst1.png" alt="">
    </div>
    <div class="testimonial-social ul-li">
    <ul>
    <li><a href="#" tabindex="0"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-behance"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    <div class="archx-shape2 position-absolute">
    <img src="assets/img/bg/dot-shape1.png" alt="">
    </div>
    </div>
    <div class="archx-textimonial-text-2 headline-2 pera-content">
    <h3>This Is Flexiable Theme</h3>
    <p>The other hand we denounce with righteou indg ation and dislike men who are so beguiled and demorali ed by the of pleasure of the moment.Dislike men who are so beguiled  demoraliz worlds ed by the charms of pleasure of the moment. Lorem ipsum dolor sit</p>
    <div class="archx-testimonial-author-2 d-flex align-items-center">
    <h4>Foqrul Saheb</h4>
    <span>Senior Artist Developer</span>
    </div>
    </div>
    </div>
    </div>
    <div class="archx-testimonial-slider-item-2">
    <div class="archx-testimonial-img-text-2 d-flex align-items-center">
    <div class="archx-testimonial-img-2 position-relative">
    <span class="archx-shape1 position-absolute"><img src="assets/img/testimonial/ar-tst-shape2.png" alt=""></span>
    <span class="archx-testimonial-quote position-absolute"><i class="fas fa-quote-right"></i></span>
    <div class="inner-img">
    <img src="assets/img/testimonial/ar-tst1.png" alt="">
    </div>
    <div class="testimonial-social ul-li">
    <ul>
    <li><a href="#" tabindex="0"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-behance"></i></a></li>
    <li><a href="#" tabindex="0"><i class="fab fa-youtube"></i></a></li>
    </ul>
    </div>
    <div class="archx-shape2 position-absolute">
    <img src="assets/img/bg/dot-shape1.png" alt="">
    </div>
    </div>
    <div class="archx-textimonial-text-2 headline-2 pera-content">
    <h3>This Is Flexiable Theme</h3>
    <p>The other hand we denounce with righteou indg ation and dislike men who are so beguiled and demorali ed by the of pleasure of the moment.Dislike men who are so beguiled  demoraliz worlds ed by the charms of pleasure of the moment. Lorem ipsum dolor sit</p>
    <div class="archx-testimonial-author-2 d-flex align-items-center">
    <h4>Foqrul Saheb</h4>
    <span>Senior Artist Developer</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="carousel_nav">
    <button type="button" class="ar-tst_2_left_arrow text-uppercase"><i class="fal fa-long-arrow-left"></i></button>
    <button type="button" class="ar-tst_2_right_arrow text-uppercase"><i class="fal fa-long-arrow-right"></i></button>
    </div>

CSS Files and Structure


Mainly two main CSS files are used in this theme. The first one bootstrap.css, second one is style.css which for this template and responsive style include in style.css file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

CSS Files

Common stylesheets included in all pages:

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/video.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/slick-theme.css">
    <link rel="stylesheet" href="assets/css/global.css">
    <link rel="stylesheet" href="assets/css/twenty.css">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">

Jquery and javascript


This theme imports three types of Javascript files.

  • jQuery
  • Custom scripts (script.js)
  • Some plugins

  • jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. (All javascript plugins include in jquery-plugin-collection.js file)

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/appear.js"></script>
    <script src="assets/js/slick.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/twenty.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/masonry.pkgd.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/jquery.inputarrow.js"></script>
    <script src="assets/js/script.js"></script>

Sources and Credits


Fonts Used int the template are google fonts, you can find theme on Google Fonts API

Fonts Used are :

"Titillium Web"

"Raleway"

"Outfit"

"space-grotesk"




Sliders Used Are :

Owl Carousel


Every Code is properly commented for Editing Ease.

Icons Used are :


Fontawsome Icons
https://fortawesome.github.io/Font-Awesome/

Support


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 any queries, please feel free to contact us at Support Center.

Email Us at : https://themexriver.helpviser.com/