Finally, if you want to create a professional website for your law firm or you are a lawyer, this Modern Law Website Template using HTML, CSS and JavaScript is the best solution.

Modern Law Website Template Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Finally, if you want to create a professional website for your law firm or you are a lawyer, this Modern Law Website Template using HTML, CSS and JavaScript is the best solution.

A free and one-page template written specifically to offer legal practitioners an aesthetic and practical website. From a responsive design, sticky navigation to its clean sections, this template provides everything you require to design a law firm’s website.

GitHub Source: Law Website Template

Features

  • Responsive Design: The template is highly responsive and can fit any screen size that is used.
  • Sticky Header Menu: Remains always on screen so they can be navigated seamlessly by users as they scroll through the page.
  • Call-to-Action Button: A large button that would nudge the visitor to take some action.
  • About Section: A special section for presentation of the firm’s history and principles.
  • Services Section: To clients, promote your law firm and the kinds of cases you handle and expertise you possess.
  • Functional Contact Form: Enables users to post questions to capture leads.
  • Google Map Integration: Has an embedded map to assist clients to locate your office easily.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Law Website

To implement the Modern Law Website Template, just copy down the given HTML, CSS, and JavaScript codes into the HTML, CSS and JavaScript code files respectively. All you need to do after downloading the code is to copy paste the files into your project folders and the template hits your website. This is very flexible and as such you can quickly get your law firm started on the website.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
	
	<head>

		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>LModern Law Website Template | JV Codes</title>
		<link rel="icon" type="image/png" href="images/favicon.png">

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Share:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

		<link rel="stylesheet" href="fonts/fa/css/all.css">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="style-global.css">
		<link rel="stylesheet" href="style-4k.css">
		<link rel="stylesheet" href="style-responsive.css">

		<script src="js/jquery.js"></script>	
		<script src="form/form.js"></script>
	</head>

	<body id="home">

		<header class="p_fixed_advanced ts_1">
			<div class="container dflex_basic">

					<div class="header_col1">
						<a href="#home" class="logo">
							<img src="images/logo.png" alt="" class="img_basic_2 ts_1" />
						</a>
					</div>
					
					<div class="header_col2 dflex_basic">

						<a href="javascript:void();" class="showmenu">
							<span class="fa-solid fa-bars"></span>
						</a>

						<div class="header_menu">
							<a href="javascript:void();" class="hidemenu">
								<span class="fa-solid fa-times"></span>
							</a>
							<nav>
								<ul>
									<li class="active"><a href="#home">Home</a></li>
									<li><a href="#about">About</a></li>
									<li><a href="#practiceareas">Practice Areas</a></li>
									<li><a href="#testimonials">Testimonials</a></li>
									<li><a href="#contact">Contact</a></li>
								</ul>
							</nav>
						</div>

						<a href="tel:+1234567890" class="phone">
							<span class="fa-solid fa-phone"></span>
							+923056275237
						</a>
					</div>

			</div>
		</header>
		<!-- HEADER -->

		<section class="banner flf" id="banner">
			<div class="container dtable p_relative">
				
				<div class="bannertext p_abs_basic_2">
					<h1 class="lht_100">A Trusted Team of Law Professionals.</h1>
				</div>

				<img src="images/pic-1.jpg" alt="" class="img_basic imgfit_basic aspectratio_16_10" />

			</div>
		</section>
		<!-- BANNER -->
		

		<section class="brands flf">
			<div class="container dflex_vhalign dflex_wrap">
				
				<img src="images/brands/lawmagazine.png" alt="" class="img_basic_2 ts_1" />
				<img src="images/brands/newstimes.png" alt="" class="img_basic_2 ts_1" />
				<img src="images/brands/statepress.png" alt="" class="img_basic_2 ts_1" />
				<img src="images/brands/lawyerreviews.png" alt="" class="img_basic_2 ts_1" />

			</div>
		</section>


		<section class="about flf" id="about">
			<div class="container">
				

				<div class="contentblock flf dflex_basic_2">

					<div class="text">
						<h2>About Us</h2>
						<p>
							At [Your Law Firm Name], we are a team of highly skilled and dedicated legal professionals committed to delivering exceptional legal services. With years of experience in various practice areas, we provide strategic legal solutions tailored to our clients' needs. Our goal is to protect your rights and achieve the best outcomes.
						</p>
						<p>
							We pride ourselves on our ethical approach, client-focused advocacy, and unwavering commitment to justice. Whether handling corporate disputes, family law cases, or criminal defense, our team ensures expert guidance at every step. Trust us to stand by your side with integrity, professionalism, and a relentless pursuit of justice.
						</p>
					</div>

					<div class="picture childimg_basic">
						<img src="images/pic-2.jpg" alt="" class="imgfit_basic aspectratio_1_1" />
					</div>
					
				</div>

			</div>
		</section>
		<!-- ABOUT -->

		<section class="practiceareas flf" id="practiceareas">
			<div class="container">
				
				<h2>Practice Areas</h2>

				<div class="pitemswrap dflex_basic_2 dflex_wrap">


					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law1.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Business Litigation</h3>
						<p>
							Our firm specializes in business litigation, protecting companies from legal disputes, contract breaches, and corporate conflicts. We provide strategic representation for businesses of all sizes, ensuring fair resolutions. Trust our expertise to handle complex legal challenges and safeguard your company’s interests effectively.
						</p>
					</div>


					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law2.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Intellectual Property</h3>
						<p>
							We protect your intellectual property rights, including trademarks, copyrights, patents, and trade secrets. Our legal team ensures your creative and business assets remain secure from infringement. Whether registering, enforcing, or defending IP rights, we provide expert guidance to safeguard your innovations and brand identity.
						</p>
					</div>


					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law3.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Criminial Law</h3>
						<p>
							Our experienced criminal defense attorneys provide strong legal representation for individuals facing criminal charges. From misdemeanors to serious felonies, we protect your rights and ensure a fair trial. With a strategic approach and unwavering commitment, we fight for justice and the best possible outcome for our clients. 
						</p>
					</div>

					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law4.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Divorce</h3>
						<p>
							We provide compassionate and strategic legal support for individuals going through divorce. Our experienced attorneys handle asset division, child custody, alimony, and other legal matters with care and professionalism. We strive to protect your rights and ensure a smooth transition to the next chapter of your life.
						</p>
					</div>

					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law5.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Accidents</h3>
						<p>
							Our legal team specializes in accident cases, helping victims secure fair compensation for injuries, medical expenses, and lost wages. Whether it’s a car crash, workplace injury, or slip-and-fall, we fight for your rights and ensure you receive the justice you deserve.
						</p>
					</div>

					<div class="pitem">
						<div class="thumb flf">
							<img src="images/law6.jpg" alt="" class="img_basic imgfit_basic aspectratio_3_2" />
						</div>
						<h3>Real Estate</h3>
						<p>
							We provide expert legal guidance in real estate transactions, property disputes, and contract negotiations. Whether buying, selling, or leasing property, our attorneys ensure smooth, legally sound processes. From title reviews to litigation, we protect your interests and help you navigate complex real estate laws with confidence.
						</p>
					</div>

				</div>

			</div>
		</section>
		<!-- PRACTICE AREAS -->


		<section class="testimonials flf" id="testimonials">
			<div class="container">
				
				<h2>Testimonials</h2>

				<div class="t_items_wrap dflex_basic_2 dflex_wrap">
					
					<div class="item dflex_basic_2 dflex_wrap">
						<div class="picture">
							<img src="images/human-1.jpg" alt="" />
						</div>
						<div class="itemtext flf">
							<p>
								The legal team at [Your Law Firm Name] exceeded my expectations. Their professionalism, dedication, and attention to detail helped me navigate a complex business dispute with confidence. They provided clear guidance at every step, ensuring a favorable outcome. I highly recommend their services to anyone seeking expert legal representation.
							</p>
							<h4>Harley Rose</h4>
							<h5>NYC, USA</h5>
						</div>
					</div>
					<!--item-->

					<div class="item dflex_basic_2 dflex_wrap">
						<div class="picture">
							<img src="images/human-2.jpg" alt="" />
						</div>
						<div class="itemtext flf">
							<p>
								I am incredibly grateful for the outstanding support I received during my divorce case. The attorneys at [Your Law Firm Name] handled everything with compassion and professionalism, making a stressful process much easier. Their expertise in family law ensured a fair settlement. I couldn’t have asked for better representation.
							</p>
							<h4>John Michael</h4>
							<h5>NYC, USA</h5>
						</div>
					</div>
					<!--item-->

					<div class="item dflex_basic_2 dflex_wrap">
						<div class="picture">
							<img src="images/human-3.jpg" alt="" />
						</div>
						<div class="itemtext flf">
							<p>
								After my car accident, I was overwhelmed with medical bills and insurance claims. [Your Law Firm Name] fought tirelessly to secure the compensation I deserved. Their dedication, responsiveness, and legal knowledge gave me peace of mind. I highly recommend them to anyone dealing with personal injury cases
							</p>
							<h4>Scarlett Grace</h4>
							<h5>NYC, USA</h5>
						</div>
					</div>
					<!--item-->


					<div class="item dflex_basic_2 dflex_wrap">
						<div class="picture">
							<img src="images/human-4.jpg" alt="" />
						</div>
						<div class="itemtext flf">
							<p>
								Purchasing my first home was stressful, but [Your Law Firm Name] made the legal process smooth and hassle-free. They reviewed contracts, handled negotiations, and ensured everything was in order. Their real estate expertise gave me confidence in my investment. I’m grateful for their professionalism and highly recommend their services.
							</p>
							<h4>Joshua Lee</h4>
							<h5>NYC, USA</h5>
						</div>
					</div>
					<!--item-->

				</div>
				<!--t_items_wrap-->

			</div>
		</section>
		<!-- TESTIMONIALS -->


		<section class="contact flf" id="contact">
			<div class="container">
				
				<h2>Contact</h2>
				<h4>Use Below Form or Send Email Directly to: <a href="mailto:mail@sitename.com">mail@jvcodes.com</a></h4>


				<form class="flf" id="contactform" method="post" action="form/form.php">
					
					<input type="text" name="name" placeholder="Name*" required />
					<input type="email" name="email" placeholder="Email Address*" required />
					<textarea name="message" placeholder="Message..." required></textarea>
					<button type="submit" id="submit">Send Message <span class="fa-solid fa-envelope"></span></button>

				</form>
				

			</div>
		</section>
		<!-- CONTACT -->

		<section class="map flf">
			<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d675509.4808571636!2d-3.12639131406403!3d55.080020359237764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1679155917272!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
		</section>
		<!-- MAP -->


		<footer class="flf">
			<div class="container dflex_basic">
				
				<div class="copyright">
					Copyright &copy; <span class="year"></span> JV Codes 2025
				</div>

				<div class="social">
					Follow
					<a href="#"><span class="fa-brands fa-facebook"></span></a>
					<a href="#"><span class="fa-brands fa-twitter"></span></a>
					<a href="#"><span class="fa-brands fa-linkedin"></span></a>
				</div>

			</div>
		</footer>
		<!-- FOOTER -->

		<script src="js/custom.js"></script>
		<script src="js/scripts.js"></script>
	</body>
