Merge pull request #10 from Harmedino/ahmed

Ahmed
pirateIV · Aug 6, 2023 · aedae76 · aedae76
2 parents 328167f + b985fe7
commit aedae76
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 8 deletions.
diff --git a/css/contact.css b/css/contact.css
@@ -4,14 +4,32 @@ body {
 
 .hero {
   position: relative;
-  height: 600px;
-  background-image: url("movie_hero_bg.jpg");
+  height: 300px;
+  background-image: url("../img/Stage-curtain-background-2000x1245.png");
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
+  margin-bottom: 40px;
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
+  box-shadow: inset 0px 100px 250px #000000;
+}
+
+.hero-content {
+  position: relative;
+  text-align: center;
 }
 
 .hero-content {
@@ -30,17 +48,77 @@ body {
   margin-bottom: 30px;
 }
 
-.btn {
+.now {
   display: inline-block;
-  background-color: #f1356d;
+  background-color: #61171e;
   color: #fff;
   padding: 15px 30px;
   border-radius: 5px;
   font-size: 18px;
   text-decoration: none;
   transition: background-color 0.2s ease;
+  border: 1px solid #61171e;
+  padding: 20px;
+}
+
+.now:hover {
+  background-color: #8d343d;
+  color: #fff;
+}
+
+/* Apply color #61171E to the contact section */
+.contact {
+  background-color: #61171e;
+  color: #fff;
+  padding: 40px;
+}
+
+.contact h2 {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  background-color: transparent;
+  color: #fff;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #ffcccb; /* Light pink color on focus */
+}
+
+.btn {
+  background-color: #ffcccb;
+  color: #61171e;
+  padding: 15px 30px;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
 
 .btn:hover {
-  background-color: #ff77a9;
+  background-color: #f66b7b; /* Lighter shade of pink on hover */
 }
diff --git a/html/contact.html b/html/contact.html
@@ -66,12 +66,33 @@
 
           <section class="hero">
             <div class="hero-content">
-              <h1>Contact Us</h1>
-              <p>Have a question or feedback? Get in touch with us!</p>
-              <a href="#contact-form" class="btn">Contact Now</a>
+              <h1 class="slide-up">Contact Us</h1>
+              <p class="slide-up">Have a question or feedback? Get in touch with us!</p>
+              <a href="#contact-form" class="now slide-up">Contact Now</a>
             </div>
           </section>
 
+
+          <section class="contact">
+            <h2>Contact Us</h2>
+            <form id="contact-form">
+              <div class="form-group">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+              </div>
+              <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+              </div>
+              <div class="form-group">
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="4" required></textarea>
+              </div>
+              <button type="submit" class="btn">Send Message</button>
+            </form>
+          </section>
+
+
 
 
           </header>