HTML Website Code For Advocate

 HTML Website Code For Advocate

-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advocate Portfolio</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #f8f9fa;
  color: #333;
}

/* NAVBAR */
header {
  background: #0b1c2c;
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: sticky;
  top: 0;
}

header h1 {
  color: #d4af37;
}

nav a {
  color: #fff;
  margin-left: 20px;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover {
  color: #d4af37;
}

/* HERO */
.hero {
  height: 90vh;
  background: linear-gradient(rgba(11,28,44,0.8), rgba(11,28,44,0.8)),
              url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f') center/cover;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero h2 {
  font-size: 48px;
}

.hero p {
  margin: 15px 0;
}

.btn {
  background: #d4af37;
  padding: 12px 25px;
  color: #000;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

/* SECTION */
section {
  padding: 60px 50px;
}

/* SERVICES */
.services {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.service-box {
  background: #fff;
  padding: 20px;
  flex: 1;
  min-width: 250px;
  border-left: 5px solid #d4af37;
}

/* ABOUT */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.about img {
  width: 300px;
  border-radius: 10px;
}

/* CONTACT */
.contact input, .contact textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

footer {
  background: #0b1c2c;
  color: #fff;
  text-align: center;
  padding: 20px;
}
</style>

</head>
<body>

<!-- HEADER -->
<header>
  <h1>Adv. Your Name</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<!-- HERO -->
<section class="hero" id="home">
  <div>
    <h2>Trusted Legal Expertise</h2>
    <p>Professional Advocate | Court Representation | Legal Advice</p>
    <a href="#contact" class="btn">Book Consultation</a>
  </div>
</section>

<!-- SERVICES -->
<section id="services">
  <h2>Practice Areas</h2>
  <div class="services">
    <div class="service-box">
      <h3>Criminal Law</h3>
      <p>Defense and legal representation in criminal cases.</p>
    </div>
    <div class="service-box">
      <h3>Civil Law</h3>
      <p>Property, contracts, and dispute resolution.</p>
    </div>
    <div class="service-box">
      <h3>Corporate Law</h3>
      <p>Business legal advisory and compliance.</p>
    </div>
    <div class="service-box">
      <h3>Family Law</h3>
      <p>Divorce, custody, and family disputes.</p>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about">
  <h2>About Me</h2>
  <div class="about">
    <img src="https://images.unsplash.com/photo-1603415526960-f8f0c6b8e9b5" alt="advocate">
    <div>
      <p>I am a qualified advocate enrolled with the State Bar Council, practicing law across courts in India.</p>
      <p>My focus is on justice, ethics, and delivering strong legal solutions for clients.</p>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact">
  <h2>Contact</h2>
  <div class="contact">
    <input type="text" placeholder="Your Name">
    <input type="email" placeholder="Email">
    <textarea placeholder="Your Message"></textarea>
    <button class="btn">Send Message</button>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <p>© 2026 Advocate Portfolio | All Rights Reserved</p>
  <p style="font-size:12px;">This website does not solicit clients and complies with Bar Council rules.</p>
</footer>

</body>
</html> 

Comments

Post a Comment

Popular posts from this blog

Differences Between Ubuntu 24.04.2 LTS and Ubuntu 25.04

Differences Between Ubuntu 24.04.2 LTS and Ubuntu 25.04 Ubuntu 24.04.2 LTS is part of the Ubuntu 24.04 LTS series , and it will be the second point release in that LTS series. As an LTS release, Ubuntu 24.04.2 will receive long-term support for 5 years, ensuring stability, security updates, and backports of important features throughout its support lifecycle (up to 2034). Key Features of Ubuntu 24.04.2 LTS (Desktop & Server) : LTS Support : Full support for 5 years (until 2029) with extended support for 5 more years (until 2034). GNOME 44 : Modern, polished desktop environment with features like Wayland improvements, better multi-monitor support, and increased performance. Linux Kernel 6.x : Enhanced hardware support, including support for newer CPUs, GPUs, and other devices. Security Enhancements : Updates for AppArmor , SELinux , and automatic security updates to ensure the system remains secure over time. Cloud & Server Features : Improved support fo...
Read more

Kapardak Bhasma: A Comprehensive Review and use

Image
cowrie shells Kapardak Bhasma: A Comprehensive Review Introduction Kapardak Bhasma, also known as Kapardika Bhasma, is an Ayurvedic calcined preparation obtained from cowrie shells ( Cypraea moneta Linn. ). It is a well-documented mineral formulation used in Ayurvedic medicine for treating various ailments, particularly digestive disorders, respiratory conditions, and metabolic imbalances. Kapardak Bhasma is classified under Sudha Varga , a group of medicinal substances derived from marine sources. Sources and Identification Kapardak (cowrie shell) is a small, glossy, convoluted shell found in marine environments. It comes in various sizes and colors and has been traditionally used in Ayurveda for its medicinal properties. According to classical Ayurvedic texts, Kapardak is categorized into three varieties based on weight: Sardha Niska (4.5 gm) – Superior quality Niska (3 gm) – Medium quality Padona Niska (2.5 gm) – Inferior quality Preparation of Kapardak Bhasma The preparation of Ka...
Read more

Vanga Bhasma: A Traditional Ayurvedic Metallic Formulation and use

Image
Raw Tin Vanga Bhasma: A Traditional Ayurvedic Metallic Formulation Introduction Vanga Bhasma is a well-known Ayurvedic preparation made from tin (Vanga). It has been extensively used in traditional medicine for treating various ailments, including diabetes, respiratory issues, genitourinary disorders, and digestive problems. The preparation of Vanga Bhasma follows rigorous purification and incineration methods to ensure safety and efficacy. Preparation of Vanga Bhasma The preparation of Vanga Bhasma involves the following key steps: Shodhana (Purification) : Raw tin is purified using herbal extracts such as lemon juice or other acidic mediums. The process removes impurities and enhances the bioavailability of the metal. Marana (Incineration Process) : The purified tin is triturated with herbal ingredients and subjected to controlled heating cycles (Puta system). This process converts tin into a fine, bio-absorbable ash. Analytical Standardization : Modern techniques such as X-ray dif...
Read more