Template

Preloader

To activate the preloader, first copy and paste the code below into the body element.

<!--Preloader-->
    <div class="preloader">
        <div class="load_container">
            <div class="percentage">
                0%
            </div>
            <div class="loading_slider"></div>
        </div>
    </div>

Header

To use the Angus header, copy paste this example into your document.

<!--Header-->
    <header class="angus-header transparent_header">
        <div class="container">
            <div class="angus-nav">
                <div class="logo-area">
                    <a href="#" title="Angus">
                        <!--Site Logo-->
                        <img src="./assets/images/logo_dark.svg" alt="" height="50px">
                    </a>
                </div>
                <!--Navbar Toggler-->
                <button class="angus-toggler">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <!--Menu-->
                <div class="nav-area">
                    <ul class="nav">
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li>
                            <a href="#portfolio">Portfolio</a>
                        </li>
                        <li>
                            <a href="#blog">Blog</a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                
            </div>
        </div>
    </header>

Header Settings

With class names you can easily control the transparency of the header.

For example, if you want to deactivate transparency, just add none_transparent class name into the header element.

<!--Header-->
<header class="angus-header none_transparent">
...

Header Logo

If you want to change the logo of the website, upload your logo file into the assets/images folder, then add your logo url path into img tag that is located in the logo-area div element.

<div class="logo-area">
     <a href="#" title="Angus">
        <!--Site Logo-->
        <img src="./assets/images/logo_dark.svg" alt="" height="50px">
     </a>
</div>

Main Element

You can create section elements by putting them in the main element of the document.

If you create a blog page, just add post classname into the main element.

<!--Main-->
<main class="post">

Home Section

<!--Home Section-->
        <section class="home" id="home">
            <div class="home-background-area">
                <div class="home-background-image" style="background-image: url(./assets/images/home.jpg);"></div>
                <div class="overlay-bottom"></div>
            </div>
            <div class="home-content">
                <h1 class="split-animation" data-aos-animation="fade-up">Hi, I'm a Photographer</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                <a href="#about" class="btn btn-big">More</a>
            </div>
            <div class="scroll-down">
                <a href="#about" class="scroll-down-link">
                    <div class="scroll-title">Scroll Down</div>
                    <div class="scroll-mouse">
                        <div class="whell"></div>
                    </div>
                </a>
            </div>
            <!--Particle Background-->
            <div class="background-particle" id="particlebackground" data-config="./assets/pj-config.json"></div>
            <!--End of Particle Background-->
        </section>

Each section has an ID attribute. Make sure that the ID name of the section is the same as in the navigation of “a href” attribute.

Home Background Image

If you want to change the home background image, just upload the image into the assets/images folder, then add your image url path into the “home-background-image” element.

<!--Home Background Image-->
<div class="home-background-image" style="background-image: url(./assets/images/home.jpg);"></div>
<div class="overlay-bottom"></div>
</div>

Home Section Content

<div class="home-content">
    <!--Home Section Contents ( Heading and Description )-->
    <h1 class="split-animation" data-aos-animation="fade-up">Hi, I'm a Photographer</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <a href="#about" class="btn btn-big">More</a>
</div>

Section Heading

If you want to use the section heading, add two elements in section container: section-heading and section-body.

In section heading element add bellow code

<!--Portfolio-->
<section class="portfolio" id="portfolio">
    <div class="container">
        <div class="section-heading">
            <h2>My Projects</h2>
            <span class="heading_background">Portfolio</span>
            <p>There are many variations of passages of Lorem Ipsum.</p>
        </div>
        <div class="section-body">
...