You can use this Gray Our Clients Component web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Gray Our Clients Component by Clicking the Download button at the bottom
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /><section class="card-main">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wrapper">
<ol>
<li>
<div class="content">
<img src="assets/images/7.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/3.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/4.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/5.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/6.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/8.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/9.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/12.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/11.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/10.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/3.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/4.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/7.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/2.png">
<h3>Company Name</h3>
</div>
</li>
<li>
<div class="content">
<img src="assets/images/1.png">
<h3>Company Name</h3>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
@media (min-width:1200px){
.card-main{
height:100vh;
display:flex;
align-items: center;
justify-content: center;
}
}
.wrapper{
display:block;
width:100%;
margin:1.25rem 0;
}
.wrapper > ol{
width:100%;
display:flex;
flex-wrap: wrap;
flex:1 1 100%;
width:100%;
}
.wrapper > ol li{
display:block;
width:20%;
position: relative;
}
.wrapper > ol li > .content{
display: block;
text-align: center;
background:#fff;
border-radius:.3125rem;
border: 1px solid #cbcbcb;
padding:.625rem;
margin:.625rem;
position: relative;
padding: 20px;
}
.wrapper > ol li img{
width:200px;
filter: grayscale(100%);
max-width: 100%;
}
.wrapper > ol li h3{
font-size:1.25rem;
display:block;
padding:0 0 .3125rem 0;
font-size: .9rem;
}
@media screen and (max-width:575.98px){
.wrapper > ol li{
width:100%;
}
}
@media (min-width: 576px) and (max-width: 767.98px){
.wrapper>ol li {
width:50%;
}
}
@media (min-width: 768px) and (max-width: 991.98px){
.wrapper>ol li {
width: 33.3%;
}
}
Copyright @2022 smarteyeapps.com. All rights reserved