Check out my progress so far: jsfiddle.net/warpoluido/JkDhN/175/
I'm attempting to adjust the height of the green section to be slightly higher than the blue (or similar color) one, as shown in the image.
The design needs to remain responsive.
<div class="modulo-titulopagina_verde">
<header class="modulo-titulopagina">
<div class="page-header">
<div class="container">
<div class="col-12 col-offset-1 col-lg-10 col-lg-offset-1">
<h1><span>{galeria}</span> {Mod_TituloTitulo}</h1>
</div>
</div>
<!--BEGIN MOD_TITULO_SUBTITULO -->
<!-- END MOD_TITULO_SUBTITULO -->
</div>
</div>
</header>
CSS:
.modulo-titulopagina {
position:relative;
background: #166270; /* Old browsers */
height: 65px;
width:33%;
-moz-border-radius-bottomtop: 50px;
border-top-right-radius: 50px;
}
.modulo-titulopagina_verde {
background: none repeat scroll 0 0 #72C267;
height: 65px;
position: relative;
width: 100%;
}
.modulo-titulopagina h1 {
color: #FFFFFF;
font-family: 'myriadpro-light';
font-size: 34px;
margin: -10px 0 0;
text-align: center;
}