Scribd
Upload
7 views24 pages

IP 1st Assign

Uploaded by

fu221135
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
7 views24 pages

IP 1st Assign

Uploaded by

fu221135
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

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 }

You might also like