876 lines
51 KiB
HTML
876 lines
51 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/lawyer/lawyer.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="classic" class="custom-cursor">
|
|
|
|
<div class="cursor-page-inner">
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed border-bottom border-color-transparent-white-light">
|
|
<div class="container-fluid">
|
|
<div class="col-auto">
|
|
<a class="navbar-brand" href="demo-lawyer.html">
|
|
<img src="images/demo-lawyer-logo-white.png" data-at2x="images/demo-lawyer-logo-white@2x.png" alt class="default-logo">
|
|
<img src="images/demo-lawyer-logo-black.png" data-at2x="images/demo-lawyer-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-lawyer-logo-black.png" data-at2x="images/demo-lawyer-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto menu-order left-nav ps-60px lg-ps-20px md-ps-15px">
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="demo-lawyer.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon-style02">
|
|
<a href="demo-lawyer-practice-areas.html" class="nav-link">Practice areas</a>
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
|
|
<li><a href="demo-lawyer-practice-areas-details.html"><img src="images/demo-lawyer-practice-areas-icon-01.svg" alt>Human rights law</a></li>
|
|
<li><a href="demo-lawyer-practice-areas-details.html"><img src="images/demo-lawyer-practice-areas-icon-06.svg" alt>Criminal law</a></li>
|
|
<li><a href="demo-lawyer-practice-areas-details.html"><img src="images/demo-lawyer-practice-areas-icon-04.svg" alt>Employment law</a></li>
|
|
<li><a href="demo-lawyer-practice-areas-details.html"><img src="images/demo-lawyer-practice-areas-icon-07.svg" alt>Constitutional law</a></li>
|
|
<li><a href="demo-lawyer-practice-areas-details.html"><img src="images/demo-lawyer-practice-areas-icon-05.svg" alt>Securities law</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-with-icon">
|
|
<a href="demo-lawyer-attorneys.html" class="nav-link">Attorneys</a>
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
|
|
<li>
|
|
<a href="demo-lawyer-attorney-details.html">
|
|
<img src="images/team-55.jpg" alt>
|
|
<div class="submenu-icon-content">
|
|
Evan thomson
|
|
<p>Expert in criminal law.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-lawyer-attorney-details.html">
|
|
<img src="images/team-54.jpg" alt>
|
|
<div class="submenu-icon-content">
|
|
Rosald smith
|
|
<p>Expert in corporate law.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-lawyer-attorney-details.html">
|
|
<img src="images/team-25.jpg" alt>
|
|
<div class="submenu-icon-content">
|
|
Bryan jonhson
|
|
<p>Expert in family law.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-lawyer-attorney-details.html">
|
|
<img src="images/team-24.jpg" alt>
|
|
<div class="submenu-icon-content">
|
|
Jeremy dupont
|
|
<p>Expert in business law.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-lawyer-attorneys.html" class="btn btn-dark-gray btn-round-edge btn-box-shadow align-self-center text-center text-white">Our attorneys</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-lawyer-journal.html" class="nav-link">Journal</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto ms-auto d-none d-lg-flex">
|
|
<div class="header-icon">
|
|
<div class="d-none d-xxl-flex me-25px xl-me-20px lg-me-0">
|
|
<div class="d-flex align-items-center widget-text"><span class="w-40px h-40px bg-base-color d-flex align-items-center justify-content-center me-10px rounded-circle fs-15"><i class="bi bi-telephone-outbound"></i></span><a href="tel:1234567890" class="widget-text text-white-hover">123 456 7890</a></div>
|
|
</div>
|
|
<div class="header-button"><a href="cdn-cgi/l/email-protection.html#761f181019360f19030412191b171f185815191b" class="btn btn-medium btn-transparent-white border-1 border-color-transparent-white-light btn-rounded left-icon"><i class="feather icon-feather-mail"></i>Send a message</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="p-0 bg-dark-gray">
|
|
<div class="swiper full-screen ipad-top-space-margin md-h-600px sm-h-500px swiper-number-pagination-style-01 magic-cursor" data-slider-options="{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-number", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }" data-number-pagination="1">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide cover-background" style="background-image:url('images/demo-lawyer-slider-01.jpg');">
|
|
<div class="container h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-md-7 position-relative text-white">
|
|
<span class="fs-19 text-base-color mb-30px md-mb-20px d-inline-block text-decoration-line-bottom" data-anime="{ "opacity": [0, 1], "duration": 1000, "delay": 200, "easing": "easeOutQuint" }">Professional lawyers team</span>
|
|
<div class="alt-font fs-85 lg-fs-75 xs-fs-60 mb-60px md-mb-45px xs-mb-35px w-70 xl-w-80 md-w-100 ls-minus-2px text-shadow-double-large">
|
|
<span data-fancy-text="{ "opacity": [0, 1], "delay": 500, "speed": 50, "string": ["We are here for the"], "easing": "easeOutQuad" }"></span>
|
|
<span class="fw-700 font-style-italic" data-fancy-text="{ "opacity": [0, 1], "speed": 50, "delay": 1200, "string": ["voice of justice."], "easing": "easeOutQuad" }"></span>
|
|
</div>
|
|
<a href="demo-lawyer-about.html" class="btn btn-extra-large btn-rounded with-rounded btn-white btn-box-shadow fw-600" data-anime="{ "opacity": [0, 1], "delay": 2000, "easing": "easeOutQuad" }">Explore company<span class="bg-dark-gray text-white"><i class="feather icon-feather-arrow-right"></i></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide cover-background" style="background-image:url('images/demo-lawyer-slider-02.jpg');">
|
|
<div class="container h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-md-7 position-relative text-white">
|
|
<span class="fs-19 text-base-color mb-30px md-mb-20px d-inline-block text-decoration-line-bottom" data-anime="{ "opacity": [0, 1], "duration": 1000, "delay": 200, "easing": "easeOutQuint" }">Effective legal solutions</span>
|
|
<div class="alt-font fs-85 lg-fs-75 xs-fs-60 mb-60px md-mb-45px xs-mb-35px w-70 xl-w-80 md-w-100 ls-minus-2px text-shadow-double-large">
|
|
<span data-fancy-text="{ "opacity": [0, 1], "delay": 500, "speed": 50, "string": ["We are here for the"], "easing": "easeOutQuad" }">We provide legal</span>
|
|
<span class="fw-700 font-style-italic" data-fancy-text="{ "opacity": [0, 1], "speed": 50, "delay": 1200, "string": ["voice of justice."], "easing": "easeOutQuad" }">justice advice.</span>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="btn btn-extra-large btn-rounded with-rounded btn-white btn-box-shadow fw-600" data-anime="{ "opacity": [0, 1], "delay": 2000, "easing": "easeOutQuad" }">Explore services<span class="bg-dark-gray text-white"><i class="feather icon-feather-arrow-right"></i></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide cover-background" style="background-image:url('images/demo-lawyer-slider-03.jpg');">
|
|
<div class="container h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-md-7 position-relative text-white">
|
|
<span class="fs-19 text-base-color mb-30px md-mb-20px d-inline-block text-decoration-line-bottom" data-anime="{ "opacity": [0, 1], "duration": 1000, "delay": 200, "easing": "easeOutQuint" }">Experienced business lawyers</span>
|
|
<div class="alt-font fs-85 lg-fs-75 xs-fs-60 mb-60px md-mb-45px xs-mb-35px w-70 xl-w-80 md-w-100 ls-minus-2px text-shadow-double-large">
|
|
<span data-fancy-text="{ "opacity": [0, 1], "delay": 500, "speed": 50, "string": ["We are here for the"], "easing": "easeOutQuad" }">Provide legal</span>
|
|
<span class="fw-700 font-style-italic" data-fancy-text="{ "opacity": [0, 1], "speed": 50, "delay": 1200, "string": ["voice of justice."], "easing": "easeOutQuad" }">consulting services.</span>
|
|
</div>
|
|
<a href="demo-lawyer-about.html" class="btn btn-extra-large btn-rounded with-rounded btn-white btn-box-shadow fw-600" data-anime="{ "opacity": [0, 1], "delay": 2000, "easing": "easeOutQuad" }">Explore company<span class="bg-dark-gray text-white"><i class="feather icon-feather-arrow-right"></i></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="container">
|
|
<div class="row g-0">
|
|
<div class="col-12 position-relative">
|
|
|
|
<div class="swiper-pagination left-0 text-start swiper-pagination-clickable swiper-number"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 position-relative md-mb-50px">
|
|
<div class="overflow-hidden position-relative w-80 md-w-90 ms-auto" data-shadow-animation="true" data-anime="{ "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-lawyer-01.jpg" class="w-100 border-radius-6px" alt>
|
|
</div>
|
|
<div class="position-absolute z-index-1 left-0px bottom-100px sm-left-15px sm-bottom-30px ps-30px pe-30px pt-25px pb-25px bg-white box-shadow-quadruple-large border-radius-5px w-180px text-center overflow-hidden" data-animation-delay="100" data-shadow-animation="true" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="ls-minus-4px text-dark-gray fw-700 alt-font font-style-italic fs-90 lh-80 mb-15px d-block">18</span>
|
|
<span class="d-inline-block lh-22 alt-font fs-22 fw-500 font-style-italic text-dark-gray">years of experience</span>
|
|
<div class="h-150px w-150px border-radius-100 bg-base-color position-absolute left-minus-35px sm-left-minus-40px top-minus-30px sm-top-minus-50px z-index-minus-1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 offset-lg-1" data-anime="{ "el": "childs", "opacity": [0, 1], "translateY": [30, 0], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-lawyer-03.png" class="w-60px mb-25px" alt>
|
|
<h3 class="alt-font fw-500 text-dark-gray ls-minus-1px">We are here to fight against <span class="fw-700 font-style-italic text-decoration-line-bottom-medium">any violance.</span></h3>
|
|
<p class="w-85 lg-w-100 mb-20px">Lorem ipsum is simply dummy text the printing and typesetting industry lorem industry standard.</p>
|
|
|
|
<ul class="p-0 m-0 list-style-02">
|
|
<li class="pb-5px fs-18 text-dark-gray ls-minus-05px fw-600"><i class="feather icon-feather-check-circle icon-small me-10px"></i>Full service corporate & commercial law.</li>
|
|
<li class="pb-5px fs-18 text-dark-gray ls-minus-05px fw-600"><i class="feather icon-feather-check-circle icon-small me-10px"></i>Effective and innovative legal solutions.</li>
|
|
</ul>
|
|
|
|
<div class="d-inline-block mt-30px">
|
|
<a href="demo-lawyer-practice-areas.html" class="btn btn-large btn-rounded with-rounded btn-dark-gray btn-box-shadow me-20px">Learn more<span class="bg-blue-licorice text-white"><i class="feather icon-feather-arrow-right"></i></span></a>
|
|
<a href="tel:1234567890" class="fw-600 d-inline-block align-middle text-dark-gray xs-mt-15px xs-mb-15px"><i class="feather icon-feather-phone-outgoing icon-small me-10px"></i>123 456 7890</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-50px pb-50px bg-very-light-gray overflow-hidden">
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center md-m-0">
|
|
<div class="col-lg-1 p-0">
|
|
<div class="divider-style-03 divider-style-03-03 border-color-base-color w-50 md-w-100 float-end md-mb-15px"></div>
|
|
</div>
|
|
<div class="col-xxl-8 col-xl-9 col-lg-10 position-relative text-center">
|
|
<h5 class="alt-font text-dark-gray fw-500 mb-0 fancy-text-style-4 font-style-italic ls-minus-1px">Committed to providing solutions for <span class="fw-700" data-fancy-text="{ "effect": "rotate", "string": ["contract creation", "commercial affairs", "negotiation support"] }"></span></h5>
|
|
</div>
|
|
<div class="col-lg-1 p-0">
|
|
<div class="divider-style-03 divider-style-03-03 border-color-base-color w-50 md-w-100 md-mt-15px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="overflow-hidden bg-blue-whale position-relative">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-4 md-mb-40px text-center text-lg-start" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-20 text-base-color mb-10px d-block">Areas of practice</span>
|
|
<h3 class="alt-font text-white mb-55px md-mb-40px ls-minus-1px">Different case, need <span class="fw-600 font-style-italic text-decoration-line-bottom-medium">different</span> <span class="fw-600 font-style-italic text-decoration-line-bottom-medium">services.</span></h3>
|
|
<div class="d-flex justify-content-center justify-content-lg-start">
|
|
|
|
<div class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-04 bg-blue-licorice"><i class="bi bi-arrow-left-short icon-very-medium text-white"></i></div>
|
|
<div class="slider-one-slide-next-1 swiper-button-next slider-navigation-style-04 bg-blue-licorice"><i class="bi bi-arrow-right-short icon-very-medium text-white"></i></div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="outside-box-right-25 sm-outside-box-right-0" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="swiper magic-cursor base-color slider-one-slide" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-01.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-35px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-01.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Business law advisor</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-02.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-30px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-02.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Investment litigation</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-03.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-30px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-03.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Trust and estates</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-04.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-30px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-4.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Child care support</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-05.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-30px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-5.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Personal injury advisor</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="swiper-slide">
|
|
|
|
<div class="col interactive-banner-style-08">
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|
<img src="images/demo-lawyer-home-03.jpg" alt />
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-55px xl-p-30px">
|
|
<a href="demo-lawyer-practice-areas.html">
|
|
<img src="images/demo-lawyer-home-icon-03.png" class="w-60px" alt>
|
|
</a>
|
|
<div class="d-flex w-100 align-items-center mt-auto">
|
|
<div class="col last-paragraph-no-margin">
|
|
<h6 class="alt-font fw-500 font-style-italic mb-0 w-80 xl-w-95"><a href="demo-lawyer-practice-areas.html" class="text-white">Trust and estates</a></h6>
|
|
</div>
|
|
<a href="demo-lawyer-practice-areas.html" class="circle-box bg-white w-55px h-55px rounded-circle ms-auto position-relative rounded-box">
|
|
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i>
|
|
</a>
|
|
</div>
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-absolute bottom-minus-40px md-bottom-minus-30px sm-bottom-minus-20px left-0px w-100 text-center d-none d-sm-block">
|
|
<div class="container-fluid">
|
|
<div class="fs-170 lg-fs-140 md-fs-130 sm-fs-100 fw-600 text-outline text-outline-color-white opacity-05 ls-minus-4px sm-ls-minus-1px">legal practices</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row mb-10 md-mb-5 sm-mb-8">
|
|
<div class="col-lg-6 position-relative md-mb-50px" data-anime="{ "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.1, 1], "rotateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="d-flex flex-column box-shadow-quadruple-large bg-white border-radius-8px overflow-hidden position-relative z-index-9" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
|
|
<div class="row row-cols-1 row-cols-sm-2 justify-content-center m-0">
|
|
<div class="col p-10 text-center border-bottom border-end xs-border-end-0 border-color-extra-medium-gray text-center last-paragraph-no-margin">
|
|
<h2 class="fs-60 fw-700 ls-minus-1px text-dark-gray mb-5px alt-font">86%</h2>
|
|
<span class="fs-17">Cases solved</span>
|
|
</div>
|
|
<div class="col p-10 text-center border-bottom border-color-extra-medium-gray text-center last-paragraph-no-margin">
|
|
<h2 class="fs-60 fw-700 ls-minus-1px text-dark-gray mb-5px alt-font">350</h2>
|
|
<span class="fs-17">Happy clients</span>
|
|
</div>
|
|
<div class="col p-10 text-center border-end xs-border-end-0 xs-border-bottom border-color-extra-medium-gray text-center last-paragraph-no-margin">
|
|
<h2 class="fs-60 fw-700 ls-minus-1px text-dark-gray mb-5px alt-font">59+</h2>
|
|
<span class="fs-17">Award winning</span>
|
|
</div>
|
|
<div class="col p-10 text-center text-center last-paragraph-no-margin">
|
|
<h2 class="fs-60 fw-700 ls-minus-1px text-dark-gray mb-5px alt-font">100%</h2>
|
|
<span class="fs-17">Success chance</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="images/demo-lawyer-home-dotted-pattern.png" class="position-absolute right-minus-20px sm-right-0px bottom-minus-30px opacity-5" alt>
|
|
</div>
|
|
<div class="col-xl-5 offset-xl-1 col-lg-6" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<h3 class="alt-font fw-500 text-dark-gray w-85 xl-w-100 ls-minus-1px md-mb-15px">We feel very proud for <span class="fw-700 font-style-italic text-decoration-line-bottom-medium">our achievement.</span></h3>
|
|
<div class="accordion accordion-style-02" id="accordion-style-02" data-active-icon="fa-angle-up" data-inactive-icon="fa-angle-down">
|
|
|
|
<div class="accordion-item active-accordion">
|
|
<div class="accordion-header border-bottom border-color-extra-medium-gray">
|
|
<a href="demo-lawyer.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-01" aria-expanded="true" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-title mb-0 position-relative text-dark-gray fs-19 alt-font">
|
|
<i class="fa-solid fa-angle-up icon-small"></i><span class="fw-600">You deserve time to recover</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div id="accordion-style-02-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
|
|
<p>Lorem ipsum is simply dummy text of the printing industry industry typesetting industry lorem industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header border-bottom border-color-extra-medium-gray fs-19 alt-font">
|
|
<a href="demo-lawyer.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-02" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-title mb-0 position-relative text-dark-gray">
|
|
<i class="fa-solid fa-angle-down icon-small"></i><span class="fw-600">Don't settle for less than you deserve</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div id="accordion-style-02-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
|
|
<p>Lorem ipsum is simply dummy text of the printing industry industry typesetting industry lorem industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header border-bottom border-color-transparent">
|
|
<a href="demo-lawyer.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-03" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-title mb-0 position-relative text-dark-gray fs-19 alt-font">
|
|
<i class="fa-solid fa-angle-down icon-small"></i><span class="fw-600">Experience you can trust</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div id="accordion-style-02-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
|
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-transparent">
|
|
<p>Lorem ipsum is simply dummy text of the printing industry industry typesetting industry lorem industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-xl-3 col-lg-4 md-mb-40px text-center text-lg-start">
|
|
<h4 class="alt-font text-dark-gray mb-0 fw-500">Powerful <span class="fw-700 font-style-italic text-decoration-line-bottom-medium">achievement</span></h4>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-2 col-md-3 sm-mb-30px text-center">
|
|
<img src="images/demo-lawyer-awards-01.png" alt>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-lg-2 col-md-3 col-sm-6 sm-mb-30px text-center">
|
|
<img src="images/demo-lawyer-awards-02.png" alt>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-lg-2 col-md-3 col-sm-6 text-center">
|
|
<img src="images/demo-lawyer-awards-03.png" alt>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-lg-2 col-md-3 col-sm-6 text-center">
|
|
<img src="images/demo-lawyer-awards-04.png" alt>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="p-0" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="container-fluid p-0">
|
|
<div class="row justify-content-center justify-content-md-end g-0">
|
|
<div class="col-lg-6 ps-8 pe-8 pt-6 pb-6 xxl-p-5 sm-p-30px bg-blue-whale">
|
|
<span class="fs-20 text-base-color mb-5px d-block">What we are expert</span>
|
|
<h3 class="alt-font fw-400 text-white ls-minus-1px w-80 lg-w-100">We here for provide high quality <span class="fw-600 font-style-italic text-decoration-line-bottom-medium">legal consultancy.</span></h3>
|
|
<p class="w-80 md-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry lorem industry dummy text.</p>
|
|
<div class="row row-cols-1 row-cols-xxl-2 row-cols-lg-1 row-cols-md-2 mt-40px me-60px xxl-me-30px md-me-0">
|
|
|
|
<div class="col xl-mb-30px">
|
|
<div class="chart-percent d-flex align-items-center">
|
|
<span class="pie-chart-style-01" data-size="100" data-line-width="2" data-percent="95" data-track-color="#152833" data-start-color="#b98e44" data-end-color="#b98e44">
|
|
<span class="percent d-flex align-items-center justify-content-center fs-18 ls-minus-1px text-dark-gray fw-600 bg-base-color w-80px h-80px rounded-circle"></span>
|
|
</span>
|
|
<div class="chart-text fs-18 lh-28 text-white d-inline-block ms-20px w-70 xxl-w-100">Successfully handle cases</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col">
|
|
<div class="chart-percent d-flex align-items-center">
|
|
<span class="pie-chart-style-01" data-size="100" data-line-width="2" data-percent="94" data-track-color="#152833" data-start-color="#b98e44" data-end-color="#b98e44">
|
|
<span class="percent d-flex align-items-center justify-content-center fs-18 ls-minus-1px text-dark-gray fw-600 bg-base-color w-80px h-80px rounded-circle"></span>
|
|
</span>
|
|
<div class="chart-text fs-18 lh-28 text-white d-inline-block ms-20px w-70 xxl-w-100">Experienced business lawyers</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 position-relative">
|
|
<div class="h-100 md-h-600px sm-h-450px cover-background overflow-visible" style="background-image: url('images/demo-lawyer-home-06.jpg')">
|
|
<div class="bg-white ps-50px pe-50px pt-40px pb-40px xxl-p-30px sm-p-25px d-inline-block w-45 xl-w-55 xs-w-85 border-radius-6px position-absolute left-minus-100px bottom-100px md-left-20px md-bottom-minus-30px mb-50px box-shadow-quadruple-large" data-anime="{ "translateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<p class="text-dark-gray fs-20 lh-28 ls-minus-05px fw-500">Making sure that our clients are fully protected in every <span class="font-style-italic fw-700 fs-22 alt-font text-decoration-line-bottom">step of process.</span></p>
|
|
<div class="author">
|
|
<img src="images/avtar-25.jpg" class="rounded-circle w-90px me-15px" alt>
|
|
<div class="d-inline-block align-middle lh-20">
|
|
<span class="fw-600 fs-19 lh-28 ls-minus-05px text-dark-gray d-block mb-5px">Matthew taylor</span>
|
|
<div class="review-star-icon fs-19">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-very-light-gray overlap-height position-relative">
|
|
<div class="container overlap-gap-section">
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="fs-20 text-base-color">Qualified our experts</span>
|
|
<h3 class="alt-font fw-500 text-dark-gray ls-minus-1px">Meet our <span class="fw-700 font-style-italic text-decoration-line-bottom-medium">attorneys</span></h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-xl-4 row-cols-sm-2 justify-content-center" data-anime="{ "el": "childs", "perspective": [900, 1200], "scaleY": [1.1, 1], "rotateY": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col transition-inner-all team-style-06 lg-mb-30px">
|
|
<div class="d-flex flex-column p-40px pb-20px md-p-30px h-100 align-items-center text-center border-radius-6px bg-white box-shadow-quadruple-large">
|
|
<a href="demo-lawyer-attorney-details.html"><img class="rounded-circle w-150px h-150px mb-15px" src="images/team-22.jpg" alt></a>
|
|
<a href="demo-lawyer-attorney-details.html" class="text-dark-gray alt-font fs-19 fw-600 mb-5px">Evan thomson</a>
|
|
<p class="w-90 mx-auto lh-28">I'm Evan, Expert in <a href="demo-lawyer-attorney-details.html" class="text-dark-gray text-decoration-line-bottom fw-500">criminal</a> lawyer.</p>
|
|
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
|
|
<ul class="small-icon dark icon-with-animation">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col transition-inner-all team-style-06 lg-mb-30px">
|
|
<div class="d-flex flex-column p-40px pb-20px md-p-30px h-100 align-items-center text-center border-radius-6px bg-white box-shadow-quadruple-large">
|
|
<a href="demo-lawyer-attorney-details.html"><img class="rounded-circle w-150px h-150px mb-15px" src="images/team-21.jpg" alt></a>
|
|
<a href="demo-lawyer-attorney-details.html" class="text-dark-gray alt-font fs-19 fw-600 mb-5px">Bryan jonhson</a>
|
|
<p class="w-90 mx-auto lh-28">I'm Bryan, Expert in <a href="demo-lawyer-attorney-details.html" class="text-dark-gray text-decoration-line-bottom fw-500">family</a> lawyer.</p>
|
|
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
|
|
<ul class="small-icon dark icon-with-animation">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col transition-inner-all team-style-06 xs-mb-30px">
|
|
<div class="d-flex flex-column p-40px pb-20px md-p-30px h-100 align-items-center text-center border-radius-6px bg-white box-shadow-quadruple-large">
|
|
<a href="demo-lawyer-attorney-details.html"><img class="rounded-circle w-150px h-150px mb-15px" src="images/team-23.jpg" alt></a>
|
|
<a href="demo-lawyer-attorney-details.html" class="text-dark-gray alt-font fs-19 fw-600 mb-5px">Jemmy watson</a>
|
|
<p class="w-90 mx-auto lh-28">I'm Jemmy, Expert in <a href="demo-lawyer-attorney-details.html" class="text-dark-gray text-decoration-line-bottom fw-500">corporate</a> lawyer.</p>
|
|
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
|
|
<ul class="small-icon dark icon-with-animation">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col transition-inner-all team-style-06">
|
|
<div class="d-flex flex-column p-40px pb-20px md-p-30px h-100 align-items-center text-center border-radius-6px bg-white box-shadow-quadruple-large">
|
|
<a href="demo-lawyer-attorney-details.html"><img class="rounded-circle w-150px h-150px mb-15px" src="images/team-56.jpg" alt></a>
|
|
<a href="demo-lawyer-attorney-details.html" class="text-dark-gray alt-font fs-19 fw-600 mb-5px">Jeremy dupont</a>
|
|
<p class="w-90 mx-auto lh-28">I'm Jeremy, Expert in <a href="demo-lawyer-attorney-details.html" class="text-dark-gray text-decoration-line-bottom fw-500">business</a> lawyer.</p>
|
|
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
|
|
<ul class="small-icon dark icon-with-animation">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center mt-5" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="col-auto text-center last-paragraph-no-margin">
|
|
<div class="d-inline-block align-middle me-5px sm-m-5px position-relative top-3px"><i class="bi bi-award icon-medium text-base-color"></i></div>
|
|
<div class="d-inline-block text-dark-gray fs-20 align-middle ls-minus-05px">We have <span class="text-decoration-line-bottom fs-26 fw-700 font-style-italic alt-font">10 years</span> of experience and achieved <span class="text-decoration-line-bottom fs-26 fw-700 font-style-italic alt-font">some awards.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="p-0 sm-pt-50px">
|
|
<div class="container overlap-section">
|
|
<div class="row g-0 overflow-hidden" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="col-12 cover-background p-10 border-radius-6px position-relative" style="background-image: url('images/demo-lawyer-home-07.jpg')">
|
|
<div class="fs-140 alt-font text-base-color d-block lh-34">“</div>
|
|
<h6 class="w-380px sm-w-85 text-white alt-font lh-40 mb-25px"><span class="fw-600 font-style-italic text-decoration-line-bottom-medium">Everyone wants</span> to say they hate lawyers and yet I've never met a parent who didn't want their <span class="fw-600 font-style-italic text-decoration-line-bottom-medium">kid to be a lawyer.</span></h6>
|
|
<a href="demo-lawyer.html#" class="text-base-color fs-15 fw-600 ls-1px text-uppercase position-relative z-index-2">@Jason Statham</a>
|
|
</div>
|
|
<div class="position-absolute bottom-minus-40px ls-minus-6px left-0px w-100 text-center" data-bottom-top="transform: translate3d(-180px, 0px, 0px);" data-top-bottom="transform: translate3d(180px, 0px, 0px);">
|
|
<div class="fs-200 sm-fs-180 xs-fs-140 fw-700 alt-font font-style-italic text-white opacity-1 ls-minus-2px">success</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="fs-20 text-base-color">Our news and blog</span>
|
|
<h3 class="alt-font fw-500 text-dark-gray ls-minus-1px">Updated <span class="fw-700 font-style-italic text-decoration-line-bottom-medium">latest news</span></h3>
|
|
</div>
|
|
</div>
|
|
<div class="row sm-m-0">
|
|
<div class="col-12 p-0">
|
|
<ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuint" }">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item">
|
|
<div class="card border-0 border-radius-8px overflow-hidden box-shadow-quadruple-large">
|
|
<div class="blog-image">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="d-block"><img src="images/demo-lawyer-blog-01.jpg" alt /></a>
|
|
<div class="blog-categories">
|
|
<a href="demo-lawyer-journal.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-600 ls-minus-05px">Lawyer</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-45px md-p-30px">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="card-title mb-15px fw-600 fs-22 alt-font text-dark-gray d-inline-block">What to do if teammates do not appreciate you?</a>
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|
<div class="me-auto fw-500">
|
|
<span class="blog-date d-inline-block">30 March 2023</span>
|
|
<div class="d-inline-block author-name">By <a href="demo-lawyer-journal.html" class="text-dark-gray text-decoration-line-bottom fw-600">Den viliamson</a></div>
|
|
</div>
|
|
<div class="like-count">
|
|
<a href="demo-lawyer.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">65</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item">
|
|
<div class="card border-0 border-radius-6px overflow-hidden box-shadow-quadruple-large">
|
|
<div class="blog-image">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="d-block"><img src="images/demo-lawyer-blog-02.jpg" alt /></a>
|
|
<div class="blog-categories">
|
|
<a href="demo-lawyer-journal.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-600 ls-minus-05px">Lawyer</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-45px md-p-30px">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="card-title mb-15px fw-600 fs-22 alt-font text-dark-gray d-inline-block">Getting a consultant is the best decision.</a>
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|
<div class="me-auto fw-500">
|
|
<span class="blog-date d-inline-block">28 March 2023</span>
|
|
<div class="d-inline-block author-name">By <a href="demo-lawyer-journal.html" class="text-dark-gray text-decoration-line-bottom fw-600">Hugh macleod</a></div>
|
|
</div>
|
|
<div class="like-count">
|
|
<a href="demo-lawyer.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">25</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item">
|
|
<div class="card border-0 border-radius-6px overflow-hidden box-shadow-quadruple-large">
|
|
<div class="blog-image">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="d-block"><img src="images/demo-lawyer-blog-03.jpg" alt /></a>
|
|
<div class="blog-categories">
|
|
<a href="demo-lawyer-journal.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-600 ls-minus-05px">Lawyer</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-45px md-p-30px">
|
|
<a href="demo-lawyer-blog-single-creative.html" class="card-title mb-15px fw-600 fs-22 alt-font text-dark-gray d-inline-block">Research and strategy are vital for the market.</a>
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|
<div class="me-auto fw-500">
|
|
<span class="blog-date d-inline-block">26 March 2023</span>
|
|
<div class="d-inline-block author-name">By <a href="demo-lawyer-journal.html" class="text-dark-gray text-decoration-line-bottom fw-600">Walton smith</a></div>
|
|
</div>
|
|
<div class="like-count">
|
|
<a href="demo-lawyer.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">30</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="footer-dark bg-blue-whale py-0">
|
|
<div class="container footer-top pt-50px pb-50px md-pt-35px md-pb-35px">
|
|
<div class="row justify-content-center">
|
|
|
|
<div class="col-12 position-relative justify-content-center align-items-center text-center">
|
|
<img src="images/demo-lawyer-07.png" class="position-absolute left-90px lg-left-15px opacity-1 top-minus-35px sm-top-minus-25px w-10 sm-w-15 xs-w-80px" alt>
|
|
<h5 class="alt-font d-inline-block align-middle text-white mb-0 me-35px md-me-0 position-relative">Contact us today for a <span class="text-decoration-line-bottom-medium fw-600 font-style-italic">free case evaluation?</span></h5>
|
|
<a href="demo-lawyer-contact.html" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600 md-mt-40px sm-mt-30px">Free consultation<span class="bg-dark-gray text-white"><i class="feather icon-feather-arrow-right"></i></span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row pt-50px pb-50px md-pt-35px md-pb-35px">
|
|
|
|
<div class="col-lg-2 text-center text-lg-start last-paragraph-no-margin md-mb-15px">
|
|
<a href="demo-lawyer.html" class="footer-logo d-inline-block">
|
|
<img src="images/demo-lawyer-logo-white.png" data-at2x="images/demo-lawyer-logo-white@2x.png" alt>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-4 last-paragraph-no-margin text-center text-lg-start md-mb-40px sm-mb-30px">
|
|
<span class="fs-22 alt-font md-w-80 xs-w-100 m-auto d-inline-block">Over the years, our commitment to excellence and passion for our <span class="text-white font-style-italic fw-500 text-decoration-line-bottom">clients has been recognized.</span></span>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 offset-xl-1 col-sm-6 text-center text-lg-start last-paragraph-no-margin xs-mb-30px">
|
|
<span class="alt-font d-inline-block text-white mb-5px fs-18"><i class="bi bi-geo-alt me-10px"></i>Landmark</span>
|
|
<p class="w-80 xs-w-100 d-inline-block">27 Eden eden centre, Orchard, Paris, France</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-xl-2 col-lg-3 col-sm-6 text-center text-lg-start last-paragraph-no-margin">
|
|
<span class="alt-font d-inline-block text-white mb-5px fs-18"><i class="bi bi-telephone-outbound me-10px"></i>Contact</span>
|
|
<p><a href="tel:1234567890">(123) 456 7890</a></p>
|
|
<a href="cdn-cgi/l/email-protection.html#5a33343c351a3e35373b333474393537" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="365f5850597652595b575f581855595b">[email protected]</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container footer-bottom pt-25px pb-25px">
|
|
<div class="row align-items-center">
|
|
|
|
<div class="col-lg-7 text-center text-lg-start sm-pb-10px">
|
|
<ul class="footer-navbar md-lh-normal">
|
|
<li class="nav-item"><a href="demo-lawyer.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-practice-areas.html" class="nav-link">Practice areas</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-attorneys.html" class="nav-link">Attorneys</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-journal.html" class="nav-link">Journal</a></li>
|
|
<li class="nav-item"><a href="demo-lawyer-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-5 text-center text-lg-end last-paragraph-no-margin">
|
|
<p>© 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-lawyer.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |