diff --git a/blog.html b/blog.html index bd91b25..54a9d2c 100644 --- a/blog.html +++ b/blog.html @@ -1,187 +1,227 @@ - - - - - + + + + STYLÉKA - - - - - - + + + + + +
- -

#Read More

- -

Read all Our case studies about the product

- +

Read More

+ +

Read all Our case studies about the product

-
-
-
- -
-
-

The Cotton-Jersey Zip-Up here

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

13/01

-
+
+
-
- -
-
-

How to Style A Quiff

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

13/04

-
-
-
- -
-
-

Must have Skater-Girl Items

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

12/01

-
-
-
- -
-
-

Runway Inspired Trends

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

16/01

+
+

The Cotton-Jersey Zip-Up here

+

+ Kickstarter man braid godard coloring book . Reclette Waistcoat + selfies yr wolf chartreuse hexagon irony , godard... +

+ CONTINUE READING +
+ +
+

How to Style A Quiff

+

+ Kickstarter man braid godard coloring book . Reclette Waistcoat + selfies yr wolf chartreuse hexagon irony , godard... +

+ CONTINUE READING +
+ +
+

Must have Skater-Girl Items

+

+ Kickstarter man braid godard coloring book . Reclette Waistcoat + selfies yr wolf chartreuse hexagon irony , godard... +

+ CONTINUE READING +
+ +
+

Runway Inspired Trends

+

+ Kickstarter man braid godard coloring book . Reclette Waistcoat + selfies yr wolf chartreuse hexagon irony , godard... +

+ CONTINUE READING +
+
+

AW20 Womenswear Trends

+

+ Kickstarter man braid godard coloring book . Reclette Waistcoat + selfies yr wolf chartreuse hexagon irony , godard... +

+ CONTINUE READING +
+
-
- -
-
-

AW20 Menswear Trends

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-

10/03

+
+ +
+ + +
+
- - -
+
-
-

Sign Up For Newsletter

-

Get E-mail updates about ourlatest shop and special offers.

-
-
- - -
+
+

Sign Up For Newsletter

+

+ Get E-mail updates about ourlatest shop and + special offers. +

+
+
+ + +
-
-
-

STYLÉKA

-

Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

-
- -
-

Navigation

- Home - Shop - About - Contact - Blog -
+
+
+

STYLÉKA

+

+ Where fashion meets innovation and style transcends boundaries. + STYLÉKA is your premier destination for curated fashion that speaks + to the modern individual. From streetwear to haute couture, we blend + contemporary trends with timeless elegance, offering a shopping + experience that's as unique as your personal style. Discover + collections that celebrate diversity, sustainability, and the art of + self-expression. +

+
-
-

Contact

-

Address: Guru Nanak Dev University, Amritsar

-

Phone: (+91)-8507566667

-

Hours: 10:00-18:00, Mon-Sat

-

Follow us

-
- - - - -
-
+
+

Navigation

+ Home + Shop + About + Contact + Blog +
-
-

Install App

-
- -
-

Secure Payment Gateways

-
- -
-
+
+

Contact

+

Address: Guru Nanak Dev University, Amritsar

+

Phone: (+91)-8507566667

+

Hours: 10:00-18:00, Mon-Sat

+

Follow us

+
+ + + + +
- -
-

© 2025 , Powered By STYLÉKA

+ +
+

Install App

+
+ +
+

Secure Payment Gateways

+
+ +
+
+ +
+

© 2025 , Powered By STYLÉKA

