maxresdefault 60

Creamos un formulario de suscripción (Mi primer página Web)

Quizás los clientes potenciales no quieran que les desarrollemos un proyecto pero tal vez quieran estar al pendiente de nosotros. Además hay un formulario de suscripción al lado del menu que habia quedado pendiente.

Codigo para crear un formulario de suscripción: https://github.com/programadornovato/MiPaginaWeb/commit/74c2efe81dd8d9a855ae24babef702c2a56f19ab

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .fondo {
            background-image: url("images/bg-1.png");
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .card:hover,
        .card:focus {
            background-color: #0d6efd;
            color: #fff;
        }
    </style>
    <title>Programador Novato</title>
</head>

<body>
    <!-- cabecera-->
    <div class="row fondo align-items-center">
        <h1 class="text-white text-center">Programador Novato</h1>
    </div>
    <!-- menu-->
    <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="images/pn.jpg" width=30px;></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#habilidades">Habilidades</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#yo">Yo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contacto">Contacto</a>
                    </li>
                </ul>
                <form class="simple_form form form-vertical d-flex" id="new_subscriber"
                    action="https://programadornovato.ipzmarketing.com/f/5AIRO8yEgGM" accept-charset="UTF-8"
                    method="post">


                    <div class="form-group email required subscriber_email">
                        <input
                            class="form-control string email required" required="required" aria-required="true"
                            type="email" name="subscriber[email]" id="subscriber_email" placeholder="Ingresa tu email" /></div>


                    <input type="text" name="anotheremail" id="anotheremail" style="position: absolute; left: -5000px"
                        tabindex="-1" autocomplete="off" />
                    <div class="submit-wrapper">
                        <input type="submit" name="commit" value="Enviar" class="btn btn-outline-success"
                            data-disable-with="Procesando" />
                    </div>
                </form>

            </div>
        </div>
    </nav>
    <!--Habilidades-->
    <div class="container mt-3 text-center" id="habilidades">
        <h1 class="text-center text-uppercase fst-italic fw-bold">Habilidades</h1>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/c++.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">C++</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/csharp.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">csharp</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/css.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">css</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/html.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">html</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/js.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">js</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/kotlin.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">kotlin</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">Ver mas</a>
            </div>
        </div>
    </div>
    <!-- contenido-->
    <div class="container mt-3" id="yo">
        <h1 class="text-center text-uppercase fst-italic fw-bold">Algo de mi</h1>
        <p class="bg-primary w-25 float-start p-3 me-2 d-none d-sm-block" style="text-align:justify">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis debitis, quibusdam incidunt eum
            necessitatibus excepturi iusto itaque unde delectus facere!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
    </div>
    <!--Contacto-->
    <div class="container" id="contacto">
        <h1 class="text-center text-uppercase fst-italic fw-bold">Contacto</h1>
        <div class="row align-items-center">
            <div class="col-12 col-md-6 form-group">
                <form class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-md-2"><label for="">Nombre</label></div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" placeholder="Ingresa tu Nombre" name="nombre"
                                required>
                            <div class="invalid-feedback">Falta nombre</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"><label for="">Email</label></div>
                        <div class="col-md-10">
                            <input type="email" class="form-control" placeholder="Ingresa tu Email" name="email"
                                required>
                            <div class="invalid-feedback">Email invalido</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"><label for="">Proyecto</label></div>
                        <div class="col-md-10">
                            <select class="form-select" multiple required>
                                <option>Programacion</option>
                                <option>Diseño web</option>
                                <option>DevPos</option>
                                <option>Marketing</option>
                            </select>
                            <div class="invalid-feedback">Seleccione un proyecto</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"><label for="">Pago</label></div>
                        <div class="col-md-10">
                            <div class="form-check form-switch">
                                <label for="Transferencia" class="form-check-label">Transferencia</label>
                                <input type="radio" id="Transferencia" name="pago" class="form-check-input" required>
                                <div class="invalid-feedback">Seleccione un tipo de pago</div>
                            </div>
                            <div class="form-check form-switch">
                                <label for="Paypal" class="form-check-label">Paypal</label>
                                <input type="radio" id="Paypal" name="pago" class="form-check-input" required>
                                <div class="invalid-feedback">Seleccione un tipo de pago</div>
                            </div>
                            <div class="form-check form-switch">
                                <label for="Bitcoin" class="form-check-label">Bitcoin</label>
                                <input type="radio" id="Bitcoin" name="pago" class="form-check-input" required>
                                <div class="invalid-feedback">Seleccione un tipo de pago</div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-9"></div>
                        <div class="col-3">
                            <button class="btn btn-primary">Enviar</button>
                        </div>

                    </div>
                </form>
            </div>
            <div class="col-12 col-md-6">
                <img src="images/equipo.jpg" class="img-fluid img-thumbnail rounded">
            </div>
        </div>
    </div>
    <!--Pie de pagina-->
    <div class="container p-2 text-center">
        Copy right <a href="https://programadornovato.com" target="_blank">ProgramadorNovato</a>
    </div>
    <!-- Detalle de habilidad Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">C++</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="images/lenguajes/c++.png" class="card-img-top img-fluid" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum ducimus, eius nesciunt
                        aperiam beatae omnis fugit esse repellendus voluptatem.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <script>
        var bitcoin = document.getElementById("Bitcoin");
        bitcoin.indeterminate = true;
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>

</html>

🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/watch?v=s47z_qh16j4&list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn&ab_channel=programadornovato
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/watch?v=_paV6qQ-a4M&list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT&ab_channel=programadornovato
🎦[Curso] Javascript🔥 de 0 a 100: https://www.youtube.com/watch?v=fwtaVaiR-Kg&list=PLCTD_CpMeEKQZtB8mNm0J1qWmHdZ2QUt-&ab_channel=programadornovato

Anterior tutorial

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *