Skip to main content
se eliminaron 72 caracteres en el cuerpo
Origen Enlace
Alexcertz
  • 47
  • 2
  • 11

introducir la descripción de la imagen aquí [![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">Construyendo<br>0">Lorem SmartIpsum Cities<Dolor Sit Amet </h1>
                    <h2 class="m-4 paragraphs__subtitle">Plataforma de estacionaiento<br> medidoparagraphs__subtitle">Lorem yIpsum getiónDolor deSit tránsito<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>
<!-- /////////////////////////////////////////////////////// -->

introducir la descripción de la imagen aquí

<!-- 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">Construyendo<br> Smart Cities</h1>
                    <h2 class="m-4 paragraphs__subtitle">Plataforma de estacionaiento<br> medido y getión de tránsito</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>
<!-- /////////////////////////////////////////////////////// -->

[![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>
<!-- /////////////////////////////////////////////////////// -->

pd: el bannerbanner siempre debe ocupar la totalidad del heightheight en diferentes monitores, y obvio que se ajuste el texto y las imagenesimágenes a esa resolucionresolución, pero en vez de eso, se achica el texto, las imagenesimágenes se achican o se mueven un poco hacia arriba.

no se que mas hacer :(, quizasquizás como un amigo dice, con javascriptjavascript se solucionariasolucionaría, pero no soy muy diestro en js.

eso sin contar que tampoco puedo integrar midnight.jsmidnight.js en esta pagina web para que cambie el color del nav y el color de texto e icono.

pd: el banner siempre debe ocupar la totalidad del height en diferentes monitores, y obvio que se ajuste el texto y las imagenes a esa resolucion, pero en vez de eso, se achica el texto, las imagenes se achican o se mueven un poco hacia arriba.

no se que mas hacer :(, quizas como un amigo dice, con javascript se solucionaria, 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.

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.

se añadieron 665 caracteres en el cuerpo
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35

/*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;

/*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%;

}

.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__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) {



}

@media (min-width: 800px) {

    .images__phone,
    .images__capture {
        left: 30vw;
    }

}

@media (min-width: 992px) {



}


@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) {


}

@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*/

}

@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/

/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/

/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*/
Origen Enlace
Alexcertz
  • 47
  • 2
  • 11
Loading