Make a Restaurant Website using HTML and CSS | Html Css Beginners Project | Html Css Unique Projects
1. index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Website</title>
<!-- linking css file here -->
<link rel="stylesheet" href="./style.css">
<!-- google fonts link -->
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<body>
<div class="container">
<header class="header">
<!-- name of the restaurant o restaurant logo -->
<h1>expice</h1>
<!-- navbar or nav menu -->
<nav class="nav">
<ul class="menu">
<li>Home</li>
<li>Menu</li>
<li>Category</li>
<li>About</li>
<li>Contact us</li>
</ul>
</nav>
<!-- for user logo (which is visible in the top-right corner) -->
<div class="user-logo">
<img src="https://icons.veryicon.com/png/o/internet--web/prejudice/user-128.png" alt="user-logo">
</div>
</header>
<!-- main starts from here -->
<main class="main">
<div class="main-container">
<div class="text-container">
<div class="heading-text">
<h1 class="large-h1">Food</h1>
<h1 class="sub-heading">Discover Restaurant & Delicious Food</h1>
</div>
<div class="input-field">
<input type="text" placeholder="Search Restaurants, Food...">
<button class="go-btn">GO</button>
</div>
</div>
<div class="image-container">
<img src="./images/food-image.png" alt="food-image">
</div>
</div>
</main>
</div>
<!-- wee need to keep this outside the container -->
<section class="location-div">
<div class="location">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_qdK1pxsckBs3_ZLVsXxYnMvaDoR9YdhnhXj38rLMjg&s" alt="location">
<hp>Rajsahi</hp>
</div>
</section>
</body>
</html>2. style.css file
/* to add font you can use google font */
* {
margin: 0;
padding: 0;
font-family: 'Poppins';
}
body {
background: #ffedde;
height: 100vh;
}
.container {
width: 100%;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.header {
width: 90%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.header h1 {
color:#FE043C;
font-size: 64px;
}
/* menu styling */
.menu {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-size: 18px;
list-style-type: none;
}
.menu li {
transition: color 0.35s ease;
}
.menu li:hover {
cursor: pointer;
color: #FE043C;
}
/* usre logo styling */
img[alt="user-logo"] {
width: 30px;
border: 2px solid #000;
border-radius: 100px;
}
img[alt="user-logo"]:hover {
cursor: pointer;
border-color: #777;
}
/* main styling */
main {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-container {
width: 90%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
img[alt="food-image"] {
width: 40rem;
}
/* main -heading text styling */
.large-h1 {
font-size: 120px;
font-weight: 900;
color: #2e266f22;
line-height: 1.0;
}
.sub-heading {
font-size: 64px;
}
/* input field styling */
.input-field {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
height: 50px;
width: 350px;
}
input {
border: 0;
outline: 0;
background: #fff;
padding-left: 15px;
width: 200px;
}
.go-btn {
border: 0;
outline: 0;
padding: 12px 40px;
font-size: 18px;
border-top-left-radius: 50px;
color: #fff;
background: #FE043C;
transition: background 0.25s ease;
}
.go-btn:hover {
cursor: pointer;
background: #fe043aa6;
}
/* location styling */
.location-div {
width: 100%;
display: flex;
justify-content: left;
}
.location {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
background: #FE043C;
color: #fff;
padding: 8px 40px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
img[alt="location"] {
height: 20px;
border-radius: 30px;
}
images and other files :
