[![introducir la descripción de la imagen aquí][1]][1]
[1]:
<!-- Banner -->
<section class="banner">
<div class="container-fluid banner__container" >
<div class="row banner__row">
<div class="col-12 col-lg-6 banner__paragraphs">
<div class="paragraphs__container">
<h1 class="m-4 hero-heading paragraphs__title m-0">Lorem Ipsum Dolor Sit Amet </h1>
<h2 class="m-4 paragraphs__subtitle">Lorem Ipsum Dolor Sit Amet</h2>
</div>
<button class="ml-4 paragraphs__button shadow btn btn-secondary">Primary</button>
</div>
<div class="col-12 col-lg-6 banner__media">
<div class="banner__images">
<div class="images__phone"></div>
<div class="images__capture"></div>
</div>
</div>
</div>
</div>
</section>
<!-- /////////////////////////////////////////////////////// -->
/css/
/*banner */
/* Height control */
.banner {
margin-top: 100px;
padding: 0;
/*overflow: hidden;*/
background-color: rgb(2, 117, 216);
}
.banner__container,
.banner__row {
min-height: 100%;
}
/* --- paragraphs --- */
.paragraphs__subtitle {
font-size: 'Open Sans';
color: #ffffff;
font-size: 30px;
}
.banner__paragraphs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.paragraphs__title,
.paragraphs__subtitle {
text-align: center;
}
/* --- media ---*/
.banner__media {
min-height: 530px;
padding: 0; /* rid bootstrap padding*/
width: 100%;
}
.banner__images {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.images__phone {
position: absolute;
z-index: 200;
height: 130%;
width: 100%;
background-image: url('../images/iphone.png');
background-size: cover;
animation-name: slideInUp;
animation-delay: 0.4s;
animation-duration: 0.75s;
}
.images__capture {
position: absolute;
z-index: 100;
height: 135%;
width: 100%;
background-image: url('../images/admin.png');
background-size: cover;
animation-name: slideInUp;
animation-delay: 0.2s;
animation-duration: 0.75s;
}
.images__phone,
.images__capture {
top: 25px;
}
@media (min-width: 700px) {
.images__phone,
.images__capture {
left: 20vw;
}
}
@media (min-width: 800px) {
.images__phone,
.images__capture {
left: 30vw;
}
}
@media (min-width: 992px) {
.banner {
margin-top: 60px;
max-height: calc(100vh - 60px)
}
.banner__paragraphs,
.banner__media {
max-height: calc(100vh - 60px);
}
.paragraphs__title,
.paragraphs__subtitle {
text-align: left;
}
.images__capture {
height: 130%;
}
.images__phone,
.images__capture {
top: 25px;
left: 0;
}
.banner__paragraphs {
align-items: flex-start;
}
}
@media (min-width: 1200px) {
.images__capture {
height: 135%;
}
.images__capture,
.images__phone {
left: 10%;
}
}
@media (min-width: 1300px) {
.images__capture,
.images__phone {
left: 20%;
}
}
@media (min-width: 1600px) {
.images__capture,
.images__phone {
left: 40%;
}
.paragraphs__title,
.paragraphs__subtitle {
margin: 0;
padding: 0;
}
}
/*banner*/
hay un problema que en otras resoluciones los elementos de la imagen del capture y del celular se mueven y siempre deberian mantener esa proporcion y posicion en cualquier resolucion, y en movil las imageenes se deberian desplazar hacia abajo pero en la misma posicion. y justo hasta el boton azul.
pd: el banner siempre debe ocupar la totalidad del height en diferentes monitores, y obvio que se ajuste el texto y las imágenes a esa resolución, pero en vez de eso, se achica el texto, las imágenes se achican o se mueven un poco hacia arriba.
no se que mas hacer :(, quizás como un amigo dice, con javascript se solucionaría, pero no soy muy diestro en js.
eso sin contar que tampoco puedo integrar midnight.js en esta pagina web para que cambie el color del nav y el color de texto e icono.
please , help!.