Bu Assignment
Bu Assignment
SEL-310
Lab Journal 5
Objectives:
• To create the web pages.
o LMS
o BAHRIA UNIVERSITY WEB SITE
Tools Used:
• 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 {
.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;"> | </p>
<a href=""> SCHOLARSHIPS</a>
<p style="margin-top: 0;"> | </p>
<a href=""> LIBRARIES</a>
<p style="margin-top: 0;"> | </p>
<a href=""> JOBS</a>
<p style="margin-top: 0;"> | </p>
<a href=""> BIC</a>
<p style="margin-top: 0;"> | </p>
<a href=""> TENDERS</a>
<p style="margin-top: 0;"> | </p>
<a href=""> WEBMAIL</a>
<p style="margin-top: 0;"> | </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;">  
    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>
</div>
</div>
</div>
<div style="width: 25px;"></div>
<div class="card" style="width: 18rem; padding-right:50px ">
</ul>
</div>
</div>
</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>
</body>
</html>
OUTPUT:
ANALYSIS:
I completed this task using HTML and INLINE and INTERNAL CSS.