Copyright © 2024. Lawsy Law All Rights Reserved.
Created: 19 January 2024
Latest Update: 19 January 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Lawsy Law - Law, Lawyer and Attorney 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 "Lawsy Law" 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/plugins/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── sidebar.css
| ├── aos.css
| ├── mobile.css
| ├── owl.carousel.min.css
| ├── modal-video.min.css
| ├── slick-slider.css
| ├── typhograpy.css
| ├── master.css
|
├── style.css
|
|
├── assets/webfonts/
| ├── 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/plugins/
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── counter.js
│ ├── owl-carousel.min.js
│ ├── jquery-modal.min.js
│ ├── sidebar.js
│ ├── aos.js
│ ├── slider.js
| ├── mobilemenu.js
├── main.js
│
├── index.html
├── index1.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── index-rtl-1.html
├── about.html
├── blog1.html
├── blog2.html
├── blog3.html
├── blog4.html
├── blog-left.html
├── blog-left-deatils.html
├── blog-right.html
├── blog-right-deatils.html
├── blog-single.html
├── service1.html
├── service2.html
├── service-left.html
├── service-right.html
├── service-single.html
├── contact1.html
├── contact2.html
├── contact3.html
├── team1.html
├── team2.html
├── testimonial1.html
├── testimonial2.html
├── testimonial3.html
<!--===== welcome starts=======--> <div class="welcome3-section-area" style="background-image: url(assets/img/bacground/header3-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1;"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-2"> <div class="welcome3-element" data-aos="fade-right" data-aos-duration="800"> <img src="assets/img/elementor/elementor18.png" alt="" class="keyframe5"> <div class="elementor19" data-aos="fade-right" data-aos-duration="1000"> <img src="assets/img/elementor/elementor19.png" alt="" class="aniamtion-key-1 d-lg-inline-block d-none"> </div> </div> </div> <div class="col-lg-8"> <div class="welcome3-header-area text-center"> <h1 data-aos="fade-up" data-aos-duration="800"> Expert Criminal Defense, <img src="assets/img/elementor/elementor20.png" alt="" class="aniamtion-key-1">Strongest <a class="video-play-button1"><span class="video-play-button"><i class="fa-duotone fa-play"></i></span>Play Now</a>Advocate</h1> <p data-aos="fade-up" data-aos-duration="1000">We know that every case is unique, and we approach each with meticulous attention <br> has detail. Whether you're facing charges related DUI, drug offenses, assault.</p> <div data-aos="fade-up" data-aos-duration="1200"> <a href="contact1.html" class="casebtn1">Request Case Evolution <span><i class="fa-regular fa-arrow-right"></i></span></a> <a href="contact2.html" class="casebtn2">Learn More <span><i class="fa-regular fa-arrow-right"></i></span></a> </div> </div> </div> <div class="col-lg-2"> <div class="welcome3-counter-area"> <div class="welcome3-counter-box text-center" data-aos="fade-left" data-aos-duration="800"> <h1><span class="counter">98</span>%</h1> <p>Successful Client</p> </div> <div class="welcome3-counter-box text-center" data-aos="fade-left" data-aos-duration="1000"> <h1><span class="counter">1</span>M+</h1> <p>Criminals Law Success</p> </div> <div class="welcome3-counter-box text-center" data-aos="fade-left" data-aos-duration="=1200"> <h1>$<span class="counter">50</span>M</h1> <p>Trade Value Filled</p> </div> </div> </div> </div> </div> </div> <!--===== welcome end=======--> <!--===== others starts=======--> <div class="others-section-area"> <div class="ontainer"> <div class="row"> <div class="col-lg-8 m-auto"> <div class="others-content-area text-center"> <div class="others-img1" data-aos="fade-up" data-aos-duration="600"> <img src="assets/img/images/others-img1.png" alt=""> <div class="others-arrow"> <a href="service-single.html"><i class="fa-regular fa-angles-right"></i></a> </div> </div> <div class="others-img2" data-aos="fade-up" data-aos-duration="800"> <img src="assets/img/images/others-img2.png" alt=""> <div class="others-arrow"> <a href="service-single.html"><i class="fa-regular fa-angles-right"></i></a> </div> </div> <div class="others-img3" data-aos="fade-up" data-aos-duration="1000"> <img src="assets/img/images/others-img3.png" alt=""> <div class="others-arrow"> <a href="service-single.html"><i class="fa-regular fa-angles-right"></i></a> </div> </div> <div class="others-img4" data-aos="fade-up" data-aos-duration="1200"> <img src="assets/img/images/others-img4.png" alt=""> <div class="others-arrow"> <a href="service-single.html"><i class="fa-regular fa-angles-right"></i></a> </div> </div> <div class="others-img5" data-aos="fade-up" data-aos-duration="1400"> <img src="assets/img/images/others-img5.png" alt=""> <div class="others-arrow"> <a href="service-single.html"><i class="fa-regular fa-angles-right"></i></a> </div> </div> </div> </div> </div> </div> </div> <!--===== otherss end=======--> <!--===== about starts=======--> <div class="about3-section-area"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about3-textarea"> <span data-aos="fade-right" data-aos-duration="600">About Us</span> <h1 data-aos="fade-right" data-aos-duration="800">Navigating & Legal Maze with a Criminal Defense Expert</h1> <p data-aos="fade-right" data-aos-duration="1000">Service providers can differentiate themselves by offering high-quality and reliable services. Airlines, for instance, promote their safety records and.</p> <div class="about3-textarea-list" data-aos="fade-right" data-aos-duration="1200"> <ul> <li><a href="#"><img src="assets/img/icons/check-img2.svg" alt="">Expertise & Knowledge</a></li> <li><a href="#"><img src="assets/img/icons/check-img2.svg" alt="">Quality & Reliability</a></li> </ul> <ul> <li><a href="#"><img src="assets/img/icons/check-img2.svg" alt="">Improved Efficiency</a></li> <li><a href="#"><img src="assets/img/icons/check-img2.svg" alt="">Environment Benefits</a></li> </ul> </div> <div class="about3-pera-text" data-aos="fade-right" data-aos-duration="700" data-aos-easing="linear"> <p>Some services emphasize environmental sustainability as a benefit, Car-sharing services like Zipcar promote reduced emissions and the use of fewer vehicles, contributing to a greener environment.</p> </div> <div class="div" data-aos="fade-right" data-aos-duration="800" data-aos-easing="linear"> <a href="about.html" class="casebtn1">Request Case Evolution <span><i class="fa-regular fa-arrow-right"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="about3-images-area" data-aos="zoom-out" data-aos-duration="1000"> <img src="assets/img/images/about-img3.png" alt=""> <div class="elementors21"> <img src="assets/img/elementor/elementor21.png" alt=""> </div> </div> </div> </div> </div> </div> <!--===== about end=======-->
// homepage3 SCSS Starts // .header-area{ position: absolute; width: 100%; z-index: 9; .site-logo{ position: relative; z-index: 1; } } .header-elements{ display: flex; align-items: center; padding: 30px; justify-content: space-between; .main-menu-ex.homepage1{ ul{ li{ padding: 10px; ul{ li{ padding: 0; a{ display:inline-block; width: 100%; position: relative; z-index: 1; transition: all .4s ease-in-out; padding: 15px 15px 15px 0; &:hover{ color: $color2; transition: all .4s ease-in-out; padding-left: 20px; } &::after{ position: absolute; content: ""; left: 0; top: 50%; height: 2px; width: 10px; transition: all 0.4s ease-in-out; z-index: -1; border-radius: 5px; } &:hover::after{ background: #2B495A; height: 2px; width: 10px; transition: all 0.4s ease-in-out; left: 5px; } } } } } } } ul{ position: relative; 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; } &:hover ul.mega-dropdown-ul{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; z-index: 9; } ul.dropdown-padding{ position: absolute; background: #fff; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; padding: 20px; top: 100px; left: 0 ; width: 250px; visibility: hidden; opacity: 0; transition: all .5s ease-in-out; z-index: -1; border-radius: 5px; li{ display: block; } } a{ font-family: $font4; font-size: 16px; line-height: 16px; color:$color1 ; font-weight: 500; position: relative; z-index: 1; display:inline-block; } } } } ul.mega-dropdown-ul{ position: absolute; background: #fff; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; padding: 16px; top: 100px; left: 0 ; width: 1240px; left: -340px; opacity: 0; visibility: visible; transition: all 0.5s ease-in-out; z-index: -7; border-radius: 5px; } .header.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-color: #ffffff; transition: all 0.3s ease-in-out; z-index: 99; } .header-area.header.homepage5.header-sticky.sticky { background: $bg5; } @-webkit-keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fade-in-down { 0% { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .tx-close { background: rgba(0, 0, 0, 0.04); border: 9px solid transparent; color: #777; width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .tx-close::before, .tx-close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; transform-origin: 50% 50%; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #1b1b1b; } .tx-close::before { -webkit-transform: rotate(45deg); -khtml-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .tx-close::after { -webkit-transform: rotate(-45deg); -khtml-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .tx-close:hover::before, .tx-close:hover::after { -webkit-transform: rotate(0); -khtml-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .slide-bar .tx-close { width: 45px; height: 45px; border-width: 14px; } .sidebar-info .sidebar-logo { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .sidebar-info .sidebar-content { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .sidebar-info .sidebar-menu { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .sidebar-info .ct-content-wrap { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .sidebar-info .sidebar-socials-wrap { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .slide-bar.show .sidebar-info .sidebar-logo { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .2s; opacity: 1; } .slide-bar.show .sidebar-info .sidebar-content { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .3s; opacity: 1; } .slide-bar.show .sidebar-info .sidebar-menu { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .4s; opacity: 1; } .slide-bar.show .sidebar-info .ct-content-wrap { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .5s; opacity: 1; } .slide-bar.show .sidebar-info .sidebar-socials-wrap { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .6s; opacity: 1; background: #fff; } .sidebar-content { max-width: 360px; ; } .sidebar-menu li a { font-size: 36px; text-transform: capitalize; color: var(--color-heading); } .sidebar-menu li a:hover { color: $color1; } /* search css */ .header-search-container{ form{ input{ outline: none; border: none; background: none; font-family: $font4; font-weight: 500; } } } .header-search-form-wrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 400px; z-index: 9999; background-color: #fff; transform: translate3d(0, -100%, 0); transition: transform 0.85s cubic-bezier(0.175, 1, 0.275, 1), visibility 0.8s step-end; } .header-search-form-wrapper.open { transition: transform 0.85s cubic-bezier(0.175, 1, 0.275, 1), visibility 0.8s step-start; transform: translate3d(0, 0, 0); } .header-search-form-wrapper .search-form { margin: 0 auto; position: relative; text-align: center; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } .header-search-form-wrapper .search-form input[type="search"] { height: 65px; line-height: 65px; font-size: 28px; background-color: transparent; text-align: left; color: $color1; border: none; border-bottom: 1px solid #ccc; padding-left: 0; border-radius: 0; width: 100%; color: #000; } .header-search-form-wrapper .search-form input[type="search"]::placeholder { color: #a4a4a4; opacity: 1; } .header-search-form-wrapper .search-form input[type="search"]:-ms-input-placeholder { color: #a4a4a4; } .header-search-form-wrapper .search-form input[type="search"]::-ms-input-placeholder { color: #a4a4a4; } .header-search-form-wrapper .search-submit { position: absolute; height: 50px; width: 50px; bottom: 0; right: 0; background-color: transparent; color: #9F9F9F; font-size: 24px; border: none; color: #2B495A; } .header-search-form-wrapper .tx-search-close { background: #cccccc45; width: 54px; height: 54px; border-width: 18px; position: absolute; top: 0; right: 0; z-index: 2; } .header-search-form-wrapper .tx-search-close::before, .header-search-form-wrapper .tx-search-close::after { background-color: var(--color-black); } .header-search-container { width: 100%; height: 100%; max-width: 1170px; border: 0; padding: 0; background: 0 0; transform: translate3d(0, calc(100% - 100px), 0); transition: transform 0.85s cubic-bezier(0.175, 1, 0.275, 1); margin: auto; opacity: 0; visibility: hidden; } .header-search-form-wrapper.open .header-search-container { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; } .consulting2{ display: flex; align-items: center; position: relative; z-index: 1; &:before{ position: absolute; content: ""; background-color: #DFE0D8; left:50% ; right: 0; top: 0; height: 24px; width: 1px; } a { font-size: 24px; svg{ color: #0B1B23; } } } .sidebar-content{ p { font-family: $font4; font-size: 20px; line-height: 30px; margin-top: 24px; font-weight: 500; margin-bottom: 20px; } } ul.sidebar-menu { li{ display: block; margin-bottom: 0; font-family: $font4; padding: 10px 0; a{ font-size: 25px; font-family: $font4; color:$color2 ; } } } .theme-btnarea{ a{ font-family: $font4; font-size: 16px; line-height: 18px; font-weight: $semi_bold; color: $white; padding: 16px 20px; background:#2B495A; display: inline-block; border-radius: 4px; width: 300px; text-align: center; position: relative; z-index: 1; transition: all 0.3s ease-in-out; &:hover{ transform: translateY(-5px); transition: all 0.4s ease-in-out; } &:after{ position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 0; transition: all 0.4s ease-in-out; z-index: -1; border-radius: 5px; } &:hover:after{ background: #0B1B23; height: 100%; width: 100%; transition: all 0.4s ease-in-out; } } } ul.social-links{ margin-top: 20px; margin-bottom: 32px; li{ display: inline-block; height: 40px; width: 40px; line-height: 15px; text-align: center; color: $color1; border: 1px solid #DFE0D8; border-radius: 50%; transition: all 0.4s ease-in-out; &:hover{ background: #2B495A; color: #fff; transition: all 0.4s ease-in-out } &:hover a{ color: #fff; transition: all 0.4s ease-in-out; } a{ font-size: 20px; transition: all 0.4s ease-in-out; line-height: 40px; &:hover{ color: #fff; transition: all 0.4s ease-in-out; } } } } .sidebar-info{ h1.sidebar-heading{ font-family: $font4; font-size: 30px; line-height: 40px; font-weight: $semi_bold; color: $color1; margin-bottom: 20px; margin-top: 16px; } } .sidebar-info.sidebar-info2{ h1.sidebar-heading{ font-family: $font4; font-size: 30px; line-height: 40px; font-weight: $semi_bold; color: $color1; margin-bottom: 20px; margin-top: 16px; } } .sidebar-info.sidebar-info3{ h1.sidebar-heading{ font-family: $font3; font-size: 30px; line-height: 40px; font-weight: $semi_bold; color: $color1; margin-bottom: 20px; margin-top: 16px; } } .sidebar-info.sidebar-info4{ h1.sidebar-heading{ font-family: $font3; font-size: 30px; line-height: 40px; font-weight: $semi_bold; color: $color1; margin-bottom: 20px; margin-top: 16px; } } .sidebar-contact-header{ h1{ font-family: $font4; font-size: 30px; color: $color1; margin-bottom: 20px; font-weight: $semi_bold; margin-top: 30px; } .phone-side{ margin-left: 12px; } .sidebar-author-area{ display: flex; margin-bottom: 20px; a{ font-family: $font4; font-size: 18px; color: $color1; font-weight: $semi_bold; } } } // homepage3 SCSS Starts //
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