Skip to content

Commit

Permalink
format the contact us page better #13 (#119)
Browse files Browse the repository at this point in the history 
<h2>I tried to make some changes , it was difficult to change the whole
page format, so I changed the form, and made it look better than before,
I would highly appreciate if you at least merge this request to make me
motivated, and I can contribute more in future!, Thank you </h2>

<h3>Before:</h3>


![image](https://github.com/user-attachments/assets/1382b84e-b242-40e7-8a4b-5e6a2600ef31)

<h3>After:</h3>


https://github.com/user-attachments/assets/bef50f43-9b08-4f5a-87c6-38d91bfe66c0
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 3, 2024
2 parents dcf5e53 + 0b39977 commit 9f5bf1c
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 37 deletions.
35 changes: 18 additions & 17 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,30 +132,30 @@ body {
border-radius: 10px;
display: inline-block;

transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
/* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; Smooth transition */
}
.but a:hover{
background-color: #ffffff;
color: brown;
border: 3px solid rgb(165, 42, 42);
transform: scale(1.01);
animation: bounce 0.5s;
/* animation: bounce 0.5s; */
}
input[type="submit"] {
background-color: brown;
color: #ffffff !important;
color: brown !important ;
border: 3px solid rgb(255, 255, 255);
padding: 20px 10px !important;
border-radius: 10px;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
/* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; */
}

input[type="submit"]:hover {
background-color: #ffffff;
color: brown !important;
border: 3px solid rgb(165, 42, 42);
background-color: brown!important;
color: white!important;
border: 3.5px solid rgb(165, 42, 42);
transform: scale(1.01);
animation: bounce 0.5s;
/* animation: bounce 0.5s; */
}


Expand All @@ -167,15 +167,16 @@ input[type="submit"]:hover {
border-radius: 15px;
display: inline-block;
color: white;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
/* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; Smooth transition */
}

.butt:hover {
background-color: #ffffff;
color: brown !important;
/* background-color: #ffffff; */
background-color: brown !important;
color:white !important;
border: 3px solid rgb(165, 42, 42);
transform: scale(1.01);
animation: bounce 0.5s;
/* animation: bounce 0.5s; */
}
@keyframes bounce {
0%, 100% {
Expand Down Expand Up @@ -414,10 +415,10 @@ label {
font-weight: bold;
}

input,
textarea {
height:30px;
width: 120%;
input
{
height:40px;
width: 100%;
padding: 2.5px;
box-sizing: border-box;
border-radius: 2px;
Expand Down Expand Up @@ -537,7 +538,7 @@ textarea {

#contactForm input,
#contactForm textarea {
width: 100%;
width: 50%;
padding: 20px;
margin: 5px;
border-radius: 10px;
Expand Down
46 changes: 26 additions & 20 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,38 +344,44 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
<form action="/submit" method="POST" id="contact-form" role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group"

<label for="form_email" style="font-family: Georgia;">Name *</label>
<div class="input-icon">
<i class="fas fa-user"></i>
<input id="form_email" type="email" name="email" class="form-control"
placeholder=" Enter your Name" required="required"
data-error="Name is required.">


</div>
</div>
<div class="col-md-6">
<div class="form-group">

<label for="form_email" style="font-family: Georgia;">Email *</label>
<div class="input-icon">
<i class="fas fa-envelope"></i>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email*" required="required"
placeholder=" Enter your email" required="required"
data-error="Valid Email is required.">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone" style="font-family: Georgia;">Phone number *</label>
<div class="input-icon">
<i class="fas fa-phone"></i>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number*" required="required"
pattern="[0-9]{10}" data-error="Phone number is required.">
</div>


</div>
</div>
</div><br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email" style="font-family: Georgia;">Name *</label>
<label for="form_lastname" style="font-family: Georgia;">Phone number *</label>
<div class="input-icon">
<i class="fas fa-user"></i>
<input id="form_name" type="text" name="name" class="form-control"
placeholder="Please enter your name*" required="required"
data-error="Name is required.">

<i class="fas fa-phone"></i>
<input id="form_lastname" type="text" name="surname" class="form-control"
placeholder=" Enter your Phone number" required="required"
data-error=" Phone number is required.">

</div>
</div>
</div>
Expand All @@ -386,14 +392,14 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
<label for="form_message" style="font-family: Georgia;">Message *</label>

<textarea id="form_message" name="message" class="form-control"
placeholder="Write your message here." style="height: 100px; width: 100%;" required="required"
placeholder="Write your message here." style="height: 180px; width: 70%;" required="required"
data-error="Please, leave us a message."></textarea>

</div>
</div>
<div class="col-md-4 mt-4">
<input type="submit" class="btn btn-send btn-block"
value="Send Message" style="background-color: #ffc1b7; color: black; text-align: center; font-family: var(--ff-philosopher); padding: 12px 0; border: 1px solid black; height: 50px; line-height: 26px;">
value="Send Message" style="background-color: #ffc1b7; color: black; text-align: center; font-family: var(--ff-philosopher); border: 1px solid black; height: 50px; line-height: 10px; ">
</div>
</div>
</div>
Expand Down

0 comments on commit 9f5bf1c

Please sign in to comment.