changes to the website

Author: Made0fB1naries

index.html

@@ -27,33 +27,39 @@ <h2>Welcome to our Website</h2>
             <button>Learn More</button>
         </section>
 
-        <section class="features">
-            <h3>Our Features</h3>
-            <ul>
-                <li>3 team proccess</li>
-                <li>Low Commission Pay</li>
-                <li>Still working</li>
-            </ul>
-        </section>
-       <fieldset>
-        <legend class="legend">Contact us</legend>
-        <section class="contact" id="contact"> <h2>Get in Touch</h2>
-            <form action="mailto:youremail@example.com" method="post"> <div class="form-group">
-                <label for="name">Name:</label>
-                <input type="text" name="name" id="name" required>
+        <section class="cards">
+            <div class="card">
+              <h3>3 team proccess</h3>
+              <p>Team A designs the product, Team B builds the product, and Team C tests the product..</p>
             </div>
-            <div class="form-group">
-                <label for="email">Email:</label>
-                <input type="email" name="email" id="email" required>
-            </message>
-            <div class="form-group">
-                <label for="message">Message:</label>
-                <textarea name="message" id="message" rows="5" required></textarea>
+            
+            <div class="card">
+              <h3>Low Commission Pay</h3>
+              <p>we only need low commissions rather than those who want higher pay.</p>
             </div>
-            <button type="submit">Send Message</button>
-        </form>
-       </fieldset>
-        </section>
+            
+            <div class="card">
+              <h3>still working</h3>
+              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+            </div>
+          </section>
+       <fieldset>
+        <legend class="legend"></legend>
+        <!-- index.html -->
+
+<section class="contact">
+
+    <h2>Contact Us</h2>
+  
+    <form action="" method="post">
+      <input type="text" placeholder="Name">
+      <input type="email" placeholder="Email">
+      <textarea placeholder="Message"></textarea>
+      <button type="submit">Send Message</button>
+    </form>
+  
+  </section>
+  
     </main>
 
     <footer class="footer">

style.css

@@ -72,15 +72,11 @@ body {
     margin-bottom: 10px;
 }
 
-.features ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.features li {
-    margin-bottom: 10px;
-}
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+  }
 
 .footer {
     background: linear-gradient(to top, #eee 0%, #fff 100%);
@@ -89,56 +85,48 @@ body {
 }
 
 /* Contact Section Styles */
-.contact {
-    margin-top: 50px;
-    text-align: center;
-    background-color: #f5f5f5; /* Light gray background */
-    padding: 30px;
-    border-radius: 10px; /* Rounded corners */
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-
-.contact form {
-    display: flex; /* Maintain flex layout */
-    flex-direction: column; /* Stack elements vertically */
-    width: 100%; /* Take up full width within the contact section */
-    padding: 20px; /* Inner padding for form elements */
-}
-
-.contact .form-group {
-    margin-bottom: 15px;
-}
-
-.contact label {
-    display: block; /* Maintain block-level display for labels */
-    margin-bottom: 5px;
-    font-weight: bold; /* Add slight emphasis to labels */
-}
-
-.contact input,
-.contact textarea {
-    width: 100%; /* Maintain full width within form */
-    padding: 10px;
-    border: 1px solid #ddd; /* Light gray border */
-    border-radius: 5px; /* Rounded corners for input fields */
-    font-size: 16px; /* Increase font size for better readability */
-}
+/* style.css */
 
-.contact textarea {
-    height: 150px; /* Increase textarea height */
-}
-
-.contact button {
-    background-color: #007bff; /* Blue background for submit button */
-    color: #fff; /* White text color */
-    padding: 12px 20px; /* Adjust padding slightly */
+.contact {
+    background-color: #f5f5f5; 
+    border-radius: 0.25rem;
+    padding: 1rem;
+    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
+  }
+  
+  .contact h2 {
+    font-size: 1.5rem;
+  }
+  
+  .contact form {
+    max-width: 600px;
+    margin: 0 auto 1rem;
+  }
+  
+  .contact input, 
+  .contact textarea {
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border-radius: 0.25rem;
+    border: 1px solid #ccc;
+  }
+  
+  .contact button[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background-color: #0077cc;
+    color: #fff;
     border: none;
-    border-radius: 5px;
+    border-radius: 0.25rem;
     cursor: pointer;
-    margin-top: 10px;
-    font-weight: bold; /* Make submit button text bolder */
-}
-
+  }
+  
+  .contact button[type="submit"]:hover {
+    background-color: #005599;
+  }
+  
 
 .legend {
     text-align: center;