fix:Change color of border & change banner styling

staging
apurvab 2024-05-28 11:37:33 +05:30
parent cd21004d01
commit 2b335f822f
2 changed files with 34 additions and 63 deletions

View File

@ -783,6 +783,10 @@ select {
bottom: 0px;
}
.bottom-5 {
bottom: 1.25rem;
}
.bottom-\[50\%\] {
bottom: 50%;
}
@ -871,9 +875,9 @@ select {
margin-bottom: 0.5rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.my-5 {
@ -1034,8 +1038,8 @@ select {
height: 2rem;
}
.h-\[350px\] {
height: 350px;
.h-\[400px\] {
height: 400px;
}
.h-auto {
@ -1078,10 +1082,6 @@ select {
width: 6rem;
}
.w-28 {
width: 7rem;
}
.w-3\/4 {
width: 75%;
}
@ -1102,6 +1102,10 @@ select {
width: 11rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
@ -1131,10 +1135,6 @@ select {
width: max-content;
}
.w-48 {
width: 12rem;
}
.max-w-6xl {
max-width: 72rem;
}
@ -1306,6 +1306,11 @@ select {
border-style: none;
}
.border-\[\#74848E\] {
--tw-border-opacity: 1;
border-color: rgb(116 132 142 / var(--tw-border-opacity));
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
@ -1361,11 +1366,6 @@ select {
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.border-sky-950 {
--tw-border-opacity: 1;
border-color: rgb(8 47 73 / var(--tw-border-opacity));
}
.bg-\[\#000E2A\] {
--tw-bg-opacity: 1;
background-color: rgb(0 14 42 / var(--tw-bg-opacity));
@ -1769,10 +1769,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
.image{
width:400px;
height:250px;
color:#efefef;
font-size:8rem;
&.right{
float:right;
margin-left:30px;
@ -2161,6 +2157,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
position: static;
}
.lg\:absolute {
position: absolute;
}
.lg\:right-0 {
right: 0px;
}
@ -2177,14 +2177,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-top: 6rem;
}
.lg\:mt-48 {
margin-top: 12rem;
}
.lg\:mt-28 {
margin-top: 7rem;
}
.lg\:flex {
display: flex;
}
@ -2217,14 +2209,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 60%;
}
.lg\:w-\[40\%\] {
width: 40%;
}
.lg\:w-\[60\%\] {
width: 60%;
}
.lg\:w-full {
width: 100%;
}
@ -2296,18 +2280,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.xl\:w-1\/4 {
width: 25%;
}
}
@media (min-width: 1536px) {
.\32xl\:mt-64 {
margin-top: 16rem;
}
.\32xl\:mt-48 {
margin-top: 12rem;
}
.\32xl\:mt-36 {
margin-top: 9rem;
}
}
}

View File

@ -121,21 +121,22 @@
<div class="flex lg:flex-row flex-col bg-[#000E2A] mt-16">
<div class="lg:w-[60%] object-fit">
<div class="lg:w-3/5 object-fit">
<img class="" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_1142-min.jpg"/>
</div>
<div class="lg:w-[40%] bg-[#000E2A] p-4">
<p class="text-2xl font-bold text-gray-50 2xl:mt-48 lg:mt-32 mt-8 mb-8">Business suits for men</p>
<p class="text-lg front-semibold text-gray-50">Tailored business Suits designed for you to make a powerful impression and radiate confidence.</p>
<div class="lg:w-2/5 bg-[#000E2A] relative flex flex-col justify-center p-4 ">
<p class="text-2xl font-bold text-gray-50 mb-8">Business suits for men</p>
<p class="text-lg front-semibold text-gray-50 mb-6">Tailored business Suits designed for you to make a powerful impression and radiate confidence.</p>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=75">
<button class="font-semibold bg-slate-200 2xl:mt-48 mt-40 text-lg uppercase py-2 flex-1 text-center border border-blue-950 hover:text-blue-900 hover:border-blue-900 w-48">Explore more<button>
<button class="font-semibold bg-slate-200 bottom-5 text-lg uppercase lg:absolute py-2 flex-1 text-center border border-blue-950 hover:text-blue-900 hover:border-blue-900 w-48">Explore more<button>
</a>
</div>
</div>
<article class="article group lg:mt-24 lg:mb-20 mt-16 ">
<img class="image md:w-1/2 right object-cover my-5 h-[350px]" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg">
<section class="content my-20">
<img class="image md:w-1/2 right object-cover my-5 h-[400px]" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg">
<section class="content my-32">
<h2 class="font-bold lg:text-2xl ">Get the Perfect Fit</h2>
<p class="font-semibold lg:text-xl sm:text-sm mb-4">Experience a flawless & Ideal fit tailored to Your Specifications</p>
<p class="font-semibold lg:text-lg sm:text-sm">The future of fashion with our innovative designs. Customization options tailored to your measurements witih a flawless silhouette every time.Discover your perfect fit in minutes.</p>
@ -147,8 +148,8 @@
</article>
<article class="article group mb-4">
<img class="image md:w-1/2 left object-cover my-5 h-[350px]" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg">
<section class="content my-20">
<img class="image md:w-1/2 left object-cover my-5 h-[400px]" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg">
<section class="content my-32">
<h2 class="font-bold lg:text-2xl ">Timeless Quality</h2>
<p class="font-semibold lg:text-xl mb-4 sm:text-sm">Fashion that stands the test of time.</p>
<p class="font-semibold lg:text-lg sm:text-sm">Invest in enduring fashion with our commitment to quality and durability. From custom-made tuxedos to business suits, each piece stands the test of time.</p>
@ -182,7 +183,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
</a>
<div class="border-[0.5px] border-sky-950 w-full flex lg:flex-row p-8 flex-col">
<div class="border border-[#74848E] w-full flex lg:flex-row p-8 flex-col">
<div >
<h1 class="text-2xl p-4 font-bold">Who Are We?</h1>
<p class="text-lg p-4 font-medium"><b>BrooksBingham</b> is your destination for custom-tailored menswear, where authenticity is woven into every stitch. Experience our cutting-edge fitting technology for a flawless fit tailored to your measurements in minutes.Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.</p>