</html>

CSS

Here is the complete code for style.css file to style the law website:

	header{
		font-family: 'Manrope', sans-serif;
		padding: 3.5vw 0;
		border-top: 5px solid #c83c00;
		background: rgba(255,255,255,0);
		z-index: 19;
	}
	header.fixed{
		padding: 1.5vw 0;
		border-top: 3px solid #c83c00;
		background: rgba(255,255,255,1);
		box-shadow:0 0 15px rgba(0,0,0,0.2);
		-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);
	}
	a.logo{
		font-size: 2.2vw;
		color: #c83c00;
		font-weight: bold;
		font-family: 'Share', cursive;
	}
	a.logo img{
		width: 18vw;
	}
	header.fixed a.logo img{
		width: 16vw;
	}
	.header_menu{

	}
	nav{

	}
	nav ul{
		list-style: none;
	}
	nav li{
		float: left;
		font-size: 1.2vw;
		color: #000;
		margin-right: 2vw;
	}
	nav li a{
		color: #000;
		text-decoration: none;
	}


	a.showmenu, a.hidemenu{
		display: none;
	}


	a.phone{
		margin-left: 1vw;
		background: #c83c00;
		color: #fff;
		padding: 1vw 1.5vw;
		font-size: 1.1vw;
	}
	a.phone span{
		margin-right: 5px;
	}



	.banner{
		padding: 12vw 0 8vw 0;
		font-family: 'Manrope', sans-serif;
	}
	.bannertext{
		width: 70%;
		padding: 2vw;
		background: rgba(0,0,0,0.5);
	}
	.bannertext h1{
		text-align:left;
		color:#fff;
		font-size:5vw;
	}




	.brands{
		padding: 0 0 0 0;
	}
	.brands img{
		max-width: 15%;
		margin: 0 2vw;
	}
	.brands img:hover{
		transform: scale(1.1);
	}



	.about{
		padding: 8vw 0;
		font-family: 'Manrope', sans-serif;
	}
	.about .text{
		width: 46%;
	}
	.about .text h2{
		color: #000;
		font-size: 5vw;
		font-weight: 900;
		margin-bottom: 2vw;
	}
	.about .text p{
		color: #666;
		font-size: 1.1vw;
		line-height: 180%;
		margin-bottom: 2vw;
	}
	.about .picture{
		width: 46%;
	}




	.practiceareas{
		background: #c83c00;
		font-family: 'Manrope', sans-serif;
		padding:6vw 0 3vw 0;
	}
	.practiceareas h2{
		color: #fff;
		font-size: 5vw;
		font-weight: 900;
		margin-bottom: 5vw;
	}
	.pitemswrap{

	}
	.pitemswrap .pitem{
		flex-basis: 30%;
		margin-bottom: 5vw;
	}
	.pitemswrap .pitem .thumb{
		margin-bottom: 3vw;
	}
	.pitemswrap .pitem .thumb img{
	}
	.pitemswrap .pitem h3{
		color: #fff;
		font-size: 1.4vw;
		margin-bottom: 1vw;
	}
	.pitemswrap .pitem p{
		color: #fff;
		font-size: 1.1vw;
		list-height:150%;
		margin-bottom: 1vw;
	}


	.testimonials{
		font-family: 'Manrope', sans-serif;
		padding:6vw 0;
	}
	.testimonials h2{
		color: #000;
		font-size: 5vw;
		font-weight: 900;
		margin-bottom: 3vw;
	}
	.t_items_wrap{

	}
	.t_items_wrap .item{
		flex-basis: 46%;
		margin: 3vw 0;
	}
	.t_items_wrap .item .picture{
		float: left;
	}
	.t_items_wrap .item .picture img{
		float: left;
		width:6vw;
		height: auto;
		border-radius:50%;
		-webkit-border-radius:50%;
	}
	.t_items_wrap .item .itemtext{
		float: right;
		width: calc(100% - 9vw);
		color: #000;
	}
	.t_items_wrap .item .itemtext p{
		font-size: 1.1vw;
		line-height: 140%;
		margin-bottom: 1.2vw;
	}
	.t_items_wrap .item .itemtext h4{
		font-size: 1.4vw;
	}
	.t_items_wrap .item .itemtext h5{
		font-size: 1vw;
	}


	.contact{
		background: #fca079;
		padding:6vw 0;
		font-family: 'Manrope';
	}
	.contact h2{
		color: #000;
		font-size: 5vw;
		font-weight: 900;
		margin-bottom: 2vw;
	}
	.contact h4{
		color: #000;
		font-size: 1.2vw;
		font-weight: 900;
	}
	.contact h4 a{
		color: #000;
		border-bottom: 1px solid #000;
	}
	.contact form{
		margin-top: 5vw;
	}
	.contact form input[type="text"], 
	.contact form input[type="email"],
	.contact form textarea{
		float: left;
		width: 47%;
		height: 5vw;
		background: #fff;
		outline: 2px solid #fff;
		border: none;
		padding: 0 0 0 1vw;
		font-family: 'Manrope';
		font-size: 1vw;
	}
	.contact form input[type="email"]{
		float: right;
	}
	.contact form textarea{
		width: 100%;
		height: 9vw;
		margin-top: 3vw;
		padding:1vw;
	}
	.contact form input[type="text"]:focus, 
	.contact form input[type="email"]:focus,
	.contact form textarea:focus{
		outline: 2px solid #c83c00;
	}
	.contact form button{
		float: left;
		width: auto;
		height: 5.5vw;
		background: #c83c00;
		border: none;
		cursor: pointer;
		font-size: 1.2vw;
		font-family: 'Manrope';
		color: #fff;
		padding: 0 2vw;
		margin-top: 2vw;
	}
	.contact form button span{
		margin-left: 5px;
	}

	.map{}
	.map iframe{
		float: left;
		width: 100%;
		height: 29vw;
		margin: 0 0 0 0;
	}


	footer{
		padding: 5vw 0;
		font-family: 'Manrope';
	}
	footer .copyright{
		float: left;
		font-size:1.2vw;
	}
	footer .social{
		float: right;
		font-size:1.2vw;
	}
	footer .social a{
		color: #000;
	}

