icon and text
Page: Homepage


Snippet Code
<style>
.content-for-layout section.shopify-section.section {
background-image: url(https://cdn.shopify.com/s/files/1/0955/5873/0040/files/dot-bg-v2.webp?v=1755518635);
background-position-x: center;
background-position-y: center;
background-color: #faf8f1 !important;
background-repeat: repeat;
}
.content-for-layout section.shopify-section.section div.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0955/5873/0040/files/dot-bg-v2.webp?v=1755518635);
background-position-x: center;
background-position-y: center;
background-color: #faf8f1 !important;
background-repeat: repeat;
}
.gradient {
background: #eff4f7;
background-attachment: fixed;
}
.title-container {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 50px;
max-width: 780px;
margin: 0 auto;
}
.title-container-main-title {
color: #202336;
font-weight: 600;
font-size: 38px;
margin: 0;
line-height: 62px;
text-align: center;
}
.title-container-main-title .higlight {
position: relative;
display: inline-block;
padding: 0 12px;
background-color: #951528;
border-radius: 10px;
}
.perfect-fit-for-container {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 50px;
margin: 0 auto;
}
.perfect-fit-for-item {
width: 19%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px;
padding: 20px 12px;
box-shadow: 6.123233995736766e-16px 10px 8px 0px #0000001f;
background-color: #fff;
margin-bottom: 18px;
}
.perfect-fit-for-item-image {
width: 60px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
line-height: 1;
}
.perfect-fit-for-item-label {
font-size: 18px;
font-weight: 600;
color: #202336;
margin: 16px 0 0 0;
padding: 0;
text-align: center;
line-height: 24px;
}
.section-template--16845203111980__custom_liquid_DGqEgT-padding {
padding-top: calc(60px * 0.75);
padding-bottom: calc(36px * 0.75);
}
@media screen and (min-width: 750px) {
.section-template--16845203111980__custom_liquid_DGqEgT-padding {
padding-top: 60px;
padding-bottom: 36px;
}
}
@media screen and (max-width: 768px) {
.title-container-main-title {
font-size: 22px;
line-height: 36px;
}
.perfect-fit-for-item {
width: 30%;
padding: 12px 5px;
margin-bottom: 16px;
}
.perfect-fit-for-item-image {
width: 36px;
font-size: 36px;
}
.perfect-fit-for-item-label {
font-size: 12px;
line-height: 16px;
margin: 10px 0 0 0;
}
}
@media screen and (max-width: 992px) {
.title-container {
padding: 0 15px;
}
.perfect-fit-for-container {
padding: 0 15px;
}
}
</style>
<div id="shopify-section-template--24856918360448__perfectfit_section_bjCxpF" class="shopify-section">
<section id="shopify-section-template--16845203111980__custom_liquid_DGqEgT" class="shopify-section section">
<div class="color-scheme-1 gradient">
<div class="section-template--16845203111980__custom_liquid_DGqEgT-padding">
<div style="width: 100%; display: flex;">
<div class="title-container">
<h4 class="title-container-main-title" style="font-size: 38px;">Perfect Fit For You <span
class="higlight" style="background-color: #951528;">If You
Are:</span></h4>
</div>
</div>
<div style="width: 100%; display: flex; margin-top: 24px;">
<div class="perfect-fit-for-container">
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
👩💼
</div>
<p class="perfect-fit-for-item-label">Social Media Manager</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
👨💼
</div>
<p class="perfect-fit-for-item-label">Digital Marketing Specialist</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
💁♀️
</div>
<p class="perfect-fit-for-item-label">Agency</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
🤵♂️
</div>
<p class="perfect-fit-for-item-label">Entrepreneur</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
👩💻
</div>
<p class="perfect-fit-for-item-label">Copywriter</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
🙋♂️
</div>
<p class="perfect-fit-for-item-label">Media Buyer</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
🧑💼
</div>
<p class="perfect-fit-for-item-label">Shopify Store Owner</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
🧑💻
</div>
<p class="perfect-fit-for-item-label">Market Researcher</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
🙋♀️
</div>
<p class="perfect-fit-for-item-label">Professional Marketer</p>
</div>
<div class="perfect-fit-for-item">
<div class="perfect-fit-for-item-image">
👩🏫
</div>
<p class="perfect-fit-for-item-label">SEO Specialist</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>