Помогите с блоком (CSS)

374
05 июня 2017, 23:29

Здравствуйте, кто может помочь мне с одним блоком? Его нужно немного переделать, сколько не пытался, никак не получается... Кто может помочь сделать как на фото ниже?

@import "http://fonts.fontstorage.com/import/gilroy.css"; 
 
/*-------------------------------------------------------------- 
## Custom Css 
--------------------------------------------------------------*/ 
 
.rating_post { 
	float: left; 
    display: inline-block; 
	width: 100%; 
	margin-bottom: 14px; 
} 
 
.rating_post_desc { 
} 
 
.home .widget-area { 
	padding-right: 0!important; 
	padding-left: 5px!important; 
} 
 
.home .site-main { 
	padding-left: 0px; 
	outline: none; 
} 
 
.site-footer { 
    margin-top: 25px; 
    background-color: #1c5067; 
    padding: 20px 0 10px 0; 
} 
 
.site-footer .pull-left { 
    color: #ffffff; 
    font-size: 14px; 
    font-weight: 300; 
    line-height: 24px; 
	padding-left: 0px; 
} 
 
.site-footer .pull-right { 
    color: #ffffff; 
    font-size: 14px; 
    font-weight: 300; 
    line-height: 24px; 
	padding-right: 0px; 
} 
 
.site-footer p { 
    margin-bottom: 0; 
	margin-top: 3px; 
} 
 
.site-footer .site-info { 
    display: inline-block; 
    width: 100%; 
} 
 
.subscr-sidebar { 
    background: url(/wp-content/uploads/2017/04/podpiska_bg.png) no-repeat #fff; 
    min-height: 338px !important; 
    padding: 2px 15px 15px 15px; 
    position: relative; 
    margin-top: 20px; 
} 
#form-wysija-2 { 
    color: #8da2ab; 
    font-size: 14px; 
    font-weight: 400; 
    text-align: center; 
	padding: 0; 
} 
input[type="text"],  
input[type="email"] { 
    min-width: 220px; 
    box-shadow: 1px 2px 0px 0px rgba(255, 255, 255, 0.48); 
    padding: 9px; 
    border-radius: 0px; 
    border: 1px solid #d6d6d6;	 
	    margin-bottom: -2px; 
}	 
aside#wysija-2 .widget-title { 
    font-family: Gilroy; 
    color: #fff; 
    font-size: 23px; 
    font-weight: 300; 
    background: #489dc2; 
    margin-right: -15px; 
    padding: 9px 0 9px 15px; 
    margin-top: 15px; 
} 
 
aside#wysija-2 .widget-title:after { 
    content: ""; 
    position: absolute; 
    right: -16px; 
    background: url(/wp-content/uploads/2017/04/corner_bg.png) no-repeat; 
    width: 16px; 
    height: 66px; 
	top: 1px; 
} 
 
 
 
input.wysija-submit.wysija-submit-field { 
font-family: Gilroy; 
color: #ffffff; 
font-size: 20px; 
font-weight: 300; 
outline: none; 
background-color: #489dc2; 
text-shadow: none; 
border: none; 
border-radius: 0px; 
-webkit-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
-moz-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
padding: 15px 30px 15px 30px; 
 
    margin-top: -2px; 
    position: relative; 
    bottom: -6px; 
} 
 
.formError .formErrorContent { 
    background: none repeat scroll 0 0 #8E2121; 
    border: 1px solid #BBBBBB; 
    color: #FFFFFF; 
    font-family: tahoma; 
    font-size: 11px; 
    padding: 4px 10px; 
    position: relative; 
    width: 150px; 
    z-index: 5001; 
    left: -150px; 
} 
 
input.wysija-submit.wysija-submit-field:hover { 
font-family: Gilroy; 
color: #ffffff; 
font-size: 20px; 
font-weight: 300; 
outline: none; 
background-color: #58b0d6; 
text-shadow: none; 
border: none; 
border-radius: 0px; 
-webkit-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
-moz-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
padding: 15px 30px 15px 30px; 
} 
 
