0% found this document useful (0 votes)
50 views24 pages

Bu Assignment

The document describes creating the front pages of an LMS system and university website using HTML and CSS. Code is provided to demonstrate creating headers, navigation menus, tables and other page elements for both sites.

Uploaded by

komal naeem
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
0% found this document useful (0 votes)
50 views24 pages

Bu Assignment

The document describes creating the front pages of an LMS system and university website using HTML and CSS. Code is provided to demonstrate creating headers, navigation menus, tables and other page elements for both sites.

Uploaded by

komal naeem
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/ 24

Web Engineering

SEL-310

Lab Journal 5

Student Name: KOMAL NAEEM


Enrolment No: 01-134211-038
Class and Section: BSCS (6-A)

Department of Computer Science


BAHRIA UNIVERSITY, ISLAMABAD
Lab # 5: HTML5 – CSS, Responsive Web

Objectives:
• To create the web pages.
o LMS
o BAHRIA UNIVERSITY WEB SITE

Tools Used:

Submission Date: 10/26/2023

Evaluation: Signatures of Lab Engineer:


Task # 1:

• Your are supposed to work for the designing of your LMS and University website front pages
by using the HTML and CSS.

Procedure/Program:

CODE (HTML/CSS):

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.header {
background-color: #f8b400; /* Dark Orange */
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 20px;
height: 5%;
color: white;
}

.info {
display: flex;
align-items: center;
gap: 15px;
}
.Dashboard{
background-color:#d8d4dc;
margin: 20 20 20 20;
padding: 2 2 2 2;
}
.logo {
width: 40px; /* Adjust as per logo size */
margin-right: 10px;
}

.logo-container {
display: flex;
align-items: center;
size: 0cap;
}

nav {
width: 200px;
float: left;
background-color: white;
color: black;
padding: 12px;
height: 80%;

}
#right-cols-item{
display:flex;margin: 20 20 20 20;
padding: 2 2 2 2;
background-color:#f89c14;
}

nav li {
margin-bottom: 10px;
}

main {
float: right;
width: calc(95% - 195px);
background-color: white;
padding: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
padding: 8px 12px;
text-align: left;
}

th {
background-color: #f8b400;
color: white;
}

footer {
clear: both;
}

</style>
</head>

<body>
<div class="header">
<div class="logo-container">
<img src="https://lms.bahria.edu.pk/_viewfiles/images/logo.png" alt="Bahria University Logo"
class="logo">
<h1>Bahria University</h1>
</div>
<h2>Learning Management System</h2>
<div class="info">
<p style="background-color: green; width: 30%; border-radius: 25%;">07:19 PM</p>
<p>KOMAL NAEEM</p>
</div>
</div>

<nav>
<ul>
<li><a href="#" style="text-decoration: none; color: black;">Dashboard</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Course Outline</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Course Plan</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Lecture Notes</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Assignments</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Quizzes</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Miscellaneous</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Papers</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Announcements</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Guidelines</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">Online Library Resources</a></li>
<br>
<li><a href="#" style="text-decoration: none; color: black;">FAQs</a></li>
</ul>
</nav>

<main>

<div id="right-cols">
<div class="Dashboard">
<h2 style="padding-left:15px">DASHBOARD</h2>
</div>

<div id="right-cols-item">
<p style="padding-left:15px">Course Registered<p>
<label style="margin-left:150px" for="Semester">Semester</label>
<select name="dog-names" id="dog-names">
<option value="Fall-2020">Fall-2020</option>
<option value="Fall-2021">Fall-2021</option>
<option value="Fall-2022">Fall-2022</option>
<option value="Fall-2023">Fall-2023</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Sr.No.</th>
<th>Course Title</th>
<th>Class</th>
<th>Semester</th>
<th>Lectures</th>
<th>Assignments</th>
<th>Quizzes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Artificial Intelligence</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">8</td>
<td style="color: green;">2/2</td>
<td style="color: green;">1</td>
</tr>
<tr>
<td>2</td>
<td>Artificial Intelligence Lab</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">5</td>
<td style="color: green;">4/5</td>
<td style="color: green;">0</td>
</tr>
<tr>
<td>3</td>
<td>Numerical Analysis</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">4</td>
<td style="color: green;">1/1</td>
<td style="color: green;">0</td>
</tr>
<tr>
<td>4</td>
<td>Technical Writing & presentation skills</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">5</td>
<td style="color: green;">1/2</td>
<td style="color: green;">1</td>
</tr>
<tr>
<td>5</td>
<td>Web Engeneering</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">10</td>
<td style="color: green;">1/1</td>
<td style="color: green;">1</td>
</tr>
<tr>
<td>6</td>
<td>Web Engeneering Lab</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">10</td>
<td style="color: green;">3/4</td>
<td style="color: green;">1</td>
</tr>
<tr>
<td>7</td>
<td>Introduction to Cloud Computting</td>
<td>BS (CS)-6 (A) Morning</td>
<td>Fall-2023</td>
<td style="color: green;">5</td>
<td style="color: green;">1/1</td>
<td style="color: green;">0</td>
</tr>
</tbody>
</table>

