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

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 + + + +
+
- - -
+
-
-

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. +

+
+
+ + +
-
- - + 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{