Template

Preloader

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

<!--Loading START-->
<div class="loader-area" id="loading_bar">
    <div class="loader_inside">
        <div class="lds-facebook">
            <div></div><div></div><div></div>
        </div>
    </div>
</div>
<!--Loading END-->

Header

We have two types of headers: Horizontal and Sidebar. In sidebar view we also have horizontal header, that only works for mobile devices.

To use the horizontal header – copy paste the example below into your document.

<!--Header START-->
<header class="daniel_header daniel_underline_hover fixed-top"  data-pinnedon="400">
    <nav class="navbar navbar-expand-lg navbar-dark daniel-scrollspy-navbar p-0 p-lg-1">
        <div class="container">
            <!--Header Logo START-->
            <a href="#" class="navbar-brand flex-grow-1" title="Daniel" aria-label="Main Logo">
                <!--Logo Here-->                    
            </a>
            <!--Header Logo END-->
            <!--Header Toggler START-->
            <button id="header_toggler" class="navbar-toggler order-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="daniel-toggler-icon"></span>
            </button>
            <!--Header Toggler END-->
            <div class="collapse navbar-collapse flex-grow-1 d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center order-3 order-lg-2" id="navbarContent">
                <!--Header Navigation START-->
                <ul class="navbar-nav gap-1">
                    <li class="nav-item">
                        <a href="#home" title="Home" class="nav-link daniel_scrollspy">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" title="About" class="nav-link daniel_scrollspy">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#services" title="Services" class="nav-link daniel_scrollspy">Services</a>
                    </li>
                    <li class="nav-item">
                        <a href="#portfolio" title="Portfolio" class="nav-link daniel_scrollspy">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a href="#resume" title="Resume" class="nav-link daniel_scrollspy">Resume</a>
                    </li>
                    <li class="nav-item">
                        <a href="#blog" title="Blog" class="nav-link daniel_scrollspy">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" title="Contact" class="nav-link daniel_scrollspy">Contact</a>
                    </li>
                </ul>
                <!--Header Navigation END-->
            </div>
            <div class="navbar-right py-2 px-1 order-1 order-lg-3 me-3">
                <div class="form-switcher d-flex flex-column gap-1 align-items-center">
                    <label class="switch-label d-flex flex-row align-items-center gap-2">
                        <span class="switch switch-primary">
                            <input type="checkbox" class="switch-input darkmode_switcher" checked>
                            <span class="switch-slider">
                                <span class="switch-slider-pointer"></span>
                            </span>
                        </span>
                        <span class="switcher-label">Dark</span>
                    </label>
                    
                </div>
            </div>
        </div>
    </nav>
</header>
<!--Header END-->

If you want to use vertical layout or sidebar header like layout2, first add the daniel_vertical_layout classname into the body element.

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 the img tag that is located inside of navbar-brand element.

You can also add an svg element inside the navbar-brand element.

<!--Header Logo START-->
<a href="#" class="navbar-brand flex-grow-1" title="Daniel">
    ...
</a>
<!--Header Logo END-->

Sections

Daniel template sections contain two parts: heading and body. In the head section you need to write the title of the section, optionally add a subtitle, and in the content part write the content of the section.

<section class="section-class" id="section-id">
    <div class="container">
        <!--Section Heading START-->
        <div class="section_heading">
            <h2 class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center m-0 mb-4 mb-lg-0 gap-0 gap-lg-1">
                What I do
                <span class="heading_background">Services</span>
                <svg width="108" height="10" viewBox="0 0 108 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 5C10 4.44772 10.4477 4 11 4H98V6H11C10.4477 6 10 5.55228 10 5V5Z"/>
                    <rect x="99" y="1" width="8" height="8" rx="1" stroke-width="2"/>
                </svg>  
            </h2>
            <p class="m-0 small text-secondary">It is a long established fact that a reader will be distracted by the readable content</p>
        </div>
        <!--Section Heading END-->
        <!--Section Content START-->
        <div class="section_content">
        </div>
    </div>
</div>

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