Stylish Gray Color Client web component. This component will add more attraction to your website. You can add this component to any of your websites
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 © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies