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: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-28 {
|
||||||
|
top: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.top-\[70\%\] {
|
.top-\[70\%\] {
|
||||||
top: 70%;
|
top: 70%;
|
||||||
}
|
}
|
||||||
|
|
@ -1056,6 +1060,10 @@ select {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inline-flex {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
@ -1076,6 +1084,10 @@ select {
|
||||||
aspect-ratio: 342/513;
|
aspect-ratio: 342/513;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-10 {
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-12 {
|
.h-12 {
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1084,6 +1096,10 @@ select {
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-4 {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-40 {
|
.h-40 {
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1108,12 +1124,8 @@ select {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-\[30vh\] {
|
.h-\[30px\] {
|
||||||
height: 30vh;
|
height: 30px;
|
||||||
}
|
|
||||||
|
|
||||||
.h-\[40vh\] {
|
|
||||||
height: 40vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-\[50px\] {
|
.h-\[50px\] {
|
||||||
|
|
@ -1132,6 +1144,14 @@ select {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-\[30vh\] {
|
||||||
|
height: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-\[40vh\] {
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
.max-h-\[40px\] {
|
.max-h-\[40px\] {
|
||||||
max-height: 40px;
|
max-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
@ -1148,6 +1168,10 @@ select {
|
||||||
width: 16.666667%;
|
width: 16.666667%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-10 {
|
||||||
|
width: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.w-12 {
|
.w-12 {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1168,6 +1192,10 @@ select {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-4 {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.w-40 {
|
.w-40 {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1398,6 +1426,10 @@ select {
|
||||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.overflow-y-auto {
|
.overflow-y-auto {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1412,6 +1444,10 @@ select {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-full {
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-lg {
|
.rounded-lg {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1497,11 +1533,6 @@ select {
|
||||||
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
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 {
|
.bg-black\/70 {
|
||||||
background-color: rgb(0 0 0 / 0.7);
|
background-color: rgb(0 0 0 / 0.7);
|
||||||
}
|
}
|
||||||
|
|
@ -1541,6 +1572,11 @@ select {
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
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-black {
|
||||||
stroke: #000;
|
stroke: #000;
|
||||||
}
|
}
|
||||||
|
|
@ -1927,6 +1963,11 @@ select {
|
||||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
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 {
|
.underline {
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -2221,6 +2262,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
display: none;
|
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) {
|
@media not all and (min-width: 1024px) {
|
||||||
.max-lg\:flex-col {
|
.max-lg\:flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -2329,6 +2377,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.md\:h-\[200px\] {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
.md\:h-\[300px\] {
|
.md\:h-\[300px\] {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
@ -2631,6 +2683,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:h-\[300px\] {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:h-\[400px\] {
|
.lg\:h-\[400px\] {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
@ -2828,6 +2884,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
|
.xl\:h-\[460px\] {
|
||||||
|
height: 460px;
|
||||||
|
}
|
||||||
|
|
||||||
.xl\:w-1\/4 {
|
.xl\:w-1\/4 {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -251,44 +251,124 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse md:flex-row items-center justify-center md:mt-32 mt-16 mx-4">
|
<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 class="flex justify-center lg:pb-6 pb-3">
|
<div id="slider" class="relative overflow-hidden">
|
||||||
<img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
|
<div class="slide">
|
||||||
src="https://brooksbingham.com/img/logo-1715173509.jpg">
|
<div class="flex justify-center lg:pb-6 pb-3">
|
||||||
</div>
|
<img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
|
||||||
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
|
src="https://brooksbingham.com/img/logo-1715173509.jpg">
|
||||||
See What They Think
|
</div>
|
||||||
</h1>
|
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
|
||||||
<p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center">
|
See What They Think
|
||||||
The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional!
|
</h1>
|
||||||
</p>
|
<p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center relative z-10">
|
||||||
<p class="lg:text-xl text-sm font-medium text-center">
|
The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional!
|
||||||
The fabrics, buttons, and stitching are of the highest quality.
|
</p>
|
||||||
</p>
|
<p class="lg:text-xl text-sm font-medium text-center relative z-10">
|
||||||
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K </h1>
|
The fabrics, buttons, and stitching are of the highest quality.
|
||||||
<div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
|
</p>
|
||||||
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
|
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K</h1>
|
||||||
<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"/>
|
<div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
|
||||||
</svg>
|
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
|
||||||
<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>
|
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
|
||||||
<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>
|
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
|
||||||
<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>
|
<svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
|
||||||
<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>
|
<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 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>
|
</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>
|
||||||
<div class="w-full md:w-[40%] h-full">
|
<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">
|
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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"
|
<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">
|
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img6.png">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue