<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container"> <div class="row "> <div class="col-sm-5 no-padding card-item" data-category="view"> <div class="robo-card-panel"> <div class="row box-shadow"> <div class="col-md-2 no-padding text-center robo-card-left"> <img class="card-img-show" src="data:image/jpeg;base64,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"> <p>34<span>°C</span></p> <p class="robo-card-cloudy">Cloudy</p> </div> <div class="col-md-9 no-padding robo-card-move-left"> <div class="robo-card-row robo-card-move-left robo-card-header "> Example <span>library</span> </div> <div class="robo-card-row robo-card-desc robo-card-move-left"> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </div> </div> </div> </div> </div> </div> <div class="row "> <div class="col-sm-5 no-padding card-item" > <div class="robo-card-panel "> <div class="row box-shadow robo-orange-card"> <div class="no-padding robo-card-left"> <div class="robo-orange-card-header"> Name </div> <label class="robo-card-label"> Josep Maria Bartomeu </label> <div class="robo-orange-card-header"> Mobile </div> <label class="robo-card-label"> Josep Maria Bartomeu </label> </div> </div> </div> </div> </div> </div>

.robo-card-panel { padding:0px; } .robo-card-panel img { background-color: transparent; height: 60px; } .robo-card-panel .row, .robo-card-panel { padding: 20px; } .robo-card-panel .robo-card-header { background-color: #FFFFFF; position:relative; color: rgba(0,0,0,0.87); font-family: Roboto; font-size: 26px; line-height: 34px; /*padding: 10px 20px 0 20px;*/ } .robo-card-panel .robo-card-header span{ font-weight: bold; } .robo-card-panel .robo-card-row .robo-card-header .robo-card-header-seperator { height: 2px; width: 26px; background-color: #d9d9d9; /*margin: 7px 0 7px 0;*/ } .robo-card-panel .robo-card-row.robo-card-desc { position: relative; height: 100%; display: block; opacity: 0.8; color: #000000; font-family: Roboto; font-size: 15px; line-height: 20px; } .robo-card-panel .robo-card-row .robo-card-desc a{ position: absolute; width: 100%; /*bottom: 10px;*/ /*left: 20px;*/ } .row-margin-bottom { margin-bottom: 20px; } .box-shadow { -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.10); -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10); box-shadow: 0 0 10px 0 rgba(0,0,0,.10); } .no-padding { padding: 0; } .robo-card-move-left{ left:20px; } .robo-card-left { font-family: Roboto; font-size: 40px; font-weight: 500; line-height: 53px; color:#AE1F2C; } .robo-card-left .robo-card-cloudy { height: 24px; width: 79px; color: #AD1D2C; font-family: Roboto; font-size: 20px; line-height: 26px; } .robo-card-left p span{ font-size: 40px; font-weight: 500; line-height: 53px; } .robo-card-left p{ color: #AE1F2C; font-family: Roboto; font-size: 40px; font-weight: 500; line-height: 53px; } .robo-orange-card{ background: linear-gradient(269.11deg, #F9D423 0%, #F83600 100%); } .robo-orange-card-header{ height: 24px; width: 38px; color: #844208; font-family: Roboto; font-size: 14px; line-height: 24px; } .robo-card-label{ height: 30px; width: 246px; color: #FFFFFF; font-family: Roboto; font-size: 24px; line-height: 30px; }