From 8595f00b1a9bbe0869d1e86989abe1206f86b256 Mon Sep 17 00:00:00 2001 From: Amna Ahsan Date: Thu, 31 Jul 2025 19:44:40 +0500 Subject: [PATCH] Fix image URLs and enhanced UI for blog page --- blog.html | 348 +++++++++++++++++++++++++-------------------- images/banner.avif | Bin 0 -> 8290 bytes script.js | 103 ++++++++++---- style.css | 127 +++++++++++------ 4 files changed, 351 insertions(+), 227 deletions(-) create mode 100644 images/banner.avif 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 0000000000000000000000000000000000000000..acbbb8d6e938b819fb6433efc23c3e31967cbb7a GIT binary patch literal 8290 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 Kz>27x#{UCVLd~22 literal 0 HcmV?d00001 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{