Join our Family
diff --git a/slider.js b/slider.js
new file mode 100644
index 0000000..ddc7c90
--- /dev/null
+++ b/slider.js
@@ -0,0 +1,67 @@
+const slider = document.querySelector('.slider');
+const sliderContainer = document.querySelector('.sliderContainer');
+const items = document.querySelectorAll('.item');
+const rowGap = (window.innerWidth / 2); // Adjust this value based on your desired row gap
+
+let currentIndex = 0;
+let touchStartX = 0;
+
+// Calculate the total width of all items, including the row gap
+const totalItemsWidth = Array.from(items).reduce((total, item) => {
+ const itemStyle = getComputedStyle(item);
+ const itemWidth = item.offsetWidth + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight);
+ return total + itemWidth + rowGap;
+}, 0);
+
+// Set the width of the slider container to accommodate all items
+sliderContainer.style.width = `${totalItemsWidth}px`;
+
+function slideTo(index) {
+ const itemStyle = getComputedStyle(items[index]);
+ const itemMarginLeft = parseFloat(itemStyle.marginLeft);
+ const itemMarginRight = parseFloat(itemStyle.marginLeft);
+ let translation;
+
+ if (index < 0 || index >= items.length) {
+ return;
+ }
+
+ translation = index * (items[0].offsetWidth + rowGap);
+ sliderContainer.style.transform = `translateX(-${translation}px)`;
+ currentIndex = index;
+}
+
+function slideNext() {
+ slideTo(currentIndex + 1);
+}
+
+function slidePrev() {
+ slideTo(currentIndex - 1);
+}
+
+setInterval(slideNext, 4500); // Automatically slide every 4.5 seconds
+
+slider.addEventListener('touchstart', handleTouchStart);
+slider.addEventListener('touchmove', handleTouchMove);
+slider.addEventListener('touchend', handleTouchEnd);
+
+function handleTouchStart(event) {
+ touchStartX = event.touches[0].clientX;
+}
+
+function handleTouchMove(event) {
+ event.preventDefault(); // Prevent default scrolling behavior
+
+ const touchX = event.touches[0].clientX;
+ const touchDiff = touchX - touchStartX;
+
+ if (touchDiff > 50) {
+ slidePrev();
+ } else if (touchDiff < -50) {
+ slideNext();
+ }
+}
+
+function handleTouchEnd() {
+ touchStartX = 0;
+}
diff --git a/style.css b/style.css
index c6b18a9..c9de364 100644
--- a/style.css
+++ b/style.css
@@ -59,6 +59,7 @@ img {
height: 53px;
align-items: center;
}
+
.navbar button:not(:last-child)::after {
content: "•";
margin-left: 4vw;
@@ -91,8 +92,35 @@ button {
font-weight: 100;
}
+.barber-pole {
+ position: relative;
+ font-size: 2rem;
+ overflow: hidden;
+}
+
+.barber-pole #order {
+ background: linear-gradient(45deg, white 10%, #d8c79a 10%, #d8c79a 20%, white 20%, white 30%, #d8c79a 30%, #d8c79a 40%, white 40%, white 50%, #d8c79a 50%, #d8c79a 60%, white 60%, white 70%, #d8c79a 70%, #d8c79a 80%, white 80%, white 90%, #d8c79a 90%);
+ background-size: 200% 100%;
+ animation: barber-pole-animation 15s linear infinite;
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ margin: 0;
+}
+
+@keyframes barber-pole-animation {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: 500% 0;
+ }
+}
+
+
.header button {
background: none;
+ font-size: 26px;
}
#oval {
@@ -174,7 +202,9 @@ h1, h2, h3, h4, h5, h6 {
display: flex;
width: fit-content;
overflow: hidden;
- justify-content: space-between;
+ gap: 50vw;
+ position: relative;
+ left: 1%;
}
.sliderContainer {
@@ -187,19 +217,18 @@ h1, h2, h3, h4, h5, h6 {
.sliderWrapper {
width: 99.5%;
overflow: hidden;
- background-color: #ffecb6;
+ background-color: white;
border: 1px solid #E28C4A;
}
.sliderWrapper h1 {
- font-size: 13.5vw;
+ font-size: 13vw;
margin-bottom: 10px;
- color: #9D000D;
+ color: black;
}
.item {
flex: 0 0 300px;
- margin: 0 11vw 0 11vw;
display: flex;
flex-direction: column;
}
@@ -224,6 +253,7 @@ h1, h2, h3, h4, h5, h6 {
text-align: center;
margin: 0 10px 0 10px;
padding-bottom: 10px;
+ font-size: 18px;
}
.about button {
@@ -364,13 +394,13 @@ h1, h2, h3, h4, h5, h6 {
.wrapper {
height: 44vh;
width: 99.5%;
- background-color: white;
+ background: radial-gradient(rgb(230, 230, 180), rgb(235, 235, 141));
margin-bottom: -5px;
overflow: hidden;
position: relative;
border: 1px solid #bfb398;
display: inline-block;
- margin-bottom: -3vh;
+ margin-bottom: -2vh;
}
@@ -411,9 +441,10 @@ h1, h2, h3, h4, h5, h6 {
}
-@media (max-width: 490px) {
-#butterPecan {
- margin-left: 12.5vw;
+@media (min-width: 401px) {
+
+.slider {
+ left: 2.3%;
}
.wrapper {