Intoduction


Archite

Archite - Architecture & Interior Design HTML Template

Created : 10/05/2023
By : Thememarch
Email : thememarch@gmail.com

Thank you for purchasing Archite - Architecture & Interior Design HTML Template. 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 v5.3.0-alpha3 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 about -->
        <section id="homeOneAbout" class="about-one section-padding-top-xl section-padding-bottom">
            <div class="container">
                <div class="about-one-wrapper">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h2 class="h2 dark-text line-height-3">
                                Transforming Spaces Elevating Lives
                            </h2>
                        </div>
                        <div class="col-12 col-lg-6 pl-120 about-one-first-text-box">
                            <p class="p body-text fw-500 line-height-5">
                                Welcome to our interior design agency! Our team of experienced designers and decorators
                                is passionate about creating beautiful, functional spaces that enhance our clients'
                                lives.
                            </p>
                            <a href="portfolio.html" class="btn brand-btn text-uppercase mt-30"><span
                                    class="z-1 position-relative">learn more</span></a>
                        </div>
                    </div>
                    <div class="row mt-70 align-items-center">
                        <div class="col-12 col-lg-6 position-relative">
                            <img src="img/aboutOne.png" alt="about image" class="about-one-img rounded-0">
                            <img src="img/aboutOneSmall.png" alt="about image small"
                                class="about-one-img-small position-absolute rounded-0">
                        </div>
                        <div class="col-12 col-lg-6">
                            <h3 class="h3 dark-text fw-700 about-one-subheading line-height-3">
                                Making Your Interior Dream Space
                            </h3>
                            <div class="about-one-second-text-box mt-85 ml-60">
                                <div class="mb-60">
                                    <h5 class="h5 fw-700 dark-text line-height-3">
                                        Our Story
                                    </h5>
                                    <p class="p body-text fw-500 line-height-5 mt-10">
                                        Welcome to our interior design agency! Our team of experienced designers and
                                        decorators is passionate about creating beautiful, functional spaces that
                                        enhance our clients' lives.
                                    </p>
                                </div>
                                <div class="mb-0">
                                    <h5 class="h5 fw-700 dark-text line-height-3">
                                        Our Goal
                                    </h5>
                                    <p class="p body-text fw-500 line-height-5 mt-10">
                                        Welcome to our interior design agency! Our team of experienced designers and
                                        decorators is passionate about creating beautiful, functional spaces that
                                        enhance our clients' lives.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

CSS Files and Structure


Mainly three main CSS files are used in this theme. The first one bootstrap.min.css, second one is style.css which for this template and third one is responsive.css to control responsive layouts.

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.

Color Schemes


Using CSS Variables

For Color Schemes we have created CSS variables in style.css file. If you want to use a color you only need to change the value of the CSS variables as shown Below.

Change Logo & favicon


Change Logo

We have used two logo, first one is for dark background and second one is for light background.

Change first logo(For Dark Background): Replace the existing logo file (Logo.png) with your logo file in root/img folder. Name and file type of your logo should be the same of the existing logo.

Change second logo(For Light Background): Replace the existing logo file (LogoTwo.png) with your logo file in root/img folder. Name and file type of your logo should be the same of the existing logo.


Change Favicon

Replace the existing favicon.ico file with your own favicon.ico file in root/img folder.

Change Fonts


We have used Tajwal and space grotesk (google fonts) in the template.

To change the fonts:

Add the new font to your HTML file using the link tag. Place the link tag in the head section of your HTML file.

Then update your CSS file to use the new font by changing the "font-family" property for the appropriate selectors.

Jquery and javascript


This theme imports three types of Javascript files.

  • jQuery
  • Custom scripts (main.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

Google Map Settings


We have used embed code for the map.


You can go to the google maps and get the embed code for your location.

Sources and Credits


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

Fonts Used are :

Tajawal

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 theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

For Support : https://thememarch.com

Email Us at : thememarch@gmail.com