Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Feedback form #472

Merged
merged 8 commits into from
May 28, 2024
Merged

Enhanced Feedback form #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5d17754
Enhanced Feedback form
kashisharora9462 May 24, 2024
d4560cd
Update index.html
kashisharora9462 May 24, 2024
0f3a0be
Update index.html
kashisharora9462 May 24, 2024
5eb34bd
Update index.html
kashisharora9462 May 24, 2024
09aa722
Enhanced Feedback form
kashisharora9462 May 26, 2024
2021178
Update index.html
kashisharora9462 May 26, 2024
21ffae7
changed to green colour
kashisharora9462 May 27, 2024
648deb0
Merge branch 'main' into main
kashisharora9462 May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 39 additions & 26 deletions index.html
View file
Open in desktop
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
Open in desktop
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