Team Player List

by Intesar Haider

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="team-player-list">
   <h2>GOALKEEPERS</h2>
   <div class="container">
     <div class="row">
       <div class="col-md-4">
         <div class="team-player-list-item">
         <a href="#">
            <div class="img-wrap">
               <img src="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/misc/0002/26/thumb_125131_misc_general_500.jpeg" alt="Alisson Becker">
            </div>
            <div class="number">100</div>
            <div class="about">
               <div class="name">
                  <span>Alisson</span> <span>Becker</span>
               </div>
            </div>
         </a>
      </div>
       </div>
     </div>
   </div>
    <div class="col-md-4">
         <div class="team-player-list-item">
         <a href="#">
            <div class="img-wrap">
               <img src="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/misc/0002/26/thumb_125131_misc_general_500.jpeg" alt="Alisson Becker">
            </div>
            <div class="number">100</div>
            <div class="about">
               <div class="name">
                  <span>Alisson</span> <span>Becker</span>
               </div>
            </div>
         </a>
      </div>
       </div>
       
       <div class="col-md-4">
         <div class="team-player-list-item">
         <a href="#">
            <div class="img-wrap">
               <img src="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/misc/0002/26/thumb_125131_misc_general_500.jpeg" alt="Alisson Becker">
            </div>
            <div class="number">100</div>
            <div class="about">
               <div class="name">
                  <span>Alisson</span> <span>Becker</span>
               </div>
            </div>
         </a>
      </div>
       </div>
       
       <div class="col-md-4">
         <div class="team-player-list-item">
         <a href="#">
...

CSS

ul, ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.team-player-list {
    clear: both;
    padding: 30px;
     -webkit-transition: .3s 0s;
    -o-transition: .3s 0s;
    -moz-transition: .3s 0s;
    transition: .3s 0s;
}

.team-player-list h2 {
    color: #333;
    line-height: 1.2;
    margin: 10px 0;
    text-transform: uppercase;
    border-bottom: 3px solid #e31b23;
}
.team-player-list-item {
    background-color: #f7f7f7;
    float: left;
    margin-bottom: 8px;
}
@media only screen and (min-width: 1000px){
.team-player-list-item {
    width: 33.33333%;
}
}
@media only screen and (max-width: 991px){
.team-player-list-item {
    width: 49%;
}
}
@media only screen and (max-width: 767px){
.team-player-list-item {
    width: 100%;
}
}
.team-player-list-item .img-wrap {
    float: left;
    max-height: 90px;
    max-width: 90px;
}
.team-player-list-item .img-wrap img {
    display: block;
    max-height: 90px;
    max-width: 100%;
}
@media only screen and (min-width: 1200px){
  .team-player-list-item .number {
     font-size: 22px;
     width: 40px;
  }
}
.team-player-list-item .number {
    background-color: #e31b23;
    color: #fff;
    float: left;
    font-size: 18px;
    height: 90px;
    line-height: 90px;
    position: relative;
    text-align: center;
    width: 30px;
    -webkit-transition: width .3s 0s;
    -o-transition: width .3s 0s;
    -moz-transition: width .3s 0s;
    transition: width .3s 0s;
}
.team-player-list-item .about {
    float: left;
    margin-left: 20px;
}
.team-player-list-item .name, .team-player-list-item .position {
    font-size: 14px;
    font-weight: bold;
}
.team-player-list-item .name, .team-player-list-item .name a {
    margin-top: 15px;
    color: #333;
}
@media only screen and (min-width: 1200px){
.team-player-list-item .name, .team-player-list-item .position {
    font-size: 18px;
}
}
.team-player-list-item .name > span {
    width: 40px;
}
.team-player-list-item .name>span {
    display:...