Creative Template design and Source code for Online Hotel Reservation (Admin side)
Source Code 👇👻
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Paradise Beach Resort</title>
</head>
<body>
<div class = "head">
<div class="sidebar">
<br> <br>
<div class="logo-details">
<i class='bx bxl-c-plus-plus'></i>
<span class="logo_name">Paradise <p class="lgnm">Beach Resort </p></span>
</div>
<br><br>
<ul class="nav-links">
<li>
<a href="#">
<i class='bx bx-grid-alt' ></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="active">
<i class='bx bx-box' ></i>
<span class="links_name">Manage</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-message' ></i>
<span class="links_name">Messages</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
</li>
<li class="log_out">
<a href="logout.jsp">
<i class='bx bx-log-out'></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<div class = "topnav">
<a class = "active" href = "home.html" > Home </a>
<a class = "active" href = "#"> News </a>
<a class = "active" href = "#" > About </a>
<a class = "active" href = "#"> Blog </a>
<a class = "active" href = "#" > Contact </a>
</div>
<br><br>
<div align = "center">
<p id="logo" align = "center"> Paradise <span class = "logonm"> Beach Resort </span> </p> <img src = "images/logo.jpg" class = "logo">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class = "body">
<a class = "active" href = "#"> MANAGE ROOMS </a>
<a class = "active" href = "#"> MANAGE MEAL PACKEGES </a>
<a class = "active" href = "#"> MANAGE PAYMENT </a>
<a class = "active" href = "#"> MANAGE FEEDBACKS </a>
</div>
</div>
</div>
<br>
</body>
<style>
.logo{
width:21%;
height:45%;
border-radius:50%;
top:100px;
position:absolute;
left:22%;
}
.logonm{
top:60px;
font-size:70px;
font-family:Freestyle Script;
left:-200px;
position:relative;
}
#logo{
top:150px;
font-size:90px;
transform:translate(-50% -50%);
font-family:Jokerman;
position:absolute;
left:45%;
}
body{
background-image:url("images/image3.jpg");
background-position:center;
background-size:cover;
width:200px;
height:600px;
}
.topnav{
float:right;
}
.topnav a{
color:#f2f2f2;
text-align:center;
padding:14px 18px;
text-decoration:none;
font-size:20px;
font-family:calibri;
font-weight:bold;
}
.topnav a:hover{
color:black;
}
#dash{
background-color:#090825;
color:white;
}
.head{
background-color:#090825;
background:rgba(100 , 100 , 100 , 0.7);
position: absolute;
top:0;
left:0;
right:0;
width:100%;
height:100%;
padding-top:40px;
color:#fff;
}
footer {
position: absolute;
right:0;
left:0;
bottom: -275px;
height:60%;
width: 100%;
background: #111;
color:#fff;
background:rgba(0 , 0 , 0 , 0.9);
}
footer h3{
color: grey;
text-align:left;
float:right;
font-family:calibri;
padding:50px;
}
.body{
background-color:#333;
overflow:hidden;
width:58.8%;
}
.body a{
float:left;
color:#f2f2f2;
text-align:center;
padding:27px 23px;
text-decoration:none;
font-size:18px;
font-family:calibri;
}
.body a:hover{
background-color:#ddd;
color:black;
}
#aval{
background-color:#090825;
color:white;
float:right;
}
.p2{
font-family:sans-serif;
color:#FFFDE7;
font-size :20px;
}
.p1{
font-size :60px;
color:#FFFDDD;
font-weight:bold;
}
.img{
width:10%;
}
.icon{
float:right;
}
.p3{
padding:0px 40px;
font-size:22px;
font-weight:bold;
}
.contact{
padding:10px 10px 10px 50px;
}
.c1{
font-size:22px;
font-weight:bold;
}
.c2{
font-size:20px;
line-height:1.5;
font-family:calibri;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: absolute;
height:648px;
width: 250px;
background: #697a85;
transition: all 0.5s ease;
top:0;
}
.sidebar.active{
width: 60px;
}
.sidebar .logo-details{
height: 80px;
display: flex;
align-items:center;
}
.sidebar .logo-details i{
font-size: 28px;
font-weight: 500;
color:#f1f1f1;
min-width: 50px;
text-align: center
}
.sidebar .logo-details .logo_name{
color: #f1f1f1;
font-size: 40px;
font-weight: 500;
font-family:Jokerman;
}
.sidebar .logo-details .lgnm{
color: #f1f1f1;
font-size: 35px;
font-weight: 500;
font-family:Freestyle Script;
}
.sidebar .nav-links{
margin-top: 10px;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
height: 50px;
}
.sidebar .nav-links li a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li a.active{
background: #445A67;
}
.sidebar .nav-links li a:hover{
background-color: #445A67;
}
.sidebar .nav-links li i{
min-width: 60px;
text-align: center;
font-size: 18px;
color: #f1f1f1;
}
.sidebar .nav-links li a .links_name{
color: #f1f1f1;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
}
.sidebar .nav-links .log_out{
position: absolute;
bottom: 0;
width: 100%;
}
.home-section{
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section{
width: calc(100% - 60px);
left: 60px;
}
.home-section nav{
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
display: flex;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section nav{
left: 60px;
width: calc(100% - 60px);
}
.home-section nav .sidebar-button{
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i{
font-size: 35px;
margin-right: 10px;
}
</style>
</html>
Comments
Post a Comment