JavaScript

Here is the complete code for script.js file to function the law firm website:

jQuery(document).ready(function($){
	$('a.showmenu').on('click', function(){
		$('.header_menu').fadeIn();
	});
	$('a.hidemenu').on('click', function(){
		$('.header_menu').fadeOut();
	});


	$('nav ul li').click(function() {
		var getwindowwidth = $(window).width();
		if(getwindowwidth < 900){
			$('.header_menu').fadeOut('slow');
		}
	});

	inPageItems = [];
	$('nav ul li a').each(function(i, item){
		var elem = $(this);
		item = {
			refElement: $(elem.attr('href')),
			parent: elem.parent()
		}
		inPageItems.push(item);
	});
	$('nav ul li a, a.logo').click(function(event){
		event.preventDefault();
		var target = $(this).attr('href');
		$('html,body').animate({scrollTop: ($(target).offset().top-50)}, 'slow');
	});
	$(window).scroll(function(){
		var top = $(document).scrollTop();
		$.each(inPageItems, function(i, item){
			if(top > item.refElement.offset().top-52){
				if(!item.parent.hasClass('active')){
					$('nav ul li').removeClass('active');
					item.parent.addClass('active');
				}
			}else{
				item.parent.removeClass('active');
			}
		});
	});
});

Download Source Code