input.wysija-submit.wysija-submit-field:active { 
font-family: Gilroy; 
color: #ffffff; 
font-size: 20px; 
font-weight: 300; 
outline: none; 
background-color: #58b0d6; 
text-shadow: none; 
border: none; 
border-radius: 0px; 
-webkit-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
-moz-box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
box-shadow: 4px 4px 0px 0px rgba(72,157,194,0.31); 
padding: 15px 30px 15px 30px; 
} 
 
input.wysija-submit.wysija-submit-field:focus { 
font-family: Gilroy; 
color: #ffffff; 
font-size: 20px; 
font-weight: 300; 
outline: none; 
background-color: #58b0d6; 
text-shadow: none; 
border: none; 
border-radius: 0px; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
padding: 15px 30px 15px 30px; 
margin-top: 3px; 
margin-left: 5px; 
} 
 
/*-------------------------------------------------------------- 
# credit unit main 
--------------------------------------------------------------*/ 
 
.credit_unit { 
padding: 25px 20px; 
} 
 
 
 
.img-block { 
float: left; 
width: 150px; 
text-align: center; 
margin-right: 25px; 
} 
 
.col_cred_center { 
float: left; 
} 
 
.line > div:first-child { 
width: 147px; 
} 
 
.line1 > div:first-child:after { 
content: "+"; 
font-family: Gilroy; 
color: #3e6372; 
font-size: 33px; 
position: absolute; 
right: 0px; 
} 
 
.line1 > div:nth-child(2):after { 
content: "="; 
font-family: Gilroy; 
color: #3e6372; 
font-size: 33px; 
position: absolute; 
right: 0px; 
} 
 
.line > div:nth-child(2) { 
    width: 141px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 
 
.line > div:nth-child(3) { 
padding-left: 20px; 
width: auto; 
} 
 
.col_cred_button { 
float: left; 
width: 170px; 
position: absolute; 
right: 25px; 
top: 48px; 
} 
 
.img-block span { 
color:  #3f424a; 
font-size: 15px;/* Приближение из-за подстановки шрифтов */ 
font-weight: 400; 
text-align: center; 
} 
.text_unit { 
color:  #3e6372; 
font-size: 17px;/* Приближение из-за подстановки шрифтов */ 
font-weight: 400; 
display: block; 
} 
.text_unit_small{ 
color:  #3e6372; 
font-size: 15px;/* Приближение из-за подстановки шрифтов */ 
font-weight: 400; 
} 
.zaym_result { 
color:  #139747; 
font-size: 30px; 
font-weight: 900; 
margin-right: 5px; 
} 
 
.line > div{ 
float: left; 
position: relative; 
} 
 
 
.zaym_com,  
.zaym_vipl { 
color:  #489dc2; 
font-size: 30px; 
font-weight: 900;	 
margin-right: 5px; 
} 
 
.max_summ,  
.max_day { 
margin-right: 5px; 
} 
 
.line2 .text_unit{ 
font-size: 14px;/* Приближение из-за подстановки шрифтов */	 
} 
.line2 .text_unit_small{ 
font-size: 12px;/* Приближение из-за подстановки шрифтов */ 
} 
 
.line2 { 
color: #3e6372; 
font-size: 19px; 
font-weight: 900; 
border-top: 1px solid rgba(62, 99, 114, 0.2); 
 
padding-top: 6px; 
    margin-top: 3px; 
 
} 
 
.col_cred_button a { 
background-color:  #139747; 
display: inline-block; 
padding: 13px 32px; 
-webkit-box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
-moz-box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
} 
 
.col_cred_button a:hover { 
background-color:  #27bd62; 
display: inline-block; 
padding: 13px 32px; 
-webkit-box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
-moz-box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
box-shadow: 4px 4px 0px 0px rgba(19, 151, 71, 0.31); 
} 
 
.col_cred_button a:focus { 
background-color:  #27bd62; 
display: inline-block; 
padding: 13px 32px; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
margin-top: 3px; 
margin-left: 4px; 
text-decoration: none; 
} 
 
 
 
.col_cred_button a span { 
text-align:center;	 
font-family: Gilroy;	 
color: #fff; 
display: block; 
} 
.col_cred_button a:hover { 
text-decoration: none; 
} 
.col_cred_button span:nth-child(1) {	 
font-size: 19px; 
 
} 
 
.col_cred_button span:nth-child(2) { 
font-size: 28px; 
font-weight: 700; 
line-height: 1em; 
margin-top: -10px; 
} 
 
.img-block img{ 
margin-top: 10px; 
margin-bottom: 5px; 
} 
 
#logo{ 
    margin-left: 15px; 
} 
.icon-bar { 
    background-color: #fff; 
    display: block; 
    width: 22px; 
    height: 2px; 
        margin: 3px 0px 3px 0; 
} 
/* */ 
/* адаптив, дальше только адаптив */ 
/* */ 
@media(max-width: 1200px) { 
.filter_container { 
    width: 322px!important;    
    margin-right: 0; 
} 
 
.rating_thumbnail { 
display:none;	 
} 
 
.img-block { 
    width: 100px; 
} 
.line > div:first-child { 
    width: 120px; 
} 
.zaym_result, 
.zaym_com, 
 .zaym_vipl, 
.line1 > div:first-child:after, 
.line1 > div:nth-child(2):after { 
    font-size: 24px; 
} 
.line2{ 
	font-size: 17px; 
} 
 
.line > div:nth-child(2) { 
    width: 110px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
 
.line > div:nth-child(3) { 
    padding-left: 12px; 
    width: auto; 
} 
 
.col_cred_button { 
    right: 10px; 
} 
aside#wysija-2 { 
 
} 
 
.subscr-sidebar { 
        border: 1px dashed #cdcdcd; 
    background: #fff; 
} 
 
input[type="text"], input[type="email"] { 
    min-width: auto; 
 
} 
 
} 
 
