Client profile Area

Mohsin Liaquat

Client Name

Qualification

Pattern HTML

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{"name":"Client info Circle"},"layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{},"className":"client-info-circle","layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group client-info-circle"><!-- wp:image {"id":1174,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-full is-style-rounded"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/08/Kelly.jpg" alt="" class="wp-image-1174"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"info-box ","style":{"spacing":{"blockGap":"0"},"border":{"radius":"100%"}},"backgroundColor":"three","layout":{"type":"constrained","contentSize":"100px","justifyContent":"center"}} -->
<div class="wp-block-group info-box has-three-background-color has-background" style="border-radius:100%"><!-- wp:image {"lightbox":{"enabled":false},"id":833,"sizeSlug":"full","linkDestination":"custom","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><a href="tel:"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/phone-1.png" alt="" class="wp-image-833"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}}},"textColor":"one"} -->
<p class="has-text-align-center has-one-color has-text-color has-link-color"><a href="tel:">Call Me</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">Client Name</h3>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"fontSize":"paragraph-1"} -->
<h5 class="wp-block-heading has-text-align-center has-paragraph-1-font-size" style="margin-top:0;margin-bottom:0">Qualification</h5>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Pattern CSS

#site-container .info-box a {
    text-decoration: none;
}

#site-container .info-box{
    width: 100px;
    height: 100px;
    padding: 0 10px 0;
    text-transform: uppercase;
    float: right;
    margin: -105px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
	background: var(--wp--preset--color--third);
}

#site-container .info-box a {
    display: flex;
	color: #fff;
}

#site-container .info-box a:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

#site-container .info-box .wp-block-image.has-custom-border img {
    box-sizing: border-box;
    padding: 5px;
}
#site-container .client-info-circle .info-box img{
    border-radius: 50%;
    border: 0 solid #fff;
    -webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 11px rgba(0, 0, 0, 0);		
}

#site-container .client-info-circle img{
    border-radius: 50%;
    border: 5px solid #fff;
    -webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.55);	
}