Skip to content

Commit

Permalink
make book table page
Browse files Browse the repository at this point in the history
  • Loading branch information
@pulkitgarg04
pulkitgarg04 committed May 29, 2024
1 parent 19805b3 commit 3c5aa43
Show file tree
Hide file tree
Showing 3 changed files with 217 additions and 2 deletions.
49 changes: 49 additions & 0 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,55 @@ body {
font-size: 2rem;
}


/* Book Table */
.book-table-container {
padding: 50px;
background-color: rgb(224, 224, 252);
}

.book-table-container .image-holder {
display: table-cell;
width: auto;
background: url(https://cdn12.picryl.com/photo/2016/12/31/dining-table-table-cutlery-tableware-7ce371-1024.jpg);
background-size: cover;
}

.book-table-container .form-container {
display: table;
max-width: 1000px;
width: 90%;
margin: 0 auto;
box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}

.book-table-container form {
display: table-cell;
width: 400px;
background-color: #ffffff;
padding: 40px 60px;
color: #505e6c;
}

.book-table-container form h2 {
font-size: 24px;
line-height: 1.5;
margin-bottom: 30px;
}

.book-table-container form .form-control {
background: transparent;
border: none;
border-bottom: 1px solid #dfe7f1;
border-radius: 0;
box-shadow: none;
outline: none;
color: inherit;
text-indent: 0px;
height: 40px;
max-width: max-content;
}

/* testimonal */
.testimonalsection{
padding-top: 400px;
Expand Down
168 changes: 168 additions & 0 deletions Html-files/book-table.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Table - Food Ordering Website</title>
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="../Css-files/content.css">
<script src="../hamburger.js"></script>

</head>

<body>

<div class="head_container">
<!-- <header> -->
<!-- updated nav bar -->
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>

<ul class="ul1">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li>
<a class="" href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- </header> -->

<div class="mainhead">
<h1>B O O K - T A B L E</h1>
</div>
</div>

<div class="book-table-container">
<div class="form-container">
<div class="image-holder"></div>
<form method="POST" onsubmit="HandleSubmit()">
<h2 class="text-center"><strong>Book</strong> Your Table Now!</h2>
<div class="form-group">
<label for="name">Full Name: </label>
<input class="form-control" type="text" name="name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="name">Phone Number: </label>
<input class="form-control" type="number" name="phone" placeholder="Phone Number" required>
</div>
<div class="form-group">
<label for="name">Date: </label>
<input class="form-control" type="date" name="date" required>
</div>
<div class="form-group">
<label for="name">Time: </label>
<input class="form-control" type="time" name="time" required>
</div>
<div class="form-group">
<label for="name">Number of People: </label>
<input class="form-control" type="number" name="no-of-people" min="0" max="100" required>
</div>
<div class="form-group">
<button class="butt" type="submit">Book Now!</button>
</div>
</form>
</div>
</div>

<!-- footer -->
<footer>
<div class="foot-panel2">
<ul class="footer-colums">
<p>Our Pages</p>
<a href="../index.html">Home</a>
<a href="#">Menu</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
<a href="cart.html">Cart</a>
</ul>

<ul class="footer-colums">
<p> Exclusive Offers</p>
<a>Foodie Discounts</a>
<a>Limited-Time Promotions</a>
<a>Special Event Packages</a>
<a>Membership Benefits</a>
<a>Early Access to New Recipes</a>
<a>VIP Foodie Events</a>
<a>Personalized Culinary Experiences</a>

</ul>

<ul class="footer-colums">
<p>Payment Products</p>
<a>Secure Checkout</a>
<a>Credit/Debit Cards</a>
<a>Online Payment</a>
<a>Mobile Wallets</a>
<a>Contactless Payments</a>
</ul>


<form id="contactForm">
<h3>Contact Us!</h3>
<!-- <label for="name">Name:</label> -->
<!-- <input type="text" id="name" name="name" placeholder="Your Name" required>
-->
<!-- <label for="email">Email:</label> -->
<input type="email" id="email" name="email" placeholder="Your Email" required>

<!-- <label for="message">Message:</label> -->
<textarea id="message" name="message" placeholder="Your Message" required></textarea>

<button id="butt" type="submit">Send Message</button>
</form>

</div>


<div class="foot_panel4">
<div class="pages">
<h4>Follow Us</h4>

<div class="social-icons">
<a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
<a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
<a class="fa-brands fa-twitter" href="https://twitter.com" target="_blank"></a>
<a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank"></a>
<a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
</div>
<p>Stay connected with us on social media for the latest updates, recipes, and foodie adventures.
</p>
<div class="copyright">
&copy; 2024 Foodies - All Rights Reserved | <span id="author">
<a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi Joshi</a>
</span></p>

</div>
</div>
</div>
</footer>
<script>
const HandleSubmit = () => {
let confirmation_code = Math.floor(Math.random() * 9000);
alert(`Your Table has been booked successfully! Your Confirmation code is ${confirmation_code}`);
}
</script>
</body>

</html>
2 changes: 0 additions & 2 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,6 @@ <h3>Juices</h3>

<!-- footer -->
<footer>


<div class="foot-panel2">
<ul class="footer-colums">
<p>Our Pages</p>
Expand Down

0 comments on commit 3c5aa43

Please sign in to comment.