@media(max-width: 992px) { 
 
.rating_thumbnail { 
    display: block; 
} 
 
aside#wysija-2 { 
    border: 1px dashed #cdcdcd; 
    background: #fff; 
} 
 
aside#wysija-2 .widget-title { 
    margin-right: -2px; 
} 
 
aside#wysija-2 .widget-title:after { 
    right: -1px; 
    top: 5px; 
} 
 
.subscr-sidebar { 
        background: rgba(255, 255, 255, 0); 
    border: 0px dashed #cdcdcd; 
} 
 
.raiting-sidebar { 
    margin-left: -4px; 
    width: 48% !important; 
     
}	 
aside#wysija-2 { 
border: 1px dashed #cdcdcd; 
    background: #fff; 
} 
aside#wysija-2 .widget-title { 
    margin-top: 18px; 
    margin-left: 15px; 
} 
 
.widget_wysija_cont{ 
    padding-bottom: 20px; 
} 
.subscr-sidebar { 
	    margin-left: -4px; 
    width: 48% !important; 
	float: right!important; 
} 
 
.main-navigation .menu li { 
    margin: 0 10px; 
} 
.container.carousel { 
	margin-top: 30px; 
} 
 
 
.cl-effect-1 a::after, 
.cl-effect-1 a::before { 
    font-family: open sans-serif; 
    position: relative; 
    top: -2px; 
    margin-left: 0; 
    content: ''; 
    -webkit-transform: translateX(-20px); 
    -moz-transform: translateX(-20px); 
    transform: translateX(-20px); 
} 
.main-navigation .menu li:last-child { 
    margin: 0 0 0 10px; 
} 
 
.textmain_container h1 { 
    font-family: Gilroy; 
    color: #ffffff; 
    font-size: 38px; 
    font-weight: 300; 
    line-height: 55px; 
} 
 
