Skip to content

Commit

Permalink
Merge pull request #472 from kashisharora9462/main
Browse files Browse the repository at this point in the history 
Enhanced Feedback form
  • Loading branch information
@Suchitra-Sahoo
Suchitra-Sahoo authored May 28, 2024
2 parents e0a710e + 648deb0 commit b28a2ef
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 69 deletions.
65 changes: 39 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,34 +312,44 @@ <h2 class="heading">Contact <span>Us!</span></h2>
</form>
</section>

<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Feedback Form</h2>
<form id="feedback-form">
<input type="text" placeholder="Full Name" required />
<input type="email" placeholder="Email Address" required />
<textarea
cols="30"
rows="5"
placeholder="Your Feedback"
required
></textarea>




<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>FEEDBACK FORM</h2>
<form id="feedback-form">
<div class="form-group">
<div class="icon">
<i class="fas fa-user"></i>
</div>
<input type="text" placeholder="Your Name" name="name" required>
</div>
<div class="form-group">
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<input type="email" placeholder="Email Id" required>
</div>
<div class="form-group">
<textarea cols="30" rows="5" placeholder="Your Feedback" required></textarea>
</div>
<div class="rating">
<h2>rate us:</h2>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<h2>Rate us:</h2>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>

</div>
<button type="submit">Submit</button>
</form>
</div>


<button type="submit">Submit Feedback</button>
</form>
</div>
</div>

<footer class="footer">
<div class="footer-grid">
Expand Down Expand Up @@ -373,7 +383,10 @@ <h2>AgriLearnNetwork</h2>
<div class="footer-iconTop">
<a href="#home"><i class="bx bx-up-arrow-alt"></i></a>
</div>
</div>
</div>
</footer>


<div class="quick-links">
<h2>Quick Links</h2>
<ul>
Expand Down
122 changes: 79 additions & 43 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -902,9 +902,10 @@ input[type="number"]::-webkit-inner-spin-button {

/* Modal styles */
.modal {
display: none;
flex-direction: row;
flex-wrap: nowrap;

display: flex;
flex-direction: column;
/* flex-wrap: nowrap; */
justify-content: center;
align-items: center;
position: fixed;
Expand All @@ -917,15 +918,17 @@ input[type="number"]::-webkit-inner-spin-button {
background-color: rgba(0, 0, 0, 0.4);
}


.modal-content {
background-color: #ffffff;
margin: 10% auto;
padding: 30px;
/* margin: 10% auto; */
padding: 50px;
border-radius: 10px;
width: 70%;
width: 90%;
max-width: 500px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

position: relative;
text-align: center;
}

.close {
Expand All @@ -943,56 +946,76 @@ input[type="number"]::-webkit-inner-spin-button {

.modal-content h2 {
margin-top: 0;
margin-bottom: 20px;
margin-bottom: 10px;
text-align: center;
color:black;
font-size: 20px;
font-size: 24px;
}

.modal-content label {
/* .modal-content label {
display: block;
margin-bottom: 8px;
color: #666;
}
} */

.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content textarea {
width: 100%;
padding: 12px;
.form-group {
position: relative;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
max-width: 100%;
}

.modal-content input[type="text"]:focus,
.modal-content input[type="email"]:focus,
.modal-content textarea:focus {
outline: none;
border-color: #66afe9;
}

.modal-content button[type="submit"] {
background-color:#0e4b16;
.form-group .icon {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
background-color: rgb(75, 179, 75);
color: white;
padding: 12px 20px;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
display: block;
margin: auto;
align-items: center;
}


.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 10px 10px 40px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #bbb;
}


.form-group textarea {
height: 80px;
padding: 10px;
}

.modal-content button[type="submit"] {
background: linear-gradient(to right, rgb(75, 179, 75), rgb(42, 228, 42));
color: white;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
width: 100%;
}

.modal-content button[type="submit"]:hover {
background-color:#053314;
background: linear-gradient(to right, rgb(63, 220, 63), rgb(20, 124, 20));
}


.modal-content button[type="submit"]:focus {
outline: none;
}
Expand All @@ -1007,19 +1030,32 @@ input[type="number"]::-webkit-inner-spin-button {
cursor: pointer;
}
/* rating stars */

.rating {
width: 180px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

.rating h2 {
margin: 0;
margin-right: 10px;
font-size: 18px;
}

.rating__star {
font-size: 16px;
margin-bottom: 20px;
margin-left: 14px;
font-size: 24px;
margin: 0 5px;
cursor: pointer;
color: #dabd18b2;
}


.rating__star:hover,
.rating__star.active {
color: #ffc107;
}


.footer {
Expand Down

0 comments on commit b28a2ef

Please sign in to comment.