Final
Final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
background-color: #f4f4f4;
.container {
width: 80%;
margin: auto;
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2a05b;
padding: 10px;
.logo {
font-size: 24px;
font-weight: bold;
}
.navbar ul {
list-style-type: none;
display: flex;
gap: 20px;
.navbar ul li {
display: inline;
.navbar ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
.main-content {
display: flex;
margin-top: 20px;
aside {
width: 20%;
background-color: #eee;
padding: 20px;
.departments li {
margin-bottom: 20px;
list-style: none;
font-size: 18px;
.description {
width: 80%;
padding: 20px;
}
.description h2 {
margin-bottom: 20px;
font-size: 22px;
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">Logo</div>
<h2>JSS UNIVERSITY</h2>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Cart</a></li>
</ul>
</div>
</header>
<div class="main-content">
<aside>
<ul class="departments">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
</ul>
</aside>
<section class="description">
<p>JSS college is dedicated to providing a high quality education and fostering a spirit of
innovation.Our college offers a wide range of programs that cater to various disciplines .helping students to
achieve their academic goals.</p>
</section>
</div>
</div>
</body>
</html>
Login page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
background-color: #f4f4f4;
.container {
width: 80%;
margin: 0 auto;
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2a05b;
padding: 10px;
.logo {
font-size: 24px;
font-weight: bold;
}
.navbar ul {
list-style-type: none;
display: flex;
gap: 20px;
.navbar ul li {
display: inline;
.navbar ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
.main-content {
display: flex;
margin-top: 20px;
aside {
width: 20%;
background-color: #eee;
padding: 20px;
.departments li {
margin-bottom: 20px;
list-style: none;
font-size: 18px;
.login-form {
width: 80%;
padding: 20px;
.login-form h2 {
margin-bottom: 20px;
font-size: 22px;
.login-form label {
display: block;
margin-bottom: 10px;
font-size: 16px;
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 4px;
.buttons {
display: flex;
gap: 10px;
.buttons input[type="submit"],
.buttons input[type="reset"] {
border: none;
background-color: #333;
color: #fff;
border-radius: 4px;
cursor: pointer;
.buttons input[type="reset"] {
background-color: #f44;
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">Logo</div>
<h2>JSS UNIVERSITY</h2>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Cart</a></li>
</ul>
</div>
</header>
<div class="main-content">
<aside>
<ul class="departments">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
</ul>
</aside>
<section class="login-form">
<h2>Login Page</h2>
<label for="password">Password:</label>
<div class="buttons">
</div>
</form>
</section>
</div>
</div>
</body>
</html>
Catalogue Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catalogue Page</title>
</head>
<style>
#uni{
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
body{
margin:0;
table{
width: 100%;
.head{
th ,td{
th a{
text-decoration: none;
color: black;
font-size: 25px;
}
.body{
font-size: 20px;
button{
border-radius: 5px;
padding: 7px;
cursor: pointer;
button:hover{
img{
max-width: 100px;
</style>
<body>
<header>
<div class="container">
<div class="logo">
</div>
</div>
<table>
<thead class="head">
<tr >
<th><a href="#">Login</a></th>
<th><a href="#">Catalogue</a></th>
</thead>
<tbody class="body">
<tr>
<td>CSE</td>
<td><strong>Book:</strong>XMLBible <br>
<strong>Author:</strong>Winston <br>
<strong>Publication:</strong>Wiely <br>
</td>
<td>$40.5</td>
<td><button>Add to cart</button></td>
</tr>
<tr>
<td>EEE</td>
<strong>Author:</strong>Watson <br>
</td>
<td>$35.5</td>
<td><button>Add to cart</button></td>
</tr>
<tr>
<td>EEE</td>
<td><strong>Book:</strong>Java 2 <br>
<strong>Author:</strong>Watson <br>
</td>
<td>$35.5</td>
<td><button>Add to cart</button></td>
</tr>
<tr>
<td>CIVIL</td>
</td>
<td>$50</td>
<td><button>Add to cart</button></td>
</tr>
</tbody>
</table>
</header>
</body>
</html>