Internet programming
Prepared by:
Farman Ullah
Roll No: - 221135
BSSE
Section (A)
December 2024
SCREENSHOTS OF THE PROJECT
HEADER
MAIN
Footer
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUUAST</title>
<link rel="stylesheet" href="css/fauut.css">
<!-- For icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-
beta3/css/all.min.css">
<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
</head>
<body>
<div class="maincontent">
<div class="bagoftop">
<!-- Navbar -->
<div class="top-links">
<a href="#">Webmail</a>
<div class="dropdown">
<a href="#">Location Map</a>
<ul class="submenu">
<li><a href="#">Main Campus</a></li>
<li><a href="#">Abdul Haq Campus</a></li>
<li><a href="#">Islamabad Campus</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Community Service</a>
<ul class="submenu">
<li><a href="#">Workshop on Sign Language</a></li>
<li><a href="#">Free Medical Camp</a></li>
<li><a href="#">Ramadan Fasting and Obesity</a></li>
<li><a href="#">Free medical camp for BMI and lipid Profile</a></li>
</ul></div>
<div class="dropdown">
<a href="#">News</a>
<ul class="submenu">
<li><a href="#">Fast Flood Relief</a></li>
<li><a href="#">Private Section</a></li>
<li><a href="#">Updates</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Events</a>
<ul class="submenu">
<li><a href="#">Chemistry Expo</a></li>
<li><a href="#">14 August Yumi Azadi</a></li>
<li><a href="#">Workshop on HPLC</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Library</a>
<ul class="submenu">
<li><a href="#">Catalogue</a></li>
<li><a href="#">About Library</a></li>
<li><a href="#">Library Resources</a></li>
<li><a href="#">Library Digital</a></li>
<li><a href="#">Library Service</a></li>
<li><a href="#">Library Policy</a></li>
</ul> </div>
<a href="#">Tenders</a>
<a href="#">Press Release</a>
<a href="#">Pakistan Citizen Portal</a>
<a href="#">Convocation</a>
<a href="#">FUUAST Official Social Media</a>
</div></div>
<nav class="navbar">
<div class="logo-section">
<img src="./images/finallogox.png" alt="University Logo" class="logo">
</div>
<div class="main-links">
<div class="dropdown">
<a href="#">About Us</a>
<ul class="submenu">
<li><a href="#">Vice Chancellor Message</a></li>
<li><a href="#">Our University</a></li>
<li><a href="#">University Organization</a></li>
<li><a href="#">Anti-Harassment Committee</a></li>
<li><a href="#">Affiliated Colleges</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Academics</a>
<ul class="submenu">
<li class="dropdown">
<a href="#">Faculty and Department</a> </li>
<li><a href="#">Graduation</a></li>
<li><a href="#">Research Management Council</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Admission</a>
<ul class="submenu">
<li><a href="#">Admission Morning 2025</a></li>
<li><a href="#">Admission Evening 2024</a></li>
<li><a href="#">Admission 2024 Postdoc</a></li>
<li><a href="#">Admission 2024 MPhil </a></li>
<li><a href="#">Private Registration</a></li>
<li><a href="#">Evening Fee Structure</a></li>
<li><a href="#">Morning Fee Structure</a></li>
<li><a href="#">Admission Form for Foreign Students</a></li>
</ul> </div>
<div class="dropdown">
<a href="#">Research</a>
<ul class="submenu">
<li><a href="#">Mini Project</a></li>
<li><a href="#">Funding Streams</a></li>
<li><a href="#">Research Publication </a></li>
<li><a href="#">Research Publication </a></li>
<li><a href="#">Journals</a></li
<li><a href="#">Karoonjhar Research Journals</a></li>
<li><a href="#">Journals of Biology</a></li>
</ul></div>
<div class="dropdown">
<a href="#">Administration</a>
<ul class="submenu">
<li><a href="#">Register</a></li>
<li><a href="#">Treasurer</a></li>
<li><a href="#">IT Department</a></li>
<li><a href="#">ORIC</a></li><li>
<a href="#">Library</a></li></ul></div>
<a href="#">Convocation</a></div></nav>
<div class="slider">
<img src="./images/admisionn.png" width="100%" height="100%" alt=""></div>
<!-- cards -->
<div class="mycontainer">
<div class="container my-4 content">
<div style="width:90%" class="row text-centers">
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green;">Students</h5><div>
<img src="./images/std.jpg" class="card-img-top" alt="Students"
style="border: 6px solid rgb(204, 204, 204); line-height: 20px; font-size: 13px;
width: 225.688px; height: 118px; object-fit: cover;">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ Student
Portal</a> </li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Enrollment
Portal</a>
</li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Private Section
Updates</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ more</a></li>
</ul></div></div> </div>
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green;">Admission</h5><div>
<img src="./images/admission.jpeg" class="card-imgf-top" alt="Admissions"
style="border: 6px solid rgb(204, 204, 204); width: 241.891px; height: 110.969px;
object-fit: cover; transform: translate(-11px, 0px);">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ Admission 2025
Morning</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Admission 2024
Evening</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ MS Admission
Portal</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ more</a></li>
</ul></div></div></div>
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green;">Departments</h5><div>
<img src="./images/dept.jpeg" class="card-img-top" alt="Departments"
style="border: 6px solid rgb(204, 204, 204); width: 100%; height: 118px; object-
fit: cover;">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ I.T
Department</a>
</li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Medical
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Examination
dept</a>
</li>
<li><a href="#" style="text-decoration: none; color: green;">➤ more</a></li>
</ul></div></div></div>
<div class="row text-centers">
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green; ">Faculties</h5><div>
<img src="./images/facultye.jpeg"
style="border: 6px solid rgb(204, 204, 204); width: 246.759px; height:
134.731px; object-fit: cover; transition: none;">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ I.T
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Medical
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Examination
dept</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤
more</a></li>
</ul></div></div></div>
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green;">About University</h5>
<div>
<img src="./images/aboutuni.jpeg" class="card-img-top" alt="Departments"
style="border: 6px solid rgb(204, 204, 204); width: 205.688px; height: 127px;
object-fit: cover; transform: translate(19px, 0px); position: relative; will-change: top, left; left:
42px; top: -3px;">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ I.T
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Medical
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Examination
dept</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤
more</a></li>
</ul></div></div></div>
<div class="col-md-4 mb-4">
<h5 class="card-title" style="color: green;position: relative; left: 110px; top: -
20px;">
Quick Links</h5>
<div style="position: relative; left: 110px; top: -20px;">
<img src="./images/quicklink.jpeg" class="card-img-top" alt="Departments"
style="border: 6px solid rgb(204, 204, 204); width: 100%; height: 130px; object-
fit: cover;">
<div class="card-body">
<ul class="list-unstyled text-left">
<li><a href="#" style="text-decoration: none; color: green;">➤ I.T
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Medical
Department</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤ Examination
dept</a></li>
<li><a href="#" style="text-decoration: none; color: green;">➤
more</a></li>
</ul></div></div></div></div></div></div>
<div class="main-containedr sidebar">
<div class="right-sidebar"><ul>
<li><a href="#">Pakistan Citizen Portal</a></li>
<li><a href="#">Student Portal</a></li>
<li><a href="#">Enrollment Portal</a></li>
<li><a href="#">HEC-Digital Learning</a></li>
<li><a href="#">PM Laptop Scheme</a></li>
<li><a href="#">Bait Ul Mall</a></li>
<li><a href="#">Prime Minister Fee Reimbursement</a></li>
<li><a href="#">Ehsaas Undergraduate </a></li>
<li><a href="#">HEC Need-Based Scholarship</a></li>
<li><a href="#">Sindh Education Endowment </a></li>
<li><a href="#">Private Section Updates</a></li>
<li><a href="#">IT Department</a></li>
<li><a href="#">ORIC</a></li>
<li><a href="#">Digital Library</a></li>
<li><a href="#">FUUAST Library</a></li>
<li><a href="#">Press release</a></li>
<li><a href="#">Pension Form</a></li>
</ul></div></div></div>
<div class="myFooter"
style="--top: 1243px; --left: 352.141357421875px; --position: absolute; --width:
72268.15625px; --height: 561.390625px; width: 1682.52px; transform: translate(48.593px, 0px);">
<div class="footer">
<div class="footer-container">
<div class="footer-section">
<h3>ABOUT FUUAST</h3><ul>
<div class="textdesign">
<li><a href="#">Vice Chancellor Message</a></li>
<li><a href="#">Our University</a></li>
<li><a href="#">University Organization</a></li>
<li><a href="#">Affiliated College</a></li>
<li><a href="#">Affiliated Madaris</a></li>
</div></ul></div>
<div class="footer-section">
<h3>NEWS & ANNOUNCEMENT</h3><ul>
<div class="textdesign">
<li><a href="#">Press release</a></li>
<li><a href="#">Jobs 2024</a></li>
<li><a href="#">Chemistry Expo 2024</a></li>
<li><a href="#">Convocation 2024</a></li>
<li><a href="#">Private Section Updates</a></li>
<li><a href="#">FUUAST Official Social Media</a></li></div></ul></div>
<div style="color: white;" class="footer-section">
<h3>CONTACT</h3>
<ul style="color: white;"> <div>
<li>FUUAST</li>
<li>MSC Block, Block 9,</li>
<li>Gulshan-e-Iqbal, Karachi – 75300, Pakistan.</li>
<li>Phone: (0092-21) 99244141-9</li>
<li>Email: [email protected]</li>
</div></ul></div></div></div>
<div class="social-icons">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a></div>
<div class="footer-bottom">
<div class="left">
Developed By I.T Department of FUUAST</div>
<div class="right">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Web Mail</a>
<a href="#">Contact</a>
<a style="color: white;font-weight:bolder" href="#">↑top</a>
</div>
</div></div></body>
</html>
CSS CODE
*{
margin: 0;
padding: 0;
box-sizing: border-box; }
html {
background-color: #f4f4f4;
scroll-behavior: smooth; }
body {
font-family: Arial, sans-serif;
line-height: 1.5;
color: #212529;
background-color: #f8f9fa;
margin: 0; }
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px; }
.row {
display: flex;
flex-wrap: wrap;
margin: -15px; }
.col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
padding: 15px; }
.text-center {
text-align: center;
.navbar {
background-color: #007bff;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 1400px; }
.dropdown {
position: relative;
display: inline-block; }
.dropdown:hover .submenu {
display: block; }
.submenu {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 200px;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px; }
.submenu li {
list-style: none;
padding: 5px 10px;}
.submenu li a {
text-decoration: none;
color: #212529;}
.submenu li a:hover {
color: #007bff;}
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 15px 0;}
.card img {
max-width: 100%;
border-bottom: 1px solid #ddd;}
.card-body {
padding: 15px;}
.card-title {
margin-bottom: 10px;
font-size: 1.25rem;
font-weight: bold;}
.list-unstyled {
list-style: none;
padding: 0;}
.list-unstyled li {
margin-bottom: 5px;}
.list-unstyled a {
text-decoration: none;
color: #007bff;}
.list-unstyled a:hover {
color: #0056b3;
text-decoration: underline;}
a {color: #007bff;
text-decoration: none;}
a:hover {
color: #0056b3;
text-decoration: underline;}
.mb-4 {
margin-bottom: 1.5rem;}
.my-4 {
margin: 1.5rem 0;}
.text-left {
text-align: left;}
.text-center {
text-align: center;}
.text-right {
text-align: right;}
.bg-light {
background-color: #f8f9fa;}
.border {
border: 1px solid #dee2e6;
.p-3 {
padding: 1rem;}
.p-4 {
padding: 1.5rem;
max-width: 100%;}}
body {
font-family: Arial, sans-serif;
overflow-x: hidden;
height: 100%;}
.centered-box {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #f4f4f4;
color: white;
height: 100vh;
padding: 0 250px;
box-sizing: border-box;}
header {
background-color: #f4f4f4;
color: white;}
.navbar {
display: flex;
flex-direction: column;
padding-top: 0% !important;
box-sizing: border-box;
align-items: center; }
.bagoftop {
background-color: #28360c;}
.top-links {
background-color: #28360c;
margin: 0 44px 0;
text-align: center;
display: flex;
justify-content: center;}
.top-links a {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
line-height: 24px;
font-family: 'Open Sans", Arial, sans-serif';
margin: 0 px;}
.top-links a:hover {
text-decoration: underline;}
.logo-section {
display: flex;
align-items: center;
justify-content: center
width: 1382px;
transform: translate(-14px, 0px);
padding: 20px;
background-color: #687d3a;
margin: 0;
width: 100%;
width: 1379.33px;
transform: translate(-25.3333px, 0px);
.logo {
width: 706px;
height: 70px;
margin: 0px 0px 10px;}
.logo-section {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #687d3a;
margin: 0;
width: 100%;}
.main-links {
background: linear-gradient(to bottom, #687d3a, #43571a);
width: 100%;
display: flex;
justify-content: center;
width: 1399px;
transform: translate(-20px, 0px);
padding-bottom: 50px;}
.main-links a {
text-decoration: none;
color: white;
font-size: 16px;
margin: 0 15px;
font-weight: bold;}
.main-links a:hover {
text-decoration: underline;}
.dropdown {
position: relative;
display: inline-block;
.submenu {
display: none;
border-radius: 4px;
margin-top: px;
position: absolute;
background-color: #28360c;
min-width: 160px;
z-index: 1;
padding: 0;
list-style: none;
.submenu li a {
text-decoration: none;
display: block;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
line-height: 24px;
font-family: 'Open Sans", Arial, sans-serif';
text-align: left;}
.radio-buttons {
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;}
.radio-buttons input[type="radio"]
margin: 0 5px;
cursor: pointer}
.main-container {
display: flex;
justify-content: flex-end;
width: 100%;}
.right-sidebar {
background-color: #f4f4f4;
padding: 20px;
border-left: 1px solid #ccc;
width: 709px !important;
height: 100%;}
.right-sidebar ul {
list-style: none;}
.right-sidebar ul li {
margin: 5px 0;}
.right-sidebar ul li a {
color: #566732;
text-decoration: none;
font-size: 12px !important;
line-height: 10px !important;
position: relative;
padding-left: 20px;}
.right-sidebar ul li a::before {
content: "➤";
position: absolute;
left: 0;
color: #566732;}
.right-sidebar ul li a:hover {
text-decoration: underline;}
.card {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);}
.card img {
border-bottom: 1px solid #ccc;}
.mycontainer {
display: flex;
height: 100vh;}
.sidebar {
width: 250px;
color: white;
padding: 15px;}
.left {
padding-right: 443px;
text-align: left;}
.right {
text-align: right;
font-size: 11px;
line-height: 20px;
word-spacing: 12px;
color: #758841 !important;}
.footer {
width: 100%;
background: linear-gradient(180deg, #6e8a37, #354516);
color: #fff;
padding: 50px 0;}
.footer-container {
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
text-align: left;}
.footer-section h3 {
font-size: 12px;
font-weight: 300;
font-family: 'Lato, Arial, sans-serif';
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding-bottom: 5px;
margin-bottom: 10px;}
.footer-section ul {
font-family: 'Lato, Arial, sans-serif';
list-style: none
padding: 0;
font-size: 12px;
line-height: 1.8;
color: #c2e7a9;}
.footer-section ul li a {
color: #c2e7a9;
text-decoration: none;}
.footer-section ul li {
margin: 5px 0;}
.footer-section ul li a:hover {
color: #fff;
text-decoration: underline;}
.social-icons {
text-align: center;
margin: 20px 0;}
.social-icons a {
color: #333333
margin: 0 10px;
font-size: 18px;
text-decoration: none;
.social-icons a:hover {
color: #007bff; }
.footer-bottom {
background: linear-gradient(to right, #3c4b1f, #3d550e);
color: #c2e7a9;
padding: 10px 0;
justify-content: center;
align-items: center;
display: flex;
text-align: center;
font-size: 12px;
height: 89px;
--top: 1243px;
--left: 352.141357421875px;
--position: absolute;
--width: 72268.15625px;
--height: 561.390625px;
width: 1682.52px;
transform: translate(48.593px, 0px);
width: 100%; }
.footer-bottom a {
color: #c2e7a9;
margin: 0 5px;
text-decoration: none;
letter-spacing: normal; }
.footer-bottom a:hover {
text-decoration: underline;}
.footer {
position: relative;
left: -70px;
top: 158px; }
.social-icons {
position: relative;
left: -237px;
top: 143px; }
.footer-bottom {
position: relative;
left: -221px;
top: 135px;
will-change: top, left; }
.row .text-centers {
position: relative;
left: 61px;
top: -33px;
transition: none }
