我有四张相同的卡片，它们的高度可以根据里面的内容而变化。我想将卡片相对于容器中心的圆对齐，容器的高度和宽度是138像素。这是我想要实现的图片布局:-
我想实现给定的布局。目前我使用的是绝对定位，并给四张卡片的上、右、下、左四个值赋予固定值。但是卡内的内容可以从后端增加或减少。因此，如果卡的内容增加了，那么布局就会中断，我希望这个布局是相同的，不管卡的内容和高度如何，但是靠近圆圈的位置应该是相同的。这是我实现的。有什么方法可以实现所述动态布局并相对于圆定位。
HTML和css:
.testi {
max-width: 1280px;
margin: 0 auto;
}
.container {
position: relative;
height: 1500px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 138px;
height: 138px;
border-radius: 50%;
background-image: linear-gradient(to bottom, #00aeef 0%, #0095da 25%, #0071b4 50%, #0061af 75%, #293996 100%);
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
}
/* testimonial card style */
.testimonial-card {
position: absolute;
width: 406px;
max-height: 888px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
padding: 48px;
border-radius: 16px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
background-color: #fff;
}
.testimonial-card {
width: 406px;
max-height: 888px;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
padding: 48px;
border-radius: 16px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
background-color: #fff;
}
.testimonial-card-title {
font-family: Gotham;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
text-align: left;
color: #757584;
}
.testimonial-person-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonial-card-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.person-detail {
width: 250px;
}
.person-name {
height: 20px;
font-family: Gotham;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
.person-des {
font-family: Gotham;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
.location-container {
display: flex;
justify-content: space-between;
}
.Location {
width: 24px;
height: 24px;
flex-grow: 0;
object-fit: contain;
}
.office-title {
width: 106px;
font-family: Gotham;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: italic;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
/* End of testimonial-card style */
.card1 {
top: 115px;
left: 0;
}
.card2 {
top: 115px;
right: 145px;
}
.card3 {
bottom: 165px;
left: 115px;
}
.card4 {
bottom: 165px;
right: 0;
}<div class="container">
<div class="circle">
<div class="inner-circle"></div>
</div>
<div class="testimonial-wrapper">
<div class="testimonial-card card1">
<div class="testimonial-card-title">
“This will be my third year at HUB working on the Human Resources team. As a military spouse, it can be hard to find a role that allows you to advance in your career, but also be there for your service member and family. HUB has granted me that, and so much more. My supervisor understands my situation and continuously supports me through it. When my husband deployed, my team rallied around me and celebrated with us when he returned. The Military Veterans & Military Family Voices group is a special place where anyone who is in the military community has instant comradery and support. What I am impressed with most is this group’s ability to actively listen to each other’s experiences and draw lessons on how to be a better advocate from it.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card2">
<div class="testimonial-card-title">
“My passion is to give a voice to those who are underrepresented. As someone who fits into that category, I’m passionate about bringing awareness and opportunities to those who look like me and making allies out of those who don’t. HUB Black Inclusion Network does just that; it provides a safe and collaborative space for this while enhancing HUB’s inclusive culture and expanding our diversity footprint.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card3">
<div class="testimonial-card-title">
“In order for HUB to thrive, we must embrace diversity and inclusion so we can continue to serve all our clients from all walks of life. HUB Women Network (HWN) provides a forum to help women of all levels and diversity at HUB be able to Engage, Empower, and Excel in all aspects of their lives. Through monthly calls, webinars, and panel discussions, we create a safe space for women to speak freely, engage with others and exchange insights.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card4">
<div class="testimonial-card-title">
“This year I’ll be celebrating 6 years working at HUB in the Risk Services Division and I am very proud to be involved in all the different opportunities to create a culture of diversity, equity, and inclusion in all regions. Now there are several ways to get involved as a leader, a participant, and an ambassador to do our part here at HUB. The Asian American/Pacific Islander community is a special place for me, to feel the genuine connection I have with other colleagues because of our similar cultural background. I am Chinese and Filipino, and this community provides me a natural way to support, connect and identify with other peers all while working at HUB.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
</div>
</div>你的布局被打破可能是因为顶部2必须基于底部放置，底部2基于顶部放置，因为内容被添加到容器的末尾。
绝对定位应该足够了。
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
justify-content: center;
align-items: centeR;
}
.container {
position: relative;
}
.card {
position: absolute;
width: 350px;
height: fit-content;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: yellow;
height: 150px;
width: 150px;
border-radius: 50%;
}
.card:nth-last-child(1) {
left: 100px;
background: green;
}
.card:nth-last-child(2) {
background: red;
bottom: 100px;
}
.card:nth-last-child(3) {
background: blue;
left: -100px;
bottom: 0;
transform: translateX(-100%);
}
.card:nth-last-child(4) {
background: brown;
top: 100px;
transform: translateX(-100%);
}<div class="container">
<div class="circle"></div>
<div class="card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorems with the re Ipsum passages, ay unchanged. It was popularised in the 1960s with the release of Letraset sheetsnd more recently with desktop publishing softwgalley of type and scrambled it to make a type specimen book. It has survivedy unchanged. It was popularised in the 1960s with the release of Letraset sheets not only ktop publishfive ceny unchanged. It was popularised in the 1960s with the release of Letraset sheetsy unchanged. It was popularised in the 1960s with the release of Letraset sheetsturies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknowsed in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrass wstting industry. Loe 1960s ws with the re 1960s ws with the reith the release of Letraset shrem Ipsum has been the industry'ised in the 1960s ws with the rewstting industry. Lorem Ipsum has bektop publishen the industry'ised in the 1960s ws with the reset sheets containing Lorem Ipsum passages, and more recently with desktop publishing softwand more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting iktop publishndustry. Lorem Ipsum has been the industry'ised in the 1960s wstting industry. Lorem Ipsum has been the industry'ised in thee 1960s ws with the re 1960s ws with the reith the release of Letraset shs e 1960s ws with the re 1960s ws with etraset shs etraset shs etraset shs the reith te 1960s ws with the re 1960s ws with the reith the release of Letraset shhe release of Letraset shwstting industry. Lorem Ipsum has been the industry'ised in the 1960s ws with the re 1960s ws with the reith the release of Letraset sheets s with the re Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur1960s ws with the reith the relektop publishase of Letraset shhe release of Letraset shwstting indu1960s ws with the reith the release of Letraset shhe release of Letraset shwstting indu1960s ws with the reith the release of Letraset shhe release of Letraset shwstting indu1960s ws with the reith the release of Letraset shhe release of Letraset shwstting induvived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>我相信你的问题来自绝对定位。 通过使用网格，您应该能够相对于网格的中心定位每张卡片。然后，你只需要将圆圈居中。
请注意，您仍然需要转换卡片，以获得您正在寻找的这种转换，一个简单的转换:translate(x，y)；会的。
如果这回答了你问题，请告诉我:
.container {
position: relative;
height: 1500px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.circle {
align-self: end;
justify-self: end;
grid-area: 1 / 1 / 2 / 2;
transform: translate(50%, 50%);
width: 138px;
height: 138px;
border-radius: 50%;
background-image: linear-gradient(to bottom, #00aeef 0%, #0095da 25%, #0071b4 50%, #0061af 75%, #293996 100%);
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
}
.testimonial-wrapper {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
/* testimonial card style */
.testimonial-card {
width: 406px;
max-height: 888px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
padding: 48px;
border-radius: 16px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 1);
background-color: #fff;
}
.card1 {
grid-area: 1 / 1 / 1 / 1;
align-self: end;
}
.card2 {
align-self: end;
}
.card3 {
align-self: start;
}
.card4 {
align-self: start;
}<div class="container">
<div class="testimonial-wrapper">
<div class="testimonial-card card1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
</div>
<div class="testimonial-card card2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
</div>
<div class="testimonial-card card3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
</div>
<div class="testimonial-card card4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
</p>
</div>
<div class="circle">
<div class="inner-circle"></div>
</div>
</div>
</div>定位absolute将起作用-对你定位卡片的方式做一些改变。
这个代码片段从容器中移除了flex，但是保持了您将圆居中的方式。
它相对于要与圆直径对齐的相关边来定位每张卡片，并使用translateX/ Y将其定位在离圆稍远的位置(为了方便起见，它使用圆的直径来完成此操作，当然，如果您希望它更大，可以添加更多)。
如果需要的话，为了有助于将来的调整，代码片段基于圆的直径进行计算，这是一个CSS变量- d。
<style>
.testi {
max-width: 1280px;
margin: 0 auto;
}
.container {
position: relative;
height: 1500px;
width: 100vw;
--d: 138px;
--r: calc(var(--d) / 2);
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--d);
height: var(--d);
border-radius: 50%;
background-image: linear-gradient(to bottom, #00aeef 0%, #0095da 25%, #0071b4 50%, #0061af 75%, #293996 100%);
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(80 / 138 * var(--d));
height: calc(80 / 138 * var(--d));
border-radius: 50%;
background-color: #fff;
}
/* testimonial card style */
.testimonial-card {
position: absolute;
width: 406px;
max-height: 888px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
padding: 48px;
border-radius: 16px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
background-color: #fff;
}
.testimonial-card {
width: 406px;
max-height: 888px;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
padding: 48px;
border-radius: 16px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
background-color: #fff;
}
.testimonial-card-title {
font-family: Gotham;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
text-align: left;
color: #757584;
}
.testimonial-person-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonial-card-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.person-detail {
width: 250px;
}
.person-name {
height: 20px;
font-family: Gotham;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
.person-des {
font-family: Gotham;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
.location-container {
display: flex;
justify-content: space-between;
}
.Location {
width: 24px;
height: 24px;
flex-grow: 0;
object-fit: contain;
}
.office-title {
width: 106px;
font-family: Gotham;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: italic;
line-height: 1.43;
letter-spacing: normal;
text-align: left;
color: #263746;
}
/* End of testimonial-card style */
.card1 {
right: calc(50% - var(--d));
bottom: 50%;
right: 50%;
transform: translateX(calc(-1 * var(--d)));
}
.card2 {
left: 50%;
bottom: 50%;
transform: translateY(calc(-1 * var(--d)));
}
.card3 {
right: 50%;
top: 50%;
transform: translateY(var(--d));
}
.card4 {
left: 50%;
top: 50%;
transform: translateX(var(--d));
}
</style>
<div class="container">
<div class="circle">
<div class="inner-circle"></div>
</div>
<div class="testimonial-wrapper">
<div class="testimonial-card card1">
<div class="testimonial-card-title">
“This will be my third year at HUB working on the Human Resources team. As a military spouse, it can be hard to find a role that allows you to advance in your career, but also be there for your service member and family. HUB has granted me that, and so
much more. My supervisor understands my situation and continuously supports me through it. When my husband deployed, my team rallied around me and celebrated with us when he returned. The Military Veterans & Military Family Voices group is a special
place where anyone who is in the military community has instant comradery and support. What I am impressed with most is this group’s ability to actively listen to each other’s experiences and draw lessons on how to be a better advocate from it.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card2">
<div class="testimonial-card-title">
“My passion is to give a voice to those who are underrepresented. As someone who fits into that category, I’m passionate about bringing awareness and opportunities to those who look like me and making allies out of those who don’t. HUB Black Inclusion
Network does just that; it provides a safe and collaborative space for this while enhancing HUB’s inclusive culture and expanding our diversity footprint.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card3">
<div class="testimonial-card-title">
“In order for HUB to thrive, we must embrace diversity and inclusion so we can continue to serve all our clients from all walks of life. HUB Women Network (HWN) provides a forum to help women of all levels and diversity at HUB be able to Engage, Empower,
and Excel in all aspects of their lives. Through monthly calls, webinars, and panel discussions, we create a safe space for women to speak freely, engage with others and exchange insights.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
<div class="testimonial-card card4">
<div class="testimonial-card-title">
“This year I’ll be celebrating 6 years working at HUB in the Risk Services Division and I am very proud to be involved in all the different opportunities to create a culture of diversity, equity, and inclusion in all regions. Now there are several ways
to get involved as a leader, a participant, and an ambassador to do our part here at HUB. The Asian American/Pacific Islander community is a special place for me, to feel the genuine connection I have with other colleagues because of our similar
cultural background. I am Chinese and Filipino, and this community provides me a natural way to support, connect and identify with other peers all while working at HUB.”
</div>
<div class="testimonial-person-wrapper">
<img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="person-detail">
<div class="person-name">
Glenn Agoncillo
</div>
<div class="person-des">
Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
</div>
<div class="location-container">
<img src="Location.png" class="Location" alt="location-icon">
<div class="office-title">Office Location</div>
</div>
</div>
</div>
</div>
</div>
</div>