Merge pull request vishanurag#613 from shriyadindi/message-box

Changed the UI of the your message section
Annapoornaaradhya · Oct 16, 2024 · 9e1b3ac · 9e1b3ac
2 parents 4848963 + de7eada
commit 9e1b3ac
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -688,38 +688,46 @@ <h2 class="mb-4">Contact Us</h2>
                         <div class="col-md-8">
                             <div class="form-floating">
                                 <textarea class="form-control" id="message" name="message" placeholder="Your Message"
-                                    style="height: 150px" required></textarea>
+                                    style="height: 150px; align-items: center;" required></textarea>
                                 <label for="message">Your Message</label>
                             </div>
                         </div>
                         <!-- Submit Button -->
                         <div class="col-md-8">
                             <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
                         </div>
+                        </div>
                     </form>
                 </section>
             </div>
-
         </div>
-
         <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
                     </div>
                     Message Field -->
-                    <div class="col-md-8">
+                    <!-- <div class="col-md-8">
                         <div class="form-floating">
                             <textarea class="form-control" id="message" name="message" placeholder="Your Message" style="height: 150px" required></textarea>
                             <label for="message">Your Message (minimum 20 characters)</label>
                         </div>
-                    </div>
+                    </div> -->
+                    <div class="container">
+                        <div class="cal">
+                            <h4>Your<br><span>Message</span></h4>
+                            <!-- <div class="input-box"> -->
+                                <textarea class="form-control" id="message" name="message" placeholder="Type your message here..." style="height: 350px; width: 800px;" required></textarea>
+
+
+                            <p id="result"></p>
+                        </div>
                     <!-- Submit Button -->
                     <div class="col-md-12 d-flex justify-content-center">
                         <div class="col-md-8">
                             <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
                         </div>
                     </div>
                 </form>
-            </section>
+            </div>
         </div>
 
         <!-- Custom Popup -->

diff --git a/src/Styles/Style.css b/src/Styles/Style.css
@@ -5,7 +5,47 @@
   box-sizing: border-box;
   transition: all 0.1s linear;
 }
+.container{
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(135deg,#cf9aff,#95c0ff);
+  color: #fff;
+  padding-top: 4%;
+  padding-left: 10%;
+  padding-bottom: 0;
+}
+.container h4{
+  display: flex;
+  align-items: center;
+  font-size: 55px;
+  font-weight: 600;
+  color: white;
+}
+.container h4 span{
+  display: flex;
+  align-items: center;
+  font-size: 55px;
+  font-weight: 600;
+  color: #571094;
+}
+.container button{
+  display: flex;
+  align-items: center;
+  background: linear-gradient(#9418fd,#571094);
+  color: #fff;
+  font-size: 16px;
+  outline: 0;
+  border: 0;
+  border-radius: 40px;
+  padding: 15px 25px;
+  margin: 30px 0 20px;
+  cursor: pointer;
 
+}
+.form-control{
+  height: 200px;
+  width: 300px;
+}
 body {
   height: 100vh !important;
   background: black;