Footer Medios y Redes

CSS CODE

.footer-widgets .footer-widgets-1 .redessociales h2,
.footer-widgets .footer-widgets-1 .mediosdepago h2{
	font-size: 14px;
    line-height: 1.25;
    text-align: left;
    color: #fff;
    font-weight: 300;
}
.footer-widgets .footer-widgets-1 .redessociales{
	margin-top: 21px
}
.footer-widgets .footer-widgets-1 .redessociales ul{
	padding-left: 15px;
}

.footer-widgets  .footer-widgets-1 .redessociales ul{
	padding-left: 3px;
    gap: 7px
}
.footer-widgets .footer-widgets-1 .redessociales li{
	border-radius: 5px;
    background-color: #189ab0;
    text-align: center;
    width: 26px;
    height: 23px;
    padding-top: 5px;	
}
.footer-widgets .footer-widgets-1 .mediosdepago ul,
.footer-widgets  .footer-widgets-1 .redessociales ul{
	display: flex;
	flex-direction: row;
	padding-top: 12px;
}
.footer-widgets .footer-widgets-1 .mediosdepago ul li,
.footer-widgets .footer-widgets-1 .redessociales ul li{
	margin-right: 5px;
}
.footer-widgets .footer-widgets-1 .mediosdepago ul li:last-child,
.footer-widgets .footer-widgets-1 .redessociales ul li:last-child{
	margin-right: 0;
}
.footer-widgets .footer-widgets-1 .mediosdepago img {
	width: auto;
	max-height: 29px;
}

HTML CODE

<div class="textwidget custom-html-widget"><div class="mediosdepago">
	<h2>MEDIOS DE PAGO</h2>
	<ul>
		<li><img src="/wp-content/uploads/2023/06/visa-icon.jpg" alt="Visa"></li>
		<li><img src="/wp-content/uploads/2023/06/mastercard-icon.jpg" alt="MasterCard"></li>
		<li><img src="/wp-content/uploads/2023/06/amex-icon.jpg" alt="AmericanExpress"></li>
		
	</ul>
</div>

<div class="redessociales">
	<h2>REDES SOCIALES</h2>
	<ul>
		<li><a href="https://www.facebook.com/maradentroperu" title="Facebook" target="_blank" rel="noopener"><i class="fa-brands fa-facebook-f"></i></a></li>
		<li><a href="https://www.instagram.com/maradentroperu/" title="Instagram" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i></a></li>
		<li><a href="https://twitter.com/MarAdentroPeru" title="Twitter" target="_blank" rel="noopener"><i class="fa-brands fa-twitter"></i></a></li>
	</ul>
</div></div>

Developer Comments

no comment

Designer Comments

no comment