Restaurant-cource-code

CSS Code

               <style>
                        @media only screen and (max-width:600px){
                            *{
                                margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;
                            }
                            .resturant{
                                position: relative;
                                width: 90%;
                                margin: auto;
                                height: auto;
                                background-color: #eeeeee;
                            }
                            
                            header{
                                background-color: #eeeeee;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0px 20px;
                                height: 100px;
                                position: sticky;
                                top: 0;
                                position: -webkit-sticky;
                                transition: all 0.5s ease;
                                z-index: 1;
                            }
                            header a{
                                text-decoration: none;
                                color: black;
                                font-size: 25px;
                                transition: all 0.5s ease;
                            }
                            .register{
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                text-decoration: none;
                                font-size: 15px;
                                color: green;
                                border: 1px solid green;
                                padding: 10px 30px;
                                transition: all 0.5s ease;
                                font-weight: 500;
                                letter-spacing: 0.1rem;
                            }
                            .register:hover{
                                background-color: green;
                                color: white;
                            }
                            
                            /* scroll-javascript methood */
                            
                            header.scrolled{
                                background-color: #ffffff;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
                            }
                            header.scrolled nav{
                                background-color: #ffffff;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
                            }
                            header.scrolled nav ul li a{
                                color: red;
                            }
                            header.scrolled a:nth-child(1){
                                color: red;
                                font-size: 40px;
                            }
                            header.scrolled .bar{
                                color: red;
                                font-size: 40px;
                            }
                            header.scrolled .register{
                                border: 1px solid red;
                                padding: 7px 20px;
                                color: red;
                            }
                            
                            nav{
                                position: absolute;
                                top: 100px;
                                left: 0;
                                width: 100%;
                                height: 0px;
                                transition: all 0.5s ease;
                                overflow: hidden;
                            
                            }
                            .nav-show{
                                background-color: #eeeeee;
                                height: 60vh;
                                transition: all 0.5s ease;
                            
                            }
                            nav ul li{
                                list-style: none;
                            
                            }
                            nav ul li a{
                                display: block;
                                text-decoration: none;
                                padding: 10px 20px;
                                color: black;
                                font-size: 15px !important;
                                font-weight: 300;
                                transition: all 0.5s ease;
                                align-items: center;
                            }
                            
                            nav ul li a:hover{
                                background-color: #bbbbbb;
                            }
                            .full-image{
                                width: 100%;
                                height: auto;
                                margin-bottom: 20px;
                            }
                            .full-image img{
                                width: 100%;
                                height: auto;
                                object-fit: contain;
                            }
                            
                            /* about================ */
                            .about{
                              width: 90%;
                              margin: auto;
                              display: grid;
                              grid-template-columns: 100%;
                              justify-content: center;
                              gap: 20px;
                              padding: 20px 20px;
                              border: 1px solid #666;
                            }
                            .about-text{
                              display: flex;
                              flex-direction: column;
                              gap: 20px;
                            }
                            .about-img img{
                              width: 100%;
                              height: auto;
                              object-fit: contain;
                            }
                            
                            .resturtant-blog{
                                display: grid;
                                grid-template-columns: 100%;
                                gap: 20px;
                            }
                            .blog img{
                                width: 100%;
                                height: auto;
                                padding: 10px;
                            }
                            .blog-text{
                              padding: 10px 10px;
                            }
                            
                            /* filter grup */
                            
                            
                            .btn-container{
                              padding: 20px 0px;
                              width: 90%;
                              margin: auto;
                              display: flex;
                              justify-content: space-around;
                              justify-content: center;
                              align-self: center;
                              border: 1px solid #bbbbbb;
                              margin-top: 20px;
                            }
                            
                            .grid {
                              width: 90%;
                              margin: auto;
                              border: 1px solid #bbb;
                              overflow: hidden;
                            }
                            
                            .item{
                              width: 100%;
                              padding-top: 20px;
                            }
                            
                            /* Style the buttons */
                            .btn {
                              border: none;
                              outline: none;
                              padding: 12px 16px;
                              background-color: #f1f1f1;
                              cursor: pointer;
                            }
                            
                            .btn:hover {
                              background-color: #ddd;
                            }
                            
                            .btn.active {
                              background-color: #666;
                              color: white;
                            }
                            .card{
                              border: 1px solid #ffffff;
                              background-color: rgb(60, 34, 71);
                            }
                            .card img{
                              width: 100%;
                              height: auto;
                              padding: 10px;
                              border-bottom-left-radius: 50%;
                              border-top-right-radius: 50%;
                              border: 1px solid #ffffff;
                            
                            }
                            .card-body{
                              padding: 10px;
                              display: flex;
                              flex-direction: column;
                              gap: 10px;
                            }
                            .card-body h2{
                              color: white;
                              font-weight: 400;
                            }
                            .card-body p{
                              color: white;
                              font-weight: 300;
                              font-size: 14px;
                            }
                            .my-menu{
                              width: 100%;
                              display: flex;
                              justify-content: space-between;
                              padding: 20px 10px;
                            }
                            .my-menu a:nth-child(1){
                              padding: 10px 20px;
                              text-decoration: none;
                              color: white;
                              font-weight: 400;
                              font-size: 16px;
                            }
                            .my-menu a:nth-child(2){
                              background-color: coral;
                              padding: 10px 20px;
                              text-decoration: none;
                              color: white;
                              font-weight: 400;
                              font-size: 16px;
                            }
                            
                            /* contact============= */
                            
                            .contact{
                              position: relative;
                            }
                            .contact form{
                              background-color: #bbb;
                              padding: 10%;
                            }
                            
                            .contact form input[type="text"],input[type="number"],textarea,input[type="date"]{
                              width: 100%;
                              padding: 10px 0px;
                              margin-top: 20px;
                            }
                            .contact form input[type="submit"]{
                              width: 100%;
                              background-color: cadetblue;
                              color: white;
                              padding: 10px 30px;
                              transition: all 0.5s ease;
                              margin-top: 20px;
                            }
                            .contact form input[type="submit"]:hover{
                              background-color: azure;
                              color: black;
                            }





                        }

                        @media only screen and (min-width:600px){
                           
                            *{
                                margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;
                            }
                            .resturant{
                                position: relative;
                                width: 100%;
                                height: auto;
                                background-color: #eeeeee;
                            }
                            
                            header.scrolled{
                                background-color: #ffffff;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
                            }
                            header.scrolled nav ul li a{
                                color: red;
                            }
                            header.scrolled a:nth-child(1){
                                color: red;
                                font-size: 40px;
                            }
                            
                            header{
                                background-color: #eeeeee;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0px 20px;
                                height: 100px;
                                position: sticky;
                                top: 0;
                                position: -webkit-sticky;
                                transition: all 0.5s ease;
                                overflow: hidden;
                                z-index: 1;
                            }
                            header a:nth-child(1){
                               font-size: 30px;
                               text-decoration: none;
                               font-weight: 600;
                               color: black;
                               transition: all 0.5s ease;
                            }
                            .bar{
                                display: none;
                            }
                            .register{
                                text-decoration: none;
                                font-size: 15px;
                                color: green;
                                border: 1px solid green;
                                padding: 15px 40px;
                                transition: all 0.5s ease;
                                font-weight: 500;
                                letter-spacing: 0.1rem;
                            }
                            .register:hover{
                                background-color: green;
                                color: white;
                            }
                            
                            header.scrolled .register{
                                border: 1px solid red;
                                color: red;
                            }
                            
                            
                            nav{
                                width: 100%;
                                height: 100px;
                                line-height: 100px;
                            }
                            
                            nav ul li{
                                list-style: none;
                                display: inline-block;
                            
                            }
                            nav ul li a{
                                display: block;
                                text-decoration: none;
                                padding: 0px 20px;
                                color: black;
                                font-size: 15px !important;
                                font-weight: 300;
                                transition: all 0.5s ease;
                                align-items: center;
                            }
                            
                            nav ul li a:hover{
                                background-color: #bbbbbb;
                            }
                            .full-image{
                              position: relative;
                                width: 100%;
                                margin-bottom: 20px;
                            }
                            .full-image img{
                                width: 100%;
                                height: auto;
                                object-fit: contain;
                            }
                            
                            /* about================ */
                            .about{
                              width: 90%;
                              margin: auto;
                              display: grid;
                              grid-template-columns: 50% 50%;
                              justify-content: center;
                              gap: 20px;
                              padding: 20px 20px;
                              border: 1px solid #666;
                            }
                            .about-text{
                              display: flex;
                              flex-direction: column;
                              gap: 20px;
                            }
                            .about-img img{
                              width: 100%;
                              height: auto;
                              object-fit: contain;
                            }
                            
                            .resturtant-blog{
                                width: 90%;
                                margin: auto;
                                display: grid;
                                grid-template-columns: 33% 33% 33%;
                                column-gap: 20px;
                                overflow: hidden;
                                border: 1px solid #bbb;
                            }
                            .blog img{
                                width: 100%;
                                height: auto;
                                padding: 10px;
                            }
                            .blog-text{
                              padding: 10px 10px;
                            }
                            
                            /* filter grup */
                            
                            
                              .btn-container{
                                padding: 20px 0px;
                                width: 90%;
                                margin: auto;
                                display: flex;
                                justify-content: space-around;
                                justify-content: center;
                                align-self: center;
                                border: 1px solid #bbbbbb;
                                margin-top: 20px;
                              }
                              
                              .grid {
                                width: 90%;
                                margin: auto;
                                border: 1px solid #bbb;
                                overflow: hidden;
                              }
                            
                              .item{
                                width: 25%;
                                padding: 20px;
                              }
                              
                              /* Style the buttons */
                              .btn {
                                border: none;
                                outline: none;
                                padding: 12px 16px;
                                background-color: #f1f1f1;
                                cursor: pointer;
                              }
                              
                              .btn:hover {
                                background-color: #ddd;
                              }
                              
                              .btn.active {
                                background-color: #666;
                                color: white;
                              }
                             .card{
                                border: 1px solid #ffffff;
                                background-color: rgb(60, 34, 71);
                             }
                              .card img{
                                width: 100%;
                                height: auto;
                                padding: 10px;
                                border-bottom-left-radius: 50%;
                                border-top-right-radius: 50%;
                                border: 1px solid #ffffff;
                            
                              }
                              .card-body{
                                padding: 10px;
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                              }
                              .card-body h2{
                                color: white;
                                font-weight: 400;
                              }
                              .card-body p{
                                color: white;
                                font-weight: 300;
                                font-size: 14px;
                              }
                              .my-menu{
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                padding: 20px 10px;
                              }
                              .my-menu a:nth-child(1){
                                padding: 10px 20px;
                                text-decoration: none;
                                color: white;
                                font-weight: 400;
                                font-size: 16px;
                              }
                              .my-menu a:nth-child(2){
                                background-color: coral;
                                padding: 10px 20px;
                                text-decoration: none;
                                color: white;
                                font-weight: 400;
                                font-size: 16px;
                              }
                            
                              
                            /* contact============= */
                            
                            .contact{
                              position: relative;
                            }
                            .contact form{
                              width: 90%;
                              margin: auto;
                              background-color: #bbb;
                              padding: 10%;
                            }
                            
                            .contact form input[type="text"],input[type="number"],textarea,input[type="date"]{
                              width: 100%;
                              padding: 10px 0px;
                              margin-top: 20px;
                            }
                            .contact form input[type="submit"]{
                              width: 100%;
                              background-color: cadetblue;
                              color: white;
                              padding: 10px 30px;
                              transition: all 0.5s ease;
                              margin-top: 20px;
                            }
                            .contact form input[type="submit"]:hover{
                              background-color: azure;
                              color: black;
                            }
                              




                        }
             </style>

