Scribd
Upload
36 views4 pages

1053 Website Index HTML

Uploaded by

larryoluoch22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views4 pages

1053 Website Index HTML

Uploaded by

larryoluoch22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html>
<head>
<title>Law Firm Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Add a responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add a favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<a href="#"><h1><span class="highlight">Law</span> Firm</h1></a>
</div>
<nav id="navbar">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Add a hamburger menu for small screens -->
<div id="menu-icon">
<i class="fa fa-bars"></i>
</div>
</div>
</header>

<section id="showcase">
<div class="container">
<h1>Trusted Legal Counsel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<a href="#" class="button">Learn More</a>
</div>
</section>

<section id="newsletter">
<div class="container">
<h1>Subscribe to Our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email..." required>
<button type="submit" class="button">Subscribe</button>
</form>
</div>
</section>

<section id="boxes">
<div class="container">
<div class="box">
<img src="legal.jpg" alt="Legal Services">
<h3>Legal Services</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<a href="#" class="button">Learn More</a>
</div>
<div class="box">
<img src="mediation.jpg" alt="Mediation">
<h3>Mediation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<a href="#"
<a href="#" class="button">Learn More</a>
</div>
<div class="box">
<img src="consultation.jpg" alt="Consultation">
<h3>Consultation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<a href="#" class="button">Learn More</a>
</div>
</div>
</section>

<section id="testimonials">
<div class="container">
<h1>Testimonials</h1>
<!-- Add a carousel for the testimonials -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<h4>- John Doe</h4>
</div>
<div class="carousel-item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p
<h4>- Jane Doe</h4>
</div>
<div class="carousel-item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales nisi nec lectus
facilisis, vel ullamcorper velit fringilla.</p>
<h4>- Bob Smith</h4>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>

<footer>
<p>Law Firm, Copyright &copy; 2021</p>
</footer>

<!-- Add a sticky navbar with JavaScript -->


<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar


var navbar = document.getElementById("navbar");

// Get the offset position of the navbar


var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when
you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<!-- Add a toggle for the hamburger menu -->
<script>
// Get the menu icon
var menuIcon = document.getElementById("menu-icon");

// Get the navbar


var navbar = document.getElementById("navbar");

// Add a click event listener to the menu icon


menuIcon.addEventListener("click", function() {
// Toggle the "menu-open" class on the navbar
navbar.classList.toggle("menu-open");
});
</script>
<!-- Add Font Awesome icons -->
<script src="https://kit.fontawesome.com/yourcode.js"></script>
</body>
</html>

You might also like