<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- instagram: www.instagram.com/programmingtutorial site: programlamadersleri.net --> <div class="box"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <img class="header_logo_easy" src="https://www.intertelecom.ua/images/visa_master.png"> <div class="title"> <h3>Visa\MasterCard</h3> </div> <div class="text"> <span>Оплачивайте с помощью платежных карт Visa\MasterCard</span> </div> <a href="#">Оплатить</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <svg width="155px" height="26px" viewBox="0 0 155 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-30.000000, -27.000000)"> <g> <g transform="translate(30.000000, 27.000000)"> <polygon fill="#75AF26" points="29.3597138 22.3859513 25.5459941 22.3820294 25.5600522 9.10531291 39.2893962 9.11915484 39.276041 22.3956406 35.4623213 22.3917188 35.4733335 11.6944457 29.3709602 11.6886782"></polygon> <g transform="translate(0.000000, 0.070132)"> <path d="M44.4817438,17.4940292 C44.4845554,14.8020048 46.1717579,14.2711668 47.2352508,14.2723203 C48.2755479,14.2732431 49.9620475,14.8080029 49.9590016,17.4997966 C49.9573615,19.1691332 49.2396971,20.7616471 47.2282218,20.7593401 C45.1712921,20.7572638 44.4798694,19.1631351 44.4817438,17.4940292 L44.4817438,17.4940292 Z M41.1342834,12.691572 L41.1204596,25.8349446 L44.6342738,25.8381744 L44.6389599,21.342316 C45.8163231,22.5982403 47.7350151,22.6937496 48.1972913,22.694211 C51.5487348,22.6979022 53.6080076,20.5960054 53.6108192,17.5399382 C53.6143337,14.3539877 51.5831771,12.342294 48.2778909,12.3390643 C47.4451846,12.3376801 45.8268666,12.4696398 44.4857269,13.8533713 L44.4156709,13.8533713 L44.4409754,12.6950325 L41.1342834,12.691572 Z" fill="#75AF26"></path> <path d="M62.3216905,21.1909545 C61.0267081,22.385513 59.7771801,22.7066457 58.3908202,22.7054922 C54.5998277,22.7013396 54.4641674,19.8944272 54.4653389,18.7374727 L54.471665,12.7063137 L57.9854792,12.7095435 L57.9796217,18.2862258 C57.9772787,20.201718 58.6466771,20.770852 59.9409566,20.7720055 C62.1597884,20.7743125 62.3240335,18.8202936 62.3247364,18.1194306 L62.3303596,12.7139268 L65.8437052,12.7176179 L65.8338646,22.352523 L62.320519,22.3490626 L62.3216905,21.1909545 Z" fill="#75AF26"></path> <path d="M70.8799849,14.6577027 L72.7757154,14.6595482 C73.7693865,14.6607017 74.6241171,14.8125016 74.6236485,15.6084125 C74.622477,16.4806847 73.2822745,16.499602 72.7049565,16.4991406 L70.8783448,16.497295 L70.8799849,14.6577027 Z M67.3696851,12.7186792 L67.3596102,22.3549684 L74.3401441,22.3618894 C76.8830144,22.3641964 78.6395701,21.8702702 78.6416788,19.9003331 C78.6433189,18.383027 77.7885883,17.7183838 75.8467005,17.3744118 L75.8467005,17.3174292 C77.1180185,17.148327 78.2274344,16.3720255 78.2290745,15.0628098 C78.2314175,12.7297527 75.4589321,12.7267536 74.3722434,12.7256001 L67.3696851,12.7186792 Z M70.8764703,18.2990527 L73.0266519,18.3013597 C74.69019,18.3029745 75.0360185,18.7955165 75.0355499,19.440089 C75.034847,19.8571924 74.8035918,20.4260957 73.0702319,20.4244808 L70.8741273,20.4221738 L70.8764703,18.2990527 Z" fill="#75AF26"></path> <path d="M87.148919,18.391586 C87.1465759,20.3259955 85.4361776,20.7977745 84.5802755,20.7973132 C83.934073,20.7966211 82.7777969,20.5880693 82.7787341,19.6756555 C82.7799056,18.5936781 84.0976152,18.3888176 84.8380068,18.2944618 C86.1999993,18.105058 86.0858947,18.1620406 87.1498562,17.7839253 L87.148919,18.391586 Z M83.0823883,15.8460553 C83.0842627,14.4224129 84.6088603,14.3109854 85.2339757,14.3114468 C85.6276016,14.3121389 87.0837832,14.3326711 87.1287691,15.5830587 L87.1283005,15.8502079 C87.0577758,16.79838 86.1327549,16.6062079 83.543493,16.9273406 C81.4169758,17.2087932 79.1749482,17.738939 79.1723709,19.9370373 C79.171668,20.7350245 79.5160907,22.726878 83.2604572,22.7307999 C84.6943802,22.7319534 86.2660723,22.3734474 87.1913275,21.4245832 L87.2616178,21.4245832 L87.561289,22.3746009 L91.2583267,22.3785228 L91.2583267,22.2087285 C90.5896312,22.0742311 90.5423024,21.4275823 90.5678412,20.3864386 L90.6421147,15.9851667 C90.6650762,14.8678923 90.5516744,12.3823434 85.2597488,12.3768066 C83.9881966,12.3756531 79.8977672,12.485235 79.7323506,15.8425948 L83.0823883,15.8460553 Z" fill="#75AF26"></path> <polygon fill="#75AF26" points="91.035928 14.6778657 91.0382711 12.7423027 102.316825 12.7538377 102.314482 14.6894007 98.4309407 14.6854788 98.4232087 22.3859744 94.9103317 22.3825139 94.9178294 14.6820183"></polygon> <path d="M106.797952,16.6274322 L109.964063,16.6308926 C110.886975,16.6315847 112.736314,16.7291703 112.734674,18.322607 C112.733268,19.5750709 111.392363,19.8182274 109.890258,19.8168432 L106.794203,19.8136134 L106.797952,16.6274322 Z M106.803341,11.6969372 L115.561752,11.7059345 L115.564329,9.12649106 L102.990324,9.11334123 L102.977203,22.3900577 L110.697191,22.3981322 C114.442729,22.4020541 116.846893,21.1147547 116.849705,18.4031209 C116.853922,14.1545716 112.046532,14.054679 110.706329,14.0535255 L106.800295,14.0496037 L106.803341,11.6969372 Z" fill="#75AF26"></path> <path d="M125.493308,18.4306663 C125.490965,20.3650759 123.781036,20.8368549 122.926071,20.8363935 C122.278228,20.83524 121.124529,20.6264576 121.124998,19.7142745 C121.126404,18.6322971 122.443176,18.427898 123.182865,18.3335421 C124.546263,18.1434463 124.431221,18.2006596 125.493777,17.8230057 L125.493308,18.4306663 Z M121.429121,15.8851357 C121.430527,14.4614933 122.955358,14.3498351 123.578365,14.3505272 C123.973397,14.3505272 125.429578,14.3717515 125.474564,15.622139 L125.474096,15.8892883 C125.403571,16.8374604 124.479019,16.6448269 121.889288,16.966421 C119.763005,17.2478735 117.521915,17.7780194 117.519572,19.9761177 C117.518166,20.7743356 117.862589,22.7659584 121.606721,22.7694189 C123.040175,22.7708031 124.612336,22.4125278 125.537123,21.4632022 L125.607882,21.4632022 L125.906616,22.4136813 L129.605059,22.4171418 L129.605059,22.2473475 C128.933552,22.1126193 128.887629,21.4666627 128.911762,20.4250576 L128.986973,16.0237857 C129.011106,14.9065113 128.897001,12.4214237 123.60367,12.4161177 C122.333523,12.4147335 118.242391,12.5236233 118.076506,15.8816752 L121.429121,15.8851357 Z" fill="#75AF26"></path> <polygon fill="#75AF26" points="133.995886 22.4217096 130.483477 22.4182491 130.493318 12.7824212 134.005727 12.7858817 134.001978 16.4099293 138.231582 16.4145433 138.236034 12.7907264 141.749848 12.7941869 141.73907 22.4295534 138.225724 22.4263236 138.229708 18.3489528 134.000103 18.3443388"></polygon> <polygon fill="#75AF26" points="150.624613 12.8026535 154.531819 12.8068061 149.695843 17.3155836 154.750656 22.4435568 150.636797 22.4396349 146.850959 18.2236142 146.782777 18.2236142 146.779028 22.4354823 143.264042 22.4320218 143.275055 12.7959633 146.788869 12.799193 146.784417 16.6682428 146.85213 16.6682428"></polygon> <polygon fill="#000000" points="0 22.3180797 8.8012881 22.3266156 8.81042584 13.6634139 0.0089034434 13.654878"></polygon> <path d="M0.0339736656,0.160635581 L0.0227272108,10.9448821 L2.34933755,10.9471891 C8.4727979,10.953418 11.5747107,14.0140991 11.5681503,20.0429511 L11.5658073,22.3324061 L22.5191514,22.3432489 L22.5425815,0.183244065 L0.0339736656,0.160635581 Z M17.8842062,4.75984706 L17.8706167,17.7578794 L16.0749328,17.7562645 C15.3068936,11.3276115 11.2080294,7.28461483 4.68039961,6.5159264 L4.68203972,4.74669722 L17.8842062,4.75984706 Z" fill="#75AF26"></path> </g> </g> </g> </g> </g> </svg> <div class="title"> <h3>Приват24</h3> </div> <div class="text"> <span>Оплачивайте с помощью карт приватБанка с помощью Приват24 </span> </div> <a href="#">Пополнить счет</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <img src="https://www.intertelecom.ua/images/money.svg"> <div class="title"> <h3>Наличными</h3> </div> <div class="text"> <span>Пополняйте в кассах или в терминалах самообслуживания</span> </div> <a href="#">Узнать больше</a> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700'); body{ background: #f2f2f2; font-family: 'Josefin Sans', sans-serif; } h3{ font-family: 'Josefin Sans', sans-serif; } .header_logo_easy{ width: 100px; height: 100%; max-width: 100px; cursor: pointer } .box{ padding:60px 0px; } .box-part{ background:#FFF; border-radius:10px; padding:60px 10px; margin:30px 0px; min-height:350px; } .box-part:hover{ background:#4183D7; } .box-part:hover .fa , .box-part:hover .title , .box-part:hover .text , .box-part:hover a{ color:#FFF; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .text{ margin:20px 0px; } .fa{ color:#4183D7; }