Scribd
Upload
26 views10 pages

HCI-3 Assignment

The document describes a university management system interface with various navigation menu styles like drop down, fall down and cascading menus. It includes code for the interface design with the different menu options, user details, attendance reports and more.

Uploaded by

sooramahesh333
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
26 views10 pages

HCI-3 Assignment

The document describes a university management system interface with various navigation menu styles like drop down, fall down and cascading menus. It includes code for the interface design with the different menu options, user details, attendance reports and more.

Uploaded by

sooramahesh333
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/ 10

HCI ASSIGNMENT – 3

NAME : SOORA MAHESH

HT.NO : 2203A51159

SEC: CSE – C

QUESTION :

Design an interface for University Management System that has navigation through various Menu
Styles (Drop Down, Fall Down and Cascading) Where ever necessary.

PROGRAM :
<!DOCTYPE html>
<html>
<head>
<title>Assignment-3 2203A51159</title>
</head>
<style>
.table-container {
display: inline-block;
margin-right: 20px;
}
table {
border-collapse: collapse;
width: 720px;
}
th, td {
border-bottom: 2px solid black;
padding: 10px;
text-align: left;
}
.table-title {
background-color: #f2f2f2;
font-weight: bold;
}
th:first-child, td:first-child {
border-left: none;
}

1|Page
th:last-child, td:last-child {
border-right: none;
}
.flex-container {
display: flex;
}
.bg{
margin-top:-20px;
}
.im{
margin-bottom:-20px;
}
.small-box>.small-box-footer {
background-color: rgba(0,0,0,.1);
color: rgba(255,255,255,.8);
display: block;
padding: 3px 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 10;
}
.bg1{
background-color:lightblue;
}
.bg2{
background-color:yellow;
}
.bg3{
background-color:green;
}
.bg4{
background-color:red;
}
.small-box.1 {
padding: 10px;
display:inline-block;
}

2|Page
.small-box {
padding: 3px;
width: 400px;
border-radius: 0.25rem;
display: block;
margin-bottom: 20px;
position: left;
}
.container {
display: flex;
align-items: center;
justify-content: center
}

.text {
font-size: 15px;
padding-left: 20px;
color:red;
}

