📣 Seu anúncio aqui? Anuncie no ForoBeta

Criar landing page com Bootstrap em tela cheia e scroll de uma página

  • Autor Autor carlostinca
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
carlostinca

carlostinca

Dseda
Social Media
Verificación en dos pasos activada
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
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Hola carlostinca

Tienes tu landing page UP o estas trabajando en local?

Saludos
 
necesitas que la página descienda al presionar el boton de desplazamiento?
Me podrias detallar lo que necesitas.

Saludos
 
Última edição:
ctapia disse:
necesitas que la página descienda al presionar el boton de desplazamiento?
Me podrias detallar lo que necesitas.

Saludos
Clique 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!
 
carlostinca disse:
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!
Clique para expandir...

Esto debiese solucionar tú problema:

Inserir CODE, HTML ou 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
 
ctapia disse:
Esto debiese solucionar tú problema:

Inserir CODE, HTML ou 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
Clique 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.
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

K Johnson
Tutorial: Criar landing page da Netflix V2 e ganhar dinheiro
2 3
Respostas
51
Visitas
7K
Fiji
F
Voltar
Topo