Skip to content

Fixing about section in footer of homepage.1 #127

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

Open
swanandi-bhende wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixing about section in footer of homepage.1 #127

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
143 changes: 116 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,31 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STYLÉKA</title>
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">

<style>
/* Smooth scrolling for modern browsers */
html {
scroll-behavior: smooth;
}

/* For browsers that don't support smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
</style>
</head>

<body>

<section id="header">
<!-- <a href="#"><img src="img/Untitled_design__1_-removebg-preview.png" class="logo" alt=""></a> -->

<!-- <h1>STYLÉKA</h1> -->

<span class="site-title">STYLÉKA</span>

<div>
<ul id="navbar">

<li><a class="active" href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="blog.html">Blog</a></li>
Expand Down Expand Up @@ -87,6 +94,20 @@ <h6>24/7 Support</h6>
</div>
</section>

<!-- About Us Section with ID -->
<section id="about-us" class="section-p1">
<div class="product-header">
<div class="product-title">
<h2>About STYLÉKA</h2>
<p>Your Fashion Destination</p>
</div>
</div>
<div class="about-content">
<p>STYLÉKA is a premier fashion destination offering the latest trends in clothing, footwear, and accessories. We bring you curated collections from top brands worldwide, ensuring you always stay ahead in the fashion game.</p>
<p>Our mission is to make high-quality fashion accessible to everyone without compromising on style or breaking the bank. With regular new arrivals and exclusive deals, we're committed to providing an exceptional shopping experience.</p>
</div>
</section>

<section id="product1" class="section-p1">
<div class="product-header">
<div class="product-title">
Expand Down Expand Up @@ -141,7 +162,6 @@ <h5>White tee with black stripes</h5>
</div>
<h4>₹2000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1040945/pexels-photo-1040945.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Zara Printed Shirt">
Expand All @@ -157,7 +177,6 @@ <h5>Printed Shirt</h5>
</div>
<h4>₹5000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1656684/pexels-photo-1656684.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Gucci Flower Print Shirt">
Expand All @@ -173,7 +192,6 @@ <h5>Flower print exclusive shirt</h5>
</div>
<h4>₹14999</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1240892/pexels-photo-1240892.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Puma One8 Shoes">
Expand All @@ -189,7 +207,6 @@ <h5>One8 Shoes By Virat</h5>
</div>
<h4>₹5999</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1620695/pexels-photo-1620695.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Ferrari Sports Hoodie">
Expand All @@ -205,7 +222,6 @@ <h5>Ferrari Sports Hoodie</h5>
</div>
<h4>₹8999</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1183266/pexels-photo-1183266.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Zara Dual Color Shirt">
Expand All @@ -221,7 +237,6 @@ <h5>Dual Color Shirt</h5>
</div>
<h4>₹4000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="H&M Women Trouser">
Expand All @@ -237,7 +252,6 @@ <h5>Printed Women Trouser</h5>
</div>
<h4>₹1599</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/974911/pexels-photo-974911.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="H&M Purple T-shirt">
Expand All @@ -253,7 +267,6 @@ <h5>Exclusive Purple Women t-shirts</h5>
</div>
<h4>₹2999</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
</div>
</section>
Expand Down Expand Up @@ -293,12 +306,42 @@ <h4>24/7 Support</h4>
</div>
</section>

<!-- Privacy Policy Section with ID -->
<section id="privacy-policy" class="section-p1">
<div class="product-header">
<div class="product-title">
<h2>Privacy Policy</h2>
<p>Your Data is Secure With Us</p>
</div>
</div>
<div class="policy-content">
<p>At STYLÉKA, we take your privacy seriously. This Privacy Policy describes how we collect, use, and protect your personal information when you use our website and services.</p>
<p>We collect information that you provide directly to us, such as when you create an account, make a purchase, or contact us for support. We use this information to process your orders, communicate with you, and improve our services.</p>
<p>We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.</p>
</div>
</section>

<section id="banner" class="section-m1">
<h4>Repair Service</h4>
<h2>Up to <span>70% Off</span> - All t-shirts & Accessories</h2>
<button class="normal">Explore More</button>
</section>

<!-- Terms & Conditions Section with ID -->
<section id="terms-conditions" class="section-p1">
<div class="product-header">
<div class="product-title">
<h2>Terms & Conditions</h2>
<p>Please Read Carefully</p>
</div>
</div>
<div class="terms-content">
<p>By accessing and using STYLÉKA's website, you accept and agree to be bound by the terms and conditions set forth in this agreement.</p>
<p>All products are subject to availability. We reserve the right to limit quantities and refuse service to anyone at our discretion. Prices are subject to change without notice.</p>
<p>We are not responsible for any delays in delivery due to unforeseen circumstances or events beyond our control. Returns and exchanges are subject to our return policy.</p>
</div>
</section>

<section id="product1" class="section-p1">
<h2>New Arrivals</h2>
<p>Summer Collection New Modern Design</p>
Expand All @@ -317,7 +360,6 @@ <h5>Plain Black Shirt</h5>
</div>
<h4>₹1500</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/2983464/pexels-photo-2983464.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="H&M Blue Shirt">
Expand All @@ -333,7 +375,6 @@ <h5>Blue Shirt</h5>
</div>
<h4>₹2500</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/2983467/pexels-photo-2983467.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Lacoste Checked Shirt">
Expand All @@ -349,7 +390,6 @@ <h5>Checked Shirt</h5>
</div>
<h4>₹6000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1040945/pexels-photo-1040945.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Goldstar White Shirt">
Expand All @@ -365,7 +405,6 @@ <h5>White Shirt</h5>
</div>
<h4>₹2000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1656684/pexels-photo-1656684.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="LV Designer Shirt">
Expand All @@ -381,7 +420,6 @@ <h5>Designer Shirt</h5>
</div>
<h4>₹12000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1620695/pexels-photo-1620695.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Kaloster Denim Jacket">
Expand All @@ -397,7 +435,6 @@ <h5>Denim Jacket</h5>
</div>
<h4>₹3500</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/1240892/pexels-photo-1240892.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Lacoste Shorts">
Expand All @@ -413,7 +450,6 @@ <h5>Shorts</h5>
</div>
<h4>₹2600</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
<div class="pro">
<img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&fit=crop" alt="Gucci Desert Shirt">
Expand All @@ -429,11 +465,25 @@ <h5>Desert Shirt</h5>
</div>
<h4>₹26000</h4>
</div>
<!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
</div>
</div>
</section>

<!-- Contact Us Section with ID -->
<section id="contact-us" class="section-p1">
<div class="product-header">
<div class="product-title">
<h2>Contact Us</h2>
<p>We'd Love to Hear From You</p>
</div>
</div>
<div class="contact-content">
<p>Have questions about our products, need assistance with an order, or want to provide feedback? Our customer service team is here to help you.</p>
<p>Reach out to us via email at support@styleka.com or call us at (+91) - 8507566667 during our business hours (10:00 - 18:00, Mon - Sat).</p>
<p>You can also visit our physical store at Guru Nanak Dev University, Amritsar. We're always happy to assist you in person!</p>
</div>
</section>

<section id="sm-banner" class="section-p1">
<div class="banner-box">
<h4>crazy deals</h4>
Expand Down Expand Up @@ -498,11 +548,12 @@ <h4>Follow Us</h4>

<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<!-- Updated footer links with correct href values -->
<a href="#about-us">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact us</a>
<a href="#privacy-policy">Privacy Policy</a>
<a href="#terms-conditions">Terms & Conditions</a>
<a href="#contact-us">Contact us</a>
</div>

<div class="col">
Expand Down Expand Up @@ -536,6 +587,44 @@ <h4>Install App</h4>
</footer>

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

<!-- Smooth scrolling for older browsers -->
<script>
// Add smooth scrolling for browsers that don't support CSS scroll-behavior
if (!('scrollBehavior' in document.documentElement.style)) {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

const targetId = this.getAttribute('href');
if (targetId === '#') return;

const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
}

// Handle page navigation when coming from other pages
window.addEventListener('load', function() {
if (window.location.hash) {
const targetElement = document.querySelector(window.location.hash);
if (targetElement) {
setTimeout(() => {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}, 100);
}
}
});
</script>
</body>

</html>
</html>