4 card multi colour boxes
Tue Jul 02 2024 15:49:07 GMT+0000 (Coordinated Universal Time)
Saved by @shees
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection .h6 {
font-size: 21px;
letter-spacing: 0;
font-weight: 700;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection .h6, .iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection h3 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 70%;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.iconsWithHeadingTextBoxed-2 .gap {
display: flex;
grid-gap: 1%;
gap: 1%;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide {
width: 100%;
min-height: 470px;
height: auto;
border-radius: 15px;
margin: 65px 10px 60px;
box-shadow: var(--mdc-fab-box-shadow, 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12));
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-yellow .upperSection .imgBox {
border: 4px solid #f1bb31;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-green .upperSection .imgBox {
border: 4px solid #c2b925;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-red .upperSection .imgBox {
border: 4px solid #f07d6d;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-orange .upperSection .imgBox {
border: 4px solid #f07530;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection {
position: relative;
height: 120px;
border-radius: 15px 15px 0 0;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-orange .upperSection {
background-color: #f07530;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-yellow .upperSection {
background-color: #f1bb31;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-green .upperSection {
background-color: #c2b925;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide.border-red .upperSection {
background-color: #f07d6d;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .contentSection {
font-size: 14px;
line-height: 1;
font-weight: 300;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection .imgBox {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #fff;
height: 110px;
width: 110px;
padding: 2px;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide {
width: 100%;
min-height: 470px;
height: auto;
border-radius: 15px;
margin: 65px 10px 60px;
box-shadow: var(--mdc-fab-box-shadow, 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12));
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .contentSection li {
display: flex;
justify-content: center;
margin: 15px 0;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .contentSection li .data {
flex: 85% 1;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .contentSection {
font-size: 14px;
line-height: 1;
font-weight: 300;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .contentSection {
padding: 10px;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection .h6 {
font-size: 21px;
letter-spacing: 0;
font-weight: 700;
}
.icon img {
height: 20px;
margin-right: 10px;
}
.imgBox img {
padding: 25px;
}
.iconsWithHeadingTextBoxed-2 .carousel-slide .upperSection {
position: relative;
height: 128px;
border-radius: 15px 15px 0 0;
margin-top: -20px;
}
.data {
color: #4f505a;
}
.innerBox {
padding: 100px;
}
</style>
<body>
<div class="container">
<div class="iconsWithHeadingTextBoxed-2">
<div class="innerBox">
<h2 class="sectionHeading"></h2>
<div class="carousel-slides gap">
<div class="border-orange carousel-slide">
<div class="upperSection">
<div class="imgBox"><span class=" lazy-load-image-background blur lazy-load-image-loaded"
style="color: transparent; display: inline-block;"><img alt="2 Weeks"
src="https://d3l6fpccohjkcc.cloudfront.net/static/media/week2.e2571e85.svg"></span>
</div>
<h3 class="h6">2 Weeks</h3>
<h2></h2>
</div>
<ul class="contentSection">
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Pre-built WordPress / WooCommerce theme incorporating brand guidelines and
basic layout changes.</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce app consultation and integrations (Upto 4 apps
from WordPress / WooCommerce App Store with UI tweaks as per brand guidelines).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Data migration / Catalog Setup Support into WordPress / WooCommerce (data
formatting isn't included)</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce Scripts (basic complexity)</div>
</li>
</ul>
</div>
<div class="border-yellow carousel-slide">
<div class="upperSection">
<div class="imgBox"><span class=" lazy-load-image-background blur lazy-load-image-loaded"
style="color: transparent; display: inline-block;"><img alt="4 Weeks"
src="https://d3l6fpccohjkcc.cloudfront.net/static/media/week4.8fda8454.svg"></span>
</div>
<h3 class="h6">4 Weeks</h3>
<h2></h2>
</div>
<ul class="contentSection">
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Pre-built WordPress / WooCommerce theme incorporating brand guidelines
& moderate layout changes + 1 new layout.</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce app consultation and integrations (Upto 8 apps
with UI tweaks as per brand guidelines and moderate layout changes).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Data migration / Catalog Setup (includes data formatting).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce Scripts (moderate complexity).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Upto 2 clone stores (for geographical expansion - different catalog,
prices, shipment and tax rules).</div>
</li>
</ul>
</div>
<div class="border-green carousel-slide">
<div class="upperSection">
<div class="imgBox"><span class=" lazy-load-image-background blur lazy-load-image-loaded"
style="color: transparent; display: inline-block;"><img alt="8 Weeks"
src="https://d3l6fpccohjkcc.cloudfront.net/static/media/week8.4342d9f6.svg"></span>
</div>
<h3 class="h6">8 Weeks</h3>
<h2></h2>
</div>
<ul class="contentSection">
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Pre-built WordPress / WooCommerce theme incorporating your brand
guidelines and extensive layout changes + up to 3 new layouts.</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce app consultation and integrations (Upto 20 apps
from WordPress / WooCommerce App Store with UI tweaks as per brand guidelines and
moderate layout changes).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Data migration / Catalog Setup into WordPress / WooCommerce (includes data
formatting and WordPress / WooCommerce scripts development for migrating data).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">WordPress / WooCommerce Scripts (advanced complexity).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Upto 4 clone stores for your WordPress / WooCommerce store (for
geographical expansion - different catalog, prices, shipment and tax rules).</div>
</li>
</ul>
</div>
<div class="border-red carousel-slide">
<div class="upperSection">
<div class="imgBox"><span class=" lazy-load-image-background blur lazy-load-image-loaded"
style="color: transparent; display: inline-block;"><img alt="Not in a rush ?"
src="https://d3l6fpccohjkcc.cloudfront.net/static/media/no-rush.94dc28f8.svg"></span>
</div>
<h3 class="h6">Not in a rush ?</h3>
<h2></h2>
</div>
<ul class="contentSection">
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Custom WordPress / WooCommerce template (unlimited layouts).</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Headless architecture supported by WordPress / WooCommerce.</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Custom WordPress / WooCommerce App Development for any business logic not
supported by WordPress / WooCommerce or apps from WordPress / WooCommerce App store.
</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Unlimited clone stores for your WordPress / WooCommerce store.</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">ADA Compliance to make your WordPress / WooCommerce store accessible.
</div>
</li>
<li>
<div class="icon"><img
src="https://stageportfoilo.com/wp/contechtive/wp-content/uploads/2024/06/images-removebg-preview.png"
alt="tick"></div>
<div class="data">Mobile Application supported by your WordPress / WooCommerce Store.</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comments