Skip to content

Commit

Permalink
feedback form
Browse files Browse the repository at this point in the history
  • Loading branch information
@solanki505
solanki505 committed Jun 13, 2024
1 parent a7b1841 commit dbea5fb
Show file tree
Hide file tree
Showing 3 changed files with 409 additions and 1 deletion.
304 changes: 304 additions & 0 deletions css/homeHeader.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,308 @@
display: none;
}

}
.contact h2 {
margin-bottom: 3rem;
}

.contact form {
max-width: 70rem;
margin: 1rem auto;
text-align: center;
margin-bottom: 3rem;
}
.contact form .input-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
width: 100%;
padding: 1.5rem;
font-size: 1.6rem;
color: rgb(206, 255, 206);
background: var(--second-color);
border-radius: 0.8rem;
margin: 0.7rem 0;
border-radius: 20px;
background: #053314;
box-shadow: inset 23px 23px 21px #04240e, inset -23px -23px 21px #07421a;
}
.contact form .input-box input::placeholder,
.contact form textarea::placeholder {
color: rgb(206, 255, 206);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.contact form .input-box input {
width: 49%;
}

.contact form textarea {
resize: none;
}
.contact form .btn {
margin-top: 2rem;
cursor: pointer;
}

#review-btn{
padding: 10px 20px;
border: none;
border-radius: 5px 0 0 5px;
background-color: #B19222;
color: white;
font-size: 16px;
writing-mode: vertical-rl;
cursor: pointer;
transition: background-color 0.3s ease;
position: absolute;
right: 0; /* Attach to the right edge */
top: 50%; /* Vertically center */
transform: translateY(-50%); /* Adjust for centering */
white-space: nowrap; /* Prevent text from wrapping */



}
#review-btn:hover{
background-color:#B19222 ;
}
.button-container {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 200; /* Ensure it stays on top */
}

/* Modal styles */
.modal {

display: none;
flex-direction: column;
/* flex-wrap: nowrap; */
justify-content: center;
align-items: center;
position: fixed;
z-index: 101;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*overflow: auto;*/
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #ffffff;
/* margin: 10% auto; */
padding: 50px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
.modal-content h2 {
margin-top: 0;
margin-bottom: 10px;
text-align: center;
color:black;
font-size: 24px;
}

.form-group {
position: relative;
margin-bottom: 20px;
}
.form-group .icon {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
background-color: #8a2be2;
background-color:rgb(161, 216, 217);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
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, #8a2be2, #f163ed);
background: linear-gradient(to right, rgb(75, 120, 179), rgb(165, 153, 209));
color: white;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
width: 100%;
}

.modal-content button[type="submit"]:hover {
background: linear-gradient(to right, #f55ef0, #8a2be2);
}


.modal-content button[type="submit"]:focus {
outline: none;
}
.close:hover {
color: #000;
}
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* rating stars */
.rating {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
bottom: 10px;
}
.rating h2 {
margin: 0;
margin-right: 10px;
font-size: 18px;
}
.rating__star {
font-size: 24px;
margin: 0 5px;
cursor: pointer;
color: #dabd18b2;
}
.rating__star:hover,
.rating__star.active {
color: #ffc107;
}
/* comment */
#CommentBtn {
position: fixed;
bottom: 270px;
width: 140px;
height: 40px;
right: -55px;
border-radius: 5px;
background-color: rgb(161, 216, 217);
color: white;
border: none;
cursor: pointer;
font-size: 24px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
opacity: 0.4;
transition: 500ms;
transform: rotate(90deg);
}

#CommentBtn:hover {
background-color: #0056b3;
opacity: 1;
}


/* Style for the modal background */
#modalBackground {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}

/* Style for the comment form */
#commentForm {
max-width: 500px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background: linear-gradient(to right, rgb(161, 216, 217), rgb(105, 106, 134));
z-index: 1001;
}

#commentForm label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}

#commentForm textarea {
width: 96%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: vertical;
}

#commentForm button[type="submit"] {
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#commentForm button[type="submit"]:hover {
background-color: #ace3ed;
}
#ll{
bottom: 5px;
border: #8a2be2;
background-color: #e1eaeb;
border-radius: 4px;
}
.rating{
background: linear-gradient(to right, rgb(161, 216, 217), rgb(105, 106, 134));

}
45 changes: 44 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<link rel="stylesheet" href="css/homeHeader.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/footer.css">

<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
</head>

<body>
Expand All @@ -35,6 +35,49 @@

<!--Header start -->
<header id="homeHeader">
<button id="CommentBtn" aria-label="Toggle Comment Form"><i class="fas fa-comment"></i>feedback</button>

<!-- Comment form -->

<!-- Modal background -->
<div id="modalBackground">
<!-- Comment form -->
<div id="commentForm">
<form id="feedback-form">
<label for="userComment" style="color: rgb(229, 230, 239);">Your Feedback:</label>
<div class="form-group">
<div class="icon" >
<i class="fas fa-user"></i>
</div>
<input type="text" id="name" onfocus="changeColor()" placeholder="Your Name" name="name" required style="
width: 250px;
">
</div>
<div class="form-group">
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<input type="email" id="email" onfocus="changeColor()" placeholder="Email Id" required style="
width: 250px;
">
</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>
</div>
<button id="ll" style="color: rgb(105, 106, 134);">Submit</button>
</form>
</div>
</div>


<nav class="navbar homeHeader navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://flipkart-clone-seven-azure.vercel.app/">
<img src="https://static-assets-web.flixcart.com/batman-returns/batman-returns/p/images/fkheaderlogo_exploreplus-44005d.svg"
Expand Down
Loading

0 comments on commit dbea5fb

Please sign in to comment.