Validamos opciones con checkbox y radios (Mi primer página Web)
Debemos informar a nuestro clientes las diferentes formas en las que podemos recibir pagos, una opcion muy elegante para hacerlo es con opciones con checkbox y radios. Así que agregaremos 3 diferentes formas en la que los clientes pueden pagar.
- Transferencia.
- Paypal.
- BitCoin.
Codigo de las opciones con checkbox y radios: https://github.com/programadornovato/MiPaginaWeb/commit/4c0e660ee8adb09d880345e09a9d3cfa2eed619b
<!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/bootstrap@5.1.3/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="d-flex">
<input class="form-control me-2" type="search" placeholder="Ingresa tu email"
aria-label="Ingresa tu email">
<button class="btn btn-outline-success" type="submit">Guardar</button>
</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>
<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="" id=""></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="" id=""></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>
<option>Programacion</option>
<option selected>Diseño web</option>
<option>DevPos</option>
<option>Marketing</option>
</select>
</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="checkbox" id="Transferencia" class="form-check-input">
</div>
<div class="form-check form-switch">
<label for="Paypal" class="form-check-label">Paypal</label>
<input type="checkbox" checked id="Paypal" class="form-check-input">
</div>
<div class="form-check form-switch">
<label for="Bitcoin" class="form-check-label">Bitcoin</label>
<input type="checkbox" disabled id="Bitcoin" class="form-check-input">
</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">
</div>
<div class="form-check form-switch">
<label for="Paypal" class="form-check-label">Paypal</label>
<input type="radio" checked id="Paypal" name="pago" class="form-check-input">
</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">
</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>
<div style="height:500px;"></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/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<script>
var bitcoin=document.getElementById("Bitcoin");
bitcoin.indeterminate=true
</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 Siguiente tutorial
Ave que vuela, a la cazuela.