Scribd
Upload
9 views6 pages

Library Website Layout and Design

The document is an HTML template for a library webpage, featuring a header with a logo, navigation links, a body section describing the library's purpose, and a footer with social media links and an address. The layout is styled using CSS for a visually appealing design. It includes responsive elements such as flexbox for alignment and hover effects for interactive links.

Uploaded by

B Shirisha
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
9 views6 pages

Library Website Layout and Design

The document is an HTML template for a library webpage, featuring a header with a logo, navigation links, a body section describing the library's purpose, and a footer with social media links and an address. The layout is styled using CSS for a visually appealing design. It includes responsive elements such as flexbox for alignment and hover effects for interactive links.

Uploaded by

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

{%load static%}

<html>

<head>

<title></title>

<style>

body{

background-image:url("{%static '[Link]'%}");

background-size: cover;

#header{

height: 100px;

border: 1px solid black;

display: flex;

background: rgba(255,255,255,0.5);

#logo{

height: 100px;

border: 1px solid black;

width: 10%;

img{

clip-path: circle(50%);

#heading{

height: 100px;

border: 1px solid black;

width: 40%;

display: flex;

align-items: center;

justify-content: center;
}

#navi{

height: 100px;

border: 1px solid black;

width: 50%;

display: flex;

align-items: center;

#links{

height: 30px;

border: 1px solid white;

width: 100%;

border-radius: 15px;

ul{

margin: 5px 0px;

ul li{

display: inline-block;

padding: 0px 20px;

ul li:hover{

display: inline-block;

padding: 0px 20px;

background: rgba(255,255,255,0.5);

border: 1px solid black;

border-radius: 15px;

a{

text-decoration: none;
color: black;

#body{

height: 500px;

display: flex;

align-items: center;

justify-content: center;

#body1{

height: 500px;

width: 80%;

background: rgba(255,255,255,0.5);

display: flex;

align-items: center;

justify-content: center;

padding: 10px;

#footer{

height: 100px;

background: rgba(255,255,255,0.5);

display: flex;

#social{

height: 100px;

width: 50%;

display: flex;

align-items: center;
justify-content: space-around;

#address{

height: 100px;

wdith: 50%;

#footer img:hover{

background: rgba(255,255,255,0.5);

border: 1px solid black;

border-radius: 50%;

</style>

</head>

<body>

<div id="header">

<div id="logo">

<image src="{%static '[Link]'%}" height="100" width="100">

</div>

<div id="heading">

<h1>Library</h1>

</div>

<div id="navi">

<div id="links">

<ul>

<li><a href="">Home</a></li>

<li><a href="S">Student</a></li>

<li><a href="F">Faculty</a></li>

<li><a href="L">Librarian</a></li>

</ul>

</div>
</div>

</div>

<div id="body">

<div id="body1">

<p>

A library is a space dedicated to the collection, organization,


and preservation of information resources, serving as a hub for knowledge, learning, and community
engagement

</p>

</div>

</div>

<div id="footer">

<div id="social">

<a href="[Link]
src="{%static '[Link]'%}" height="30"></a>

<a href="[Link]
hl=en"><image src="{%static '[Link]'%}" height="30"></a>

<a href="[Link] src="{%static '[Link]'%}"


height="30"></a>

<a href="[Link] src="{%static '[Link]'%}"


height="30"></a>

<a href="[Link] src="{%static


'[Link]'%}" height="30"></a>

</div>

<div id="address">

address

</div>

</div>

</body>
</html>

You might also like