Latest Projects

HTML

<div id="vs-container">
<div id="vs-header-image-wrapper">
<picture style="position: relative">
<source media="(min-width:658px)" srcset="client-desktop-image.jpg">
<img src="mobile-client-image.jpg" style="width:100%;">
</picture>
</div>

<div id="vs-content">
<h1 class="virtual-heading" id="vs-title">Your Virtual <br>Shopping Service</h1>
<div id="vs-links">
<a href="#" target="_blank" class="virtual-cta">GET SHOPPING</a>
<a href="#" target="_blank" class="virtual-cta">BROWSE THE CATALOGUE</a>
</div>

<p class="virtual-subtext" id="virtual-copy-one">Want to take a closer look at the bag you can’t stop thinking about? Or get expert advice on which style to choose?
<br><br>Our virtual shopping service via WhatsApp connects you with our team, so you can have a chat and browse our catalogue of latest styles from home.</p>

</div>
</div>

<p class="virtual-heading">Open Monday – Friday, 9am – 6pm </p>
<p class="virtual-subtext">Schedule an appointment for a one-to-one call or simply chat via text on WhatsApp <br> 
 Join livestreams to be among the first to see a new collection
<br> Browse our online catalogue  <br>
 Quick and secure payment and shipment with Next Day Delivery</p>

<div id="vs-footer-image-wrapper">
<picture style="position: relative">
<source media="(min-width:658px)" srcset="/client-desktop-image.jpg">
<img src="/mobile-client-image.jpg" style="width:100%;">
</picture>
</div>

CSS

@media screen and (max-width: 657px) {
.virtual-heading {
text-transform: uppercase; font-weight: 500 !important; font-size: 1.3rem; letter-spacing: 3px; color: #000; margin-bottom: 23px; text-align: center;}

.virtual-subtext {
font-weight: 500 !important; font-size: 1rem !important; line-height: 1; color: #000; margin: 0.5rem auto; text-align: center; line-height: 2; text-wrap: balance;}

.virtual-cta {
font-size: 0.75rem; color: #fff; background-color: #2d2d2d; border: 2px solid #2d2d2d; /*border-radius: 32px;*/ cursor: pointer; /*margin: 0.5rem 1rem;*/ margin: 7px auto 5px !important; padding: 0.5rem 0.8rem; text-transform: uppercase; width: 230px;}

#virtual-copy-one {margin-bottom: -23px; margin-top: 25px; padding: 0 10px;}

#virtual-copy-two {margin-top: -40px;}

#vs-container {
min-height: 527px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
background: #fff;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

#vs-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.5;
}

#vs-links {
text-align: center;
}
.virtual-cta {
display: inline-block;
}
}

@media screen and (min-width: 658px) {
.virtual-heading {text-transform: uppercase; font-weight: 500 !important; font-size: 1.5rem !important; letter-spacing: 3px; color: #000; text-align: center;}
.virtual-subtext {font-weight: 500; font-size: 1.1rem !important; color: #000; margin: -0.3rem auto -2.5rem !important; line-height: 1; text-align: center; line-height: 2; text-wrap: balance;}
.virtual-cta {font-size: 0.75rem !important; color: #fff !important; background-color: #2d2d2d !important; margin: 0 auto 20px !important; border: 2px solid #2d2d2d; /*border-radius: 32px;*/ cursor: pointer; text-transform: uppercase; width: 230px; padding: 0.5rem;}
#virtual-copy-one {margin-bottom: -5px;}
#virtual-copy-two {margin-top: -70px; margin-bottom: 25px;}
#vs-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

#vs-header-image-wrapper {
width: 100%;
}

#vs-content {
width: 45%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%, -50%);
}

#vs-title br {
display: none;
}

.virtual-cta {
display: inline-block;
}
}