Introduction

Lyzo - Law Firm and Attorney HTML Template

Template Features:
  • Multipage Demos
  • Easy to customize
  • HTML5 & CSS3
  • Clean & Simple Design
  • Fully Responsive Layout
  • Crossbrowser Compatible with Edge, Firefox, Opera, Chrome
  • W3 Valid
  • Retina ready
  • FlatIcons and Icofont Free icons
  • Powered with Bootstrap (4.x)
  • Build with Sass
  • Smooth animation
  • AJAX contact form Submission
  • AJAX subscriptions form Submission
  • Well documented

Getting Started

The template folder lyzo and lyzo-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.

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 (index-2.html)
  • Home Page 3 (index-3.html)
  • About Page (about.html)
  • Attorney Page (attorney.html)
  • Attorney Details Page (attorney-details.html)
  • Case Study (case-study.html)
  • Case Study Details Page (case-study-details.html)
  • Blog Page (blog.html)
  • Blog Details Page (blog-details.html)
  • Practice Page (practice.html)
  • Practice Details Page (practice-details.html)
  • Appointment Page (appointment.html)
  • Testimonial Page (testimonial.html)
  • FAQ Page (faq.html)
  • 404 Page (404.html)
  • Privacy Policy Page (privacy-policy.html)
  • Terms & Conditions Page (terms-conditions.html)
  • Contact Page (contact.html)
RTL Demo
  • Home Page 1 (index.html)
  • Home Page 2 (index-2.html)
  • Home Page 3 (index-3.html)
  • About Page (about.html)
  • Attorney Page (attorney.html)
  • Attorney Details Page (attorney-details.html)
  • Case Study (case-study.html)
  • Case Study Details Page (case-study-details.html)
  • Blog Page (blog.html)
  • Blog Details Page (blog-details.html)
  • Practice Page (practice.html)
  • Practice Details Page (practice-details.html)
  • Appointment Page (appointment.html)
  • Testimonial Page (testimonial.html)
  • FAQ Page (faq.html)
  • 404 Page (404.html)
  • Privacy Policy Page (privacy-policy.html)
  • Terms & Conditions Page (terms-conditions.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.

HEAD CSS Structure

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/icofont.min.css">
<link rel="stylesheet" href="assets/css/nice-select.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<link rel="stylesheet" href="assets/css/animate.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/icofont.min.css">
<link rel="stylesheet" href="assets/css/nice-select.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<link rel="stylesheet" href="assets/css/animate.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">

Javascript Structure

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


<!-- Links of JS files -->
<script src="assets/js/jquery.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.nice-select.min.js"></script>
<script src="assets/js/jquery.ajaxchimp.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/owl.carousel.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/custom.js"></script>

HTML Structure

The Comero is a responsive template and is based on the Bootstrap Framework. For more information you can check the Bootstrap CSS.

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:


<div class="counter-area">
    <div class="container">
        <div class="row counter-bg">
            <div class="col-6 col-sm-3 col-lg-3">
                <div class="counter-item">
                    <i class="flaticon-judge"></i>
                    <div class="counter-inner">
                        <h3 class="counter">18</h3>
                        <p>Attorneys</p>
                    </div>
                </div>
            </div>
            <div class="col-6 col-sm-3 col-lg-3">
                <div class="counter-item">
                    <i class="flaticon-auction"></i>
                    <div class="counter-inner">
                        <h3><span class="counter">99</span>%</h3>
                        <p>Case Won</p>
                    </div>
                </div>
            </div>
            <div class="col-6 col-sm-3 col-lg-3">
                <div class="counter-item">
                    <i class="flaticon-medal"></i>
                    <div class="counter-inner">
                        <h3><span class="counter">100</span>%</h3>
                        <p>Legal Way</p>
                    </div>
                </div>
            </div>
            <div class="col-6 col-sm-3 col-lg-3">
                <div class="counter-item">
                    <i class="flaticon-team"></i>
                    <div class="counter-inner">
                        <h3><span class="counter">10</span>K</h3>
                        <p>Happy Clients</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Contact Form strong

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 contact-wrap">
        <div class="col-sm-6 col-lg-6">
            <div class="form-group">
                <input type="text" name="name" id="name" class="form-control" required data-error="Please enter your name" placeholder="Your Full Name">
                <div class="help-block with-errors"></div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-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-sm-6 col-lg-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-sm-6 col-lg-6">
            <div class="form-group">
                <select class="form-control wide">
                    <option>Case Category</option>
                    <option>Another option</option>
                    <option>A option</option>
                    <option>Potato</option>
                </select>
            </div>
        </div>

        <div class="col-md-12 col-lg-12">
            <div class="form-group">
                <textarea name="message" class="form-control" id="message" cols="30" rows="8" required data-error="Write your message" placeholder="Case Description"></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>

        <div class="col-md-12 col-lg-12">
            <div class="text-center">
                <button type="submit" class="contact-btn">Submit Case</button>
                </div>
                <div id="msgSubmit" class="h3 text-center hidden"></div>
            <div class="clearfix"></div>
        </div>
    </div>
</form>

AJAX Contact Form

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

AJAX Subscriptions Form

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

Paste URL on main.js File

Fonts used

By default, the template loads Poppins and Playfair Display 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=Poppins:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,600,700,900&display=swap');

Credits

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:
Poppins
Playfair Display

IconFont
FlatIcons
Icofont

Support

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!