.textmain_container ul.main_ul li { 
    font-family: Gilroy; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 300; 
    margin: 12px 0; 
} 
 
} 
 
@media screen and (min-width: 768px) { 
.menu-toggle { 
display: none; 
} 
.main-navigation ul { 
display: inline-block; 
} 
 
 
 
} 
@media screen and (max-width: 767px) { 
	 
	#form-wysija-2 { 
    padding: 0 20px; 
} 
.main-navigation .menu li  { 
    margin: 5px 10px; 
    display: block; 
    float: none; 
    text-align: left; 
} 
button.menu-toggle { 
float: right;	 
    outline: none!important; 
} 
.main-navigation.toggled ul { 
    z-index: 100; 
    width: 100%; 
    left: 0; 
    top: 3px; 
    padding: 5px 0; 
    margin-right: 0; 
} 
 
.main-navigation { 
    display: block; 
    width: 100%; 
    text-align: left; 
    margin-top: 10px; 
} 
 
.cl-effect-1 a::after, .cl-effect-1 a::before { 
display:none; 
} 
 
.main-navigation.cl-effect-1 { 
	 
} 
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { 
    border-color: #ccc #bbb #aaa; 
    box-shadow:none; 
} 
 
.filter_container { 
    width: 100%!important; 
    margin-right: 0px; 
	float: left !important; 
 
} 
 
#masthead { 
    height: auto; 
	    
} 
 
.credit_unit { 
    width: 49%; 
} 
 
.active_offer .credit_unit:nth-child(2n),  
.no_active_offer .credit_unit:nth-child(2n) { 
margin-right: 10px; 
padding: 5px 20px 25px; 
} 
 
.col_cred_button { 
    position: relative; 
} 
 
.img-block { 
       width: 100%; 
} 
 
.img-block img { 
    display: block; 
    margin: 10px auto 5px; 
} 
 
.img-block span { 
    color: #3f424a; 
    font-size: 17px; 
    text-align: center; 
    font-weight: 700; 
} 
 
.line > div{ 
    width: 100%!important; 
	text-align: center; 
	    margin-bottom: 20px; 
} 
 
.text_unit { 
    font-size: 16px; 
	display: inline; 
} 
 
.line1 > div:first-child:after { 
    content: "+"; 
    font-family: Gilroy; 
    color: #3e6372; 
    font-size: 33px; 
    position: absolute; 
    right: auto; 
    bottom: -35px; 
    left: 50%; 
    margin-left: -6px; 
} 
 
.line1 > div:nth-child(2):after { 
    content: "="; 
    font-family: Gilroy; 
    color: #3e6372; 
    font-size: 33px; 
    position: absolute; 
    right: auto; 
    bottom: -35px; 
    left: 50%; 
    margin-left: -6px; 
} 
 
.line > div:nth-child(3) { 
    margin-bottom:5px; 
} 
.line2> div { 
    width: 100%!important; 
    text-align: center; 
    margin-bottom: 5px; 
} 
 
.col_cred_button { 
    float: none; 
    width: 170px; 
    position: relative; 
    right: 0!important; 
    top: 0px; 
    margin: 0 auto; 
} 
 
.col_cred_button a { 
    width: 100%; 
	    margin-top: 10px; 
} 
 
.subscr-sidebar { 
	background: none; 
} 
 
 
.raiting-sidebar h3:after, 
#wysija-2 .widget-title:after  { 
    display:none; 
} 
 
 
#wysija-2 .widget-title { 
	margin-right: 0 !important; 
} 
 
#wysija-2 { 
    padding-bottom: 20px; 
    margin: 0 -15px; 
} 
 
 
ul { 
    margin-left: 0px; 
    padding-left: 17px; 
} 
 
.textmain_container h1 { 
font-family: Gilroy; 
color: #ffffff; 
font-size: 30px; 
font-weight: 300; 
line-height: 36px; 
} 
 
