You are on page 1of 8

Home page

Html

<!DOCTYPE html>

<html>

<head>

<title>House Rental Website</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<div class="logo">

<img src="path/to/logo.png" alt="Website Logo">

</div>

</header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="rent-house.html">Rent House</a></li>

<li><a href="about-us.html">About Us</a></li>

<li><a href="contact-us.html">Contact Us</a></li>

</ul>

</nav>

<main>

<section class="hero">

<div class="hero-content">

<h1>Welcome to our House Rental Website</h1>

<p>Find your dream house for rent today!</p>

<a href="rent-house.html" class="btn">Browse Listings</a>

</div>
</section>

<!-- Add more sections and content here as needed -->

</main>

<script src="script.js"></script>

</body>

</html>

css/* Apply global styles */

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

/* Style the header and navigation */

header {

background-color: #333;

color: #fff;

padding: 10px;

text-align: center;

.logo img {

width: 100px; /* Adjust the size of the logo as needed */

nav {

background-color: #333;

color: #fff;

padding: 10px;
text-align: center;

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

nav ul li {

display: inline;

nav ul li a {

color: #fff;

text-decoration: none;

padding: 10px;

nav ul li a:hover {

background-color: #555;

/* Style the hero section */

.hero {

background-image: url('path/to/hero-image.jpg');

background-size: cover;

height: 500px;

display: flex;
justify-content: center;

align-items: center;

.hero-content {

text-align: center;

color: #fff;

.hero h1 {

font-size: 36px;

margin-bottom: 20px;

.hero p {

font-size: 20px;

.btn {

display: inline-block;

padding: 10px 20px;

background-color: #555;

color: #fff;

text-decoration: none;

margin-top: 20px;

font-weight: bold;

.btn:hover {
background-color: #333;

Manage user
Html

<!DOCTYPE html>

<html>

<head>

<title>Manage Users</title>

<link rel="stylesheet" href="admin.css">

</head>

<body>

<header>

<h1>Manage Users</h1>

<nav>

<ul>

<li><a href="admin.html">Dashboard</a></li>

<li><a href="manage-users.html">Manage Users</a></li>

<li><a href="manage-properties.html">Manage Properties</a></li>

<li><a href="reports.html">Reports</a></li>

<li><a href="logout.html">Logout</a></li>

</ul>

</nav>

</header>

<main>

<h2>Manage Users</h2>

<!-- Content for the Manage Users page -->

</main>

<script src="admin.js"></script>
</body>

</html>

Css;

/* Add your custom CSS styles for the lawyer interface page here */

/* Use a similar approach to the existing CSS styles */

.lawyer-interface {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

/* Additional lawyer-specific styles */

/* Add your custom CSS styles for the admin dashboard here */

/* Reset default margin and padding */

body, h1, h2, h3, h4, h5, h6, p, ul, li {

margin: 0;

padding: 0;

/* Set a background color for the body */

body {

background-color: #f1f1f1;

}
/* Header styles */

header {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

/* Navigation styles */

nav {

background-color: #555;

padding: 10px;

nav ul {

list-style-type: none;

display: flex;

justify-content: space-around;

nav ul li {

margin-right: 10px;

nav ul li a {

color: #fff;

text-decoration: none;

padding: 8px 16px;

}
nav ul li a:hover {

background-color: #444;

/* Main section styles */

main {

padding: 20px;

.dashboard-summary {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

/* Additional styles for the lawyer interface */

.lawyer-interface {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

/* Add your additional custom styles as needed */

You might also like