<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-sm-4"> <div class="coach-card"> <img src="https://monitor.koalamon.com/bundles/koalamonintegrationwebhook/images/xunit.png" class="coach-img"> <div class="row coach-info"> <div class="col-md-1"></div> <div class="col-md-5 "> <div class="coach-info-text"> <span class="grey-text"> Lieu </span><br> <span class="white-text"> Marseille </span> </div> <hr class="sep-line"> </div> <div class="col-md-5"> <div class="coach-info-text"> <span class="grey-text"> Accompagnateur </span><br> <span class="white-text"> Tennis </span> </div> <hr class="sep-line"> </div> </div> <div class="coach-details"> <div class="row"> <div class="col-sm-6"> <span class="coach-name"><p>Aziz</p></span> <span class="coach-job"><p>Tennis Trainer</p></span> </div> <div class="col-sm-6"> <img src="https://maxcdn.icons8.com/office/PNG/512/Sports/tennis-512.png" width="50"> </div> </div> </div> <div class="coach-desc"> <div class="row"> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-3 tarrif"> <span class="pers-count"> 1 Personne </span><br> <span class="pers-tarrif"> 33.49 P </span> </div> <div class="col-sm-3 tarrif"> <span class="pers-count"> 2 Personnes </span><br> <span class="pers-tarrif"> 33.49 P </span> </div> <div class="col-sm-3 tarrif-no-right"> <span class="pers-count"> 3 Personnes </span><br> <span class="pers-tarrif"> 33.49 P </span> </div> </div> </div> <div class="coach-desc-text"> <div class="row"> Originaire de Saint Gervais, j’ai 19 ans et je suis passionné par le ski. je passe le diplôme de monitorat ESF. De bons conseils et je peux accompagner des skieurs de tout niveaux. </div> </div> <div class="coach-reserve-btn"> <a href="#" class="btn btn-danger btn-block">RESERVER</a> </div> </div> </div> </div> </div>

.coach-card{ background-color:#163f99; text-align: center; padding-top: 80px; border-radius: 12px; width: 364px; } .coach-card .coach-img{ width: 100px; border: 1.3px white solid; border-radius: 100%; margin-bottom: 9.6px; } .coach-card .coach-info{ text-align: left; margin-bottom: 46px; } .coach-card .coach-info .coach-info-text{ margin-left: 25px; } .coach-card .coach-info .sep-line{ border-color: #336699; } .coach-card .coach-info .coach-info-text .grey-text{ color: #6699cc; } .coach-card .coach-info .coach-info-text .white-text{ color: #ffffff; font-size: 1.2em; } .coach-card .coach-details{ background-color: #E6E6FA; padding-top: 24px; } .coach-card .coach-details .coach-name{ font-size: 1.5em; color: #6699cc; } .coach-card .coach-details .coach-job{ color: #ccccff; } .coach-card .coach-desc{ text-align: center; position: relative; background-color: white; padding-left: 15px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .coach-card .coach-desc .tarrif{ padding-top: 27px; text-align: left; border-right: 1px solid #E6E6FA; border-bottom: 1px solid #E6E6FA; padding-bottom: 22px; } .coach-card .coach-desc .tarrif-no-right{ padding-top: 27px; text-align: left; border-bottom: 1px solid #E6E6FA; padding-bottom: 22px; } .coach-card .coach-desc .pers-count{ font-size: 0.92em; color:#E6E6FA; } .coach-card .coach-desc .pers-tarrif{ font-size: 1.4em; font-weight: bold; color: #163f99; } .coach-card .coach-desc .coach-desc-text{ padding-top: 27px; padding-left: 28px; padding-bottom: 41px; font-size: 1em; color: #163f99; text-align: justify; max-width: 308px; } .coach-card .coach-desc .coach-reserve-btn{ position: relative; width: 200px; height: 33px; margin-left: 66px; top: 16.5px; }