HTML Code

                    <div class="resturant" id="home">
                        <header>
                         <a href="#home">Demo</a>
                           <nav>
                             <ul>
                                 <li><a href="#home">Home</a></li>
                                 <li><a href="#about">About</a></li>
                                 <li><a href="#services">Services</a></li>
                                 <li><a href="#contact">Contact</a></li>
                             </ul>
                           </nav>
                           <a href="javascript:void(0)" onclick="naveFunction()" class="bar">☰</a>
                           <a href="https://codezara.com/register" class="register">Register</a>
                        </header>
                 
                        <div class="full-image">
                            <img src="/Resturant.webp" alt="">
                        </div>
                 
                        <div class="about" id="about">
                           <div class="about-text">
                               <h2>About Resturant</h2>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quibusdam est illum reprehenderit harum suscipit mollitia officia. Voluptatibus, perspiciatis quis! Numquam saepe repellendus eos distinctio repudiandae eligendi voluptatum sed neque.</p>
                           </div>
                           <div class="about-img">
                             <img src="/berger.webp" alt="">
                           </div>
                        </div>
                 
                        <div class="resturtant-blog">
                           <div class="blog">
                             <img src="/pasta.webp" alt="">
                             <div class="blog-text">
                                 <h2>food blog</h2>
                                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, beatae eaque recusandae assumenda reiciendis dolores repudiandae sunt, voluptas ducimus laboriosam iste quam, rerum at omnis mollitia similique perspiciatis vero ex.</p>
                             </div>
                           </div>
                 
                           <div class="blog">
                             <img src="/pizza.webp" alt="">
                             <div class="blog-text">
                                 <h2>food blog</h2>
                                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, beatae eaque recusandae assumenda reiciendis dolores repudiandae sunt, voluptas ducimus laboriosam iste quam, rerum at omnis mollitia similique perspiciatis vero ex.</p>
                             </div>
                           </div>
                 
                           <div class="blog">
                             <img src="/food.webp" alt="">
                             <div class="blog-text">
                                 <h2>food blog</h2>
                                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, beatae eaque recusandae assumenda reiciendis dolores repudiandae sunt, voluptas ducimus laboriosam iste quam, rerum at omnis mollitia similique perspiciatis vero ex.</p>
                             </div>
                           </div>
                 
                        </div>
                 
                        <!-- Filtter div element========== -->
                 
                        <div class="btn-container button-group">
                         <button class="btn active" data-filter="*"> Show all</button>
                         <button class="btn" data-filter=".berger">Berger</button>
                         <button class="btn" data-filter=".pizza">Pizza</button>
                         <button class="btn" data-filter=".pasta">Pasta</button>
                         <button class="btn" data-filter=".fries">Fries</button>
                       </div>
                       
                       <div class="grid" id="services">
                         <div class="berger item">
                           <div class="card">
                               <img src="/berger.webp" alt="">
                               <div class="card-body">
                                 <h2>Berger</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 200</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="pizza item">
                           <div class="card">
                               <img src="/pizza.webp" alt="">
                               <div class="card-body">
                                 <h2>Pizza</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 500</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="pasta item">
                           <div class="card">
                               <img src="/pasta.webp" alt="">
                               <div class="card-body">
                                 <h2>Pasta</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 300</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="fries item">
                           <div class="card">
                               <img src="/fries.webp" alt="">
                               <div class="card-body">
                                 <h2>fries</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 400</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="pasta item">
                           <div class="card">
                               <img src="/pasta.webp" alt="">
                               <div class="card-body">
                                 <h2>fries</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 400</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="fries item">
                           <div class="card">
                               <img src="/fries.webp" alt="">
                               <div class="card-body">
                                 <h2>fries</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 400</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                         <div class="pizza item">
                           <div class="card">
                               <img src="/pizza.webp" alt="">
                               <div class="card-body">
                                 <h2>fries</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 400</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                 
                         <div class="berger item">
                           <div class="card">
                               <img src="/berger.webp" alt="">
                               <div class="card-body">
                                 <h2>fries</h2>
                                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita aliquam odit vitae molestias explicabo. Quas facilis molestias commodi recusandae adipisci velit, distinctio possimus, nostrum vero ex voluptas, autem natus expedita!</p>
                               </div>
                               <div class="my-menu">
                                 <a href="">RS 400</a>
                                 <a href="">BUY NOW</a>
                               </div>
                           </div>
                         </div>
                 
                       </div>
                 
                 
                       <div class="contact" id="contact">
                             <form action="" method="post">
                               <h2>Contact Us</h2>
                               <p style="padding: 10px 0px;">You can also contact us by phone 00553123-2323 or email catering@catering.com, or you can send us a message here:</p>
                                 <div class="contact-div">
                                    <label for="">Name:</label>
                                    <input type="text" name="name" placeholder="Enter your name" required>
                                 </div>
                                 <div class="contact-div">
                                   <input type="number" name="quantity" placeholder="0" min="1" required>
                                </div>
                 
                                <div class="contact-div">
                                 <label for="">Date:</label>
                                 <input type="date" name="quantity" placeholder="0" min="1" required>
                                </div>
                              <div class="contact-div">
                               <label for="">Message:</label>
                               <textarea name="message" id="" placeholder="message" required>

HTML CSS JAVASCRIPT Restaurant source code

CSS Code

HTML Code

Javascript code