<section><!-- HCWH section -->
<div class="sqs-col-4"><!-- Left column -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
<defs>
<style>
.b,.c{fill:none;stroke:#282d33;stroke-width:5px}
</style>
</defs>
<circle cx="85" cy="85" r="85" fill="#fff"/>
<path d="M49.157 79.966a14.665 14.665 0 0 0 1.1 1.229 14.963 14.963 0 0 0 25.48-11.978c-.152.02-.306.042-.453.057" class="b"/>
<path d="M94.78 70.063c-6.047-3.516-7.636-3.66-16.1-1.428a23.378 23.378 0 0 1-3.4.639 23.243 23.243 0 0 1-3.4-.639c-8.463-2.232-10.049-2.088-16.1 1.428-5.3 2.8-8.353 10.889-6.837 19.984 1.753 10.515 5.808 11.247 5.808 22.636 0 11.325 4.108 16.982 7.414 16.982s4.967-3.881 8.592-13.582c2.486-6.654 6.17-7.709 9.055 0 3.627 9.7 5.285 13.582 8.589 13.582s7.411-5.657 7.411-16.982c0-11.36 4.041-12.01 5.812-22.636 1.514-9.095-1.537-17.187-6.844-19.984z" class="c"/>
<path d="M94.669 81.28a7 7 0 1 1-10.844-5.851" class="b"/>
<path d="M90.169 78.78l21.332-21.334M122 53.947a7 7 0 1 1-7-7 7 7 0 0 1 7 7zM57.069 63.514l-4.091-9.311M53.124 42.232a7 7 0 1 1-9.063 3.985 7 7 0 0 1 9.063-3.985zM127.237 52.613h15.834M127.237 62.613h15.834M66.739 44.613h15.834M66.739 54.613h15.834" class="c"/>
</svg> <!-- 10 -->
<div>
<h3>
<a href="#">I need a tooth fixed</a>
</h3>
<p>Dental implants, bridges & dentures provide solutions for missing teeth. Dr. Y brings their expertise to direct your tooth replacement case at every stage.</p>
</div>
</div>
</div>
<div class="sqs-col-4"><!-- Left column -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
<defs>
<style>
.b{fill:none;stroke:#282d33;stroke-width:5px}
</style>
</defs>
<circle cx="85" cy="85" r="85" fill="#fff"/>
<path d="M141.727 73.234h-12.024M137.115 47.414l-11.295 4.112M137.226 99.073l-11.296-4.114M141.727 73.234l-12.025-.002M31.135 73.234h12.023M35.746 47.414l11.297 4.112M35.635 99.073l11.299-4.114M31.135 73.234l12.026-.002M108.413 57.563c-6.815-3.965-8.606-4.126-18.149-1.612a26.418 26.418 0 0 1-3.832.723 26.461 26.461 0 0 1-3.838-.723c-9.537-2.514-11.328-2.353-18.147 1.612-5.978 3.153-9.418 12.274-7.709 22.523 1.979 11.854 6.549 12.679 6.549 25.519 0 12.764 4.631 19.139 8.357 19.139s5.6-4.373 9.682-15.308c2.8-7.5 6.957-8.691 10.208 0 4.089 10.935 5.96 15.308 9.687 15.308s8.349-6.375 8.349-19.139c0-12.806 4.555-13.54 6.551-25.519 1.712-10.249-1.721-19.37-7.708-22.523zM75.344 66.022h-8.266M105.783 66.022H97.52" class="b"/>
<path d="M70.686 77.1c.392 9.721 7.406 17.471 16.026 17.471s15.634-7.75 16.024-17.471z" class="b"/>
</svg> <!-- 11 -->
<div>
<h3>
<a href="#">I want straighter teeth</a>
</h3>
<p>Invisalign brings stealth straightening to you with thin, invisible trays. ABC Smiles’s experience puts a stunning smile within easy reach.</p>
</div>
</div>
</div>
<div class="sqs-col-4"><!-- Left column -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
<defs>
<style>
.b{fill:none;stroke:#282d33;stroke-width:5px}
</style>
</defs>
<circle cx="85" cy="85" r="85" fill="#fff"/>
<path d="M79.766 52.8c-.857.2-1.772.432-2.759.683a31.366 31.366 0 0 1-4.418.8 31.322 31.322 0 0 1-4.423-.8c-11-2.8-13.058-2.626-20.917 1.8-6.891 3.518-10.855 13.7-8.886 25.133 2.279 13.227 7.548 14.146 7.548 28.471 0 14.244 5.337 21.358 9.631 21.358s6.458-4.887 11.164-17.087c3.23-8.369 8.018-9.7 11.765 0 4.713 12.2 6.868 17.082 11.162 17.082s9.628-7.114 9.628-21.358a33.118 33.118 0 0 1 1.919-12.142" class="b"/>
<path d="M105.492 37.919a29.524 29.524 0 0 0-22.514 48.648L80 95.716l8.617-4.028a29.516 29.516 0 0 0 46.416-24.225M135.029 67.463q0-1.008-.066-2" class="b"/>
<path fill="none" stroke="#282d33" stroke-dasharray="3.854 3.854" stroke-width="4" d="M134.457 61.644a29.563 29.563 0 0 0-25.045-23.467"/>
<path d="M107.492 37.985q-.993-.066-2-.066M119.432 63.01h-9.492v-9.491h-8.904v9.491h-9.492v8.902h9.492v9.492h8.904v-9.492h9.492V63.01z" class="b"/>
</svg> <!-- 12 -->
<div>
<h3>
<a href="#">I need wisdom teeth removed</a>
</h3>
<p>Wisdom teeth should be evaluated for long-term health. Dr. Y in Big Town, USA helps you determine the best plan for you & your third molars.</p>
</div>
</div>
</div>
</section>section {
//the how-can-we-help section
display:flex;
flex-wrap:wrap;
padding:0;
margin:50px;
.sqs-col-4 {
//each column
position:relative;
width:calc(~'33.333% - 11.333px');
background:linear-gradient(to bottom right, fade(white,33.333%), fade(white,0%), fade(white,33.333%));
backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
transform:scale(1);
border-radius:18px;
border:1px solid fade(white,20%);
position:relative;
margin:0 17px 0 0;
transition:250ms all;
text-shadow:1px 1px 1px fade(black,15%);
& > a {
display:block;
padding:34px;
color:white;
text-decoration:none;
}
svg {
width:72px;
margin:0 0 -17px -17px;
path {
stroke:white;
}
circle {
fill:none
}
}
svg path, h3 a, p {
transition:250ms all
}
&:hover {
transform:scale(1.05);
z-index:1000;
background-size:100%;
}
&:last-of-type {
margin:0
}
}
@media all and (max-width:1024px) {
margin:50px;
.sqs-col-4 {
width:100%;
margin:17px 0;
text-align:center;
&:last-of-type {
margin:17px 0
}
p {
display:none
}
& > a {
padding:17px 34px
}
}
}
}
//codepen formatting
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
section {
position:fixed;
top:50%;
transform:translatey(-60%)
}
body {
&::before {
width:100vw;
height:100vh;
position:fixed;
background:fade(black,15%);
content:''
}
height:150vh;
margin:0;
background: url('https://static1.squarespace.com/static/5c0ee91950a54f0bfd65f6e2/t/5fbef039cb3e0f57713aead6/1606348859952/bg.jpg');
background-size:cover;
font-family:sans-serif;
font-size:1em;
h3 {
font-size:125%;
}
p {
line-height:1.3;
font-size:92.5%
}
h3 a {
color:white;
text-decoration:none
}
}var hcwhCTA = $('.sqs-col-4 h3 a');
var hcwhLink = $(hcwhCTA).attr("href");
$('.sqs-col-4 > div').wrap('<a href="' + hcwhLink + '"></a>');
External CSS
This Pen doesn't use any external CSS resources.