Copyright © 2024. Justlaw All Rights Reserved.
Created: 18 February 2024
Latest Update: 18 February 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Justlaw - Lawyer, Law Firm, Legal & Attorney Consulting HTML Template. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Justlaw" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── mobile-menu.css
| ├── aos.css
| ├── magnific-popup.css
| ├── owl.carousel.min.css
| ├── modal-video.min.css
| ├── slick-slider.css
| ├── nice-select.css
| ├── typhograpy.css
| ├── master.css
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-300
| ├── fa-brands-300.woff2
| ├── fa-brands-400
| ├── fa-brands-400.woff2
| ├── fa-regular-400
| ├── fa-regular-400.woff2
| ├── fa-solid-900
| ├── fa-solid-900.woff2
| ├── fa-v4compatibility
| ├── fa-v4compatibility.woff2
|
├── assets/js/
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── jquery-counterup.js
│ ├── jquery.magnific-popup.min.js
│ ├── jquery.nice-select.js
│ ├── jquery-3-6-0.min.js
│ ├── owl-carousel.min.js
│ ├── modal-video.min.js
│ ├── mobile-menu.js
│ ├── aos.js
│ ├── slick-slider.js
| ├── mobile-meanmenu.js
| ├── jquery-nice-select.js
| ├── waypoints.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── rtl.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── single-index5.html
├── single-index6.html
├── about.html
├── blog1.html
├── blog2.html
├── blog3.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── practiceareas1.html
├── practiceareas2.html
├── practiceareas3.html
├── defense-left.html
├── defense-right.html
├── defense-details.html
├── casestudy1.html
├── casestudy2.html
├── casestudy3.html
├── case-details.html
├── contact.html
├── team.html
├── team-details.html
├── testimonial1.html
├── testimonial2.html
├── testimonial3.html
├── 404.html
<!--===== HERO AREA START=======--> <div class="hero-area hero-area1 _relative"> <div class="space90"></div> <div class="container"> <div class="row"> <div class="col-lg-9 _relative"> <div class="main-hadding"> <h1>Navigating the Legal System, Advocating <span> <img src="assets/img/image/hero1-span.png" alt=""></span> For You</h1> </div> <div class="hero1-main-img-box"> <div class="_relative"> <div class="main-img img100"> <img src="assets/img/image/hero1-main-img1.png" alt=""> </div> <div class="shape-pera d-lg-block d-none"> <p> <span><img src="assets/img/icons/path.svg" alt=""></span> We Understand the Complexity of <br> Criminal Cases. You're in Capable Hands.</p> </div> <div class="hero1-main-shape-all"> <div class="hero1-main-shape _relative"> <div class="main-shape-bg aniamtion-key-1"> <img src="assets/img/shapes/hero1-main-shape.svg" alt=""> </div> <div class="main-shape-icon"> <a href="service.html"><img src="assets/img/shapes/hero1-shape-arrow.svg" alt=""></a> </div> </div> </div> </div> </div> </div> <div class="col-lg-3"> <div class="_relative"></div> <div class="hero1-side-images"> <div class="hero1-side-img1 img100"> <img src="assets/img/image/hero1-main-img3.png" alt=""> </div> <div class="hero1-side-img2 img100"> <img src="assets/img/image/hero1-main-img2.png" alt=""> </div> </div> </div> </div> </div> <img class="shape1 aniamtion-key-2" src="assets/img/shapes/hero1-shape1.svg" alt=""> <img class="shape2 aniamtion-key-2" src="assets/img/shapes/hero1-shape2.svg" alt=""> </div> <!--===== HERO AREA ENDS=======--> <div class="div"> <div class="container-fluid p-0"> <div class="row"> <div class="col-12"> <div class="marquee-wrap"> <div class="marquee-text"> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider1.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider2.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider3.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider4.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider5.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider6.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider7.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider8.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider1.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider2.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider3.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider4.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider5.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider6.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider7.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider8.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider1.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider2.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider3.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider4.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider5.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider6.png" alt=""> </div> <div class="brand-single-box"> <img src="assets/img/logo/brand-slider7.png" alt=""> </div> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA START=======--> <div class="sp3 about1"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4"> <div class="hadding1"> <span class="span" data-aos="fade-right" data-aos-duration="700">About Us</span> <div class="space16"></div> <h1 data-aos="fade-right" data-aos-duration="900">Compassionate Advocates for Those Facing Criminal Charges</h1> <div class="space16"></div> <p data-aos="fade-right" data-aos-duration="800">At Justlaw, we understand that facing criminal charges is a daunting and life-altering experience. Our dedicated team of experienced criminal defense attorneys.</p> <div class="space24"></div> <div class="" data-aos="fade-right" data-aos-duration="800"> <a href="about.html" class="theme-btn1">Start Your Defense Strategy<span><i class="fa-regular fa-arrow-right"></i></span></a> </div> </div> </div> <div class="col-lg-4"> <div class="about1-image img100 img5" data-aos="zoom-in-up" data-aos-duration="800"> <img src="assets/img/image/about-image.png" alt=""> </div> </div> <div class="col-lg-4"> <div class="hadding1"> <p data-aos="fade-left" data-aos-duration="700"> <span class="w">W</span>e believe in open and honest communication. From the moment you reach out to us, we'll take the time to listen to your concerns, answer your questions, and explain your legal options in clear, understandable terms. Every case is unique, and we approach each one with a personalized strategy designed to achieve the best.</p> <div class="space30"></div> <div class="bottom-hadding"> <h2 data-aos="fade-left" data-aos-duration="1100">John William</h2> <div class="space16"></div> <p data-aos="fade-left" data-aos-duration="800"> -CEO of the company</p> <div class="space16"></div> <img data-aos="fade-left" data-aos-duration="900" src="assets/img/image/signature.png" alt=""> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .header-area.homepage1 { position: absolute; width: 100%; z-index:9999; border-bottom: 1px solid $border1; .header-elements { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; .site-log{ margin-top: 5px; } .nav-link.active{ background: none; color: $bg-color2; } .main-menu{ ul { li { display: inline-block; position: relative; &:hover { ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; transition: $trans1; } } a { font-family: $font-2; font-size: $small_font_size; font-weight: $regular; color:$title-color1; display: inline-block; transition: $trans1; padding: 0 14px; } &:hover > a{ transition: $trans1; color: $bg-color2; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:$color-w; top: 100px; width: 220px; z-index: 1; transition: $trans1; border-radius: 5px; padding: 15px; li.main-small-menu { position: relative; &:hover > a{ transition: $trans1; padding-left: 25px; color: $bg-color2; } &:hover > a::after{ background: $bg-color2; transition: $trans1; visibility: visible; opacity: 1; } a { display: flex; align-items: center; justify-content: space-between; transition: $trans1; } ul.small-dropdown { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; background:$color-w; position: absolute; top: 70px; width: 220px; z-index: 1; left: 195px; transition: $trans1; border-radius: 5px; padding: 15px } &:hover{ ul.small-dropdown { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: -10px; position: absolute; transition: $trans1; } } } li { display: block; a { font-family: $font-2; font-weight: $regular; transition: $trans1; padding: 8px; display: inline-block; position: relative; z-index: 1; border-radius: 4px; &::after{ position: absolute; content: ""; height: 2px; width: 10px; transition: $trans1; z-index: -1; left: 10px; top: 21px; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: $bg-color2; } &:hover{ padding-left: 25px; color: $bg-color2; &::after{ border-radius: 4px; visibility: visible; transition: $trans1; opacity: 1; } } } } } } } } } nav#navbar-example2{ display: block !important; } } .header-area.homepage1.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background: $bg-color1; } // HOMEPAGE1 HEADER ENDS //
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Vikinglab