Scribd
Upload
8 views13 pages

Final

The document contains HTML code for three web pages: a Home Page, a Login Page, and a Catalogue Page for JSS University. Each page features a consistent layout with a header, navigation links, and main content areas, including a welcome message, login form, and a table listing books with details. The styling is done using CSS to ensure a cohesive look across the pages.

Uploaded by

gimowec215
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
8 views13 pages

Final

The document contains HTML code for three web pages: a Home Page, a Login Page, and a Catalogue Page for JSS University. Each page features a consistent layout with a header, navigation links, and main content areas, including a welcome message, login form, and a table listing books with details. The styling is done using CSS to ensure a cohesive look across the pages.

Uploaded by

gimowec215
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/ 13

HOME PAGE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Home Page</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

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">

<h2>WELCOME TO JSS UNIVERSITY</h2>

<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">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Page</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

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: 1px solid #ccc;

border-radius: 4px;

.buttons {

display: flex;

gap: 10px;

.buttons input[type="submit"],

.buttons input[type="reset"] {

padding: 10px 20px;

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>

<form action="#" method="POST">

<label for="username">User Name:</label>

<input type="text" id="username" name="username">

<label for="password">Password:</label>

<input type="password" id="password" name="password">

<div class="buttons">

<input type="submit" value="Submit">


<input type="reset" value="Reset">

</div>

</form>

</section>

</div>

</div>

</body>

</html>
Catalogue Page:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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{

background-color: rgb(255, 192, 33);

th ,td{

border: 1px solid rgb(206, 204, 204);

th a{

text-decoration: none;

color: black;

font-size: 25px;
}

.body{

font-size: 20px;

button{

background-color: rgb(251, 191, 25);

border-radius: 5px;

padding: 7px;

cursor: pointer;

button:hover{

background-color: rgb(255, 204, 46);

img{

max-width: 100px;

</style>

<body>

<header>

<div class="container">

<div class="logo">

<img src="photo/jss logo.jpg" alt="">

<span id="uni">JSS UNVERSITY</span>

</div>

</div>

<table>

<thead class="head">

<tr >

<th ><a href="#">Home</a></th>

<th><a href="#">Login</a></th>

<th> <a href="#">Registration</a></th>

<th><a href="#">Catalogue</a></th>

<th> <a href="#">Cart</a></th>


</tr>

</thead>

<tbody class="body">

<tr>

<td>CSE</td>

<td><img src="photo/images.jpg" alt="error"></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>

<td><img src="photo/AI.jpg" alt=""></td>

<td> <strong>Book:</strong>Java 2 <br>

<strong>Author:</strong>Watson <br>

<strong>Publication:</strong> BPB publication <br>

</td>

<td>$35.5</td>

<td><button>Add to cart</button></td>

</tr>

<tr>

<td>EEE</td>

<td><img src="photo/java.jpg" alt=""></td>

<td><strong>Book:</strong>Java 2 <br>

<strong>Author:</strong>Watson <br>

<strong>Publication:</strong>BPB publication <br>

</td>

<td>$35.5</td>

<td><button>Add to cart</button></td>

</tr>
<tr>

<td>CIVIL</td>

<td><img src="photo/html.jpg" alt=""></td>

<td><strong>Book:</strong>HTML in 24 hours <br>

<strong>Author:</strong>Sam Peter <br>

<strong>Publication:</strong>Sam Publication <br>

</td>

<td>$50</td>

<td><button>Add to cart</button></td>

</tr>

</tbody>

</table>

</header>

</body>

</html>

You might also like