<footer>
<p style="padding-top: 200px;font-size: small;">Copyright © 2023 <a href="#" style="text-
decoration: none; font-size: small;">Bahria University</a>. All rights reserved.</p>
</footer>
</main>

</body>
</html>

Result/Output:

Analysis:

Here in this code, I use html and inline and internal CSS to create LMS web page.
TASK 2

https://www.bahria.edu.pk/
Please design this web page.

CODE:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<title>Bahria University - Official Web Portals</title>
<style>
.ref{
font-family:'Times New Roman', Times, serif;
font-size: 12px;
text-align: right;
display: flex;
padding: 2px;
}
.logo {

margin-left: 80px;
margin-top: -50px;
font-family:'Times New Roman', Times, serif;
display: flex;
}
.search-bar {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: flex-end; /* Places the search bar to the top right */
padding: 10px;
}
.search-and-social {
display: flex;
align-items: center;
gap: 10px;
width: 25px;
height: 25px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;

}
body {
font-family: Arial, sans-serif;
}

.navbar {
background-color: #003366;
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 2px;
}

.navbar > li {
position: relative;
}

.navbar a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #FFF;
transition: background-color 0.3s;
}

.navbar a:hover {
background-color: #003366;
}

.dropdown-content {
margin: 5px;
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #003366;
border: 1px solid #003366;
list-style: none;
padding: 0;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {

padding: 5px 5px;


display: block;
}

.dropdown-content a:hover {
background-color: #003366;
}

.dropdown:hover .dropdown-content {
display: block;
}

.box{
background-color: gainsboro;
}

body1{
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}

.table-container {
width: 80%;
max-width: 600px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 24px;
margin-bottom: 20px;
color: #f67e0f;
text-align: center;
}
.row {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
padding: 10px 0;
}

.date {
width: 60px;
font-size: 18px;
font-weight: bold;
color: #0a74da;
}

.info {
flex: 1;
margin-left: 20px;
}

a {
text-decoration: none;
color: #0a74da;
margin-left: 10px;
}
.boxdate{
height: 40px;
width: 40px;
margin-bottom: 15px;
border: 2px solid blue;
background-color: blue;
color: white;
}

mark{
background-color: #003366;
color: white;
}

.campus{
padding-right: 150px;

}
</style>
</head>
<body>
<div class="ref">
<a href="">SUSTAINABILITY</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> SCHOLARSHIPS</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> LIBRARIES</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> JOBS</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> BIC</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> TENDERS</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> WEBMAIL</a>
<p style="margin-top: 0;"> &nbsp;&nbsp;| &nbsp; &nbsp; </p>
<a href=""> CONTACT US </a>
</div>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
<a href="#"><img src="C:\Users\PMLS\Desktop\fb.png" alt="Facebook" width="20"
height="20"></a>
<a href="#"><img src="C:\Users\PMLS\Desktop\tw.png" alt="Twitter" width="20"
height="20"></a>
<a href="#"><img src="C:\Users\PMLS\Desktop\ln.png" alt="LinkedIn" width="20"
height="20"></a>
<a href="#"><img src= "C:\Users\PMLS\Desktop\flicker.png" alt="flicker"
width="20" height="20"></a>
<a href="#"><img src= "C:\Users\PMLS\Desktop\v.png" alt="viemo" width="20"
height="20"></a>

</div>

<div class="logo">
<img src="C:\Users\PMLS\Desktop\logo.png" height="100" width="100" alt="Bahria logo">
<h1 style="color: #003366;"> <b>Bahria University</b><br>Discovering Knowledge </h1>
</div>

<nav>
<ul class="navbar">
<li><a href="#">HOME</a></li>
<li class="dropdown">
<a href="#">ABOUT US</a>
<ul class="dropdown-content">
<li><a href="#">rector's welcome message</a></li>
<li><a href="#">deans message</a></li>
<li><a href="#">why bahria?</a></li>
<li><a href="#">jobs</a></li>
<li><a href="#">webmail</a></li>
<li><a href="#">vision & mission</a></li>
<li><a href="#"> office directory</a></li>
<li><a href="#">contact us</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#">DIRECTORATES</a>
<ul class="dropdown-content">
<li><a href="#">ADMISSION</a></li>
<li><a href="#">academics</a></li>
<li><a href="#">PGP Directorate</a></li>
<li><a href="#">RIC</a></li>
<li><a href="#">Information tech</a></li>
<li><a href="#">student affairs</a></li>
<li><a href="#">marketing</a></li>
<li><a href="#">BU Advancement</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#">CAMPUSES</a>
<ul class="dropdown-content">
<li><a href="#">E-8 Islamabad</a></li>
<li><a href="#">h-11 islamabad</a></li>
<li><a href="#">Lahore campus</a></li>
<li><a href="#">karachi campus</a></li>
<li><a href="#">medical and dental collage</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#">ACADEMICS</a>
<ul class="dropdown-content">
<li><a href="#">Faculty</a></li>
<li><a href="#">program/roadmap</a></li>
<li><a href="#">academic calender</a></li>
<li><a href="#">aacademic guidance</a></li>
<li><a href="#">medical and dental science</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#">ADMISSIONS</a>
<ul class="dropdown-content">
<li><a href="#">fee structure</a></li>
<li><a href="#">fee refund policy</a></li>
<li><a href="#">general information</a></li>
<li><a href="#">guidelines for PHD</a></li>
<li><a href="#">Apply online</a></li>
<li><a href="#">CBT(demo)</a></li>

</ul>
</li>

<li><a href="#">RESEARCH</a></li>

<li class="dropdown">
<a href="#">ON CAMPUS</a>
<ul class="dropdown-content">
<li><a href="#">news & events</a></li>
<li><a href="#">sports</a></li>
<li><a href="#">schorlarship</a></li>
<li><a href="#">dress code</a></li>
<li><a href="#">facilities</a></li>

</ul>
</li>

<li class="dropdown">
<a href="#">DOWNLOADS</a>
<ul class="dropdown-content">
<li><a href="#">admission quota</a></li>
<li><a href="#">health care</a></li>
<li><a href="#">retake exam</a></li>
<li><a href="#">BU prodigy</a></li>
<li><a href="#">bugle newsletter</a></li>

</ul>
</li>

<li class="dropdown">
<a href="#">ALUMNI</a>
<ul class="dropdown-content">
<li><a href="#">Islamabad</a></li>
<li><a href="#">Lahore</a></li>
<li><a href="#">Karachi</a></li>
<li><a href="#">BUMDC</a></li>
<li><a href="#">Alumni portal</a></li>
</ul>
</li>
</ul>
</nav>
<br>
<center><img src="C:\Users\PMLS\Desktop\Screenshot 2023-10-24 232152.png" width="1000"
height="300"></center>
<br>
<div class="box" >
<div style="display: flex;">
<div style="width: 130px;"></div>
<div class="card" style="width: 18rem; padding: 20px;">
<h5 class="card-title" style="background-color: #003366;color: #FFF;"> &nbsp
&nbsp &nbsp Welcome to Bahria</h5>
<img src="C:\Users\PMLS\Desktop\building.png" class="card-img-top" alt="bu">
<div class="card-body">
<p class="card-text" style="font-size: small;">Bahria University is a Federally
Chartered Public Sector University. The principal seat of Bahria University is at
Islamabad and campuses are at Islamabad, Karachi and Lahore. Bahria University was
established by the Pakistan Navy in 2000, and since then it has steadily grown into one
of the leading higher education institutions in Pakistan. It plays a major role in
grooming future leaders who can make a positive difference to the world around them.
Bahria is a comprehensive university having multidisciplinary programs that includes
Health Sciences, Engineering Sciences, Computer Sciences, Management Sciences, Social
Sciences, Law, Earth and Environmental Sciences, Psychology and Maritime Studies.</p>

<iframe style="margin-top: -1px;margin-left: -40px;" width="300" height="200"


src="https://www.youtube.com/embed/qTfoMGNzrck?si=vBMNH6tpVw1OCSwh" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div style="width: 50px;"></div>
<div class="box" padding-right:50px; pading-top:60px>
<div class="table-container" style="width: 18rem;">
<h1 style="background-color: #f67e0f; color:white;"><img
src="C:\Users\PMLS\Desktop\bell.png" width="20px" height="20px">News & Notifications</h1>
<div class="row">
<div class="boxdate" style="font-size: small">26 oct</div>
<span class="info"> <a href="#" >3rd Convication BULC</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>
<div class="boxdate" style="font-size: small">21 oct</div>
<span class="info"> <a href="#" >BU Endowment Fund</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<div class="boxdate" style="font-size: small">17 oct</div>


<span class="info"> <a href="#" >Aspire Leaders Program</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<div class="boxdate" style="font-size: small">16 oct</div>


<span class="info"> <a href="#" >Admission Open-speing 2024</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<div class="boxdate" style="font-size: small">11 oct</div>


<span class="info"> <a href="#" >Call For Papers</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<div class="boxdate" style="font-size: small">10 oct</div>


<span class="info"> <a href="#" >Admission open MBBS</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<div class="boxdate" style="font-size: small">10 oct</div>


<span class="info"> <a href="#" >Join MBBS and BDs session</a></span>
<a href="#" style="text-align: end;">Read More »</a><hr>

<mark> <a href="#" style="text-align: end;"><img


src="C:\Users\PMLS\Desktop\eye.png" width="20px" height="20px" >view all »</a></mark>

</div>

</div>
</div>
<div style="width: 25px;"></div>
<div class="card" style="width: 18rem; padding-right:50px ">

<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\1.png"


width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\2.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\3.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\4.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\5.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\6.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\7.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\8.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\9.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\10.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\11.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\12.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\13.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\14.png"
width="350px" height="85px"> </a></li><br>
<li class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\15.png"
width="350px" height="85px"> </a></li><br>

</ul>

</div>

</div>

<div style="padding-right: 1px; display: flex;">


<div style="width: 145px;"></div>

<class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\m1.png"


width="170px" height="170px"> </a>
<class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\m2.png"
width="170px" height="170px"> </a>
<class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\m3.png"
width="170px" height="170px"> </a>
<class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\m4.png"
width="170px" height="170px"> </a>
<class="list-group-item"><a href=""><img src="C:\Users\PMLS\Desktop\m5.png"
width="170px" height="170px"> </a>
</div>
</div>
<br><br><br>
<h4 style="font-size: medium; color: #003366;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;OUR CAMPUSES:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; LOCATION</h4>
<p style="color: #3b5998;margin-left: 170px;">--------------------------------------
---------- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----
------------------------------------------- </p>

<a href="#" style="padding-left: 500px;"><img src="C:\Users\PMLS\Desktop\fb.png"


alt="Facebook" width="20" height="20"></a>
<a href="#" ></a><img src="C:\Users\PMLS\Desktop\tw.png" alt="Twitter" width="20"
height="20"></a>
<a href="#" ><img src="C:\Users\PMLS\Desktop\ln.png" alt="LinkedIn" width="20"
height="20"></a>
<a href="#" ><img src= "C:\Users\PMLS\Desktop\flicker.png" alt="flicker"
width="20" height="20"></a>
<a href="# "><img src= "C:\Users\PMLS\Desktop\v.png" alt="viemo" width="20"
height="20"></a>

<ul style="list-style-type:none;margin-left: 180px; font-size: small">


<a class="nav-link" href="#item-1" style="width: 500px; display:
flex;"><b>>> ISLAMABAD CAMPUS</b></a> <br>
<a class="nav-link" href="#item-1" style="width: 500px;"><b>>> LAHORE
CAMPUS</b></a> <br>
<a class="nav-link" href="#item-1" style="width: 500px;"><b>>> KARACHI
CAMPUS</b></a> <br>
<a class="nav-link" href="#item-1" style="width: 500px;"><b>>> BAHRIA
UNIVERSITY MEDICAL AND DENTAL COLLEGE</b></a> <br>
<a class="nav-link" href="#item-1" style="width: 500px;"><b>>> NATIONAL
CENTRE FOR MARITIME POLICY RESEARCH</b></a> <br>
<a class="nav-link" href="#item-1" style="width: 500px;"><b>>> INSTITUTE OF
PTOFESSIONAL PSYCHOLOGY</b></a> <br>

</ul><br><br><br>

<a href="https://www.google.com/maps/place/Bahria+University+-
+Islamabad+Campus/@33.715589,73.028825,15z/data=!4m6!3m5!1s0x38dfbef8c137888d:0xc3ccfd031
ad14ba6!8m2!3d33.7155886!4d73.0288246!16s%2Fg%2F121d17y6?hl=en-US&entry=ttu"> <img
src="C:\Users\PMLS\Desktop\map.png" width="350px" height="260px" style="margin-top: -
450px; margin-left: 800px;">
</a>

<footer style="margin-top: -50px;">


<p style="background-color: #12244b; color: white;height: 50px;overflow:
hidden;" font-size="x-
small"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 2023 Bahria University | All Rights
Reserved&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: gold;font-size:
smaller; font-size: x-small;">Powered by IT Directorate, Bahria University Head
office,
Islamabad</span></p>
</footer>

</body>
</html>
OUTPUT:
ANALYSIS:
I completed this task using HTML and INLINE and INTERNAL CSS.

You might also like