Diseño de un carrusel con formulario

¿Cómo hacer un carrusel en Bootstrap con un formulario?

VIDEO ¿Cómo hacer un carrusel en Bootstrap con un formulario?

Para diseñar un formulario responsive encima de un carrusel de imágenes usando Bootstrap 4.5 vamos a usar las propiedades de la clase Card, veamos.

Para diseñar un formulario responsive encima de un carrusel de imágenes usando Bootstrap 4.5 vamos a usar las propiedades de la clase Card, veamos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CARRUSEL CON FORMULARIO BOOTSTRAP 4.5 CODEA APP</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
    .carousel-item{
        min-height: 400px;
        background-size: cover;
    }
    
</style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">CODEA</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Tutoriales</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Blog</a>
            </li>
          </ul>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide card" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active" style="background-image: url(img/slide_1.jpg);">
            
          </div>
          <div class="carousel-item" style="background-image: url(img/slide_2.jpg);">
            
          </div>
          <div class="carousel-item" style="background-image: url(img/slide_3.jpg);">
            
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

        <div class="card-img-overlay">
            <div class="container">
                <div class="row justify-content-end align-items-center">
                    <div class="col-sm-8 d-sm-block d-none">
                        <h1 class="text-white">CARRUSEL CON FORMULARIO BOOTSTRAP 4.5</h1>
                    </div>
                    <div class="col-sm-4">
                        <div class="card shadow-lg">
                            <div class="card-body">
                                <form action="">
                                    <div class="form-group">
                                        <h2 class="h4 text-center text-info">Incríbete al Sorteo!!</h2>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Nombre:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Email:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Celular:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Dirección:">
                                        </div>
                                        <input type="submit" value="INSCRIBIRME" class="btn btn-outline-success btn-block">
        
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


      </div>    
      

    
</body>
</html>

 

¿Quieres descargar el código fuente Diseño de un carrusel con formulario?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 50 veces | Publicado hace 4 días

¿TE GUSTARÍA APRENDER A DESARROLLAR UNA APP DELIVERY DE ABARROTES PARA UNA TIENDA?

Mira el temario del curso en el siguiente link
Tienda Delivery en Flutter y Laravel

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020