+
- - + diff --git a/images/banner.avif b/images/banner.avif new file mode 100644 index 0000000..acbbb8d Binary files /dev/null and b/images/banner.avif differ diff --git a/script.js b/script.js index 5fb2eb0..b4eec7c 100644 --- a/script.js +++ b/script.js @@ -1,31 +1,74 @@ -import { app } from "./firebase-Config"; -console.log("Firebase Initialized:", app); - -const bar = document.getElementById('bar'); -const close = document.getElementById('close'); -const nav = document.getElementById('navbar'); - -if(bar){ - bar.addEventListener('click' , () => { - nav.classList.add('active'); - }) -} - -if(close){ - close.addEventListener('click' , () => { - nav.classList.remove('active'); - }) -} -function filterProducts() { - const input = document.getElementById("searchBar").value.toLowerCase(); - const products = document.querySelectorAll(".pro"); - - products.forEach(product => { - const name = product.getAttribute("data-name"); - if (name.toLowerCase().includes(input)) { - product.style.display = "block"; - } else { - product.style.display = "none"; - } - }); +// import { app } from "./firebase-Config"; +// console.log("Firebase Initialized:", app); + +// const bar = document.getElementById('bar'); +// const close = document.getElementById('close'); +// const nav = document.getElementById('navbar'); + +// if(bar){ +// bar.addEventListener('click' , () => { +// nav.classList.add('active'); +// }) +// } + +// if(close){ +// close.addEventListener('click' , () => { +// nav.classList.remove('active'); +// }) +// } +// function filterProducts() { +// const input = document.getElementById("searchBar").value.toLowerCase(); +// const products = document.querySelectorAll(".pro"); + +// products.forEach(product => { +// const name = product.getAttribute("data-name"); +// if (name.toLowerCase().includes(input)) { +// product.style.display = "block"; +// } else { +// product.style.display = "none"; +// } +// }); +// } + +//for blog.html + +const arrowRight = document.querySelector('.arrow-right'); +const arrowLeft = document.querySelector('.arrow-left'); + +const imgSlide = document.querySelector('.img-slide'); +const blogDetails = document.querySelectorAll('.blog-detail'); + +let index = 0; +const totalSlides = blogDetails.length; + +const updateArrows = () => { + arrowLeft.classList.toggle('disabled', index === 0); + arrowRight.classList.toggle('disabled', index === totalSlides - 1); +}; + +const activeBlog = () => { + imgSlide.style.transform = `translateX(-${index * 100}%)`; + + blogDetails.forEach((detail, i) => { + detail.classList.toggle('active', i === index); + }); + + updateArrows(); +}; + +// Initial setup +activeBlog(); + +arrowRight.addEventListener('click', () => { + if (index < totalSlides - 1) { + index++; + activeBlog(); + } +}); + +arrowLeft.addEventListener('click', () => { + if (index > 0) { + index--; + activeBlog(); } +}); diff --git a/style.css b/style.css index 06e2d9c..e8a840f 100644 --- a/style.css +++ b/style.css @@ -212,7 +212,7 @@ body{ } #Hero button{ - //background-image: url(img/button.png); + background-image: url(img/button.png); background-color: #088178; color: #fff; border: 0; @@ -802,7 +802,7 @@ footer .copyright{ /* Shop Page */ #page-header{ - background-image: url("img/Banner/b1.jpg"); + background-image: url("images/b4.jpg"); width: 100%; height: 40vh; background-size: cover; @@ -815,7 +815,7 @@ footer .copyright{ #page-header h2, #page-header p{ - color: #fff; + color: black; } #pagination{ @@ -901,69 +901,110 @@ footer .copyright{ /* blog */ #page-header.blog-header{ - background-image: url("img/Banner/b19.jpg"); -} - -#blog{ - padding : 150px 150px 0 150px; + background-image: url("images/b4.jpg"); } -#blog .blog-box{ +.blog-container { display: flex; + flex-wrap: wrap; + gap: 3rem; + padding: 5rem 10%; align-items: center; - width: 100%; - position: relative; - padding-bottom: 90px; + justify-content: center; +} +.blog-box { + flex: 1 1 45%; + min-width: 300px; } -#blog .blog-img{ - width: 35%; - margin-right: 40px; +.blog-detail { + display: none; + animation: fade 0.4s ease-in-out; } -#blog img{ +.blog-detail.active{ + display: block; +} + +.blog-box h4{ + font-size: 2rem; + color: #222; + margin-bottom: 1rem; +} + +.blog-box p{ + color: #555; + font-size: 1.2rem; + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.blog-detail a { + text-decoration: none; + color: #088178; + font-weight: bold; + font-size: 1.1rem; + transition: 0.3s; +} + +.blog-detail a:hover { + text-decoration: underline; +} + +.blog-carousel { width: 100%; height: 400px; - object-fit: cover; + overflow: hidden; + border-radius: 10px; + position: relative; } -#blog .blog-details{ - width: 50%; +.img-slide { + display: flex; + width: 100% ; + transition: transform 0.5s ease; } -#blog .blog-details a{ - text-decoration: none; - font-size: 21px; - color: #000; - font-weight: 700; +.img-item { + min-width: 100%; + box-sizing: border-box; +} + +.img-item img { + width: 100%; + height: 100%; position: relative; - transition: 0.3s; + border-radius: 10px; } -#blog .blog-details a ::after{ - content: ""; - width : 50px; - height: 1px; - background-color: #000; - position: absolute; - top: 4px; - right: -60px; +.navigation { + text-align: center; + margin-top: 20px; } -#blog .blog-details a:hover{ - color: #088178; +.navigation button { + background-color: #088178; + color: white; + border: none; + padding: 12px 18px; + margin: 0 8px; + border-radius: 50%; + font-size: 1.5rem; + cursor: pointer; + transition: 0.3s ease; } -#blog .blog-box h1{ - position: absolute; - top: -50px; - left: 0; - font-size: 70px; - font-weight: 700; - color: #c9cbce; - z-index: -9; +.navigation button:hover { + background-color: #065e5c; } +.blog-box .navigation button.disabled{ + opacity: 0.5; + pointer-events: none; + background-color: #6ca3a1; +} + + /* About */ #page-header.about-header{