Scribd
Upload
19 views30 pages

Intro

Uploaded by

pakistancoolway
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views30 pages

Intro

Uploaded by

pakistancoolway
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Intro

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Public Library - Librarian's Message</title>

<style>

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

background-color: #f5f5f5;

color: #333;

header {

background-color: #00796b;

color: white;

padding: 20px;

text-align: center;

font-size: 24px;

.container {

display: flex;

flex-direction: column;

align-items: center;

padding: 20px;

max-width: 900px;
margin: 0 auto;

.librarian-info {

display: flex;

align-items: center;

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin-bottom: 20px; /* Space between sections */

.librarian-info img {

border-radius: 50%;

margin-right: 20px;

width: 150px;

height: 150px;

object-fit: cover;

.library-intro, .librarian-message {

text-align: justify;

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin-bottom: 20px; /* Space between sections */

.library-intro img {

max-width: 100%;

height: auto;
border-radius: 8px;

.librarian-intro h2, .library-intro h2 {

margin: 0;

color: #00796b;

</style>

</head>

<body>

<header>

Welcome to Our Public Library

</header>

<div class="container">

<div class="library-intro">

<h2>About Our Library</h2>

<p>Our public library is a vibrant community hub dedicated to fostering a love of reading and
lifelong learning. With a diverse collection of books, digital resources, and community programs, we
strive to meet the needs of our patrons and support their educational and recreational interests. Our
friendly staff is here to assist you and ensure that your experience at the library is both enjoyable and
enriching.</p>

</div>

<div class="librarian-info">

<img src="https://i.ibb.co/zst6ksP/salee.jpg" alt="Librarian Photo">

<div class="librarian-intro">

<h2>Muhammad Saleem - Catalouger/Classifier</h2>

<p>Muhammad Saleem is an experienced catalouger/classifier who holds a 16-year Bachelor's


degree in Library Science. He worked for two years as a cataloger at Islamabad Medical and Dental
College, where he developed expertise in organizing and managing library materials. Following that,
Muhammad Saleem worked for six months as an assistant librarian at Islamia University Bahawalpur,
where his focus was on overseeing daily library operations and implementing modern library systems.

Muhammad Saleem's extensive experience makes him a skilled librarian, with deep expertise in
research, book cataloging, and library management. He is continuously striving to improve library
services and is proficient in applying new technologies and methods..</p>

</div>

</div>

<div class="librarian-message">

<h2>Librarian's Message</h2>

<p>Welcome to our public library, where we believe in the power of books to transform lives. We
are committed to providing a welcoming space for learning, creativity, and exploration. Whether you're
here to find a good read, do some research, or simply relax, we are here to assist you in any way
possible.</p>

</div>

</div>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Rul

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Khanqah Sharif Public Library - Rules & Regulations</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #87CEEB; /* Sky blue background */

margin: 0;

padding: 0;

color: #333;

.container {

max-width: 1000px;

margin: 20px auto;

padding: 20px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h1 {

text-align: center;

color: #4CAF50;

font-size: 2.5em;

margin-bottom: 20px;

.rules-list {

margin: 20px 0;

.rules-list h2 {

font-size: 1.8em;

color: #4CAF50;
border-bottom: 2px solid #4CAF50;

padding-bottom: 10px;

.rules-list ul {

list-style-type: none;

padding: 0;

.rules-list li {

background-color: #f9f9f9;

border: 1px solid #ddd;

border-radius: 5px;

margin-bottom: 10px;

padding: 15px;

font-size: 1.1em;

line-height: 1.6;

.rules-list li::before {

content: "• ";

color: #4CAF50;

font-weight: bold;

font-size: 1.5em;

vertical-align: middle;

margin-right: 10px;

/* Responsive Styles */

@media (max-width: 600px) {

h1 {

font-size: 2em; /* Smaller heading size for mobile */


}

.rules-list h2 {

font-size: 1.5em; /* Smaller section heading for mobile */

.rules-list li {

font-size: 1em; /* Smaller list item font size for mobile */

padding: 10px; /* Less padding for mobile */

</style>

</head>

<body>

<div class="container">

<h1>Library Rules & Regulations</h1>

<div class="rules-list">

<h2>General Conduct</h2>

<ul>

<li>Maintain silence and respect the quiet atmosphere of the library.</li>

<li>Mobile phones should be silenced or turned off.</li>

<li>Food and drinks are not allowed in the library to protect books and equipment.</li>

<li>Personal belongings should be kept in designated areas.</li>

</ul>

<h2>Borrowing Materials</h2>

<ul>

<li>Library cards are required to borrow books and other materials.</li>

<li>Return borrowed items on or before the due date to avoid late fees.</li>
<li>Notify the library immediately if a borrowed item is lost or damaged.</li>

</ul>

<h2>Use of Facilities</h2>

<ul>

<li>Computers and other equipment should be used responsibly and for library-related
activities only.</li>

<li>Respect other patrons’ use of study and reading areas.</li>

<li>Report any issues with facilities to library staff promptly.</li>

</ul>

<h2>Events and Programs</h2>

<ul>

<li>Registration may be required for certain events and programs.</li>

<li>Follow event-specific rules as outlined by the event organizers.</li>

<li>Provide feedback on events and programs to help us improve.</li>

</ul>

</div>

</div>

</body>

</html>

Tim

<!DOCTYPE html>

<html lang="en">

<head>

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

<title>Library Hours</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #87CEEB; /* Sky blue background */

margin: 0;

padding: 20px;

color: #333;

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h1 {

text-align: center;

color: #4CAF50;

font-size: 2.5em;

margin-bottom: 20px;

h2 {

color: #4CAF50; /* Set the color of Library Hours to green */

margin: 0 0 10px;

.table-container, .calendar-container {
margin-bottom: 40px;

table {

width: 100%;

border-collapse: collapse;

margin: 0 auto;

table, th, td {

border: 1px solid #ddd;

th, td {

padding: 12px;

text-align: center;

th {

background-color: #4CAF50;

color: white;

td {

background-color: #f9f9f9;

.calendar {

display: inline-block;

margin: 0 auto;

padding: 10px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}
.calendar table {

border: none;

width: 100%;

table-layout: fixed;

.calendar th, .calendar td {

padding: 10px;

text-align: center;

border: 1px solid #ddd;

.calendar th {

background-color: #4CAF50;

color: white;

.calendar td {

background-color: #f9f9f9;

.calendar .today {

background-color: #ffeb3b; /* Highlight today's date */

/* Responsive Styles */

@media (max-width: 768px) {

h1 {

font-size: 2em;

h2 {

font-size: 1.5em;

}
th, td {

padding: 8px;

font-size: 0.9em;

table {

font-size: 0.9em;

@media (max-width: 480px) {

h1 {

font-size: 1.5em;

h2 {

font-size: 1.2em;

th, td {

padding: 6px;

font-size: 0.8em;

table {

font-size: 0.8em;

</style>

</head>

<body>

<div class="container">
<!-- Library Hours Table -->

<div class="table-container">

<h2>Library Hours</h2>

<table>

<thead>

<tr>

<th>Day</th>

<th>Opening Hours</th>

</tr>

</thead>

<tbody>

<tr>

<td>Monday</td>

<td>9:00 AM - 6:00 PM</td>

</tr>

<tr>

<td>Tuesday</td>

<td>9:00 AM - 6:00 PM</td>

</tr>

<tr>

<td>Wednesday</td>

<td>9:00 AM - 6:00 PM</td>

</tr>

<tr>

<td>Thursday</td>

<td>9:00 AM - 6:00 PM</td>

</tr>

<tr>
<td>Friday</td>

<td>9:00 AM - 6:00 PM</td>

</tr>

<tr>

<td>Saturday</td>

<td>10:00 AM - 4:00 PM</td>

</tr>

<tr>

<td>Sunday</td>

<td>Closed</td>

</tr>

</tbody>

</table>

</div>

<!-- Calendar -->

<div class="calendar-container">

<div class="calendar">

<h2 id="calendar-month-year"></h2>

<table id="calendar-table">

<thead>

<tr>

<th>Sun</th>

<th>Mon</th>

<th>Tue</th>

<th>Wed</th>

<th>Thu</th>

<th>Fri</th>

<th>Sat</th>
</tr>

</thead>

<tbody id="calendar-body">

</tbody>

</table>

</div>

</div>

</div>

<script>

function generateCalendar() {

const date = new Date();

const month = date.getMonth();

const year = date.getFullYear();

// Set the month and year header

document.getElementById('calendar-month-year').textContent = date.toLocaleString('default',
{ month: 'long', year: 'numeric' });

const firstDay = new Date(year, month, 1).getDay();

const lastDate = new Date(year, month + 1, 0).getDate();

const calendarBody = document.getElementById('calendar-body');

calendarBody.innerHTML = ''; // Clear previous content

let row = document.createElement('tr');

for (let i = 0; i < firstDay; i++) {

row.appendChild(document.createElement('td')); // Empty cells for days before the first day


}

for (let day = 1; day <= lastDate; day++) {

const cell = document.createElement('td');

cell.textContent = day;

if (day === date.getDate()) {

cell.classList.add('today'); // Highlight today's date

row.appendChild(cell);

// Start a new row after Saturday

if ((day + firstDay) % 7 === 0) {

calendarBody.appendChild(row);

row = document.createElement('tr');

calendarBody.appendChild(row); // Append the last row

// Generate the calendar on page load

window.onload = generateCalendar;

</script>

</body>

</html>

Vi

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Khanqah Sharif Public Library - Vision & Mission</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

color: #333;

.container {

max-width: 1200px;

margin: 20px auto;

padding: 20px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h1 {

text-align: center;

color: #4CAF50;

font-size: 2.5em;

margin-bottom: 20px;

.section {

margin-bottom: 40px;
}

.section h2 {

font-size: 1.8em;

color: #333;

margin-bottom: 10px;

border-bottom: 2px solid #4CAF50;

padding-bottom: 5px;

.section p {

font-size: 1.1em;

line-height: 1.6;

color: #555;

.section p strong {

color: #4CAF50;

/* Responsive Styles */

@media (max-width: 600px) {

h1 {

font-size: 2em; /* Smaller heading size for mobile */

.section h2 {

font-size: 1.5em; /* Smaller section heading for mobile */

.section p {

font-size: 1em; /* Smaller paragraph font size for mobile */

line-height: 1.4; /* Adjust line height for better readability */

}
}

</style>

</head>

<body>

<div class="container">

<h1>Khanqah Sharif Public Library</h1>

<div class="section">

<h2>Vision</h2>

<p><strong>Empowering Minds, Enriching Communities:</strong> At Khanqah Sharif Public


Library, we envision a future where knowledge and innovation drive progress. Our library will be a
dynamic hub where diverse ideas flourish, fostering lifelong learning and community engagement for
all.</p>

</div>

<div class="section">

<h2>Mission</h2>

<p><strong>Khanqah Sharif Public Library</strong> is dedicated to providing accessible, inclusive,


and forward-thinking resources that inspire curiosity and learning. We are committed to delivering
exceptional services, fostering a vibrant space for collaboration, and supporting our community’s
educational and cultural growth.</p>

</div>

</div>

</body>

</html>
Ser

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Library Services</title>

<style>

body {

font-family: 'Arial', sans-serif;

background-color: #87CEEB; /* Sky blue color */

margin: 0;

padding: 0;

.header {

background-color: #4CAF50;

padding: 20px;

text-align: center;

color: white;

.header h1 {

margin: 0;

font-size: 2.5em;

.container {

max-width: 1400px;

margin: 40px auto;


padding: 17px;

background-color: white;

border-radius: 9px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

margin-bottom: 40px;

.service-section {

display: flex;

justify-content: space-between;

margin-bottom: 40px;

flex-wrap: wrap; /* Allows wrapping */

.service {

flex: 1 1 30%; /* Allows for three services in one line on larger screens */

margin: 10px;

padding: 20px;

text-align: center;

background-color: #f9f9f9;

border-radius: 10px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

.service img {

width: 50px;

height: 50px;

margin-bottom: 15px;

}
.service h3 {

margin-bottom: 10px;

font-size: 1.5em; /* Responsive font size */

.service p {

font-size: 1em;

color: #666;

@media (max-width: 768px) {

.service {

flex: 1 1 45%; /* Two columns on medium screens */

@media (max-width: 480px) {

.service {

flex: 1 1 100%; /* One column on small screens */

</style>

</head>

<body>

<div class="header">

<h1>Library Services</h1>

</div>

<div class="container">

<h2>Our Services</h2>
<div class="service-section">

<!-- Service 1 -->

<div class="service">

<img src="https://cdn-icons-png.flaticon.com/512/1245/1245338.png" alt="Book Borrowing">

<h3>Book Borrowing</h3>

<p>Borrow books from our extensive collection of physical and digital materials available to
members.</p>

</div>

<!-- Service 2 -->

<div class="service">

<img src="https://cdn-icons-png.freepik.com/256/8890/8890160.png?semt=ais_hybrid"
alt="Free Wi-Fi">

<h3>Free Wi-Fi</h3>

<p>Access free high-speed internet on your personal devices at any of our library
branches.</p>

</div>

<!-- Service 3 -->

<div class="service">

<img src="https://cdn-icons-png.freepik.com/256/4515/4515712.png?semt=ais_hybrid"
alt="Events and Workshops">

<h3>Events & Workshops</h3>

<p>Participate in educational workshops, author events, and community-driven activities.</p>

</div>

</div>

<div class="service-section">

<!-- Service 4 -->


<div class="service">

<img src="https://cdn-icons-png.freepik.com/256/5531/5531967.png?semt=ais_hybrid"
alt="Research Assistance">

<h3>Research Assistance</h3>

<p>Get expert help with research from our librarians, including access to academic databases
and archives.</p>

</div>

<!-- Service 5 -->

<div class="service">

<img src="https://png.pngtree.com/png-vector/20220218/ourmid/pngtree-children-icon-png-
image_4392953.png" alt="Children's Section">

<h3>Children’s Section</h3>

<p>A dedicated space for children’s books, reading programs, and learning activities.</p>

</div>

<!-- Service 6 -->

<div class="service">

<img src="https://www.shutterstock.com/image-vector/quiet-rooms-concept-icon-inspiring-
260nw-2113643477.jpg" alt="Study Spaces">

<h3>Quiet Study Spaces</h3>

<p>Book a study space or use our open seating areas to read, study, or collaborate with
peers.</p>

</div>

</div>

</div>

</body>

</html>
Staff

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Professional Staff</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #87CEEB; /* Sky blue color */

margin: 0;

padding: 20px;

h1 {

color: #4CAF50; /* Green color for the heading */

text-align: center; /* Center the heading */

.staff-container {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

.staff-member {

background-color: #fff;

border: 1px solid #ddd;

border-radius: 10px;
padding: 20px;

margin: 20px;

width: 250px;

text-align: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.staff-member img {

width: 150px;

height: 150px;

border-radius: 50%;

object-fit: cover;

.staff-member h3 {

margin: 10px 0;

font-size: 1.2em;

.staff-member p {

margin: 5px 0;

color: #555;

</style>

</head>

<body>

<h1>Meet Our Professional Staff</h1>

<div class="staff-container">

<div class="staff-member">

<img src="https://i.ibb.co/Wt0dvk1/salee.jpg" alt="Staff Member">


<h3>Muhammad Saleem</h3>

<p>Position: Cataloger/Classifier</p>

<p>Islamabad Medical and Dental College</p>

<p>Email: [email protected]</p>

</div>

<div class="staff-member">

<img src="https://i.ibb.co/pyBY4VF/IMG-20240814-WA0016.jpg" alt="Staff Member">

<h3>Muhammad Tariq Iqbal</h3>

<p>Position: Librarian</p>

<p>Sarhad University Islamabad</p>

</div>

<div class="staff-member">

<img src="https://i.ibb.co/vQF3TF2/IMG-20240817-WA0002.jpg" alt="Staff Member">

<h3>Imran Ahmad Khan</h3>

<p>Position: Librarian</p>

<p>Pakistan Global Institute</p>

</div>

</div>

</body>

</html>

Con

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contact Us</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #87CEEB; /* Sky blue background */

margin: 0;

padding: 20px;

.contact-container {

max-width: 700px;

margin: 50px auto;

background-color: #fff;

padding: 30px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border-radius: 10px;

h1 {

text-align: center;

margin-bottom: 20px;

.contact-info {

text-align: center;

margin-top: 30px;

.contact-info p {

margin: 10px 0;
font-size: 18px;

.contact-info img {

width: 24px;

height: 24px;

vertical-align: middle;

margin-right: 8px;

.map-container {

margin-top: 30px;

iframe {

width: 100%;

height: 300px;

border: none;

border-radius: 5px;

.social-media {

text-align: center;

margin-top: 30px;

.social-media a {

margin: 0 10px;

display: inline-block;

.social-media img {

width: 30px;

height: 30px;

}
</style>

</head>

<body>

<div class="contact-container">

<h1>Contact Us</h1>

<div class="contact-info">

<p><img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Phone_icon.png"
alt="Phone"> Phone: +92 3038772743</p>

<p><img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/112-
gmail_email_mail-512.png" alt="Email"> Email: [email protected]</p>

<p><img
src="https://i.pinimg.com/originals/66/1e/98/661e98a8e38f681575da93d0a1c3f4fc.png"
alt="Location"> Address: Khanqah Sharif Bahawalpur</p>

</div>

<div class="social-media">

<h3>Follow Us</h3>

<a href="https://www.facebook.com/profile.php?id=100034215050432&mibextid=ZbWKwL"
target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTIPQivbrXaeLxe8UzyawJ2O-vTfZlsYhkRgQ&s" alt="Facebook"></a>

<a href="https://www.instagram.com/muhammad.saleem8772?igsh=Y3p4cGZpMHJoaWNs"
target="_blank"><img src="https://img.freepik.com/premium-vector/instagram-logo-vector_768467-
330.jpg" alt="Instagram"></a>

</div>

</div>

</body>

</html>

You might also like