< BACK TO COMPONENTS

Designing a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development

Faraz

By Faraz -

Learn how to create a delicious restaurant website with HTML, CSS, and JavaScript. Improve your user experience and convert more visitors into customers.


designing a delicious website using html, css, and javascript for restaurant web development.jpg

Welcome to "Designing a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development". In this blog post, we'll be taking a closer look at how HTML, CSS, and JavaScript can be used to create a mouth-watering, visually appealing website for restaurants. The world of food and technology is constantly evolving, and a well-designed website is essential for any restaurant looking to stand out in today's competitive market. We'll be exploring the ways in which HTML, CSS, and JavaScript can be used to enhance the user experience, showcase a restaurant's unique offerings, and drive online traffic. So whether you're a restaurant owner, web developer, or just a food enthusiast, join us as we take a culinary journey through the world of web development.


Let's start making an amazing responsive restaurant website using HTML, CSS, and JavaScript step by step.


Join Telegram Channel to Download the Project: Click Here


Design by: Abdel Rahman Ali

Source Code

Step 1 (HTML Code):

The first step in creating a restaurant website using HTML, CSS, and JavaScript is to create the basic HTML structure. In this file, we will include the main structure for our restaurant website.


This includes creating the necessary HTML tags as well as any other tags that will be used throughout the website. This step is crucial as it sets the foundation for the rest of the website and ensures that all elements are properly organized and nested.


By creating the basic HTML structure, we are defining the skeleton of the website that we will fill with the design and functionality in the next steps.


After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Step 2 (CSS Code):

Once the basic HTML structure of the website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.


We will create our CSS file. In this file, we will use some basic CSS rules to create our restaurant website. We will also add some padding and margin properties to ensure that everything looks correct.


By styling the website with CSS, we are adding the design layer on top of the HTML structure, making the website visually appealing and easy to navigate. This step is essential in creating an engaging and user-friendly website that will encourage users to stay and explore the restaurant's offerings.


This will give our restaurant website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

/*Start Global*/
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 12px;
}
body.hide-scroll::-webkit-scrollbar {
  display: none;
}
a {
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  max-width: 100%;
}
h2 {
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: 100px;
  font-weight: normal;
  margin: 0 0 -55px;
}
h1, h3 {
  font-family: "Source Code Pro", sans-serif;
  font-size: 47px;
  font-weight: bold;
  letter-spacing: 9.4px;
  margin: 0 0 15px;
}
p {
  color: #515151;
  line-height: 27px;
}
.a-CTA {
  border-bottom: 2px solid #a96700;
  padding-bottom: 4px;
  letter-spacing: 1.5px;
  font-size: 18px;
}
/*End Global*/

