Skip to content

Commit

Permalink
Merge pull request khushi-joshi-05#1217 from Riddhi162/riddhipatch2
Browse files Browse the repository at this point in the history 
Created the feedback form
  • Loading branch information
@sunny0625
sunny0625 authored Jun 28, 2024
2 parents d35bfa3 + c411b84 commit cc772b9
Show file tree
Hide file tree
Showing 3 changed files with 304 additions and 1 deletion.
214 changes: 214 additions & 0 deletions Css-files/feedback.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
body {
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}

.main-outer {
font-family: "Bree Serif", serif;
line-height: 1.4;
color: rgb(255, 255, 255);
margin: 0;
padding: 3.125rem 1rem;
box-sizing: border-box;
width: 100%;
max-width: 600px;
}

.main-outer::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background-image: linear-gradient(115deg, rgba(191, 7, 7, 0.456), rgba(7, 5, 7, 0.67)), url(../Images/homeSliderImages/home-slider-3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

h1 {
font-weight: 400;
line-height: 1.2;
}

p {
font-size: 1.125rem;
}

h1, p {
margin-top: 0;
margin-bottom: 0.5rem;
}

label, .pform {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}

input, button, select, textarea {
margin: 0;
font-family: inherit;
line-height: inherit;
}

button {
border: none;
}

form {
background: rgba(255, 255, 255, 0.186);
padding: 2.5rem 0.625rem;
border-radius: 0.25rem;
backdrop-filter: blur(10px);
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.555);
}

@media (min-width: 300px) {
form {
padding: 2.5rem;
}
}

.text-center {
text-align: center;
}

.description {
font-style: italic;
font-weight: 200;
text-shadow: 1px 1px 1px rgba(0 , 0, 0, 0.4);
}

fieldset {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
border: none;
}

.form-control {
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.375rem;
color: #495057;
background-color: #ffffff94;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-sizing: border-box;
}

.input-radio, .input-checkbox {
display: inline-box;
margin-right: 0.625rem;
min-height: 1.25rem;
min-width: 1.25rem;
}

.fqual {
display: flex;
justify-content: space-around;
font-size: 17px;
}

.input-textarea {
min-height: 120px;
width: 95%;
padding: 0.625rem;


}

.submit-button {
display: block;
width: 100%;
padding: 0.75rem;
background: #37af65;
color: inherit;
border-radius: 2px;
cursor: pointer;
}

.star-rating {
display: flex;
justify-content: space-around;
padding: 0 1.25rem;
}

.star-button {
background: none;
border: none;
cursor: pointer;
color: #ccc;
font-size: 25px;
padding: 0;
}

.star-button:hover, .star-button:focus {
color: #f1c40f;
outline: none;
}

.star-button.rated, .star-button.hover {
color: #f1c40f;
}

.star-button.greyed {
color: #ccc;
}

.rate-tit {
font-size: 1.125rem;
margin-bottom: 0.5rem;
text-align: center;
}

@media (max-width: 800px) {
.main-outer {
max-width: 500px;
}

.fqual {
font-size: 13px;
}
h1{
font-size: 26px;
}
}

@media (max-width: 600px) {
.main-outer {
max-width: 450px;
}
h1{
font-size: 23px;
}
}

@media (max-width: 400px) {
form{
padding: 1.5rem;
}
.fqual {
font-size: 12px;
}
.input-radio, .input-checkbox {
margin-right: 0.325rem;
min-height: 0.45rem;
min-width: 0.45rem;
}
.rate-tit,p {
font-size: 0.9rem;
}
h1{
font-size: 19px;
}
}
83 changes: 83 additions & 0 deletions Html-files/feedback.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../Css-files/feedback.css">
<script src="menuStars.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-outer">
<header>
<h1 id="title" class="text-center">We appreciate your valuable feedback.</h1>

</header>
<form id="survey=-form">
<fieldset>
<label id="name_and_surname-label" for="name_and_surname">Name</label>
<input id="name_and_surname" type="text" placeholder="Your answer" required class="form-control" />
</fieldset>
<fieldset>
<label id="phone_number-label" for="phone_number">Phone number</label>
<input id="phone_number" type="text" placeholder="Your answer" required class="form-control" />
</fieldset>
<fieldset>
<label id="email-label" for="email">Email</label>
<input id="email" type="text" placeholder="Your answer" required class="form-control" />
</fieldset>
<fieldset>
<p class="pform">Food Quality</p>
<div class="fqual">
<label for="own_vhicle-yes"><input type="radio" name="quality" id="exc1" value="yes" class="input-radio" />Excellent</label>
<label for="own_vhicle-no"><input type="radio" name="quality" id="good1" value="no" class="input-radio" />Good</label>
<label for="own_vhicle-no"><input type="radio" name="quality" id="avg1" value="no" class="input-radio" />Average</label>
<label for="own_vhicle-no"><input type="radio" name="quality" id="dis1" value="no" class="input-radio" />Dissatisfied</label>
</div>
</fieldset>
<fieldset>
<p class="pform">Speed of service</p>
<div class="fqual">
<label for="own_vhicle-yes"><input type="radio" name="speed" id="exc2" value="yes" class="input-radio" />Excellent</label>
<label for="own_vhicle-no"><input type="radio" name="speed" id="good2" value="no" class="input-radio" />Good</label>
<label for="own_vhicle-no"><input type="radio" name="speed" id="avg2" value="no" class="input-radio" />Average</label>
<label for="own_vhicle-no"><input type="radio" name="speed" id="dis2" value="no" class="input-radio" />Dissatisfied</label>
</div>
</fieldset>
<fieldset>
<p class="pform">Value for Money</p>
<div class="fqual">
<label for="own_vhicle-yes"><input type="radio" name="value" id="exc3" value="yes" class="input-radio" />Excellent</label>
<label for="own_vhicle-no"><input type="radio" name="value" id="good2" value="no" class="input-radio" />Good</label>
<label for="own_vhicle-no"><input type="radio" name="value" id="avg3" value="no" class="input-radio" />Average</label>
<label for="own_vhicle-no"><input type="radio" name="value" id="dis3" value="no" class="input-radio" />Dissatisfied</label>
</div>
</fieldset>


<fieldset>
<p class="pform">Any comments, questions or suggestions?</p>
<textarea id="comments" name="comments" placeholder="Your answer" class="input-textarea"></textarea>
</fieldset>
<fieldset class="">
<p class="rate-tit">How much would you like to rate us?</p>
<div class="star-rating">
<div class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></div>
<div class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></div>
<div class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></div>
<div class="star-button" onclick="rateItem(this, 4)"><i class="fas fa-star"></i></div>
<div class="star-button" onclick="rateItem(this, 5)"><i class="fas fa-star"></i></div>
</div>
</fieldset>
<fieldset>
<button type="submit" id="submit" class="submit-button">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
8 changes: 7 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -602,6 +602,12 @@ <h4>Follow Us</h4>
</div>
<p class="text"> Stay connected with us on social media for the latest updates, recipes, and foodie
adventures. </p>
<div >
Give your valuable
<Link to="" >
<a href="/Html-files/feedback.html"><b>feedback!</b></a>
</Link>
</div>
</div>
<div class="copyright py-1">
&copy;
Expand Down Expand Up @@ -659,4 +665,4 @@ <h4>Follow Us</h4>

</body>

</html>
</html>

0 comments on commit cc772b9

Please sign in to comment.