ul {
list-style-type: none;
margin=0;
padding=0;
overflow: hidden;
background-color: #333;
}
li {
float:Left;
}
li a{
display: block;
color:white;
text-align:center;
padding:15px 20px;
text-decoration: none;
}
li.dropdown{

3|Page
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width:160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decorating: none;
dispaly: block;
text-align:Left;
}
.dropdown-content a: hover
{background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
li a:hover, .dropdown:hover .dropbtn{
background-color: blue;
}
</style>
<body>
<div class="im">
<img class="img-rounded" src="https://sraap.in/student/h1.png" width="100%" align="center">
</div>
<ul>
<li><a href="#Home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Academic Details</a>
<div class="dropdown-content">
<a href="#">View Academic Regulations</a>
<a href="#">View Academic Calendar </a>
<a href="#">View Syllabus</a>

4|Page
<a href="#">View Master TT</a>
<a href="#">List of Holidays | Working Days</a>
<a href="#">View Circulars</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Profile</a>
<div class="dropdown-content">
<a href="#">View Profile</a>
<a href="#">Update Profile</a>
<a href="#">Upload Aadhaar </a>
<a href="#">Upload Signature</a>
<a href="#">Exit Survey</a>
<a href="#">Exit Survey Report</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Course Registration</a>
<div class="dropdown-content">
<a href="#">Register</a>
<a href="#">view CS Status</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Attendance</a>
<div class="dropdown-content">
<a href="#">Day wise report</a>
<a href="#">Month wise report</a>
<a href="#">Subject wise report</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Internal</a>
<div class="dropdown-content">
<a href="#">View Internal Mark(T&P)</a>
</div>
</li>
<li class="dropdown">

5|Page
<a href="#" class="dropbtn">Feedback</a>
<div class="dropdown-content">
<a href="#">Submit Feedback</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Grievance</a>
<div class="dropdown-content">
<a href="#">Submit Grievance</a>
<a href="#">Grievance Status</a>
</div>
</li>
<li><a href="#Password">Change Password</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Courses Offered</a>
<div class="dropdown-content">
<a href="#">CSE</a>
<a href="#">ECE</a>
<a href="#">EEE</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Fee Payment</a>
<div class="dropdown-content">
<a href="#">Regular Fee Payment</a>
<a href="#">Supply Fee Payment</a>
<a href="#">Exam Fee Payment</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Marks Details</a>
<div class="dropdown-content">
<a href="#">Overall Marks</a>
<a href="#">Sem Wise Marks</a>
</div>
</li>
</ul>
<div class="bg" align="right" style="background-color:#000000">

6|Page
<strong style="color:#FFFF33">Welcome to SOORA MAHESH - 2203A51159</strong>
&nbsp;&nbsp;
<a style="color:#FFFF33" href="#">Logout</a>
&nbsp;&nbsp;
<img class="img-circle" src="https://media.licdn.com/dms/image/D5603AQEhBYaYwiHXxQ/profile-
displayphoto-
shrink_800_800/0/1691835005620?e=2147483647&v=beta&t=jeE0WxPUQnNlUCRB2bcybK73Fzt7fhWNdU9v
EpQ58PM" width="25" height="25" >
</div>
<div class="container">
<div class="image">
<img class="img-circle" src="https://media.licdn.com/dms/image/D5603AQEhBYaYwiHXxQ/profile-
displayphoto-
shrink_800_800/0/1691835005620?e=2147483647&v=beta&t=jeE0WxPUQnNlUCRB2bcybK73Fzt7fhWNdU9v
EpQ58PM" width="100" height="120">
</div>
<div class="text">
<h2>2203A51159 - SOORA MAHESH</h2>
<h2>Father Name - SOORA UPPALAIAH<h2>
</div>
</div>

<div class="flex-container">
<div class="small-box bg1">
<div class="1">
<h1>2-1</h1>
<h4>Year-Sem</h4>
</div>
</div>
&nbsp;&nbsp;&nbsp;
<div class="small-box bg2">
<div class="1">
<h1>78.5</h1>
<h4>Attendance %</h4>
</div>
</div>
&nbsp;&nbsp;&nbsp;
<div class="small-box bg3">
<div class="1">
<h1>Very Soon</h1>

7|Page
<h4>Academic Results (Backlogs: N/A)</h4>
</div>
</div>
&nbsp;&nbsp;&nbsp;
<div class="small-box bg4">
<div class="2">
<h2>SYED NAWAZ</h2>
</h4>8019998823</h4>
<h4>Mentoring Staff</h4>
</div>
</div>
</div>
<div class="table-container">
<table>
<tr>
<th colspan="5" class="table-title">Last Week Attendance %</th>
</tr>
<b><tr>
<th>S.No</th>
<th>Date</th>
<th>%</th>
</tr>
<tr>
<td><b>1</td>
<td><b><a href="#">10-08-2023</a></td>
<td><b>100</td>
</tr>
<tr>
<td><b>2</td>
<td><b><a href="#">09-08-2023</a></td>
<td><b>90</td>
</tr>
<tr>
<td><b>3</td>
<td><b><a href="#">08-08-2023</a></td>
<td><b>100</td>
</tr>
</table>

8|Page
</div>
<div class="table-container">
<table>
<tr>
<th colspan="5" class="table-title">Course Wise Attendance %</th>
</tr>
<tr>
<th>S.No</th>
<th>Course</th>
<th>%</th>
</tr>
<tr>
<td>1</td>
<td><a href="#">Data Structures</a></td>
<td>90.32</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Discrete Mathematical Structures</a></td>
<td>70.89</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">Human Computer Interface</a></td>
<td>90.98</td>
</tr>
</table>
</div>
</body>
</html>

9|Page
OUTPUT:-

10 | P a g e

You might also like