Paso - IT Solutions & Digital Services HTML Template

Introduction

Paso is a Bootstrap 4 and Sass based Professional HTML5 template for IT Solution and Digital Service website.

Template Features:

Multipage Demos
Easy to customize
HTML5 & CSS3
Clean & Simple Design
Fully Responsive Layout
Crossbrowser Compatible with, Firefox, Safari, Opera, Chrome
W3 Valid
Retina ready
FlatIcons Free icons
Powered with Bootstrap (4.3.1)
Build with Sass
Smooth animation
AJAX contact form Submission
AJAX subscriptions form Submission
Well documented

The template folder paso and paso-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:

assets/css — folder with css files.
assets/fonts — folder with fonts files.
assets/images — folder with image files.
assets/js — folder with Javascript files.
assets/php — folder with form-process.php files.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

HTML Files:

Default Demo:

Home Page 1 (index.html)
Home Page 2 (home-2.html)
About Page (about.html)
Solutions Page (solutions.html)
Solutions Details Page (solutions-details.html)
Case Studies Page (case.html)
Case Details Page (case-details.html)
Blog Page (blog.html)
Blog Details Page (blog-details.html)
Team Page (team.html)
Pricing Page (pricing.html)
Gallery Page (gallery.html)
Testimonials Page (testimonials.html)
Signup Page (signup.html)
Signin Page (signin.html)
Error 404 Page (404.html)
Terms & Condition Page (terms&condition.html)
Privecy Page (privecy.html)
Contact Page (contact.html)

RTL Demo:

Home Page 1 (index.html)
Home Page 2 (home-2.html)
About Page (about.html)
Solutions Page (solutions.html)
Solutions Details Page (solutions-details.html)
Case Studies Page (case.html)
Case Details Page (case-details.html)
Blog Page (blog.html)
Blog Details Page (blog-details.html)
Team Page (team.html)
Pricing Page (pricing.html)
Gallery Page (gallery.html)
Testimonials Page (testimonials.html)
Signup Page (signup.html)
Signin Page (signin.html)
Error 404 Page (404.html)
Terms & Condition Page (terms&condition.html)
Privecy Page (privecy.html)
Contact Page (contact.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:


<!-- Links of CSS files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.css">
<link rel="stylesheet" href="assets/css/boxicons.min.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

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


<!-- Links of CSS files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.css">
<link rel="stylesheet" href="assets/css/boxicons.min.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="assets/css/rtl.css">

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


<!-- Links of JS files -->
<script src="assets/js/jquery-3.5.0.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.meanmenu.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/boxicons.js "></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.js"></script>
<script src="assets/js/main.js"></script>

The Contact form html code coming with jQuery form validation. Also, it's included a .php file(form-process.php) for AJAX based 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-6 col-sm-6">
			<div class="form-group">
				<input type="text"  name="phone_number"  id="phone_number"  required data-error="Please enter your number"  class="form-control"  placeholder="Your Phone"  />
				<div class="help-block with-errors"></div>
			</div>
        </div>
        <div class="col-lg-6 col-sm-6">
			<div class="form-group">
				<input type="text"  name="msg_subject"  id="msg_subject"  class="form-control"  required data-error="Please enter your subject"  placeholder="Your Subject"  />
				<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-control"  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-btn page-btn box-btn">
				Send Message
			</button>
			<div id="msgSubmit"  class="h3 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 on main.js File

By default, the template loads Open+Sans And Catamaran 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/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

Images from:
http://freepik.com/
http://pixabay.com/
http://unsplash.com/

Google Fonts:
Open+Sans
Catamaran

IconFont
FlatIcons
Boxicons

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!

Paso Documentation

Introduction

Template Features:

Getting Started

HTML Files:

Files Edit & Upload:

HEAD CSS Structure

Javascript Structure

Contact Form strong

AJAX Contact Form

AJAX Subscriptions Form

Paste URL on main.js File

Fonts used

Credits

Support