.textmain_container ul.main_ul li { 
    font-family: Gilroy; 
    color: #ffffff; 
    font-size: 14px; 
    font-weight: 300; 
    margin: 6px 0; 
} 
 
} 
 
@media screen and (max-width: 600px) { 
.credit_unit { 
    width: 100%; 
	max-width: 320px; 
} 
 
.raiting-sidebar,  
.subscr-sidebar { 
    margin-left: 0px; 
    width: 100% !important; 
} 
 
}
<link rel='stylesheet' id='start-style-css'  href='https://creditop.com.ua/wp-content/themes/credit/style.css?ver=4.7.4' type='text/css' media='all' /> 
<link rel='stylesheet' id='bootstrap-css'  href='https://creditop.com.ua/wp-content/themes/credit/css/bootstrap.min.css?ver=4.7.4' type='text/css' media='all' /> 
 
 
	<div id="content" class="site-content container"> 
 
	<div id="primary" class="content-area"> 
		<main id="main" class="site-main  col-md-9" role="main"> 
 
<h3>Кредитные <b>организации</b></h3> 
					 
 
<div class="credit_unit credit_unit_1" > 
 
<!-- Лейблы --> 
   
 
	<img src="https://creditop.com.ua/wp-content/uploads/2017/04/label_365.png" class="leybl_img" /> 
<!-- Лейблы --> 
 
 
		 
	<div class="col_cred_img img-block"> 
		<a href="/" target="_blank" >	 
			<img width="140" height="87" src="https://creditop.com.ua/wp-content/uploads/2017/04/more-groshej-140x87.jpg" class="attachment-medium size-medium wp-post-image" alt="" srcset="https://creditop.com.ua/wp-content/uploads/2017/04/more-groshej-140x87.jpg 140w, https://creditop.com.ua/wp-content/uploads/2017/04/more-groshej-74x46.jpg 74w, https://creditop.com.ua/wp-content/uploads/2017/04/more-groshej.jpg 164w" sizes="(max-width: 140px) 100vw, 140px" />		</a>	 
		<span>Море Грошей</span> 
	</div> 
 
	<div class="col_cred_center"> 
		<!-- 1 --> 
		<div class="line line1"> 
			<div> 
				<span class="text_unit">Сумма займа</span> 
				<span class="zaym_result"></span><span class="text_unit_small">грн</span> 
			</div> 
			<!-- 1 --> 
			<!-- 1 --> 
			<div> 
				<span class="text_unit">Комиссия</span> 
				<span class="zaym_com zaym_com_1"></span><span class="text_unit_small">грн</span> 
			</div> 
			<!-- 1 --> 
				<!-- 1 --> 
			<div> 
				<span class="text_unit">К выплате</span> 
				<span class="zaym_vipl zaym_vipl_1"></span><span class="text_unit_small">грн</span> 
			</div> 
		</div> 
	<!-- 1 --> 
 
		<div class="clearfix"></div> 
		<div class="line line2"> 
			<div>	 
				<span class="text_unit">1-й кредит:</span> 
				<span class="min_summ">500</span>-<span class="max_summ">10000</span><span class="text_unit_small">грн</span> 
				<input type="hidden"  class="min_summ_1" value ="500" /> 
				<input type="hidden"  class="max_summ_1" value ="10000" /> 
			<!-- 2 --> 
			</div>	 
			<!-- 2 --> 
			<div> 
				<span class="text_unit">Ставка:</span> 
				<span >0.8 %</span> 
				<input type="hidden"  class="zaym_com_value_1" value ="0.8" /> 
			</div> 
		<!-- 2 --> 
		 
		<!-- 2 --> 
			<div> 
				<span class="text_unit">Срок:</span> 
				<span class="min_day">5</span>-<span class="max_day">70</span> 
				<span class="text_unit_small">дней</span> 
				<input type="hidden"  class="min_day_1" value ="5" /> 
				<input type="hidden"  class="max_day_1" value ="70" /> 
			</div>	 
		<!-- 2 -->	 
		 
	</div> 
	 
	</div> 
	<div class="col_cred_button"> 
		<a href="/" target="_blank" ><span>Оформить</span><span>заявку</span></a> 
	</div> 
 
