Skip to content

Instantly share code, notes, and snippets.

@QuocCao-dev

QuocCao-dev/index.html

Created September 10, 2023 16:06
Show Gist options
  • Save QuocCao-dev/21aeb6d6755873399ef2fda3cefbb12c to your computer and use it in GitHub Desktop.
Save QuocCao-dev/21aeb6d6755873399ef2fda3cefbb12c to your computer and use it in GitHub Desktop.
Download ZIP
Grand Hotel
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Grand Hotel</title>
<link rel="shortcut icon" type="image/png" href="img/crown.png" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- navbar -->
<div class="navbar">
<input type="checkbox" class="checkbox" id="click" hidden />
<!-- sidebar -->
<div class="sidebar">
<label for="click">
<div class="menu-icon">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</label>
<ul class="social-icons-list">
<li>
<a href="#" class="social-link"
><i class="fab fa-facebook-f"></i
></a>
</li>
<li>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#" class="social-link"
><i class="fab fa-google-plus-g"></i
></a>
</li>
<li>
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
</li>
</ul>
<div class="year">
<p>2018</p>
</div>
</div>
<!-- end of sidebar -->
<!-- navigation -->
<nav class="navigation">
<div class="navigation-header">
<h1 class="navigation-heading">Grand Hotel</h1>
<form class="navigation-search">
<input
type="text"
class="navigation-search-input"
placeholder="Search..."
/>
<button class="navigation-search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<ul class="navigation-list">
<li class="navigation-item">
<a href="#" class="navigation-link">home</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">about us</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">rooms</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">events</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">customers</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">contact</a>
</li>
</ul>
<div class="copyright">
<p>&copy; 2018. Grand Hotel. All Rights Reserved</p>
</div>
</nav>
<!-- end of navigation -->
</div>
<!-- end of navbar -->
</body>
</html>
Raw
style.css
/* common styles */
html {
font-size: 62.5%; /* 1rem = 10px */
/* 1rem => 16px
1rem = 10px => 62.5%
*/
}
/* reset css */
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
/* end of common styles */
/* navbar */
/* navbar */
/* sidebar */
.sidebar {
width: 8rem;
height: 100%;
background-color: #eee;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.menu-icon {
margin-top: 3rem;
cursor: pointer;
}
.line {
height: 0.2rem;
width: 2.5rem;
background-color: #222;
margin-bottom: 0.6rem;
}
.line-1,
.line-3 {
width: 1.8rem;
transition: all 0.4s;
}
.menu-icon:hover .line {
width: 2.5rem;
}
.social-icons-list {
list-style: none;
padding: 0;
height: 25rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.social-link {
font-size: 2rem;
color: #777;
transition: color 0.3s;
}
.social-link:hover {
color: #deaa86;
}
.year {
margin-bottom: 1rem;
font-size: 1.5rem;
color: #555;
}
/* end of sidebar */
/* navigation */
.navigation {
position: fixed;
left: -32rem;
width: 40rem;
height: 100%;
background: linear-gradient(
to top,
rgba(34, 32, 41, 1),
rgba(34, 32, 41, 0.8)
),
url(../img/nav-bg.jpeg) center no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: left 0.8s cubic-bezier(1, 0, 0, 1);
}
.navigation-heading {
font-family: "Josefin Sans", sans-serif;
font-size: 3.5rem;
font-weight: 300;
letter-spacing: 0.2rem;
color: #deaa86;
text-align: center;
}
.navigation-search {
position: relative;
}
.navigation-search-input {
width: 30rem;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.3);
font-family: "Josefin Sans", sans-serif;
font-size: 1.6rem;
color: #deaa86;
letter-spacing: 0.1rem;
outline: none;
border: 0.1rem solid #555;
border-radius: 10rem;
transition: background-color 0.3s;
}
.navigation-search-input:focus {
background-color: rgba(0, 0, 0, 0.1);
}
.navigation-search-btn {
border: none;
background-color: transparent;
color: #deaa86;
font-size: 1.7rem;
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer;
}
.navigation-search-btn:focus {
outline: none;
}
.navigation-list {
list-style: none;
padding: 0;
height: 28rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.navigation-item {
position: relative;
}
.navigation-link {
color: #fff;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-decoration: none;
transition: color 0.5s;
}
.navigation-link::before {
content: "";
width: 0rem;
height: 0.1rem;
background-color: #deaa86;
position: absolute;
top: 1rem;
left: -4rem;
transition: width 0.5s cubic-bezier(1, 0, 0, 1);
}
.navigation-link::after {
content: "";
width: 0rem;
height: 0.1rem;
background-color: #deaa86;
position: absolute;
top: 1rem;
right: -4rem;
transition: width 0.5s cubic-bezier(1, 0, 0, 1);
}
.navigation-link:hover {
color: #deaa86;
}
.navigation-link:hover::before,
.navigation-link:hover::after {
width: 3rem;
}
.copyright {
color: #fff;
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.checkbox:checked ~ .navigation {
left: 8rem;
}
.checkbox:checked ~ .sidebar .line-1 {
transform: rotate(-405deg) translate(-5px, 6px);
width: 2.5rem;
}
.checkbox:checked ~ .sidebar .line-2 {
opacity: 0;
}
.checkbox:checked ~ .sidebar .line-3 {
transform: rotate(405deg) translate(-5px, -6px);
width: 2.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment