Yes, how are you friends? I hope you are all well and living your lives happily. If anyone has any problems, may Allah remove them. In today's Steem Learning Challenge 23 Weel 6 We learn how to make Moderen Resturent Website With Admin panel and access admin panel.
I, your own sun-developer, will start building this website today.
By the way, it took me about two weeks to create this website, but it's a memorable day to show it to you, so I'll use today to celebrate.And this is probably my first project on Steemit that I am posting complete with an admin panel.

Note

I have created this website only for educational purposes and apart from that, you will get the complete source code of this website. I will give the link at the bottom of the post.

Gift from me

The complete source code of this website uploaded a github from me to you. Anyone can host this website anywhere. It is copyright free for anyone.

Notify For this Website.

Nothing in this website has been copied from anyone. I have created everything myself. Apart from that, I have not placed any images or advertisements in this website so that it is easy for you to edit. That is, I have not used them in the menu and other places where images are used.One of the reasons for not posting images is that you can edit the images yourself and post them here, and you can also add menus and other things to them from the admin panel. I will explain that to you later.

Software

I am using Visual Studio to create this website. You can download it. Go and search for Visual Studio in Google. You will find it. It is very easy to write and edit the code in it. You can check it out. It is really a very interesting software.

We are create this website

---

---

Our website Folder/Files

The website we are creating will have about 27 files and two folders and there will also be files inside them. The files in these folders and the files outside will make a total of 27 files and from these 27 files we will create our complete website.

I'm new to Steemit and I don't know how to explain this but as far as I know I can do a good job and besides this website code is quite big I can't write it in my post you can understand yes along with that I will definitely give a screenshot of whatever needs to be explained

Lets Start Creating Files

Index.html

Header section

In the header section, I have added the menu website text logo and other icons. logo, navigation menu, and cart icon.Some category menus are set up as menus at the top of the website's home page in the HTML file.Menus and that means this page is among these pages.Reservation, About, Contact, Gallery, Blog, and Cart .And I have given links to the categories of these menus and connected them so that when someone clicks on them, they will go directly to that page.On this, I would like to say one thing about the website, that is, it will be defined directly for an app. A website is not made from a single page. A website is made from different web pages and it is really easy to create it on different apps. If we create the entire website on a single page, then that booth is difficult. It is also difficult to edit it.We will create the pages that I have just linked to, along with this page, index.html, and we will also create CSS and JavaScript files for the other pages and connect them to it so that the page looks great and has the best design.And with this, I am going to tell you a new thing that is present in HTML. CSS improves the design of the page and with it sets the JavaScript functionality.

The code creates the homepage for the Modern Restaurant site. There's the Hero Section first that presents the restaurant. This section has a heading, a description, and a button that leads users to the reservation.html page to book a table. Then there is the Featured Dishes Section, which displays the special dishes of the restaurant in a grid. These dishes will be dynamically loaded. Below it there is the Special Offers Section, which has discounts and special deals. it also has a grid layout with offer cards that contains different promotions. This is the bare bones structure which would be more functional and attractive with the use of CSS and JavaScript.
Apart from that, I hope that you understand what I have taught you. If you have any problems with my teaching or are having any problems learning, you can tell me in the comments. Insha Allah, I will try my best to correct it in the next post.

This code belongs to the special offers section. It has three offers which are a weekend brunch, a happy hour, and a date night. Each offer is placed in a box that has a title, a small description, and a button that directs the user to the menu page. These offers are organized in a grid style so that they look organized. Following this, there is the testimonials section which will display good reviews of people.

:
:

This piece of code covers the footer and testimonials area of the webpage. In the testimonials section, users can review customer’s feedback which is shown in a slider format with left and right buttons for navigation.
The footer is again split into four parts. The first part gives the address of the restaurant with the phone number and email for contact purposes. The second part shows the opening hours of the restaurant. The third part contains the followers link of the restaurant's social media pages. The last part has a form where users can submit their email address for a newsletter.
At the bottom of the page there is a text indicating that all rights are reserved. Lastly, a JavaScript file is included to manage the interactive parts of the site.
This is where our HTML file ends, now we move on to creating the second file.

---

Out Put Index.html

---

Style.css

First Line1:

/* CSS Variables for Theme Colors */
:root {

Last Line 1688:

 .auth-tab {
        padding: 0.8rem;
        font-size: 1rem;
    }
}

You can see that the style.css file is very large, so we cannot give so many screenshots in this post. Yes, I have uploaded the file to Code Github. From there, you can download the entire file and edit it. If I tell you about the Style.css file, we will design the best HTML pages using the style.css file.

---

About.html

This code is designed for a webpage that displays a timeline showing the team’s progress over many years as a journey.

The timeline part shows significant events for a given year. Users may scroll to view highlights from previous years.

The team members section starts with showing each member's name, photo, and job title along with their introduction.

