✅ adding booking page

ShaifArfan · Jul 28, 2021 · c1fa15f · c1fa15f
1 parent ef251f7
commit c1fa15f
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/booking.html b/booking.html
@@ -55,7 +55,64 @@
     </div>
   </div>
   <!-- End Nav Section -->
-
+  <!-- Booking Section -->
+  <section id="form">
+    <div class="container">
+      <h3 class="form__title">Book Table</h3>
+      <div class="form__wrapper">
+        <form action="">
+          <div class="form__group">
+            <label for="firstName">First Name</label>
+            <input type="text" id="firstName" name="First Name">
+          </div>
+          <div class="form__group">
+            <label for="lastName">Last Name</label>
+            <input type="text" id="lastName" name="Last Name">
+          </div>
+          <div class="form__group">
+            <label for="email">Email</label>
+            <input type="email" id="email" name="Email">
+          </div>
+          <div class="form__group">
+            <label for="tableType">Table Type</label>
+            <select name="Table Type" id="tableType">
+              <option selected disabled>Choose</option>
+              <option value="small">Small(2 persons)</option>
+              <option value="medium">Small(4 persons)</option>
+              <option value="large">large(6 persons)</option>
+            </select>
+          </div>
+          <div class="form__group">
+            <label for="guestNumber">Guest Number</label>
+            <input type="number" id="guestNumber" name="Guest Number" min="1" max="10">
+          </div>
+          <div class="form__group">
+            <label for="placement">Placement</label>
+            <select name="Placement" id="placement">
+              <option selected disabled>Choose</option>
+              <option value="outdoor">Outdoor</option>
+              <option value="indoor">Indoor</option>
+              <option value="rooftop">rooftop</option>
+            </select>
+          </div>
+          <div class="form__group">
+            <label for="date">Date</label>
+            <input type="date" id="date" name="Date">
+          </div>
+          <div class="form__group">
+            <label for="time">time</label>
+            <input type="time" id="time" name="Time">
+          </div>
+          <div class="form__group form__group__full">
+            <label for="note">Note</label>
+            <textarea name="Note" id="note" rows="4"></textarea>
+          </div>
+          <button type="submit" class="btn primary-btn">Book Table</button>
+        </form>
+      </div>
+    </div>
+  </section>
+  <!-- End Booking Section -->
   <!-- Footer -->
   <footer>
     <div class="container">

diff --git a/components.css b/components.css
@@ -360,7 +360,8 @@ footer {
 	font-weight: 500;
 }
 .form__group input,
-.form__group textarea {
+.form__group textarea,
+.form__group select {
 	width: 100%;
 	border: none;
 	background-color: var(--lightGreen-1);
@@ -372,6 +373,9 @@ footer {
 	margin-top: 0.5rem;
 	color: var(--black-2);
 }
+.form__group textarea {
+	resize: vertical;
+}
 .form__wrapper button[type='submit'] {
 	width: fit-content;
 	border: none;
@@ -396,7 +400,8 @@ footer {
 		font-size: 1.8rem;
 	}
 	.form__group input,
-	.form__group textarea {
+	.form__group textarea,
+	.form__group select {
 		font-size: 1.8rem;
 		padding: 2rem;
 		margin-top: 1.5rem;