</div> 
					 
 
<div class="credit_unit credit_unit_19" > 
 
<!-- Лейблы --> 
 
<!-- Лейблы --> 
 
		 
	<div class="col_cred_img img-block"> 
		<a href="/" target="_blank" >	 
			<img width="140" height="87" src="https://creditop.com.ua/wp-content/uploads/2017/05/miloan.jpg" class="attachment-medium size-medium wp-post-image" alt="" srcset="https://creditop.com.ua/wp-content/uploads/2017/05/miloan.jpg 140w, https://creditop.com.ua/wp-content/uploads/2017/05/miloan-74x46.jpg 74w" sizes="(max-width: 140px) 100vw, 140px" />		</a>	 
		<span>Miloan</span> 
	</div> 
 
	<div class="col_cred_center"> 
		<!-- 1 --> 
		<div class="line line1"> 
			<div> 
				<span class="text_unit">Сумма займа</span> 
				<span class="zaym_result"></span><span class="text_unit_small">грн</span> 
			</div> 
			<!-- 1 --> 
			<!-- 1 --> 
			<div> 
				<span class="text_unit">Комиссия</span> 
				<span class="zaym_com zaym_com_19"></span><span class="text_unit_small">грн</span> 
			</div> 
			<!-- 1 --> 
				<!-- 1 --> 
			<div> 
				<span class="text_unit">К выплате</span> 
				<span class="zaym_vipl zaym_vipl_19"></span><span class="text_unit_small">грн</span> 
			</div> 
		</div> 
	<!-- 1 --> 
 
		<div class="clearfix"></div> 
		<div class="line line2"> 
			<div>	 
				<span class="text_unit">1-й кредит:</span> 
				<span class="min_summ">200</span>-<span class="max_summ">3000</span><span class="text_unit_small">грн</span> 
				<input type="hidden"  class="min_summ_19" value ="200" /> 
				<input type="hidden"  class="max_summ_19" value ="3000" /> 
			<!-- 2 --> 
			</div>	 
			<!-- 2 --> 
			<div> 
				<span class="text_unit">Ставка:</span> 
				<span >0.5 %</span> 
				<input type="hidden"  class="zaym_com_value_19" value ="0.5" /> 
			</div> 
		<!-- 2 --> 
		 
		<!-- 2 --> 
			<div> 
				<span class="text_unit">Срок:</span> 
				<span class="min_day">1</span>-<span class="max_day">30</span> 
				<span class="text_unit_small">дней</span> 
				<input type="hidden"  class="min_day_19" value ="1" /> 
				<input type="hidden"  class="max_day_19" value ="30" /> 
			</div>	 
		<!-- 2 -->	 
		 
	</div> 
	 
	</div> 
	<div class="col_cred_button"> 
		<a href="/" target="_blank" ><span>Оформить</span><span>заявку</span></a> 
	</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте beauty-health.com.ua
ТОП-10
READ ALSO
Центрирование элементов
CSS

Центрирование элементов

Как размещать блоки по центру, чтобы при изменении масштаба они оставались в центре? Пример - тот же самый вк

 338
FATAL EXCEPTION: AsyncTask #1 что то в jsonparser
MySQL

FATAL EXCEPTION: AsyncTask #1 что то в jsonparser

Пытаюсь переделать под себя проект как работать с mysql в androidВсе переписал под себя, но выходить данная ошибка

 436
Как получить sql-запрос?
MySQL

Как получить sql-запрос?

делаю запрос:

 275
Почему не срабатывает UPDATE?
MySQL

Почему не срабатывает UPDATE?

почему если передать несколько записей в строке, обновляются все записи:

 541