The footer section has some contact information together with some relevant links.

Smooth scrolling and animation effects are achieved with a separate JavaScript file.

---

Output about.html + .css and .js

---

Blog.html

The code specified corresponds to the blog portion of a restaurant’s website. It contains a logo, header, and a menu that serves as a navigational aid. In the blog, there is a specific post that is featured along with a list of other posts. A sidebar exists which contains categories, recent posts, and a newsletter form. Users can navigate to different pages through pagination. For the footer, it is divided into four separate sections which include the contact details, opening hours, social media links, and the newsletter subscription. A message regarding the copyrights is placed at the bottom. The interactivity on the page is done using two JavaScript files.

---

Output blog.html + .css and .js

---

I haven't posted any blogs on this website yet. I have created it for testing and to teach you. Blogs will also be listed in categories. You can also see the screenshot and if you see the code, you will understand.

---

cart.html

The logo and the navigation menu serves as a header for a restaurant website's shopping cart page, alongside the shopping cart bearing the order details, subtotal, tax, and total. A checkout form for entering the user's name, email, phone number, address and payment method is also present.

Social media links, contact details, newsletter subscription form and opening hours are present as well, all bundled within the footer. Finally, the page interactivity is aided through the inclusion of two Javascript files.

---

Output cart.html + .css .js

---

We haven't done any shopping in it yet, meaning I've only added dummy products and if you add any product, it will show here. When you add to card, the total bill will also show. Apart from that, I wanted to use a coupon code, but I didn't. I said, "I'll teach you that to someone else."

---

categories.html

The code generates a webpage with a header displaying a logo, menu, and a theme switch for book categories in a library. There are links for showcasing different book types and an additional section for featured books. Links, social media icons, a newsletter form, and copyright information are placed in the footer. Custom interactivity is handled by a separate script file.

---

Output cattegories.html + .css and .js

---

---

menu.html

See the code provided that offers a restaurant menu page design consisting of a header, navigation, menu with filters, and footer. Other aspects such as a shopping cart icon, business/contact details, operating hours, social media links, and a newsletter form all contribute to the design of the page. The page full of information required menu filtering and other dynamic content which was done is JS.

---

Output menu.html +.css and .js

---

contact.html

This is a modern restaurant website’s ‘Contact’ page. It features a navigation menu, a custom cursor, a Google map for directions, contact information, and a contact form. At the bottom of the page, viewers can find social media profiles, a newsletter sign-up, and business hours.

---

Output contact.html +.css and .js

How did you like my page? Did you like this design? Then tell me in the comments. Also, do you like the map I added? I really like it. I would like to give you my opinion.

---

reservation.html

The webpage belonging to a restaurant enables its users to book a table at their preferred dining time. The user is expected to fill a form with the user’s name, email, phone number, date and time of the booking, and number of guests attending. The page also states the opening and closing times of the restaurant, provides a contact number and social media accounts, and has other relevant information. The website is designed in a straightforward manner, making it easy for everyone.

---

Output reservation.html + .css and .js

---

I have described and explained almost all the pages of my website, and I have added many functions to my website. You can also see them from the source code. I have created many JS files and added functions to them.

---

Admin.html

In the admin.html file, I have specified the main data that should be in the admin, and then I have connected it with the functions and the entire website through other files. In the admin, we can change almost all the data that is in the website, we can change the menus, we can change the contact information, and we can change other things from the admin panel.

admin.js

By giving the admin.js file, you can estimate how big this file is. It has more than a thousand lines in it. Also, when you see the screenshot of the admin panel, you will understand what features are in it. I have put almost all the features that a website should have in the admin panel.

Admin.css

Yes, after looking at this file, you must be thinking that maybe the style.css file of other files has been created separately. Yes, no, I have created the style.css file of all the other files. Only the style.css file of the admin panel has been created separately because you can edit the admin's permissions and the features that you want to bring in the panel yourself. For this, I have created the entire admin file separately. I will upload it to the github from where you can download and edit it.

Output admin.html + .css and .js

From there, you can click on the Add button to add menus, add and remove users, and also make settings, and you can also add new dishes to it. You can have full control over your entire website and change contact information from the admin panel.
Yes, now you are thinking that we have one thing left, which is the most important, which is our login section and signup section, that is, the login page and the signup page. So let's make that too. I have made it very beautiful. You can connect it with your database. Insha Allah, someday I will make a post on how to connect with the database.

---

login.html

In the HTML file of this login page, I have mentioned all the data whose output you will see, that is, all the necessary things and data that we will take from the user and through which we will create an account, and inside it I have also added that you can log in to Reddit through Google or Facebook and can also sign up.

Output Login.html + .css and .js

Github Repositry

I have uploaded the source code, you can download it from here.

Thanks for reading/ Learning
I invited my other friend to join this contest
@kafio
@alejos7ven
@ahsansharif
@fombae