Skip to content

Commit

Permalink
Merge branch 'Its-Aman-Yadav:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@sau-mili
sau-mili authored Jun 6, 2024
2 parents 886543f + 5cc45d7 commit c124607
Show file tree
Hide file tree
Showing 4 changed files with 429 additions and 61 deletions.
102 changes: 101 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1070,7 +1070,6 @@ div.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

/* preloader section */
.preloader {
position: fixed;
Expand Down Expand Up @@ -1875,6 +1874,107 @@ h3 {
color: #ffffff;
}

/* Basic styles for feedbackform */

/* Basic styles for form */
.formcontainer {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: 0 auto;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.section-title {
margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: bold;
color: #333;
}

.contact-form {
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}

.contact-form:hover {
background-color: #f5f5f5;
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px;
margin: 8px 0 20px 0;
border: none;
border-radius: 25px;
box-sizing: border-box;
font-size: 16px;
background-color: #f2f2f2;
transition: background-color 0.3s ease;
font-family: 'Montserrat', sans-serif;
color: #333; /* Text color */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
background-color: #e0e0e0;
}

::placeholder {
color: #666; /* Placeholder color */
}

/* Styles for rating stars */
.rating {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

input[type="radio"] {
display: none;
}

label {
font-size: 30px; /* Reduced label size */
color: #888;
cursor: pointer;
transition: color 0.3s ease;
}

label:hover {
color: green;
}

input[type="radio"]:checked + label {
color: green;
}

.submit {
background-color: #007BFF;
color: white;
padding: 14px 24px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.2s ease;
font-family: 'Montserrat', sans-serif;
}

.submit:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
/* Mobile Responsive */
@media (max-width: 980px) {
h1 {
Expand Down
128 changes: 68 additions & 60 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@
</div>
</section>


<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa-solid fa-circle-up"></i></button>
<button id="scrollToTopBtn" class="scrollToTopBtn">▲</button>
<!-- <button ><i class="fa-solid fa-circle-up"></i></button> -->

<script>
let mybutton = document.getElementById("myBtn");
Expand Down Expand Up @@ -154,7 +154,7 @@
<li><i class="fa-solid fa-list" style="filter:invert(1)"></i><a href="#services">Services</a></li>
<li><i class="fa-solid fa-user" style="filter:invert(1)"></i><a href="#testimonials">Reviews</a></li>
<li><i class="fa-solid fa-at" style="filter:invert(1)"></i><a href="#contact">Contact Us</a></li>
<li><i class="fa-solid fa-message" style="filter:invert(1)"></i><a href="#feedback">Feedback</a></li>
<li><i class="fa-solid fa-user" style="filter:invert(1)"></i><a href="login.html">Login/Register</a></li>
</ul>
</nav>
</div>
Expand Down Expand Up @@ -665,7 +665,8 @@ <h5 class="card-title" style="font-size: 28px;font-weight: bold;">Emily R.</h5>
</div>
</div>
</section>
-->

<!-- feedback popup -->

<!-- contact section -->

Expand Down Expand Up @@ -735,78 +736,58 @@ <h1 class="get font-bold">Get in Touch</h1>
<section id="feedback">
<div class="formcontainer">
<div class="section-title">
<br>

<br>
<h1 class="get font-bold">Feedback</h1>
<p>We value your feedback. Please let us know your thoughts and suggestions. </p>

<p>We value your feedback. Please let us know your thoughts and suggestions.</p>
</div>
<div class="contact-form bg-gradient-to-r from-orange-500 to-yellow-300">
<form
id="contact-form"
action="http://127.0.0.1:5500/send-email"
method="POST"
onsubmit="sendFeed(); reset(); return false;"
>
<form id="contact-form" action="http://127.0.0.1:5500/send-email" method="POST" onsubmit="sendFeed(); reset(); return false;">
<div class="row">
<div class="col-md-6 col-sm-6 rad">
<label for="name">Name</label>
<input
name="name"
id="name"
type="text"
class="input-focus"
placeholder="Enter Your Name"
required
/>
<input name="name" id="name" type="text" class="input-focus" placeholder="Enter Your Name" required>
</div>
<div class="col-md-6 col-sm-6 rad">
<label for="email">Email</label>
<input
name="email"
type="email"
id="email"
class="input-focus"
placeholder="Enter Your Email"
required
/>
<input name="email" type="email" id="email" class="input-focus" placeholder="Enter Your Email" required>
</div>
<div class="col-md-8 msg rad ">
<div class="col-md-8 msg rad">
<label for="message">Message</label>
<textarea
name="message"
class="input-focus"
id="msg"
placeholder="Enter Your Query Or Message"
rows="6"
required
></textarea>
<textarea name="message" class="input-focus" id="msg" placeholder="Enter Your Query Or Message" rows="6" required></textarea>
</div>

<div class="col-12 rating rad">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"><i class="fas fa-star"></i></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"><i class="fas fa-star"></i></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"><i class="fas fa-star"></i></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"><i class="fas fa-star"></i></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"><i class="fas fa-star"></i></label>
</div>
<div class="flex justify-center col-md-offset-0">
<button class="submit" type="submit">Submit</button>
</div>
</div>
<div class="col-12 rating rad">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"><i class="fas fa-star"></i></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"><i class="fas fa-star"></i></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"><i class="fas fa-star"></i></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"><i class="fas fa-star"></i></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"><i class="fas fa-star"></i></label>
</div>
<div class="flex justify-center col-md-offset-0">
<button class="submit" type="submit">Submit</button>
</div>
</div>
</form>
</div>
<br>
<br>
</div>
</section>

</main>

<script>
const stars = document.querySelectorAll('.rating input[type="radio"]');
stars.forEach(star => {
star.addEventListener('click', () => {
stars.forEach(s => {
if (s !== star) {
s.checked = false;
}
});
});
});
</script>
<script>
function sendEmail() {
alert("Email sent successfully!");
Expand Down Expand Up @@ -999,7 +980,34 @@ <h4 class="footer_title">Quick Links</h4>


<!-- <a href="#" class="back-to-top" id="backToTopBtn">↑</a> -->
<script>
// Get the button
const scrollToTopBtn = document.getElementById('scrollToTopBtn');

// Function to scroll to the top of the page
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}

// Show or hide the button based on the scroll position
function handleScroll() {
if (window.pageYOffset > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}
}

// Add scroll event listener
window.addEventListener('scroll', handleScroll);

// Add click event listener
scrollToTopBtn.addEventListener('click', scrollToTop);

</script>

<script>
const wrapper = document.querySelector(".wrapper");
Expand Down
Loading

0 comments on commit c124607

Please sign in to comment.