Select Your Fragrance – Copy – Copy
Page: Liquid Codes
Snippet Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--grid-horizontal-spacing: 1rem;
}
.page-width {
max-width: var(--page-width);
margin: 0 auto;
}
/* Two-column layout for section */
.section-wrapper {
display: flex;
gap: 2rem; /* Add space between image and button sections */
align-items: flex-start;
justify-content: space-between;
}
/* Image Section */
.perfumer-section__img img {
display: block;
width: 100%; /* Make sure image takes full width of its container */
height: auto;
max-width: 350px; /* Limit the width of the image */
margin: 0 auto;
}
/* Button Section */
.perfumer-section__item {
flex-grow: 1;
flex-shrink: 0;
}
.perfumer-section__item.left {
flex: 1 1 calc(33.33% - 1rem);
max-width: calc(33.33% - 1rem);
box-sizing: border-box;
text-align: center;
margin-bottom: 1rem;
}
/* Button container layout */
.perfumer-section__row {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* Add space between buttons in both rows and columns */
}
span.perfumer-sectio-info {
font-size: 1.4rem;
/* padding-right: 30px; */
margin-bottom: 30px;
display: block;
font-family: Inter-Regular;
}
.persona h3 {
font-size: 3.2rem;
font-weight: 900;
font-family: neutratext-bold-webfont;
margin-bottom: 15px;
margin-top: -25px;
text-transform: capitalize;
}
.persona button {
width: 100%;
height: 50px;
text-transform: uppercase;
font-family: neutra_textbook;
font-size: 1.6rem;
color: #000000;
background-color: #ffffff;
border: 1px solid #000;
margin-bottom: 1rem; /* Adds space between buttons */
}
.persona button:hover {
color: #fdfdfd;
background-color: #000000;
}
/* Responsive Design */
/* Tablet View (max-width: 1024px) */
@media (max-width: 1024px) {
.section-wrapper {
flex-direction: column; /* Stack image and buttons vertically */
align-items: center;
}
.perfumer-section__img img {
max-width: 300px; /* Slightly reduce image size for tablets */
}
.persona h3 {
text-align: center;
font-size: 2.8rem; /* Slightly smaller heading for tablets */
}
.perfumer-section__item.left {
flex: 1 1 calc(50% - 1rem); /* 2 buttons per row */
max-width: calc(50% - 1rem);
}
}
/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
.perfumer-section__img img {
max-width: 250px; /* Smaller image for mobile */
}
.persona h3 {
text-align: center;
font-size: 2.4rem; /* Smaller heading for mobile */
}
.perfumer-sectio-info {
font-size: 1.2rem; /* Adjust text size for readability */
padding-right: 0;
margin-bottom: 20px;
text-align: center; /* Center align for better aesthetics on small screens */
}
.perfumer-section__item.left {
flex: 1 1 100%; /* Make buttons full-width on mobile */
max-width: 100%;
}
.persona button {
height: 45px; /* Slightly reduce button height for smaller screens */
font-size: 1.4rem;
}
}
</style>
</head>
<body>
<div class="section--padding">
<div class="page-width">
<div class="section-wrapper">
<!-- Image Section -->
<div class="perfumer-section__img">
<img src="https://cdn.shopify.com/s/files/1/0889/2350/4932/files/banner_1.png?v=1738301461" alt="Perfume Bottle">
</div>
<!-- Button Section -->
<div class="persona">
<span class="perfumer-sectio-info">A SCENT THAT'S YOURS.</span>
<h3>What’s your fragrance persona?</h3>
<span class="perfumer-sectio-info">Fragrances that celebrate your spirit. Are you floral, fruity, calm or bold? Pick a scent that speaks to your soul.</span>
<div class="perfumer-section__row">
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-aquatic" onclick="location.href='https://polorizer.com/collections/amber'">Amber</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-floral" onclick="location.href='https://polorizer.com/collections/aromatic'">Aromatic</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-woody" onclick="location.href='https://polorizer.com/collections/aquatic'">Aquatic</button>
</div>
</div>
<div class="perfumer-section__row">
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-oriental" onclick="location.href='https://polorizer.com/collections/citrus'">Citrus</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-oud" onclick="location.href='https://polorizer.com/collections/floral'">Floral</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-musky" onclick="location.href='https://polorizer.com/collections/musky'">Musky</button>
</div>
</div>
<div class="perfumer-section__row">
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-amber" onclick="location.href='https://polorizer.com/collections/oriental'">Oriental</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-aromatic" onclick="location.href='https://polorizer.com/collections/oud'">Oud</button>
</div>
<div class="perfumer-section__item left">
<button class="perfumer-section-btn-citrus" onclick="location.href='https://polorizer.com/collections/woody'">Woody</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Instructions
Hello Guys
Step 1
Watch the video