Dobby Documentation

Introduction

Dobby is a Bootstrap 5.0.x and Sass based Professional HTML5 template.

Template Features:

• Multipage Demos
• Easy to Customize
• HTML5 & CSS3
• Clean & Simple Design
• Fully Responsive Layout
• Crossbrowser Compatible with Firefox, Opera, Chrome
• W3 Valid
• Retina Ready
• Owl Carousel Slider
• FlatIcons and Font Awesome Free Icons
• Powered with Bootstrap (5.0.x)
• Powered with jQuery (3.5.1)
• Build with Sass
• AJAX Contact form Submission
• AJAX Subscriptions form Submission
• Well Documented

The template folder dobby and dobby-rtl is available inside the downloaded zip file. Need to unzip the zip file to find the template also the documentation folder.

The files and folders structure is similar to following:

1. assets/css — folder with css files.
2. assets/fonts — folder with fonts files.
3. assets/img — folder with image files.
4. assets/js — folder with Javascript files.
5. assets/php — folder with form-process.php files.

HTML Files:

• Home Page One (index.html)
• Home Page Two (index-two.html)
• About Page (about.html)
• Shop Page (shop.html)
• Shop Details Page(shop-details.html)
• Checkout Page(checkout.html)
• Cart Page(cart.html)
• Services Page (services.html)
• Service Details Page (service-details.html)
• News Page (news.html)
• New Details Page (news-details.html)
• Contact Page (contact.html)
• Price Page (price.html)
• Testimonials Page (testimonials.html)
• Book Appointments Page (appointments.html)
• Courses Page (courses.html)
• Instructor Page (instructor.html)
• Gallery Page (gallery.html)
• FAQ Page (faq.html)
• 404 Page (404.html)
• Log In Page (login.html)
• Register Page (register.html)
• Terms & Condition Page (terms-condition.html)
• Privacy Policy Page (privacy-policy.html)
• Coming Soon Page (coming-soon.html)

• Home Page One (index.html)
• Home Page Two (index-two.html)
• About Page (about.html)
• Shop Page (shop.html)
• Shop Details Page(shop-details.html)
• Checkout Page(checkout.html)
• Cart Page(cart.html)
• Services Page (services.html)
• Service Details Page (service-details.html)
• News Page (news.html)
• New Details Page (news-details.html)
• Contact Page (contact.html)
• Price Page (price.html)
• Testimonials Page (testimonials.html)
• Book Appointments Page (appointments.html)
• Courses Page (courses.html)
• Instructor Page (instructor.html)
• Gallery Page (gallery.html)
• FAQ Page (faq.html)
• 404 Page (404.html)
• Log In Page (login.html)
• Register Page (register.html)
• Terms & Condition Page (terms-condition.html)
• Privacy Policy Page (privacy-policy.html)
• Coming Soon Page (coming-soon.html)

Files Edit & Upload:

Individual pages can be customized by opening in a code editor such as VS Code. Once all the customization completed then to make the website live you need to upload the updated project files to the hosting server for your own domain. The files can be uploaded using FTP client such as FileZilla.

Followings are the css files which loaded inside the Head Section:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!-- Owl Carousel Theme CSS -->
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="assets/font/flaticon.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="assets/css/fontawesome.css">
<!-- Meanmenu CSS -->
<link rel="stylesheet" href="assets/css/meanmenu.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="assets/css/responsive.css">

Followings are the rtl files which loaded inside the Head Section:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!-- Owl Carousel Theme CSS -->
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="assets/font/flaticon.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="assets/css/fontawesome.css">
<!-- Meanmenu CSS -->
<link rel="stylesheet" href="assets/css/meanmenu.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- RTL CSS -->
<link rel="stylesheet" href="assets/css/rtl.css">

Followings are the JS files which loaded before the end of HEAD or BODY Section:.

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Owl Carousel JS -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JS -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- Meanmenu JS -->
<script src="assets/js/meanmenu.js"></script>
<!-- WOW JS -->
<script src="assets/js/wow.min.js"></script>
<!-- Subscribe From JS -->
<script src="assets/js/jquery.ajaxchimp.min.js"></script>
<!-- Form Validator JS -->
<script src="assets/js/form-validator.min.js"></script>
<!-- Contact JS -->
<script src="assets/js/contact-form-script.js"></script>
<!-- Custom JS -->
<script src="assets/js/custom.js"></script>

The general template structure is the same throughout the template and each of the part is under a section with a section id name. Here is the general structure:

<!-- Apply Area -->
<div class="about-area pt-100 pb-70">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="about-text">
                    <div class="scetion-title">
                        <span>About Us<span>
                        <h2>Enjoy Safe and Affordable Diving & Swimming With Us</h2>
                        <p>
                            The introduced now, the they expect, animals the desk, and catch temple.More seven my couldn't 
                            it the character using recommended. Fees, more the them. Saw and deep classes create it brief.
                        </p>

                        <div class="about-btn">
                            <a href="about.html" class="default-btn2">Know More</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="about-right">
                    <div class="play-area">
                        <a href="https://www.youtube.com/watch?v=duSPHGiPhwk" class="play-btn">
                            <i class="flaticon-play-button"></i>   
                            Play a Video
                        </a>
                    </div>
                </div>

                <div class="icon-shape-1">
                    <i class="flaticon-waves"></i>
                </div>
                <div class="icon-shape-2">
                    <i class="flaticon-waves"></i>
                </div>
            </div>
        </div>
	</div>
</div>
<!-- Apply Area End -->

The Contact form html code coming with jQuery form validation. Also, it's included a .php file(form-process.php) for AJAX baded email sending! HTML code example is similar to followings:

<form id="contactForm">
	<div class="row">
		<div class="col-lg-6 col-sm-6">
			<div class="form-group">
				<input type="text" name="name" id="name" class="form-control" required data-error="Please enter your name" placeholder="Your Name">
				<div class="help-block with-errors"></div>
			</div>
		</div>

		<div class="col-lg-6 col-sm-6">
			<div class="form-group">
				<input type="email" name="email" id="email" class="form-control " required data-error="Please enter your email" placeholder="Your Email">
				<div class="help-block with-errors"></div>
			</div>
		</div>
        
        <div class="col-lg-12 col-md-12">
            <div class="form-group">
                <textarea name="message" class="form-message textarea-hight" id="message" cols="30" rows="5" required data-error="Write your message" placeholder="Your Message"></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>
		
		<div class="col-lg-12 col-md-12">
			<button type="submit" class="default-btn1 btn-two>
                Explore More
			</button>
			<div id="msgSubmit" class="h3 alert-text text-center hidden"></div>
			<div class="clearfix"></div>
		</div>
	</div>
</form>

File location: assets/php/form-process.php file

https://mailchimp.com/help/add-a-signup-form-to-your-website/

Paste URL in the main.js File

By default, the template loads Roboto,Josefin Sans font from Google Web Font Services. The font can be changed based on the website needs.

Font code can be found in the "style.css" file:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,500,600,700&display=swap');

Note: All images are used for preview purpose only and not included in the final purchase files.

Images from:
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/
https://pexels.com

Google Fonts:
Roboto
Josefin Sans
Font Awesome
Flaticon

If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/hibootstrap ).
or send details query to support email hello@hibootstrap.com.

We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.

We hope you found this document helpful. Thank you!