Crear landing page con Bootstrap en pantalla completa y scroll de una página

carlostinca

carlostinca Seguir

Dseda
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
18 Jun 2011
Mensajes
1.156
Hola gente,

Una pregunta, estoy teniendo problemas para poder crear una landing page con estas características:

1) Son dos "secciones", cada una ocupa todo el ancho y alto del navegador.
2) En la primera hay un h1 y un CTA que llevaría a la página de abajo.
3) Ahi hay un copy y un formulario para descargar un ebook.

Son un perejil para estos del HTML y CSS. Estuve toda la semana probando, buscando guías y demás, pero no logré lo que quería (y cuando lo conseguia, aparecian otros errores).

Lo que más me resultó fue utiliza un javascript para asignar height del div, pero el responsive de las segunda sección se metia como abajo de la primera.

¿Alguien tiene algún tutorial que explique esto? ¿O a lo mejor algún código en donde haya trabajado esto para yo ver como se hizo?.

Gracias,
Carlos
 
packetmanxd

packetmanxd

Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Jul 2014
Mensajes
628
Hola carlostinca

Tienes tu landing page UP o estas trabajando en local?

Saludos
 
packetmanxd

packetmanxd

Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Jul 2014
Mensajes
628
necesitas que la página descienda al presionar el boton de desplazamiento?
Me podrias detallar lo que necesitas.

Saludos
 
Última edición:
carlostinca

carlostinca

Dseda
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
18 Jun 2011
Mensajes
1.156
ctapia dijo:
necesitas que la página descienda al presionar el boton de desplazamiento?
Me podrias detallar lo que necesitas.

Saludos
Hacer clic para expandir...

Claro. En realidad ya hace eso, y el código del scroll ya lo sé poner.

El problema es que cuando achico la pantalla (imagino que me inicio en un smartphone), todas las secciones se desordenan y la segunda sección se mete abajo.

Si se tienes algún ejemplo por ahi que use Bootstrap que pueda mirar para ver como lo hace sería genial.

¡Gracias!
 
packetmanxd

packetmanxd

Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Jul 2014
Mensajes
628
carlostinca dijo:
Claro. En realidad ya hace eso, y el código del scroll ya lo sé poner.

El problema es que cuando achico la pantalla (imagino que me inicio en un smartphone), todas las secciones se desordenan y la segunda sección se mete abajo.

Si se tienes algún ejemplo por ahi que use Bootstrap que pueda mirar para ver como lo hace sería genial.

¡Gracias!
Hacer clic para expandir...

Esto debiese solucionar tú problema:

Insertar CODE, HTML o PHP: 
<!-- Modificación -->     
       <div class="container-fluid" >
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<h1>¿Eres emprendedor, ofreces servicios, o tienes un negocio?</h1>
				</div>
				<div class="col-md-2"></div>
           </div>
       </div>
      
       <div class="container-fluid" >
            <div class="row">
			    <div class="col-md-12">
				  <i class="fa fa-angle-double-down fa-5x"></i> 
			    </div>
            </div>
       </div>

       <div class="container-fluid">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8 espacio">
					<h1>Quieres entrar al mundo digital pero tienes dudas como...</h1>
				</div>
				<div class="col-md-2"></div>
			</div>
       </div>

       <div class="container-fluid">
			<div class="row">
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé para qué sirve tener una página web.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé que es una web autoadministrable, ecommerce, y muchos menos utilizarlas.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé como Facebook o Twitter me van a dar ventas.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé como dar a conocer mis products en la red.</h1>
				</div>
			</div>
        </div>
          
        <div class="container-fluid">  
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<h1>¡Sigue leyendo y en <b>menos de 5 minutos</b> resolveras estas y otras dudas!.</h1>
				</div>
				<div class="col-md-2"></div>
			</div>
         </div>
         
         <div class="container-fluid">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
                        <a href="#seccion-2" class="btn btn-lg btn-outline">
                            <i class="fa fa-angle-double-down"></i> Siguiente (1 de 5)
                        </a>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>

         <div class="container-fluid">
           <div class="row">
		      <div class='pantalla-2 borde-prueba' id='seccion-2'>

				<div class="flecha-seccion"></div>
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<i class="fa fa-angle-double-down fa-5x"></i> 
				</div>
				<div class="col-md-2"></div>
			</div>
		  </div>
        </div>    
<!-- Fin Modificación -->

Saludos
 
carlostinca

carlostinca

Dseda
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
18 Jun 2011
Mensajes
1.156
ctapia dijo:
Esto debiese solucionar tú problema:

Insertar CODE, HTML o PHP: 
<!-- Modificación -->     
       <div class="container-fluid" >
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<h1>¿Eres emprendedor, ofreces servicios, o tienes un negocio?</h1>
				</div>
				<div class="col-md-2"></div>
           </div>
       </div>
      
       <div class="container-fluid" >
            <div class="row">
			    <div class="col-md-12">
				  <i class="fa fa-angle-double-down fa-5x"></i> 
			    </div>
            </div>
       </div>

       <div class="container-fluid">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8 espacio">
					<h1>Quieres entrar al mundo digital pero tienes dudas como...</h1>
				</div>
				<div class="col-md-2"></div>
			</div>
       </div>

       <div class="container-fluid">
			<div class="row">
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé para qué sirve tener una página web.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé que es una web autoadministrable, ecommerce, y muchos menos utilizarlas.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé como Facebook o Twitter me van a dar ventas.</h1>
				</div>
				<div class="col-md-3 cuadrados-razones">
					<h2>No sé como dar a conocer mis products en la red.</h1>
				</div>
			</div>
        </div>
          
        <div class="container-fluid">  
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<h1>¡Sigue leyendo y en <b>menos de 5 minutos</b> resolveras estas y otras dudas!.</h1>
				</div>
				<div class="col-md-2"></div>
			</div>
         </div>
         
         <div class="container-fluid">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
                        <a href="#seccion-2" class="btn btn-lg btn-outline">
                            <i class="fa fa-angle-double-down"></i> Siguiente (1 de 5)
                        </a>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>

         <div class="container-fluid">
           <div class="row">
		      <div class='pantalla-2 borde-prueba' id='seccion-2'>

				<div class="flecha-seccion"></div>
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<i class="fa fa-angle-double-down fa-5x"></i> 
				</div>
				<div class="col-md-2"></div>
			</div>
		  </div>
        </div>    
<!-- Fin Modificación -->

Saludos
Hacer clic para expandir...

Hmmm, interesante. ¿Cual es la lógica detrás de esto? ¿Cada row debe tener un container propio?.

Mil gracias por la ayuda.
 
Hay que estar conectado o registrado para responder aquí.
Arriba