Scribd
Upload
16 views

Message

This document contains the HTML and CSS code for a library management website. It includes styling for page elements like menus, headers, boxes and buttons. The page structure consists of a menu bar, header, and content area. Styles are defined for colors, layouts, and interactions of different elements on the page. The goal is to create a website where users can view, search and update library data.

Uploaded by

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

Message

This document contains the HTML and CSS code for a library management website. It includes styling for page elements like menus, headers, boxes and buttons. The page structure consists of a menu bar, header, and content area. Styles are defined for colors, layouts, and interactions of different elements on the page. The goal is to create a website where users can view, search and update library data.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: ghostwhite;
text-align: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: rosybrown;
}

#menu ul {
background: #7f4d1f;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}

#menu a {
text-decoration: none;
color: #fff;
display: block;
}

#menu a:hover {
background: #f1f1f1;
color: #333;
}

.header {
background-color: #FCFCFC;
padding: 20px;
}

.stepBox {
background-color: tan;
border: 1px solid black;
color: black;
display: flex;
flex-direction: row;
justify-content: flex-start;
margin: auto;
width: 780px;
}

.numBox {
background-color: white;
border: 1px solid black;
color: black;
line-height: 45px;
margin: auto;
min-height: 90px;
min-width: 90px;
text-align: center;
}

.actionBox {
background-color: white;
border: 1px solid black;
color: black;
font-size: 20px;
height: 80px;
line-height: 90px;
margin: 15px;
text-align: center;
width: 200px;
}

.submitBox {
background-color: white;
border: 1px solid black;
color: black;
font-size: 20px;
margin: auto;
text-align: center;
width: 420px;
}

.chooseBox {
background-color: peachpuff;
border: 1px solid black;
color: black;
margin: auto;
text-align: left;
width: 400px;
}

.inviBox {
background-color: white;
color: black;
margin: auto;
text-align: left;
max-width: fit-content;
}

.wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.button {
width: 140px;
height: 45px;
font-family: 'Roboto', 'sans-serif';
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: black;
background-color: white;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}

.button:hover {
background-color: burlywood;
box-shadow: 0px 15px 20px rgba(254, 189, 59, 0.377);
color: white;
transform: translateY(-7px);
}

input[type="text"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type="text"]:focus {
background-color: orange;
outline: none;
}

div {
padding: 10px 0;
}

button {
color: white;
padding: -3px;
margin: 15px 0;
border: none;
cursor: pointer;
width: 100px;
background-color: saddlebrown;
}
</style>
</head>

<body
background="https://i.pinimg.com/564x/53/5d/a6/535da66dd6830b748c16fd6e1ca35fba.jpg
">
<div id="menu">
<ul>
<li><a href='homepage.html'>Homepage</a></li>
<li><a href='showdata.html'>Show data</a></li>
<li><a href='searchdata.html'>Search data</a></li>
<li><a href='updatedata.html'>Update data</a></li>
</ul>
</div>
<div class="header">
<h1>LIBRARY MANAGEMENT WEBSITE</h1>
<h2>This is the website for you to check the information of AHL
LIBRARY</h2>
<h3> Use the menu-bar for showing, searching, and updating data</h3>
</div>
</body>

</html>

You might also like