From f2996d66c5c92a02bc4316a3d47009f03cd7deee Mon Sep 17 00:00:00 2001
From: Gazal Bandil <gazalbandil2003@gmail.com>
Date: Sat, 15 Oct 2022 21:50:51 +0530
Subject: [PATCH] Added

---
 contact.html |   9 +++--
 index.css    | 107 ++++++++++++++++++++++++++++++++++++++++++++-------
 index.html   |  41 +++++++++++++++++---
 3 files changed, 134 insertions(+), 23 deletions(-)

diff --git a/contact.html b/contact.html
index 9d0f1fe..64f04ea 100644
--- a/contact.html
+++ b/contact.html
@@ -18,7 +18,7 @@
   --primary-color: #FCFDFD;
   --secondary-color: #818386;
   --bg-color: #010712;
-  --button-color: #818386;
+  --button-color:#f8f8f8;
   --h1-color: #FCFDFD;
 }
 
@@ -126,9 +126,10 @@
   width: 10rem;
   height: 2.25rem;
   border: none;
-  border-radius: 2px;
+  border-radius: 8px;
   outline: none;
   cursor: pointer;
+  box-shadow:3px 4px #5e5d5db6;
 }
 
 input:hover, textarea:hover, button:hover {
@@ -294,13 +295,15 @@
 </div>
     
     <h1>Contact us</h1>
-    <p>Planning to join gym ,below are details that you</p>
+    <p>Planning to join gym ,fill the details</p>
     
     <form id="contact-form" method="post">
       <label for="name">Full name</label>
   <input type="text" id="name" name="name" placeholder="Your Full Name" required>
       <label for="email">Email Address</label>
   <input type="email" id="email" name="email" placeholder="Your Email Address" required>
+  <label for="age">Age</label>
+  <input type="age" id="age" name="age" placeholder="Your Age" required>
       <label for="message">Message</label>
   <textarea rows="6" placeholder="Your Message" id="message" name="message" required></textarea>
       <!--<a href="javascript:void(0)">--><button type="submit" id="submit" name="submit">Send</button><!--</a>-->
diff --git a/index.css b/index.css
index e831117..57717e7 100644
--- a/index.css
+++ b/index.css
@@ -11,7 +11,7 @@ body {
     margin-top: 6rem;
     text-align: center;
     font-size: 3rem;
-    color: white;
+    color: var(--yellow);
     font-weight: 700;
 }
 
@@ -23,10 +23,11 @@ body {
 }
 
 .headtitle {
-    color: white;
+    color:var(--yellow);
     text-align: center;
     font-weight: 600;
     font-size: 2.5rem;
+    
 }
 
 .mid {
@@ -59,12 +60,13 @@ body {
     text-decoration: none;
 }
 
-.btn {
-    background-color: black;
-    color: white;
-    margin-top: 1.5rem;
-    cursor: pointer;
-    border-radius: 22px;
+.btn{
+    text-align:center;
+    background-color: #282727;
+
+    width:15rem;
+    margin-left:10rem;
+    
 }
 
 .btn:hover {
@@ -103,19 +105,32 @@ body {
     text-align: center;
 }
 
+
 .container button {
-    width: 150px;
-    margin-left: 80px;
-    text-align: center;
+    
+    
+    text-align:center;
     display: block;
+    margin-top:0.5rem;
+    margin-bottom:0.5rem;
+    border-radius:3rem;
+    
+}   
     /* margin: auto; */
-}
+
+
+
 
 .aboutus {
     padding: 70px;
     text-align: center;
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.842);
     color: white;
+
+}
+#about p{
+    margin-top:5rem;
+    font-size:15px;
 }
 
 .abttitle {
@@ -441,4 +456,68 @@ header #menu-bar {
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-}
\ No newline at end of file
+}
+
+/* contact*/
+
+#contact h2{
+    text-align: center;
+    color:white;
+    font-size:30px ; 
+}
+
+
+.feild{
+    margin-top:4rem;
+    background-color:#fdfdfd55;
+    position:relative;
+    border-radius: 1rem;
+    
+
+}
+input,textarea,label{
+    display:block;
+    width:40vw;
+}
+label{
+    font-size:15px;
+    font-family:sans-serif;
+    font-weight:4px;
+    margin-left:15rem;
+    
+    
+    
+    
+
+}
+.name{
+    margin-top:2rem;
+}
+input,textarea{
+    margin-left:15rem;
+    padding:1rem;
+    border:none;
+    background-color: #fdfdfd00;
+    border-bottom:3px solid rgb(80, 93, 80);
+    outline:none;
+
+}
+input::placeholder,textarea::placeholder{
+    color:rgb(180, 178, 178);
+    font-size:12px;
+}
+
+.frm button{
+    text-align:center;
+    padding:1rem;
+    text-transform: uppercase;
+  font-weight: 300;
+  background:rgb(34, 34, 34);
+  color:whitesmoke;
+  width:100px;
+
+  border: none;
+  border-radius: 4rem;
+  outline: none;
+  font-size: 12px;
+}
diff --git a/index.html b/index.html
index f15d12c..04ae461 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 
 <body>
   <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
-    <a class="navbar-brand" href="#"><span><img class="logo" src="logo.png"</span></a>
+    <a class="navbar-brand" href="#"><span><img class="logo" src="logo.png"></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -36,7 +36,7 @@
           <a class="nav-link" href="#">Fitness Calculator</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Contact Us</a>
+          <a class="nav-link" href="#contact">Contact Us</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Email Us</a>
@@ -63,13 +63,13 @@ <h1 class="pagetitle">Welcome to Fitness Factory</h1>
         <input type="text" name="" placeholder="Enter your address">
       </div>
       <button class="btn ">Submit</button>
-      <center><input class="btn " type=button onClick="location.href='bmi.html'"
-        value='BMI Calculator'></center>
+      <button class="btn">BIM calculator</button>
     </form>
   </div>
+  <section id="about">
   <div class="aboutus" id="AboutUs">
     <h1 class="abttitle">About Us</h2>
-    Fitness Factory Fitness Institute was started on 4th October 2011.
+    <p>Fitness Factory Fitness Institute was started on 4th October 2011.
     It’s been more than a decade of educating people in fitness.
     Every year 1000+ students pass out of the institute.
     Fitness Factory Fitness Institute offers the most exciting and up-to-date curriculum as well as ongoing training in
@@ -78,11 +78,40 @@ <h1 class="abttitle">About Us</h2>
     fast test results and complete career development.
     Becoming a Fitness Factory Fitness Institute certified Advanced Personal trainer is your foundation for success. It
     offers you complete approach to fitness, wellness and business skills.
-    Make an investment in yourself and become a Fitness Factory Fitness Institute certified personal trainer.
+    Make an investment in yourself and become a Fitness Factory Fitness Institute certified personal trainer.</p>
 
 
 
   </div>
+  </section>
+
+  <section id="contact">
+     <div class="container-lg">
+       <h2 >Contact us</h2>
+       <div class="feild">
+        <form class="frm">
+          <br>
+          <label for="name" class="name" >Full name</label>
+          <input type="name" id="name" name=" " placeholder="full name" required>
+          <br>
+          <label for="mail">E-mail</label>
+          <input type="mail" id="mail" name=""  placeholder="jhon@gmail.com" required>
+          <br>
+
+          <label for="message">Message</label>
+          <textarea row="7" placeholder="your text..." id="message" name=""  required></textarea><br>
+          <br><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          
+          <button>Submit</button>
+          
+          <br><br><br>
+           
+        </form>
+       </div>
+     </div>
+  </section>
 
 
 <div class="footer">