forked from brooksbingham/theme-elegance
Merge pull request 'refactor:update slider' (#42) from sayalip/theme-elegance:home-custom into staging
Reviewed-on: brooksbingham/theme-elegance#42staging
commit
7f4965a607
|
|
@ -831,6 +831,10 @@ select {
|
|||
top: 50%;
|
||||
}
|
||||
|
||||
.top-28 {
|
||||
top: 7rem;
|
||||
}
|
||||
|
||||
.top-\[70\%\] {
|
||||
top: 70%;
|
||||
}
|
||||
|
|
@ -1056,6 +1060,10 @@ select {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -1076,6 +1084,10 @@ select {
|
|||
aspect-ratio: 342/513;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
|
@ -1084,6 +1096,10 @@ select {
|
|||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
|
@ -1108,12 +1124,8 @@ select {
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.h-\[30vh\] {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.h-\[40vh\] {
|
||||
height: 40vh;
|
||||
.h-\[30px\] {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.h-\[50px\] {
|
||||
|
|
@ -1132,6 +1144,14 @@ select {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.h-\[30vh\] {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.h-\[40vh\] {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.max-h-\[40px\] {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
|
@ -1148,6 +1168,10 @@ select {
|
|||
width: 16.666667%;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
|
@ -1168,6 +1192,10 @@ select {
|
|||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
|
@ -1398,6 +1426,10 @@ select {
|
|||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -1412,6 +1444,10 @@ select {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -1497,11 +1533,6 @@ select {
|
|||
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#E6DFD4\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(230 223 212 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-black\/70 {
|
||||
background-color: rgb(0 0 0 / 0.7);
|
||||
}
|
||||
|
|
@ -1541,6 +1572,11 @@ select {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#E6DFD4\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(230 223 212 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.stroke-black {
|
||||
stroke: #000;
|
||||
}
|
||||
|
|
@ -1927,6 +1963,11 @@ select {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
|
@ -2221,6 +2262,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
.max-lg\:flex-col {
|
||||
flex-direction: column;
|
||||
|
|
@ -2329,6 +2377,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-\[200px\] {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.md\:h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
|
@ -2631,6 +2683,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.lg\:h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.lg\:h-\[400px\] {
|
||||
height: 400px;
|
||||
}
|
||||
|
|
@ -2828,6 +2884,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:h-\[460px\] {
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
.xl\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -251,7 +251,9 @@
|
|||
|
||||
|
||||
<div class="flex flex-col-reverse md:flex-row items-center justify-center md:mt-32 mt-16 mx-4">
|
||||
<div class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-5 md:pr-5 pr-0">
|
||||
<div class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-5 md:pr-5 pr-0 relative">
|
||||
<div id="slider" class="relative overflow-hidden">
|
||||
<div class="slide">
|
||||
<div class="flex justify-center lg:pb-6 pb-3">
|
||||
<img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
|
||||
src="https://brooksbingham.com/img/logo-1715173509.jpg">
|
||||
|
|
@ -259,13 +261,13 @@
|
|||
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
|
||||
See What They Think
|
||||
</h1>
|
||||
<p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center">
|
||||
<p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center relative z-10">
|
||||
The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional!
|
||||
</p>
|
||||
<p class="lg:text-xl text-sm font-medium text-center">
|
||||
<p class="lg:text-xl text-sm font-medium text-center relative z-10">
|
||||
The fabrics, buttons, and stitching are of the highest quality.
|
||||
</p>
|
||||
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K </h1>
|
||||
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K</h1>
|
||||
<div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
|
|
@ -284,11 +286,89 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide hidden">
|
||||
<div class="flex justify-center lg:pb-6 pb-3">
|
||||
<img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
|
||||
src="https://brooksbingham.com/img/logo-1715173509.jpg">
|
||||
</div>
|
||||
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
|
||||
See What They Think
|
||||
</h1>
|
||||
<p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center relative z-10">
|
||||
Magical, is how I can describe my experience and the suits Brooks helped with my wedding! The men are still wearing their suit jackets and suits for other events! The fit was sharp and the fabrics were fantastic! There were so many options it was tough to choose from! Highly recommend Brooks for custom suits for any occasion!
|
||||
</p>
|
||||
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Stephanie H</h1>
|
||||
<div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
</svg>
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
</svg>
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
</svg>
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
</svg>
|
||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button"
|
||||
class="absolute left-0 top-28 flex items-center justify-center h-full cursor-pointer"
|
||||
data-carousel-prev>
|
||||
<span class="inline-flex items-center justify-center w-10 h-10">
|
||||
<svg class="w-4 h-4 text-gray-800"
|
||||
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 1 1 5l4 4"/>
|
||||
</svg>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="absolute right-0 top-28 flex items-center justify-center h-full cursor-pointer"
|
||||
data-carousel-next>
|
||||
<span class="inline-flex items-center justify-center w-10 h-10">
|
||||
<svg class="w-4 h-4 text-gray-800"
|
||||
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
<span class="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full md:w-[40%] h-full">
|
||||
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
let currentSlide = 0;
|
||||
|
||||
document.querySelector('[data-carousel-next]').addEventListener('click', () => {
|
||||
slides[currentSlide].classList.add('hidden');
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
slides[currentSlide].classList.remove('hidden');
|
||||
});
|
||||
|
||||
document.querySelector('[data-carousel-prev]').addEventListener('click', () => {
|
||||
slides[currentSlide].classList.add('hidden');
|
||||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||||
slides[currentSlide].classList.remove('hidden');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div class="mt-32 flex relative items-center left-0 right-0">
|
||||
<img class="w-full lg:h-[400px] md:h-[300px] h-full object-cover"
|
||||
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img6.png">
|
||||
|
|
|
|||
Loading…
Reference in New Issue