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

Jump to bottom

Change in about.html #445

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Change in about.html #445

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e549c4
Change in about.html
shauryaq05 Oct 15, 2024
42bb7f2
Feature addition in index.html
shauryaq05 Oct 15, 2024
e3b3d41
Added feature in index.html
shauryaq05 Oct 16, 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
55 changes: 47 additions & 8 deletions aboutus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,15 +226,54 @@ <h2>Feedback Form</h2>

<!-- SIDEBAR -->

<div class="social-sidebar">
<div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
<ul id="sidebar-content">
<li><a class= "facebook" href="#"><i class="fa-brands fa-meta"></i></a></li>
<li><a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a class= "facebook" href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a class= "facebook" href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
<div class="social-media">
<a href="https://www.facebook.com" target="_blank">
<img src="https://img.icons8.com/color/48/000000/facebook.png" alt="Facebook">
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="https://img.icons8.com/color/48/000000/instagram-new.png" alt="Instagram">
</a>
<a href="https://www.twitter.com" target="_blank">
<img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Twitter">
</a>
</div>
</header>
<style>
/* Basic styling for the header */
header {
text-align: center;
padding: 20px;
background-color: #f8f9fa;
}

h1 {
font-family: Arial, sans-serif;
color: #333;
}

/* Styling for social media icons */
.social-media {
margin-top: 20px;
}

.social-media a {
margin: 0 10px;
text-decoration: none;
}

.social-media img {
width: 40px; /* Customize icon size */
height: 40px;
transition: transform 0.3s ease;
}

.social-media img:hover {
transform: scale(1.2); /* Adds zoom effect on hover */
}

</style>


<div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
<i class="fas fa-arrow-left"></i>
</div>
Expand Down
187 changes: 166 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,25 +616,170 @@ <h2>Quick Links</h2>
<li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-section contact-form">
<h2>Feedback Form</h2>
<form action="#" method="post">
<input type="email" name="email" class="text-input contact-input" placeholder="Your email address...">
<textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
<button type="submit" class="btn btn-big contact-btn">
<i class="fas fa-envelope"></i>
Send
</button>
</form>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Footer Feedback Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Landing Page with Feedback Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Other sections of the website -->

<!-- Footer Section with Feedback Form -->
<footer>
<h2>Give Us Your Feedback</h2>
<form id="feedback-form">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>

<label for="email">Your Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="rating">Rate Your Experience:</label>
<div class="rating">
<input type="radio" id="star5" name="rating" value="5" required>
<label for="star5" title="5 stars">☆</label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4" title="4 stars">☆</label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3" title="3 stars">☆</label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2" title="2 stars">☆</label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1" title="1 star">☆</label>
</div>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Tell us what you think"></textarea>

<button type="submit">Submit Feedback</button>
</form>
</footer>
</body>







</body>
<style>

footer {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shauryaq05 Don't do this. Add is to css file.

background-color: #333;
color: white;
padding: 40px 0;
text-align: center;
}

footer h2 {
font-size: 24px;
margin-bottom: 20px;
}

#feedback-form {
display: inline-block;
text-align: left;
background-color: #444;
padding: 20px;
border-radius: 10px;
width: 400px;
height: auto;
}

#feedback-form label {
display: block;
margin: 10px 0 5px;
font-size: 14px;
color: #ddd;
}

#feedback-form input[type="text"],
#feedback-form input[type="email"],
#feedback-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: none;
border-radius: 5px;
background-color: #555;
color: white;
font-size: 14px;
}

#feedback-form textarea {
resize: none;
}

#feedback-form button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
font-size: 16px;
cursor: pointer;
}

#feedback-form button:hover {
background-color: #0056b3;
}


.rating {
display: flex;
justify-content: space-between;
max-width: 250px;
margin: 10px 0 15px;
}

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

.rating label {
font-size: 30px;
color: #ccc;
cursor: pointer;
transition: color 0.3s ease;
}

.rating input[type="radio"]:checked ~ label {
color: #f7d106;
}

.rating label:hover,
.rating label:hover ~ label {
color: #f7d106;
}




</style>


</div>
<div class="footer-bottom">
&copy; 2024 GamingTools | Designed by Swaraj
</div>

</footer>

<!-- SIDEBAR -->


<div class="social-sidebar">
<div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
Expand All @@ -650,7 +795,7 @@ <h2>Feedback Form</h2>
</div>


<!-- Scroll to Top Button -->

<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<ion-icon name="arrow-up-outline"></ion-icon>
Expand All @@ -663,11 +808,11 @@ <h2>Feedback Form</h2>
<script>
let cartItemCount = 0;

// Function to handle Add to Cart button click

document.getElementById('cart-btn').addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
alert('Item added to cart'); // Show alert
cartItemCount++;
document.getElementById('cart-count').textContent = cartItemCount;
alert('Item added to cart');
});

</script>
Expand All @@ -690,12 +835,12 @@ <h2>Feedback Form</h2>

</script>

<!-- this script is for twitter icon starts -->

<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->



<!-- Scripts -->
<!-- testimonial script -->

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script src="script.js"></script>
Expand Down