You can find the source code for the development of this Modern Law Website Template without any legal concerns. Just click on the download button below and pull out the template you see here in this article and utilize it on your projects.

Download Source Code

Conclusion

Using HTML, CSS, and JavaScript, the Modern Law Website Template increases your online visibility in a special way. With the help of this, your law firm’s website will also appear professional and this will definitely make your clients happy.

You are welcome to use this template to enrich your website presenting your portfolio. Do not forget to link back to JV Source Codes website in order to give them credits and get a valuable backlink from them.

Stay tuned for more videos and don’t forget to leave a comment if you need any assistance—I am here to assist.

Download JV Source Codes

Similar Posts

3d Rotating Image Gallery
| |

Create a 3D Rotating Image Gallery in HTML, CSS and JavaScript

Creating engaging and artistic features when it comes to website design is very important in order to attract the attention of the visitors. Some of these are the 3D Rotating Image Gallery which you could find to be really interesting in making your web pages stand out. In this article, I will be glad to…

Modern Responsive Card
| | |

Modern Responsive Card in HTML and CSS

Creating modern, visually appealing designs is essential in today’s web development. As we talk about the design, then the Modern Responsive Card in html css is one of the most widely used items. These cards are versatile, that is why they are suitable for different website and application. Therefore, in this article, I will present…

Navigation Menu Hover Animation
| | |

Navigation Menu Hover Animation in HTML and CSS

A navigation menu is one of the most important elements on any website. Navigation menus assist users in getting around various sections and pages that are in the website. Hover animations are another means through which you can enrich the user experience. The Navigation Menu Hover Animation in HTML, CSS enhances the look of any…

A Hero Section with Video Background is a very effective method in creating an outstanding and impressive website look. It is a design trend which uses an interesting video to convey its message, thus making the experience of the users interesting.
| |

Hero Section With Video Background Using HTML and CSS (Free Source Code)

A Hero Section with Video Background is a very effective method in creating an outstanding and impressive website look. It is a design trend which uses an interesting video to convey its message, thus making the experience of the users interesting. Here is the free source code for this feature, which is written following good…

Leave a Reply

Your email address will not be published. Required fields are marked *