/*Start Mutual*/
p, .a-CTA, input, header .navigation-bar a, .copyright li, .contact .form form label, .contact .form form button {
  font-family: Cabin, sans-serif;
}
.fa-asterisk, .a-CTA, h2, header .navigation-bar a:hover, header nav.active .navigation-bar a:hover, footer .social-media .links a:hover, .copyright .info li a, .copyright .CTA li a:hover {
  color: #a96700;
}
header nav .navigation-bar .underline, header .text .button button:hover, .contact .form form button:hover, .contact .text i:hover {
  background-color: #a96700;
}
header .navigation-bar ul li, header .text, .about-us .text, .reservation .text, .menu .box-model, .menu .text, .fixed-image .text, footer, .copyright, .contact .text i {
  text-align: center;
}
header nav, header .navigation-bar ul, .about-us, .reservation, .about-us .image-container, .reservation .image-container, .menu, .menu .menu-image-container, footer .contact-container, .copyright ul, .contact {
  display: flex;
}
header nav .toggle, header nav .toggle span, header .navigation-bar, header .navigation-bar ul, .menu .box-model .close, footer .social-media .links a, .copyright .CTA li a {
  transition: .3s;
}
header, header nav .toggle span, header .navigation-bar a, header .text, header .text .arrow .left, header .text .arrow .right, .recipes, .menu .box-image-container, .fixed-image .text, .copyright, .copyright .arrow-up {
  position: relative;
}
header nav .toggle, header .navigation-bar .underline, header .text .arrow .left:after, header .text .arrow .right:after, header .svg-down, header .arrow-down, .recipes .text, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .box-image-container .box-image, .copyright .svg-up {
  position: absolute;
}
.recipes .text, .fixed-image .text, .menu .box-image-container, .menu .box-image-container .box-image {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
header nav, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, .menu .box-model, .menu .box-image-container, .menu .box-image-container .box-image {
  width: 100%;
}
button, .dots > div, header nav .toggle, header .arrow-down, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .menu-image-container .image img, footer .newsletter i, .copyright .arrow-up {
  cursor: pointer;
}
.dots .active, header nav.active, header nav.active .toggle.active span, header nav .toggle span, header .navigation-bar .underline, header .text .arrow .left, header .text .arrow .right, header .text .button button, .contact form button {
  background-color: #fff;
}
h1, h3, header .navigation-bar a, header .text span, .menu .box-model .close:hover, footer .text h2, footer .text p, footer .social-media .links a, .contact .text i, .contact .form form button {
  color: #fff;
}
header nav, header .navigation-bar.show, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, header .text .arrow .left:after, .menu .box-model, .copyright .arrow-up {
  left: 0;
}
header .text .arrow .left:after, header .text .arrow .right:after, header .text span, footer .social-media .links a, footer .newsletter i, .copyright .arrow-up, .contact .text i, .contact .form form label {
  display: inline-block;
}
/*End Mutual*/

/*Start Dots*/
.dots {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translate(0,-50%);
  z-index: 5;
}
.dots > div  {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 20;
  margin-bottom: 10px;
  border: 2px solid #fff;
}
.dots .black {
  border-color: #000;
}
.dots .active.black {
  background-color: #000;
}
/*End Dots*/

/*Start Loader*/
.loader-wrap, .loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader-wrap {
  background-color: #a96700;
  z-index: 30;
}
.loader-wrap.remove {
  display: none;
}
.loader {
  margin: auto;
  height: 40px;
  width: 80px;
  box-sizing: border-box;
}
.loader .loader-item {
  position: relative;
  float: left;
  height: 40px;
  width: 4px;
  margin: 0 2px;
  background-color: #fff;
}
.loader .loader-item:nth-child(1) {
  -webkit-animation: loader-item-1 2s linear infinite;
  animation: loader-item-1 2s linear infinite;
}
.loader .loader-item:nth-child(2) {
  -webkit-animation: loader-item-2 2s linear infinite;
  animation: loader-item-2 2s linear infinite;
}
.loader .loader-item:nth-child(3) {
  -webkit-animation: loader-item-3 2s linear infinite;
  animation: loader-item-3 2s linear infinite;
}
.loader .loader-item:nth-child(4) {
  -webkit-animation: loader-item-4 2s linear infinite;
  animation: loader-item-4 2s linear infinite;
}
.loader .loader-item:nth-child(5) {
  -webkit-animation: loader-item-5 2s linear infinite;
  animation: loader-item-5 2s linear infinite;
}
.loader .loader-item:nth-child(6) {
  -webkit-animation: loader-item-6 2s linear infinite;
  animation: loader-item-6 2s linear infinite;
}
.loader .loader-item:nth-child(7) {
  -webkit-animation: loader-item-7 2s linear infinite;
  animation: loader-item-7 2s linear infinite;
}
.loader .loader-item:nth-child(8) {
  -webkit-animation: loader-item-8 2s linear infinite;
  animation: loader-item-8 2s linear infinite;
}
.loader .loader-item:nth-child(9) {
  -webkit-animation: loader-item-9 2s linear infinite;
  animation: loader-item-9 2s linear infinite;
}
.loader .loader-item:nth-child(10) {
  -webkit-animation: loader-item-10 2s linear infinite;
  animation: loader-item-10 2s linear infinite;
}
.loader:after {
  content: 'Loading...';
  font-size: 16px;
  font-family: Arial, serif;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  margin: auto;
}
@-webkit-keyframes loader-item-1 {
  1% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  11% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  21% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-1 {
  1% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  11% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  21% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-2 {
  7% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  17% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  27% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-2 {
  7% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  17% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  27% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-3 {
  13% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  23% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  33% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-3 {
  13% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  23% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  33% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-4 {
  19% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  29% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  39% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-4 {
  19% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  29% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  39% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-5 {
  25% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  35% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  45% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-5 {
  25% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  35% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  45% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-6 {
  31% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  41% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  51% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-6 {
  31% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  41% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  51% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-7 {
  37% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  47% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  57% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-7 {
  37% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  47% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  57% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-8 {
  43% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  53% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  63% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-8 {
  43% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  53% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  63% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-9 {
  49% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  59% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  69% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-9 {
  49% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  59% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  69% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-10 {
  55% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  65% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  75% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-10 {
  55% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  65% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  75% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
/*End Loader*/

/*Start Home Page*/

/*Start Header*/
header {
  height: calc(100vh - 22px);
  background-size: cover;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg") fixed bottom;
  padding: 20px 70px;
}
header nav {
  position: fixed;
  top: 0;
  padding: 36px 36px 20px;
  z-index: 20;
}
header nav .toggle {
  display: none;
  top: 26px;
  left: 20px;
  background-color: transparent;
  border: none;
  padding: 0;
  z-index: 21;
}
header nav .toggle:focus {
  outline: none;
}
header nav.active .toggle span {
  background-color: #000;
}
header nav .toggle.active {
  left: 32%;
}
header nav .toggle.active .first {
  top: 16px;
  transform: rotate(-45deg);
}
header nav .toggle.active .last {
  top: 0;
  transform: rotate(45deg);
}
header nav .toggle .hide {
  transition: 0s;
  visibility: hidden;
}
header nav .toggle span {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 40px;
}
header nav .toggle span:not(:last-of-type) {
  margin-bottom: 6px;
}
header nav .logo {
  flex-basis: 56%;
  padding-left: 50px;
}
header .navigation-bar.show {
  width: 40%;
}
header .navigation-bar.show a {
  color: #ccc !important;
}
header .navigation-bar.show a:hover {
  color: #fff !important;
}
header .navigation-bar ul li {
  flex: 1;
  padding: 0 10px;
}
header .navigation-bar a {
  text-decoration: none;
  transition: all .5s;
  font-size: 16px;
}
header nav.active .navigation-bar a {
  color: #000;
}
header .navigation-bar .underline {
  height: 2px;
  width: 0;
  left: 50%;
  bottom: -4px;
  transition: all .3s;
  display: block;
}
header .text {
  top: 24%;
}
header .text h1 {
  margin-bottom: 0;
}
header .text .arrow .left, header .text .arrow .right {
  height: 3px;
  width: 100px;
}
header .text .arrow .left {
  left: -4%;
}
header .text .arrow .right {
  right: -4%;
}
header .text .arrow .left:after, header .text .arrow .right:after {
  content: '';
  border: 10px solid transparent;
  border-left-color: #fff;
  top: -8px;
}
header .text .arrow .right:after {
  right: 0;
  border-color: transparent #fff transparent transparent;
}
header .text .arrow .fa-asterisk {
  vertical-align: super;
}
header .text span {
  font-family: "Source Code Pro", sans-serif;
  font-size: 15px;
  margin-bottom: 12px;
}
header .text .button button, .contact form button {
  border: none;
  padding: 9px 18px;
  letter-spacing: 2.4px;
  font-size: 12px;
  font-family: source_sans_problack, sans-serif;
  border-radius: 3px;
}
header .text .button button, .contact form button:focus {
  outline: none;
}
header .svg-down {
  bottom: 0;
  left: 50%;
  z-index: 5;
  margin-left: -96px;
  margin-bottom: -12px;
  color: #fff;
}
header .arrow-down {
  width: 70px;
  height: 50px;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/arrow-down.png") no-repeat center;
}
/*End Header*/

/*Start About-Us*/
.about-us, .reservation {
  padding: 60px;
}
.about-us .text, .reservation .text {
  flex: 50%;
  padding: 40px 52px 0 0;
}
.about-us .text h3, .reservation .text h3 {
  color: #000;
}
.about-us .text .fa-asterisk, .reservation .text .fa-asterisk {
  color: #9a9998;
}
.about-us .image-container, .reservation .image-container {
  flex: 50%;
}
.about-us .image, .reservation .image {
  margin-left: 20px;
}
/*End About-Us*/

/*Start Recipes*/
.recipes .image {
  height: 350px;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988529/three-col-1.jpg") fixed center;
  background-size: cover;
}
/*End Recipes*/

/*Start Menu*/
.menu {
  padding: 60px;
}
.menu .box-model {
  display: none;
  position: fixed;
  height: 100%;
  top: 0;
  z-index: 20;
  background-color: rgba(0,0,0,.7);
}
.menu .box-model.active {
  display: block;
}
.menu .box-model.active body {
  overflow: hidden;
}
.menu .box-model .close {
  color: #ccc;
  right: 25px;
  top: 10px;
  z-index: 20;
}
.menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left {
  width: 40px;
  height: 40px;
  right: 20px;
  top: 50%;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  z-index: 20;
}
.menu .box-model .arrow .arrow-left {
  left: 20px;
  transform: rotate(-135deg);
}
.menu .box-image-container {
  height: 100%;
}
.menu .box-image-container .box-image img.active {
  animation: scale .5s;
}
@keyframes scale {
  from {transform: scale(0,0)}
  to {transform: scale(1,1)}
}
.menu .menu-image-container {
  flex-wrap: wrap;
  flex: 60%;
}
.menu .menu-image-container .image {
  margin: 0 20px 20px 0;
  flex: calc( 50% - 40px);
}
.menu .text {
  flex: 55%;
  padding: 40px 0 0 62px;
}
.menu .text h3 {
  color: #000;;
}
.menu .text .fa-asterisk {
  color: #9a9998;
}
/*End Menu*/

/*Start fixed-image*/
.fixed-image {
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988533/frontpage-menu.jpg") fixed center;
  background-size: cover;
  height: 400px;
}
/*End fixed-image*/

/*Start Footer*/
footer {
  background-color: #121212;
  padding: 60px 20px;
}
footer .text {
  max-width: 500px;
  margin: auto;
}
footer .text h2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 19px;
  letter-spacing: 1.9px;
  margin-bottom: 25px;
}
footer .text .fa-asterisk {
  font-size: 12px;
}
footer .text p {
  line-height: 27px;
}
footer .contact-container {
  padding: 40px 0;
  max-width: 1000px;
  margin: auto;
}
footer .contact-container > div {
  flex: 1;
}
footer .contact-container h3 {
  font-size: 19px;
  letter-spacing: 1.9px;
}
footer .social-media .links a {
  margin: 0 10px;
  font-size: 25px;
}
footer .newsletter input {
  padding: 10px;
  width: 270px;
  background-color: #eee;
  border: none;
  margin-left: -15px;
}
footer .newsletter i {
  margin-left: -40px;
  vertical-align: middle;
  font-size: 21px;
}
.copyright {
  padding: 15px 40px 30px;
  background-color: #262526;
}
.copyright .svg-up {
  top: 0;
  left: 50%;
  margin-left: -96px;
  margin-top: -50px;
}
.copyright .arrow-up {
  width: 40px;
  height: 30px;
  top: -45px;
  color: #fff;
  line-height: 1.9
}
.copyright ul {
  justify-content: center;
}
.copyright li {
  color: #919191;
  font-size: 14px;
}
.copyright li:not(:last-of-type):after {
  content: '•';
  margin: 10px;
}
.copyright .CTA {
  margin-top: 25px;
}
.copyright .CTA li a {
  color: #919191;
}

/*End Footer*/

/*End Home Page*/

/*Start Contact Page*/
.contact-header {
  background-image: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/contact-food.jpg");
  height: 40vh;
}
.contact {
  padding: 78px 40px;
}
.contact > div {
  flex: 50%;
}
.contact .text p {
  margin-bottom: 30px;
}
.contact .text i {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  line-height: 48px;
  font-size: 24px;
}
.contact .text h2 {
  font-family: source_sans_problack, sans-serif;
  font-size: 24px;
  color: #262626;
  letter-spacing: 2.4px;
  margin-bottom: 20px;
}
.contact .form {
  margin-left: 48px;
}
.contact .form form label {
  margin-bottom: 5px;
  color: #515151;
}
.contact .form form input, .contact .form form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 24px;
  border-radius: 5px;
  border: 2px solid #D8D8D8;
  outline: none;
}
.contact .form form input:focus, .contact .form form textarea:focus {
  border-color: #a96700;
  box-shadow: 0 1px 1px #737373;
}
.contact .form form textarea {
  height: 212px;
  resize: none;
}
.contact .form form button {
  background-color: #262526;
  padding: 12px 30px;
  font-size: 12px;
}
/*End Contact Page*/

/*Start Home Page Responsive*/

@media (max-width: 1200px) {
  .menu, .about-us, .reservation {
      padding: 60px 40px;
  }
  .about-us .text, .reservation .text {
      padding: 0 32px 0 0;
  }
  .about-us .image-container, .reservation .image-container {
      align-items: center;
  }
  .menu .text {
      padding: 0 0 0 32px;
  }
}

@media (max-width: 992px) {
  body {
      padding: 0;
  }
  .dots {
      display: none;
  }
  header {
      height: calc(100vh - 10px);
  }
  header nav .logo {
      padding-left: 0;
  }
  .about-us {
      display: block;
      padding-top: 50px;
  }
  .about-us .text , .reservation .text {
      padding: 0 0 40px;
  }
  .about-us .image-container .image1, .reservation .image-container .image1 {
      margin-left: 0;
  }
  .menu {
      display: block;
      padding: 60px 20px 60px 40px;
  }
  .menu .text {
      padding: 20px 20px 0 0;
  }
  .reservation {
      display: block;
      padding: 30px 20px 60px;
  }
  .contact {
      display: block;
      padding: 78px 20px;
  }
  .contact .form {
      margin-left: 0;
      margin-top: 40px;
  }
}

@media (max-width: 768px) {
  header nav {
      display: block;
      text-align: center;
      left: 0;
      top: 0;
      width: 100%;
      padding-top: 25px;
  }
  header nav .toggle {
      display: block;
  }
  header .navigation-bar {
      position: fixed;
      top: 0;
      left: -174px;
      height: 100%;
      background-color: #262526;
      overflow: hidden;
      z-index: 20;
      padding: 40px;
  }
  header .navigation-bar ul {
      display: block;
      padding-top: 40px;
  }
  header .navigation-bar ul li {
      text-align: left;
      padding: 14px 0;
  }
  footer .contact-container {
      display: block;
  }
  footer .social-media {
      margin-bottom: 40px;
  }
  .copyright ul {
      display: block;
      margin-top: -20px;
  }
  .copyright li {
      margin-bottom: 5px;
  }
  .copyright li:not(:last-of-type):after {
      content: '';
  }

}

@media (max-width: 576px) {
  h3, h1 {
      font-size: 40px;
  }
  h2 {
      font-size:90px
  }
  header {
      padding: 0;
  }
  header nav .logo {
      padding-left: 0;
  }
  header nav .toggle.active {
      left: 36%;
  }
  header .navigation-bar.show {
      padding: 20px;
      width: 48%;
  }
  .about-us, .reservation {
      padding: 60px 20px;
  }
  .menu {
      padding: 60px 0 60px 20px;
  }
} 

Step 3 (JavaScript Code):

The final step in creating a restaurant website using HTML, CSS, and JavaScript is to add interactivity to the website using JavaScript. JavaScript allows us to create dynamic and interactive elements on the website, such as forms, modals, and image sliders.


By adding interactivity to the website with JavaScript, we are providing an engaging and interactive experience for users, making the website more usable and enjoyable. This step is essential in creating a website that encourages user engagement and ultimately drives more business to the restaurant.


Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

// constants
const body = document.querySelector("body"),
    loader = document.querySelector(".loader-wrap"),
    links = document.querySelectorAll('a[href="#"]'),
    nav = document.querySelector("header nav"),
    navToggle = document.querySelector("header nav .toggle"),
    navSpanMiddle = document.querySelector("header nav .toggle .middle"),
    navNavigationBar = document.querySelector("header nav .navigation-bar"),
    navNavigationBarLi = document.querySelectorAll(
        "header nav .navigation-bar li"
    ),
    headerText = document.querySelector("header .text"),
    headerSection = document.querySelector("header"),
    aboutSection = document.querySelector(".about-us"),
    recipeSection = document.querySelector(".recipes"),
    menuSection = document.querySelector(".menu"),
    fixedImageSection = document.querySelector(".fixed-image"),
    footerSection = document.querySelector("footer"),
    dotOne = document.querySelector(".dots .one"),
    dotTwo = document.querySelector(".dots .two"),
    dotThree = document.querySelector(".dots .three"),
    dots = document.querySelectorAll(".dots > div"),
    logoImage = document.querySelector("header nav .logo img"),
    svgDown = document.querySelector("header .arrow-down"),
    svgUp = document.querySelector(".copyright .arrow-up"),
    menuImgs = document.querySelectorAll(".menu .menu-image-container img"),
    boxModel = document.querySelector(".menu .box-model"),
    menuImageContainer = document.querySelector(".menu-image-container"),
    boxModelArrow = document.querySelector(".menu .box-model .arrow"),
    boxModelImage = document.querySelector(".menu .box-model img"),
    pageTitle = document.querySelector("title");

// remove loader
function fadeOutEffect() {
    const fadeEffect = setInterval(function() {
        if (!loader.style.opacity) {
            loader.style.opacity = 1;
        }
        if (loader.style.opacity > 0) {
            loader.style.opacity -= 0.4;
        } else {
            body.classList.remove('stop-scroll');
            loader.classList.add('remove');
            clearInterval(fadeEffect);
        }
    }, 100);
}
window.addEventListener("load", fadeOutEffect);

// prevent links click hash
links.forEach(link =>
    link.addEventListener("click", function(e) {
        e.preventDefault();
    })
);

// toggle hamburger menu button
navToggle.addEventListener("click", () => {
    navToggle.classList.toggle("active");
    navSpanMiddle.classList.toggle("hide");
    navNavigationBar.classList.toggle("show");
});

// show active navigationbar li
navNavigationBarLi.forEach(li =>
    li.addEventListener("click", () => {
        const arr = Array.from(li.parentElement.children);
        arr.forEach(li => li.classList.remove("active"));
        li.classList.add("active");
    })
);

// svg-up smooth scroll
svgUp.addEventListener("click", () => {
    window.scroll({
        top: 0,
        behavior: "smooth"
    });
});

window.onscroll = function() {
    // make navbar fixed & change logo color
    if (window.pageYOffset > headerSection.offsetHeight - 75) {
        nav.classList.add("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988525/logo-rosa.png";
    } else {
        nav.classList.remove("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/logo-rosa-white.png";
    }

    // header welcome fade out and in
    if (window.pageYOffset > 0) {
        headerText.style.opacity = -window.pageYOffset / 300 + 1;
    }
    // home page JS
    if (pageTitle.text === "ROSA- Restaurant") {
        //change dots background color
        if (window.pageYOffset < headerSection.offsetHeight * 0.5) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotOne.classList.add("active");
        } else if (
            window.pageYOffset > headerSection.offsetHeight * 0.5 &&
            window.pageYOffset < recipeSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (
            window.pageYOffset > recipeSection.offsetTop * 0.75 &&
            window.pageYOffset < menuSection.offsetTop * 0.81
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotOne.classList.remove("active");
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > menuSection.offsetTop * 0.81 &&
            window.pageYOffset < fixedImageSection.offsetTop * 0.86
        ) {
            dots.forEach(dot => dot.classList.add("black"));
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > fixedImageSection.offsetTop * 0.86 &&
            window.pageYOffset < footerSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotThree.classList.add("active");
        } else if (
            window.pageYOffset > footerSection.offsetTop * 0.72 &&
            window.pageYOffset < footerSection.offsetTop * 0.901
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (window.pageYOffset > footerSection.offsetTop * 0.901) {
            dots.forEach(dot => dot.classList.remove("black"));
        }
    }
};

// home page JS
if (pageTitle.text === "ROSA- Restaurant") {
    // svg-down smooth scroll
    svgDown.addEventListener("click", () => {
        window.scroll({
            top: aboutSection.offsetTop - 30,
            behavior: "smooth"
        });
    });

    // dots smooth scroll
    dots.forEach(dot =>
        dot.addEventListener("click", function() {
            window.scrollTo({
                top: document.querySelector(this.dataset.x).offsetTop - 100,
                behavior: "smooth"
            });
        })
    );

    // show box model
    menuImgs.forEach(img =>
        img.addEventListener("click", function() {
            const arr = Array.from(this.parentElement.parentElement.children);

            arr.forEach(div => div.classList.remove("active"));

            this.parentElement.classList.add("active");
            boxModel.classList.add("active");
            boxModelImage.src = this.src;
            boxModelImage.classList.add("active");
            body.classList.add("hide-scroll");
        })
    );

    // box model functions
    function boxModelFun(e) {
        // close box model
        if (
            e.code === "Escape" ||
            (e.target.tagName === "DIV" && !e.target.classList.contains("arrow")) ||
            e.target.classList.contains("close")
        ) {
            boxModel.classList.remove("active");
            body.classList.remove("hide-scroll");
        }

        if (boxModel.classList.contains("active")) {
            if (
                e.code === "ArrowRight" ||
                e.code === "ArrowLeft" ||
                e.target.classList.contains("arrow-right") ||
                e.target.classList.contains("arrow-left")
            ) {
                const arr = Array.from(menuImageContainer.children);
                const active = arr.find(div => div.classList.contains("active"));

                // change box model image
                if (
                    e.target.classList.contains("arrow-right") ||
                    e.code === "ArrowRight"
                ) {
                    if (active.nextElementSibling === null) {
                        active.parentElement.firstElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.firstElementChild.firstElementChild.src;
                    } else {
                        active.nextElementSibling.classList.add("active");
                        boxModelImage.src = active.nextElementSibling.firstElementChild.src;
                    }
                }

                // change box model image
                else if (
                    e.target.classList.contains("arrow-left") ||
                    e.code === "ArrowLeft"
                ) {
                    if (active.previousElementSibling === null) {
                        active.parentElement.lastElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.lastElementChild.lastElementChild.src;
                    } else {
                        active.previousElementSibling.classList.add("active");
                        boxModelImage.src =
                            active.previousElementSibling.firstElementChild.src;
                    }
                }
                active.classList.remove("active");
            }
        }
    }

    window.addEventListener("keydown", boxModelFun);
    window.addEventListener("click", boxModelFun);
    boxModelArrow.addEventListener("click", boxModelFun);
}

Final Output:

designing a delicious website using html, css, and javascript for restaurant web development.gif

Conclusion:

In conclusion, creating a restaurant website using HTML, CSS, and JavaScript is a great way to enhance the restaurant's online presence and drive more business. By following the steps outlined in this blog post, we have learned how to define the purpose and goal of the website, create the basic HTML structure, style the website with CSS, and add interactivity with JavaScript. With a well-designed website, a restaurant can showcase its unique offerings, provide useful information, and create an engaging and interactive experience for users.


It's important to keep in mind that creating a website is an ongoing process, and should be updated and maintained regularly to ensure that it stays up-to-date and relevant. By utilizing the power of HTML, CSS, and JavaScript, restaurants can ensure that their website is a delicious and engaging experience that will drive more customers through the door.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox


Related Post