DOCTYPE HTML

<!
DOCTYPE html>
<html lang="en">
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/

owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/

owl.theme.default.min.css">
<style>
body {
margin: 0;
padding: 0;
.home_slider {
max-width: 1800px; /* Set a max width for the slider */
margin: 0 auto;
position: relative;
.mySlides {
width: 100%;
height: 450px; /* Set a fixed height */
object-fit: cover; /* Maintain aspect ratio and fill the space */
.slider-caption {
background-color: green; /* Change background color to green */
color: white; /* Change text color to white */
padding: 10px; /* Adjust padding */

text-align: center; /* Center text */
font-size: 20px; /* Adjust font size */
width: 100%; /* Make caption full width */
.owl-carousel .item {
position: relative; /* Enable relative positioning */
display: flex;
flex-direction: column; /* Stack images and captions */
align-items: center; /* Center items */
/* Mobile screen height adjustment */
@media only screen and (max-width: 500px) {
.mySlides {
height: 200px; /* Set the height for mobile screens */
.slider-caption {
font-size: 16px; /* Adjust caption size for mobile */
/* Hide any other effects that might affect other elements */
.owl-carousel {
overflow: hidden; /* Prevent overflow */
</style>
</head>
<body>
<div style="background-color: #87CEEB; padding: 12px;">

<marquee behavior="scroll" direction="left" onmouseover="this.stop()" onmouseout="this.start()"
id="marq">
Welcome to Islamabad Medical & Dental College Library, Learn to Lead.
</marquee>
</div>
<div class="home_slider owl-carousel owl-theme" id="video_carousel">
<div class="item">
<img class="mySlides" src="https://i.ibb.co/T2gj6sG/001C.png" alt="Image 1">
<div class="slider-caption">Seating Area.</div>
</div>
<div class="item">
<img class="mySlides" src="https://i.ibb.co/B3m9zYQ/0001CEO.png" alt="Image 2">
<div class="slider-caption">Book Fair.</div>
</div>
<div class="item">
<img class="mySlides" src="https://i.ibb.co/B65fcJK/0003c.jpg" alt="Image 3">
<div class="slider-caption">Circulation/Information Desk.</div>
</div>
<div class="item">
<img class="mySlides" src="https://i.ibb.co/s32ShTW/d.jpg" alt="Image 4">
<div class="slider-caption">Digital Library Section.</div>
</div>
<div class="item">
<img class="mySlides" src="https://i.ibb.co/tH4dp88/005c.png" alt="Image 5">
<div class="slider-caption">Briefing HEC Visit.</div>
</div>
<div class="item">
<img class="mySlides" src="https://i.ibb.co/DDtTgXx/007.png" alt="Image 6">

<div class="slider-caption">Self Study Rooms</div>
</div>
<div class="item">
<img class="mySlides" src="https://3.files.edl.io/66b8/23/06/02/005755-8a06026e-b6ad-4c4a-

8e92-4937f642e01e.jpg" alt="Image 7">
<div class="slider-caption">Learn, Grow, Succeed</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$("#video_carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Text Example</title>
<style>
body {
font-family: Arial, sans-serif; /* Set a default font for the body */
text-align: center; /* Center text for all screens */
margin: 0;
padding: 20px;
.text-box {
max-width: 1500px; /* Set max width for the text box */
margin: 20px auto; /* Center the text box */
padding: 20px; /* Add padding inside the text box */
border: 1px solid #ccc; /* Optional: add a border */
background-color: #f9f9f9; /* Optional: background color */
border-radius: 8px; /* Optional: rounded corners */
h1 {
font-size: 2em; /* Default font size for mobile */
margin-bottom: 10px;
p{
font-size: 1em; /* Default font size for mobile */
line-height: 1.5; /* Space between lines */
/* Media query for larger screens */

@media (min-width: 768px) {
h1 {
font-size: 3em; /* Increased font size for desktop */
p{
font-size: 1.25em; /* Increased font size for desktop */
</style>
</head>
<body>
<div class="text-box">
<h1>📚 Welcome to IMDC Library 📚</h1>
<p>Welcome to Islamabad Medical and Dental College Library and Information Centre. We remain
committed to enhancing your information experience. Thus, we want to encourage all members of our
community to visit us virtually or in person to discover our collections, to be awed by their splendor, and
above all to use them. Our library is a worldwide leader in the dissemination of knowledge through our
remarkable specialized research collections, outstanding services, innovative technologies, and
exceptional staff. Our Library Gateway is designed to provide a multitude of resources, both print-based
and electronic, as well as to offer detailed information about our ongoing services. We will continue our
commitment to collecting materials, but are redoubling our efforts in making these materials
discoverable, useable and accessible to faculty, researchers and students. Input from thoughtful faculty
and students have been drivers in most of the above initiatives, and the staff of the IMDC library has
shown great resolve in making these things not only possible, but also real. If you have questions,
concerns, or suggestions, visit our Virtual reference service or our physical reference desk, where library
staff members are happy to help with your research Needs.</p>
</div>
</body>
</html>
<div id="opacmainuserblock">
<div id="OpacMainUserBlock">
<div class="OpacMainUserBlock_en_item">
<div class="OpacMainUserBlock_en_body"><div id="opacmainuserblock">
<div id="OpacMainUserBlock">
<div class="OpacMainUserBlock_en_item">
<div class="OpacMainUserBlock_en_body">
<hr />
<h3 style="text-align: center;"><span style="color: #843fa1;"><strong>ONLINE-LIBRARY

VISITORS</strong></span></h3>
<center> <img

src="https://hitwebcounter.com/counter/counter.php?
page=10317038&style=0027&nbdigits=8&type=page&initCount=30" title="Counter
Widget" alt="Visit counter For Websites" border="0" />
<p align="justify"></p>
</center></div>
</div>

<div id="inlibro-carrousel">
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane container active">
<div class="carrouselFrame">
<p class="special-title">New Arrivals</p>
<div class="loadingDiv"></div>
<div id="carrousel-0" class="carrousel"><a class="left carousel-control">&lsaquo;</a> <a

class="right carousel-control">&rsaquo;</a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-
detail.pl?biblionumber=13405"><img class="cloudcarousel" style="max-height: 310px; width: 120px;"
src="https://images-na.ssl-images-amazon.com/images/P/0702030856.01.TZZZZZZZ.jpg" title="
Davidson's principles and practice of medicine:" alt=" Davidson's principles and practice of medicine:"
/></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?biblionumber=12331"><img
class="cloudcarousel" style="max-height: 310px; width: 120px;" src="https://images-na.ssl-images-
amazon.com/images/P/032352950X.01.MZZZZZZZ.jpg" title=" Nelson textbook of pediatrics:" alt="
Nelson textbook of pediatrics:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
biblionumber=11789"><img class="cloudcarousel" style="max-height: 310px; width: 120px;"
src="https://images-na.ssl-images-amazon.com/images/P/9696377509.01.MZZZZZZZ.jpg" title=" Short
textbook of medical diagnosis & management Medicine:" alt=" Short textbook of medical diagnosis
& management Medicine:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
src="https://m.media-amazon.com/images/I/718X4at0kxL._AC_UY218_.jpg" title="Bailey & Love's
short practice of surgery:" alt="Bailey & Love's short practice of surgery:" /></a> <a
href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?biblionumber=11405"><img
amazon.com/images/P/1260469417.01.TZZZZZZZ.jpg" title="Clinical Neuroanatomy:" alt="Clinical
Neuroanatomy:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
src="https://images-na.ssl-images-amazon.com/images/P/0323597122.01.TZZZZZZZ.jpg" title="Guyton
and hall textbook of medical physiology:" alt="Guyton and hall textbook of medical physiology:" /></a>
<a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?biblionumber=12353"><img
amazon.com/images/P/0443103968.01.MZZZZZZZ.jpg" title="Forfar and Arneil's Textbook of Pediatrics:"
alt="Forfar and Arneil's Textbook of Pediatrics:" /></a> <a
amazon.com/images/P/0323810357.01.MZZZZZZZ.jpg" title="Fundamentals of Nursing:"
alt="Fundamentals of Nursing:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
src="https://images-na.ssl-images-amazon.com/images/P/1119800757.01.MZZZZZZZ.jpg" title="Nursing
Practice knowledge and care:" alt="Nursing Practice knowledge and care:" /></a> <a
amazon.com/images/P/1259870456.01.MZZZZZZZ.jpg" title="Exercise physiology : theory and
application to fitness and performance:" alt="Exercise physiology : theory and application to fitness and
performance:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
src="https://images-na.ssl-images-amazon.com/images/P/145574591X.01.MZZZZZZZ.jpg"
title="Pathology : implications for the physical therapist:" alt="Pathology : implications for the physical
therapist:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
title="Lippincott's Illustrated Review Pharmacology:" alt="Lippincott's Illustrated Review
Pharmacology:" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
src="https://images-na.ssl-images-amazon.com/images/P/126011712X.01.MZZZZZZZ.jpg" title="Katzung
& Trevor's pharmacology:" alt="Katzung & Trevor's pharmacology:" /></a> <a
class="cloudcarousel" style="max-height: 310px; width: 120px;"
src="https://m.media-amazon.com/images/I/71vKwpHqmGL._AC_UY218_.jpg" title="Clinically Oriented
Anatomy:" alt="Clinically Oriented Anatomy:" /></a> <a
amazon.com/images/P/0323640079.01.MZZZZZZZ.jpg" title="Pocket companion to guyton and hall
textbook of medical:" alt="Pocket companion to guyton and hall textbook of medical:" /></a>
<div class="carousel-caption">
<p class="title-text"></p>
</div>
</div>
</div>
</div>

<div id="tabs-2" role="tabpanel" class="tab-pane container fade">
<div class="carrouselFrame2">
<p class="special-title">Top-Circulating Books</p>
<div id="carrousel-1" class="slider">
<div id="Top-Circulating Books">
<div class="images"><a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?

biblionumber=12137"><img class="cloudcarousel" style="max-height: 200px;"
src="https://i.postimg.cc/2y4XjSKg/download.jpg" title="Essentials of Medical Biochemistry"
alt="Essentials of Medical Biochemistry" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-
detail.pl?biblionumber=13413"><img class="cloudcarousel" style="max-height: 200px;"
src="https://images-na.ssl-images-amazon.com/images/P/1496383907.01.MZZZZZZZ.jpg"
title="Langman 's Medical Embryology" alt="Langman 's Medical Embryology " /></a> <a
class="cloudcarousel" style="max-height: 200px;"
src="https://images-na.ssl-images-amazon.com/images/P/1496345649.01.MZZZZZZZ.jpg" title="Snell's
clinical anatomy by regions" alt="Snell's clinical anatomy by regions" /></a> <a
src="https://images-na.ssl-images-amazon.com/images/P/1260469417.01.TZZZZZZZ.jpg" title="Clinical
Neuroanatomy:" alt="Clinical Neuroanatomy:" /></a> <a
src="https://m.media-amazon.com/images/I/51rmYSK729L._AC_UY218_.jpg" title="Davidson's
principles and practice of medicine." alt="Davidson's principles and practice of medicine" /></a> <a
src="https://images-na.ssl-images-amazon.com/images/P/0323480543.01.MZZZZZZZ.jpg" title="Robbins
Basic Pathology" alt="Robbins Basic Pathology" /></a> <a href="/cgi-bin/koha/opac-detail.pl?
biblionumber=34045"><img class="cloudcarousel" style="max-height: 200px;" src="https://images-
na.ssl-images-amazon.com/images/P/8996272035.01._THUMBZZZ_PB_PU_PU0_.jpg" title="Chalet
Swiss" alt="Chalet Swiss" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
biblionumber=13400"><img class="cloudcarousel" style="max-height: 200px;" src="https://m.media-
amazon.com/images/I/718X4at0kxL._AC_UY218_.jpg" title="Bailey & Love's short practice of
surgery:" alt="Bailey & Love's short practice of surgery:" /></a> <a
src="https://images-na.ssl-images-amazon.com/images/P/0323597122.01.TZZZZZZZ.jpg" title="Guyton
and hall textbook of medical physiology:" alt="Guyton and hall textbook of medical physiology:" /></a>
<a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?biblionumber=12333"><img
class="cloudcarousel" style="max-height: 200px;" src="https://i.postimg.cc/KvymP9tD/MEDICAL-
HISTOLOGY-TEXT-ATLAS-UPMED.webp" title="Medical Histology Text & Atlas " alt="Medical
Histology Text & Atlas " /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-detail.pl?
biblionumber=13434"><img class="cloudcarousel" style="max-height: 200px;" src="https://images-
na.ssl-images-amazon.com/images/P/129235979X.01.MZZZZZZZ.jpg" title="Kozier & Erb's
Fundamentals of Nursing : concepts, process, and practice" alt="Kozier & Erb's Fundamentals of
Nursing : concepts, process, and practice" /></a> <a href="http://58.65.169.22:8081/cgi-bin/koha/opac-
detail.pl?biblionumber=8920"><img class="cloudcarousel" style="max-height: 200px;"
src="https://i.postimg.cc/26W0T5r3/sat.jpg" title="Biochemistry with clinical concepts & case
studies U. Satayanrayana" alt="Biochemistry with clinical concepts & case studies U. Satayanrayana"
src="https://images-na.ssl-images-amazon.com/images/P/9382219021.01.MZZZZZZZ.jpg" title="Park's
Textbook of Preventive and Social Medicine" alt="Park's Textbook of Preventive and Social Medicine"
src="https://images-na.ssl-images-amazon.com/images/P/0071604057.01.TZZZZZZZ.jpg" title="Basic
& clinical pharmacology" alt="Basic & clinical pharmacology" /></a> <a
title="Lippincott's illustrated reviews: Biochemistry" alt="Lippincott's illustrated reviews:
Biochemistry" /></a></div>
</div>
<div class="controls"><button class="Top-Circulating Books" style="float: left;" on=""
click="Right(this)" type="button"><</button> <button class="Top-Circulating Books" style="float:
right;" on="" click="Left(this)" type="button">></button></div>
</div>
</div>
</div>
  
<div class="text-center nwarrival_heading3" id="daily-quote" style="margin: 0px 15px;"></div>
<br /><br />
<style>
#inlibro-carrousel .carrouselFrame {
background: #DDDDDD;
border-radius: 8px;
margin: 1em 0;
overflow: hidden;
padding: 1em 0;
position: relative;
#inlibro-carrousel .carrousel{
height : 300px;
#inlibro-carrousel .loadingDiv{
background : White;
position : absolute;
height : 100%;
width : 100%;
z-index : 2000;
top : 0;
/*De bootstrap pour le carrousel*/
.carousel {
position: relative;
line-height: 1;
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
.carousel-inner>.item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
line-height: 1;
.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev {
display: block;
.carousel-inner>.active {
left: 0;
.carousel-inner>.next, .carousel-inner>.prev {
position: absolute;
top: 0;
width: 100%;
.carousel-inner>.next {
left: 100%;
.carousel-inner>.prev {
left: -100%;
.carousel-inner>.next.left, .carousel-inner>.prev.right {
left: 0;
}
.carousel-inner>.active.left {
left: -100%;
.carousel-inner>.active.right {
left: 100%;
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
.carousel-control:hover, .carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
list-style: none;
.carousel-indicators li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
.carousel-indicators .active {
background-color: #fff;
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
.carousel-caption h4, .carousel-caption p {
color: #ffffff;
line-height: 20px;
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
/*De bootstrap pour le carrousel FIN*/
#inlibro-carrousel .carousel-caption .title-text{
color : #ffffff;
#inlibro-carrousel .carousel-control,
#inlibro-carrousel .carousel-caption{
background-color : #373737;
z-index:1000;
cursor : pointer;
font-weight : bold;
position: absolute;
left: 0;
right: 0;
#inlibro-carrousel .carousel-control,
background-color : #373737;
z-index:1000;
}
font-weight : bold;
#inlibro-carrousel a.locked{
width:100px;
#inlibro-carrousel .slider {
overflow: hidden;
#inlibro-carrousel .slider img {
height: 175px;
#inlibro-carrousel .slider hr + div {
background-color: #d5e1df;
#inlibro-carrousel .special-title{
text-align: center;
margin: 0;
margin-top: 10px;
font-weight: bold;
font-style: italic;
font-size: 25px;
color:black;
#inlibro-carrousel hr{
margin: -5px 0px 15px 0px;
#inlibro-carrousel h2 {
color: black;
#inlibro-carrousel .images {
left: 0px;
position: relative;
white-space: nowrap;
#inlibro-carrousel .controls{
margin-top: 20px;
#inlibro-carrousel button{
color : #ffffff;
background-color: #373737;
border: 0;
height : 2em;
font-size: 120%;
border-radius : 3px;
#inlibro-carrousel .images a {
display: inline-block;
margin-right: 5px;
</style>

<script>
//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <https://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <https://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
document.addEventListener('DOMContentLoaded', function() {
(function($){function Reflection(img,reflHeight,opacity){var
reflection,cntx,imageWidth=img.width,imageHeight=img.width,gradient,parent;parent=$
(img.parentNode);this.element=reflection=parent.append("<canvas class='reflection'
style='position:absolute'/>").find(':last')[0];if(!reflection.getContext&&$.support.msie)
{this.element=reflection=parent.append("<img class='reflection' style='position:absolute'/>").find(':last')
[0];reflection.src=img.src;reflection.style.filter="flipv
progid:DXImageTransform.Microsoft.Alpha(opacity="+(opacity*100)+", style=1, finishOpacity=0,
startx=0, starty=0, finishx=0,
finishy="+(reflHeight/imageHeight*100)+")"}else{cntx=reflection.getContext("2d");try{$
(reflection).attr({width:imageWidth,height:reflHeight});cntx.save();cntx.translate(0,imageHeight-
1);cntx.scale(1,-
1);cntx.drawImage(img,0,0,imageWidth,imageHeight);cntx.restore();cntx.globalCompositeOperation="d
estination-out";gradient=cntx.createLinearGradient(0,0,0,reflHeight);gradient.addColorStop(0,"rgba(255,
255, 255, "+(1-opacity)+")");gradient.addColorStop(1,"rgba(255, 255, 255,
1.0)");cntx.fillStyle=gradient;cntx.fillRect(0,0,imageWidth,reflHeight)}catch(e){return}}$
(reflection).attr({'alt':$(img).attr('alt'),title:$(img).attr('title')})}var Item=function(imgIn,options)
{this.orgWidth=imgIn.width;this.orgHeight=imgIn.height;this.image=imgIn;this.reflection=null;this.alt=im
gIn.alt;this.title=imgIn.title;this.imageOK=false;this.options=options;this.imageOK=true;if(this.options.re
flHeight>0){this.reflection=new Reflection(this.image,this.options.reflHeight,this.options.reflOpacity)}$
(this.image).css('position','absolute')};var Controller=function(container,images,options){var
items=[],funcSin=Math.sin,funcCos=Math.cos,ctx=this;this.controlTimer=0;this.stopped=false;this.contai
ner=container;this.xRadius=options.xRadius;this.yRadius=options.yRadius;this.showFrontTextTimer=0;thi
s.autoRotateTimer=0;if(options.xRadius===0){this.xRadius=($(container).width()/
2.3)}if(options.yRadius===0){this.yRadius=($(container).height()/
6)}this.xCentre=options.xPos;this.yCentre=options.yPos;this.frontIndex=0;this.rotation=this.destRotation
=Math.PI/2;this.timeDelay=1000/options.FPS;if(options.altBox!==null){$
(options.altBox).css('display','block');$(options.titleBox).css('display','block')}$
(container).css({position:'relative',overflow:'hidden'});$(options.buttonLeft).css('display','inline');$
(options.buttonRight).css('display','inline');$(options.buttonLeft).bind('mouseup',this,function(event)
{event.data.rotate(-1);return false});$(options.buttonRight).bind('mouseup',this,function(event)
{event.data.rotate(1);return false});if(options.mouseWheel){$
(container).bind('mousewheel',this,function(event,delta){event.data.rotate(delta);return false})}$
(container).bind('mouseover click',this,function(event){clearInterval(event.data.autoRotateTimer);var
text=$(event.target).attr('alt');if(text!==undefined&&text!==null)
{clearTimeout(event.data.showFrontTextTimer);$(options.altBox).html(($(event.target).attr('alt')));$
(options.titleBox).html(($(event.target).attr('title')));if(options.bringToFront&&event.type=='click'){var
idx=$(event.target).data('itemIndex');var frontIndex=event.data.frontIndex;var diff=(idx-frontIndex)
%images.length;if(Math.abs(diff)>images.length/2){diff+=(diff>0?-
images.length:images.length)}event.data.rotate(-diff)}}});$
(container).bind('mouseout',this,function(event){var
context=event.data;clearTimeout(context.showFrontTextTimer);context.showFrontTextTimer=setTimeou
t(function(){context.showFrontText()},1000);context.autoRotate()});$
(container).bind('mousedown',this,function(event){event.data.container.focus();return
false});container.onselectstart=function(){return false};this.innerWrapper=$(container).wrapInner('<div
style="position:absolute;width:100%;height:100%;"/>').children()[0];this.showFrontText=function()
{if(items[this.frontIndex]===undefined){return}$(options.titleBox).html($
(items[this.frontIndex].image).attr('title'));$(options.altBox).html($
(items[this.frontIndex].image).attr('alt'))};this.go=function(){if(this.controlTimer!==0){return}var
context=this;this.controlTimer=setTimeout(function()
{context.updateAll()},this.timeDelay)};this.stop=function()
{clearTimeout(this.controlTimer);this.controlTimer=0};
this.rotate=function(direction){
this.frontIndex-=direction;
while (this.frontIndex<0) { this.frontIndex += items.length; }
this.frontIndex%=items.length;
this.destRotation+=(Math.PI/items.length)*(2*direction);
this.showFrontText();
this.go()
};
this.autoRotate=function(){
if(options.autoRotate!=='no'){
var dir=(options.autoRotate==='right')?1:-1;
this.autoRotateTimer=setInterval(function(){ctx.rotate(dir)},options.autoRotateDelay)}};
this.updateAll=function(){var minScale=options.minScale;
var smallRange=(1-minScale)*0.5;
var w,h,x,y,scale,item,sinVal;
var change=(this.destRotation-this.rotation);
var absChange=Math.abs(change);
this.rotation+=change*options.speed;
if(absChange<0.001){this.rotation=this.destRotation}
var itemsLen=items.length;
var spacing=(Math.PI/itemsLen)*2;
var radians=this.rotation;
var isMSIE=$.support.msie;
this.innerWrapper.style.display='none';
var style;var px='px',reflHeight;
var context=this;
for(var i=0;i<itemsLen;i++){item=items[i];sinVal=funcSin(radians);
scale=((sinVal+1)*smallRange)+minScale;
x=this.xCentre+(((funcCos(radians)*this.xRadius)-(item.orgWidth*0.5))*scale);
y=this.yCentre+(((sinVal*this.yRadius))*scale);
if(item.imageOK){var img=item.image;
w=img.width=item.orgWidth*scale;
h=img.height=item.orgHeight*scale;
img.style.left=x+px;
img.style.top=y+px;img.style.zIndex=""+(scale*100)>>0;
if(item.reflection!==null){reflHeight=options.reflHeight*scale;
style=item.reflection.element.style;style.left=x+px;
style.top=y+h+options.reflGap*scale+px;
style.width=w+px;
if(isMSIE){style.filter.finishy=(reflHeight/h*100)}else{style.height=reflHeight+px}}}radians+=spacing}this.i
nnerWrapper.style.display='block';if(absChange>=0.001){this.controlTimer=setTimeout(function()
{context.updateAll()},this.timeDelay)}else{this.stop()}};this.checkImagesLoaded=function(){var
i;for(i=0;i<images.length;i++){if((images[i].width===undefined)||((images[i].complete!==undefined)&&(!
images[i].complete))){return}}for(i=0;i<images.length;i++){items.push(new Item(images[i],options));$
(images[i]).data('itemIndex',i)}clearInterval(this.tt);this.showFrontText();this.autoRotate();this.updateAll()
};this.tt=setInterval(function(){ctx.checkImagesLoaded()},50)};$.fn.CloudCarousel=function(options)
{this.each(function(){options=$.extend({},
{reflHeight:0,reflOpacity:0.5,reflGap:0,minScale:0.5,xPos:0,yPos:0,xRadius:0,yRadius:0,altBox:null,titleBo
x:null,FPS:30,autoRotate:'no',autoRotateDelay:1500,speed:0.2,mouseWheel:false,bringToFront:false},op
tions);$(this).data('cloudcarousel',new Controller(this,$('.cloudcarousel',$(this)),options))});return this}})
(jQuery);
//This initialises carousels on the container elements specified.
$("#carrousel-0").each(function (){
var controls = $(this).find(".carousel-control");
$(this).CloudCarousel(
autoRotate: "left",
xPos : $(this).parent().width() * 0.5,
yPos : 10,
xRadius : $(this).parent().width() / 2,
yRadius : $(this).parent().height() / 7,
buttonLeft: $(controls).filter(".left"),
buttonRight: $(controls).filter(".right"),
titleBox: $(this).find(".title-text"),
minScale: 0.25,
reflHeight : 40,
reflGap : 4,
reflOpacity : 0.75
);
});
setInterval(
function() {
let buttonLeft = $("#carrousel-1 .controls button")[0];
let buttonRight = $("#carrousel-1 .controls button")[1];
Right(buttonLeft);
}, 1500
);
$(".loadingDiv").delay(1000);
$(".loadingDiv").fadeOut(1000);
});
</script>
<script>
var scrolling_duration = 250;
var time_between_scrolling = 5000;
function Left (button){
let container =
document.getElementById(button.className).getElementsByClassName("images")[0];
let livres = container.children;
var last = $(container).find("a img").last();
if ($(last).position().left + $(last)[0].clientWidth < $(".slider")[0].clientWidth) return;
$(container).animate({
left: $(container).find("a img").eq(1).position().left * -1,
}, scrolling_duration, function() {
$(container).css("left", "0");
$(container).append($(container).find("a").first());
});
};
function Right (button){
let container =
document.getElementById(button.className).getElementsByClassName("images")[0];
let livres = container.children;
var last = $(container).find("a img").last();

if ($(last).position().left + $(last)[0].clientWidth < $(".slider")[0].clientWidth) return;
$(container).animate({
left: $(container).find("a img").eq(1).position().left,
$(container).css("left", "0");
$(container).prepend($(container).find("a").last());
});
};
/*
window.addEventListener('load', function() {
function setPosition() {
$(".images").each(function(i) {
var last = $(this).find("a img").last();
if ($(last).position().left + $(last)[0].clientWidth < $("#sliders")[0].clientWidth) return;
$(this).animate({
left: $(this).find("a img").eq(1).position().left * -1,
$(this).css("left", "0");
$(this).append($(this).find("a").first());
});
});
//setInterval(setPosition, time_between_scrolling);
});
*/
</script>
    
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="opaccredits">
<div class="default_item">
<div class="default_body">
<div id="main_footer" class="footer" style="height: auto;">
<div class="footertext">
<div class="colleft"><br /><center></center></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<html lang="en">
<head>
<title>Header Example</title>
<style>
.header {
background-color: red; /* Set banner color to red */
color: white; /* Text color */
padding: 20px;
text-align: center;
.link-button {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: blue;
color: white;
border-radius: 5px;
.link-button:hover {
background-color: darkblue;
</style>
</head>
<body>
<div class="header">
<a href="http://pakcat.pastic.gov.pk/" target="_blank">
<h1>Catalouge/OPAC</h1>
</a>
<p>Library collection including books and theses can be searched in the Cataloug/OPAC:.</p>
<a href="http://58.65.169.22:8081/" class="link-button">OPAC</a>
</div>
</body>
</html>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<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: 1200px;
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;
.service-section {
display: flex;
justify-content: space-between;
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;
.service h3 {
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 */
.service {
flex: 1 1 100%; /* One column on small screens */
</style>
</head>
<body>
<div class="container">
<h2>Our Services</h2>
<div class="service-section">

<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>

<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>

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">

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>

<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSPoTY1UtUr6ATKQ3FIuS8Eu7h2NtKGxmSsew&s" alt="Islamic Books Section">
<h3>Islamic Books Section</h3>
<p>Islamic books are available on the Quran, Hadith, Aqeedah, Tawheed, Salah, Ramadan,
Zakah, Hajj, Angels, Jinn, Akhirah, the Companions of the Prophet, and many more.</p>
</div>

q=tbn:ANd9GcT1kTLZ6ME1K3rI2PxQaLMoJnhQpMacNA_nEDXI7m4-Shr31iOq-
InvHOlscvDCGfQbMxA&usqp=CAU" 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>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Library Collection</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 16px;
.tab-pane {
display: block; /* Show active tab */
.carrouselFrame2 {
position: relative;
margin-top: 16px;
overflow: hidden; /* Hide overflowing icons */
width: 100%; /* Set width */
.special-title {
text-align: center; /* Center the title */
font-size: 24px; /* Adjust font size */
color: #333; /* Title color */
margin-bottom: 10px; /* Space below title */
.banner {
background-color: #4CAF50; /* Green banner */
color: white; /* White text */
padding: 10px; /* Padding around text */
text-align: center; /* Center text */
font-size: 20px; /* Font size for banner */
margin-bottom: 20px; /* Space below banner */
.icon-container {
display: flex;
transition: transform 0.5s ease; /* Smooth transition */
width: calc(100% * 3); /* Accommodate duplicates */
flex-wrap: nowrap; /* No wrapping */
.icon {
flex: 0 0 80px; /* Width for each icon */
text-align: center;
margin: 10px; /* Adjust margin */
.icon img {
width: 100%; /* Responsive image */
height: auto; /* Maintain aspect ratio */
display: block;
margin: 0 auto;
.caption {
font-size: 16px; /* Increased caption size */
margin-top: 5px; /* Add some space above caption */
}
/* Responsive Styles */
.icon {
flex: 0 0 60px; /* Smaller width for mobile */
.caption {
font-size: 14px; /* Smaller caption size for mobile */
.banner {
font-size: 18px; /* Smaller banner font size for mobile */
@media (min-width: 601px) and (max-width: 1200px) {
.icon {
flex: 0 0 100px; /* Medium width for tablets */
.caption {
font-size: 18px; /* Medium caption size for tablets */
.banner {
font-size: 19px; /* Medium banner font size for tablets */
</style>
</head>
<body>
<div id="tabs-2" role="tabpanel" class="tab-pane container fade active">

<div class="carrouselFrame2">
<div class="banner">Our Library Collection</div>
<div id="carrousel-1" class="slider">
<div class="icon-container" id="iconContainer">

<div class="icon">
<img
src="https://t4.ftcdn.net/jpg/05/07/19/83/360_F_507198344_PPZmZ0ShfTohJBPUv7Dh0ATswkJrPjtr.jpg
" alt="Print Books">
<div class="caption">Print Books 14000+</div>
</div>
<div class="icon">
q=tbn:ANd9GcTDTWHDdJih7IWjVpS0aIPU-TlvbuZGz7mUEQ&s" alt="E-Books">
<div class="caption">E-Books 11000+</div>
</div>
<div class="icon">
q=tbn:ANd9GcT60Gs6saDSxzNI5iVS4rx4M8FsQCd_86H5BQ&s" alt="Print Journals">
<div class="caption">Print Journals 40+</div>
</div>
<div class="icon">
<img src="https://w7.pngwing.com/pngs/1000/212/png-transparent-digital-library-
electronic-resource-management-washington-d-c-journal-miscellaneous-text-service-thumbnail.png"
alt="E-Journals">
<div class="caption">E-Journals 110+</div>
</div>
<div class="icon">
alt="Newspapers">
<div class="caption">Newspapers 06+</div>
</div>
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/512/6594/6594474.png" alt="Magazine">
<div class="caption">Magazine 04+</div>
</div>
<div class="icon">
<img src="https://cdn-icons-png.freepik.com/512/323/323961.png" alt="Library Members">
<div class="caption">Library Members 2500+</div>
</div>
<div class="icon">
q=tbn:ANd9GcTTwwJFQtj4WThplFeC3bIuJ_p_T2yMhIoTBg&s" alt="Video Lecture">
<div class="caption">CD 100+</div>
</div>

<div class="icon">
<img
src="https://t4.ftcdn.net/jpg/05/07/19/83/360_F_507198344_PPZmZ0ShfTohJBPUv7Dh0ATswkJrPjtr.jpg
" alt="Print Books">
<div class="caption">Print Books 14000+</div>
</div>
<div class="icon">
q=tbn:ANd9GcTDTWHDdJih7IWjVpS0aIPU-TlvbuZGz7mUEQ&s" alt="E-Books">
<div class="caption">E-Books 11000+</div>
</div>
<div class="icon">
q=tbn:ANd9GcT60Gs6saDSxzNI5iVS4rx4M8FsQCd_86H5BQ&s" alt="Print Journals">
<div class="caption">Print Journals 40+</div>
</div>
<div class="icon">
<img src="https://w7.pngwing.com/pngs/1000/212/png-transparent-digital-library-
electronic-resource-management-washington-d-c-journal-miscellaneous-text-service-thumbnail.png"
alt="E-Journals">
<div class="caption">E-Journals 110+</div>
</div>
<div class="icon">
alt="Newspapers">
<div class="caption">Newspapers 06+</div>
</div>
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/512/6594/6594474.png" alt="Magazine">
<div class="caption">Magazine 04+</div>
</div>
<div class="icon">
<img src="https://cdn-icons-png.freepik.com/512/323/323961.png" alt="Library Members">
<div class="caption">Library Members 2500+</div>
</div>
<div class="icon">
q=tbn:ANd9GcTTwwJFQtj4WThplFeC3bIuJ_p_T2yMhIoTBg&s" alt="Video Lecture">
<div class="caption">CD 100+</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let currentIndex = 0;
const icons = document.getElementById('iconContainer');
const totalIcons = document.querySelectorAll('.icon').length;
function rotateIcons() {
currentIndex++;
if (currentIndex >= totalIcons / 2) {
currentIndex = 0; // Reset to start after reaching halfway
icons.style.transition = 'none'; // Disable transition to jump back
icons.style.transform = `translateX(0)`;
setTimeout(() => {
icons.style.transition = 'transform 0.5s ease'; // Re-enable transition
}, 20);
} else {
icons.style.transform = `translateX(-${currentIndex * 120}px)`; // Move left
setInterval(rotateIcons, 2500); // Change every 3 seconds
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Librarian Message</title>
<style>
body {
margin: 0;
padding: 0;
/* Scoped styles for Useful Links */
.useful-links-container {
text-align: center;
margin: 20px auto;
background: #ffffff; /* White background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.useful-links {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center the links */
list-style-type: none;
padding: 0;
.useful-links li {
margin: 10px;
flex: 1 1 20%; /* Adjust the width of each link */
display: flex;
flex-direction: column; /* Arrange items in a column */
align-items: center; /* Center content horizontally */
.useful-links a {
color: #333;
display: flex;
flex-direction: column; /* Arrange icon and text in a column */
align-items: center; /* Center icon and text */
.icon {
width: 100px; /* Adjust icon size */
height: px;
margin-bottom: 5px; /* Space between icon and text */
/* Scoped styles for Librarian's Message */
.librarian-container {
max-width: 1450px;
margin: 20px auto;
background: white;
display: flex;
padding: 20px;
border-radius: 8px;
.librarian-image {
flex: 1;
padding-right: 20px;
.librarian-image img {
max-width: 80%; /* Reduced image size */
border-radius: 8px;
.librarian-message {
flex: 2;
color: black; /* Change text color to black */
.librarian-message h2 {
color: green; /* Change text color to green */
</style>
</head>
<body>
<div class="useful-links-container">
<h2>Useful Links</h2>
<ul class="useful-links">
<li><a href="https://nlp.gov.pk/" target="_blank"><img

src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5TYwRowVJAYG8E5ibKoeogcSTwd--
gUYFHQ&s" alt="Icon 1" class="icon">National Library of Pakistan</a></li>
<li><a href="http://www.digitallibrary.edu.pk/" target="_blank"><img src="https://encrypted-

tbn0.gstatic.com/images?q=tbn:ANd9GcSCmdEK8W4yzTXKkKh18yRvvGbszVJE11KslA&s" alt="Icon 2"
class="icon">HEC Digital Library</a></li>
<li><a href="https://pakistannewspaper.com/" target="_blank"><img src="https://cdn-icons-

png.flaticon.com/512/6344/6344020.png" alt="Icon 3" class="icon">Newspaper Online</a></li>
<li><a href="https://imdcollege.edu.pk/index.html" target="_blank"><img src="https://encrypted-

tbn0.gstatic.com/images?q=tbn:ANd9GcS7BRTK3-uRuY5552ggquTCp210Y_h-hlnTpA&s" alt="Icon 4"
class="icon">IMDC Website</a></li>
<li><a href="https://doaj.org/" target="_blank"><img
src="https://doajournals.wordpress.com/wp-content/uploads/2021/08/icon.png?w=200" alt="Icon 5"
class="icon">Open Access Journals</a></li>
<li><a href="https://sites.google.com/imdcollege.edu.pk/khanqahsharif-library/about-us/library-
timing" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRl3ycu5uoblyWKBXz1TqShK12wsF2sJbbWww&s" alt="Icon 6" class="icon">Library
Timing</a></li>
<li><a href="https://www.dawateislami.net/bookslibrary/" target="_blank"><img

src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSPoTY1UtUr6ATKQ3FIuS8Eu7h2NtKGxmSsew&s" alt="Icon 7" class="icon">Islamic
Books</a></li>
<li><a href="https://iris.who.int/" target="_blank"><img src="https://encrypted-

tbn0.gstatic.com/images?q=tbn:ANd9GcSkmEA7QX_TsNDvAe8Qtf4_8OIH8lgR64f4og&s" alt="Icon 8"
class="icon">WHO Publication</a></li>
</ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Librarian Message</title>
<style>
body {
margin: 0;
padding: 0;
max-width: 1200px; /* Max width for larger screens */

margin: 20px auto;
background: white;
display: flex;
padding: 20px;
border-radius: 8px;
flex-direction: column; /* Default to column for mobile */
.librarian-image {
padding: 10px 0; /* Padding for the image */
display: flex;
justify-content: center; /* Center image */
.librarian-image img {
max-width: 80%; /* Responsive image */
border-radius: 8px;
color: black;
text-align: left; /* Align text left */
color: green;
font-size: 24px; /* Base font size */
margin-bottom: 10px; /* Space below heading */
.librarian-message p {
font-size: 16px; /* Base font size */
line-height: 1.5; /* Improve readability */

margin: 0 0 10px; /* Space between paragraphs */
/* Responsive Styles */
@media (min-width: 768px) {
flex-direction: row; /* Side by side on larger screens */
.librarian-image {
flex: 1; /* Allow image to take up space */
padding-right: 20px; /* Space between image and text */
flex: 2; /* Allow message to take more space */
font-size: 28px; /* Larger heading on desktop */
.librarian-message p {
font-size: 18px; /* Larger text on desktop */
</style>
</head>
<body>
<div class="librarian-container">
<div class="librarian-image">
<img src="https://i.ibb.co/tLCQ2CM/mazhar.png" alt="Librarian">
</div>
<div class="librarian-message">
<h2>Librarian Message</h2>
<p>Dear Esteemed Patrons,</p>
<p>Welcome to IMDC Library! As the Librarian, I am thrilled to invite you to explore our diverse
and ever-growing collection of books, resources, and digital media. IMDC Library is working as the center
of information for IMDC community. The department aims to provide most dynamic learning and
research environment to the users. IMDC Library fulfills the information needs of the faculty and
students, by providing traditional library services as well as streamlines access to a wide range of e-
resources. IMDC Library is providing excellent services and facilities to fulfill the information needs of its
users. The library has a sufficient collection of books, journals and magazines both in print and digital
format.</p>
</div>
</div>
</body>
</html>
<iframe width="600" height="315" src="https://www.youtube.com/embed/7f8E7pnJ0rU?si=8ATo-

R5zmpVe6cO_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-
origin-when-cross-origin" allowfullscreen></iframe></html>
<section style="background-color: #f0f0f0; padding-top: 20px; overflow: hidden;">
<div style="max-width: 1600px; margin: auto;">
<div style="text-align: center; margin-bottom: 20px;">
<span style="font-size: 24px; color: #41A62A; display: inline-block; padding: 10px;">
<i class="fa fa-server" aria-hidden="true" style="margin-right: 15px;"></i>
Gallery
</span>
</div>
<div style="display: flex; overflow: hidden; width: 100%;">
<div style="display: flex; animation: scroll 20s linear infinite;">
<div style="margin: 10px; width: 240px; height: 180px;">
<img src="https://www.shutterstock.com/image-vector/interior-design-reading-room-public-
260nw-2318928003.jpg"
alt="Library Area"
style="width: 100%; height: 100%; object-fit: cover;"/>
</div>
<img src="https://www.shutterstock.com/image-vector/interior-design-school-library-
illustration-260nw-2114033597.jpg"
alt="Books Racks"
</div>
<img src="https://img.freepik.com/free-vector/children-reading-books-library_1308-
30864.jpg"
alt="Chlidren Section"
</div>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTu7DsNwN06djRJalUksB-
4Ev7Od5gqiLK3tGUianJl7nbaRoUcOpxpOSlfVMmt4l2bBQejcsUfEqP_AJp0j_fZDzXftR7fz_wZ2-
SBFA1NaaFVBSVQAyMZR6NJO14iRApHY7mW5NYbg/s1600/Library.png"
alt="Main Hall"
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmd3-
KZwl5zCDEQhjdFnFMp0VAZrKH-Dncsw&s"
alt="Computer Lab"
</div>
<img src="https://www.demco.com/media/wysiwyg/Ciculation_desk_main.jpg"
alt="Help Desk"
</div>
<img src="https://img.freepik.com/premium-vector/islamic-book-logo-vector-
template_689006-5.jpg"
alt="Islmic book Section"
</div>
q=tbn:ANd9GcS1VghuP_DW1oKTHKdMz-whKoNsGk8JrcsILg&s
alt="Referance Section"
</div>
</div>
</div>
</div>
<style>
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
</style>
</section>
<footer style="background-color: #ff0000; color: white; padding: 20px;">

<p style="text-align: center; margin-top: 14px;">
<a href="https://sites.google.com/imdcollege.edu.pk/imdclibrary/contacts" style="color: white;

text-decoration: underline;">Contact Us</a>
</p>
<div style="text-align: center;">
<a href="https://www.facebook.com/imdcollegeofficial" target="_blank" style="margin: 0 10px;">
q=tbn:ANd9GcTYC6UYzJ_7iiW88ml3JnfxlWL3z0l4GfIt8Q&s" alt="Facebook" style="width: 35px; height:
35px;">
<a href="https://www.instagram.com/imdcofficial/" target="_blank" style="margin: 0 10px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3u7Ef-Epbzi56rro67-
23PIs4iigf6YRE6w&s" alt="Instagram" style="width: 35px; height: 35px;">
</a>
</div>
<p style="text-align: center; margin-top: 10px;">© 2024 IMDC Library. All rights reserved.</p>
</footer>

DOCTYPE HTML

Uploaded by

Copyright:

Available Formats

DOCTYPE HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DOCTYPE HTML

Uploaded by

Copyright:

Available Formats

<!

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/

max-width: 1800px; /* Set a max width for the slider */

height: 450px; /* Set a fixed height */

object-fit: cover; /* Maintain aspect ratio and fill the space */

background-color: green; /* Change background color to green */

color: white; /* Change text color to white */

padding: 10px; /* Adjust padding */

font-size: 20px; /* Adjust font size */

width: 100%; /* Make caption full width */

position: relative; /* Enable relative positioning */

flex-direction: column; /* Stack images and captions */

align-items: center; /* Center items */

/* Mobile screen height adjustment */

@media only screen and (max-width: 500px) {

height: 200px; /* Set the height for mobile screens */

font-size: 16px; /* Adjust caption size for mobile */

/* Hide any other effects that might affect other elements */

overflow: hidden; /* Prevent overflow */

<div style="background-color: #87CEEB; padding: 12px;">

Welcome to Islamabad Medical & Dental College Library, Learn to Lead.

<div class="home_slider owl-carousel owl-theme" id="video_carousel">

<img class="mySlides" src="https://i.ibb.co/T2gj6sG/001C.png" alt="Image 1">

<div class="slider-caption">Seating Area.</div>

<img class="mySlides" src="https://i.ibb.co/B3m9zYQ/0001CEO.png" alt="Image 2">

<div class="slider-caption">Book Fair.</div>

<img class="mySlides" src="https://i.ibb.co/B65fcJK/0003c.jpg" alt="Image 3">

<div class="slider-caption">Circulation/Information Desk.</div>

<img class="mySlides" src="https://i.ibb.co/s32ShTW/d.jpg" alt="Image 4">

<div class="slider-caption">Digital Library Section.</div>

<img class="mySlides" src="https://i.ibb.co/tH4dp88/005c.png" alt="Image 5">

<div class="slider-caption">Briefing HEC Visit.</div>

<img class="mySlides" src="https://i.ibb.co/DDtTgXx/007.png" alt="Image 6">

<img class="mySlides" src="https://3.files.edl.io/66b8/23/06/02/005755-8a06026e-b6ad-4c4a-

<div class="slider-caption">Learn, Grow, Succeed</div>

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

font-family: Arial, sans-serif; /* Set a default font for the body */

text-align: center; /* Center text for all screens */

max-width: 1500px; /* Set max width for the text box */

margin: 20px auto; /* Center the text box */

padding: 20px; /* Add padding inside the text box */

border: 1px solid #ccc; /* Optional: add a border */

background-color: #f9f9f9; /* Optional: background color */

border-radius: 8px; /* Optional: rounded corners */

font-size: 2em; /* Default font size for mobile */

font-size: 1em; /* Default font size for mobile */

line-height: 1.5; /* Space between lines */

/* Media query for larger screens */

font-size: 3em; /* Increased font size for desktop */

font-size: 1.25em; /* Increased font size for desktop */

<h1>📚 Welcome to IMDC Library 📚</h1>

<div class="OpacMainUserBlock_en_body"><div id="opacmainuserblock">

<h3 style="text-align: center;"><span style="color: #843fa1;"><strong>ONLINE-LIBRARY

<center> <img

<div id="tabs-1" role="tabpanel" class="tab-pane container active">

/De bootstrap pour le carrousel/

/De bootstrap pour le carrousel FIN/