HCI-3 Assignment

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>
<a href="#" class="dropbtn">Profile</a>
<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>
<a href="#" class="dropbtn">Course Registration</a>
<a href="#">Register</a>
<a href="#">view CS Status</a>
</div>
</li>
<a href="#" class="dropbtn">Attendance</a>
<a href="#">Day wise report</a>
<a href="#">Month wise report</a>
<a href="#">Subject wise report</a>
</div>
</li>
<a href="#" class="dropbtn">Internal</a>
<a href="#">View Internal Mark(T&P)</a>
</div>
</li>
5|Page
<a href="#" class="dropbtn">Feedback</a>
<a href="#">Submit Feedback</a>
</div>
</li>
<a href="#" class="dropbtn">Grievance</a>
<a href="#">Submit Grievance</a>
<a href="#">Grievance Status</a>
</div>
</li>
<li><a href="#Password">Change Password</a></li>
<a href="#" class="dropbtn">Courses Offered</a>
<a href="#">CSE</a>
<a href="#">ECE</a>
<a href="#">EEE</a>
</div>
</li>
<a href="#" class="dropbtn">Fee Payment</a>
<a href="#">Regular Fee Payment</a>
<a href="#">Supply Fee Payment</a>
<a href="#">Exam Fee Payment</a>
</div>
</li>
<a href="#" class="dropbtn">Marks Details</a>
<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>

<a style="color:#FFFF33" href="#">Logout</a>

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

<div class="1">
<h1>78.5</h1>
<h4>Attendance %</h4>
</div>
</div>

<div class="1">
<h1>Very Soon</h1>
7|Page
<h4>Academic Results (Backlogs: N/A)</h4>
</div>
</div>

<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

HCI-3 Assignment

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI-3 Assignment

Uploaded by

Copyright:

Available Formats

HCI ASSIGNMENT – 3

NAME : SOORA MAHESH

You might also like