Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
- <style type="text/css">
- label {
- color: #fff;
- font-weight: 700;
- position: relative;
- cursor: pointer;
- }
- label [type="checkbox"] {
- display:none;
- color: #fff;
- }
- [type="checkbox"] + span {
- height: 50px;
- width: 50px;
- border-radius: 30px;
- background: #5cb85c;
- display:inline-block;
- padding: 13px 15px;
- margin: 0;
- color: #fff;
- }
- :checked + span {
- background:#d9534f;
- display:inline-block;
- }
- [type="checkbox"][disabled] + span {
- background:#f44336;
- opacity: 0.6;
- }
- .centered {
- margin: 0 auto !important;
- float: none !important;
- }
- </style>
- <title>Hello, world!</title>
- </head>
- <body>
- <h1>Hello, world!</h1>
- <div class="container">
- <div class="row">
- <div class="col-md-8 centered">
- <div class="text-center mt-3 mb-3">
- <img src="imagens/image-raffle.png" class="img-fluid" alt="">
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-10 centered">
- <div class="section-title aos-init aos-animate" data-aos="zoom-out">
- <h2>Concorra</h2>
- <p>Informe seus dados</p>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-10 centered">
- <form method="post" id="number">
- <div class="form-row">
- <div class="col-xl-5 col-lg-8">
- <div class="form-group text-dark">
- <label>Nome Completo</label>
- <input type="text" class="form-control" name="full_name" placeholder="Nome Completo">
- </div>
- </div>
- <div class="col-xl-4 col-lg-8">
- <label>Email</label>
- <input type="email" class="form-control" name="phone" placeholder="user@email">
- </div>
- <div class="col-xl-3 col-lg-8">
- <label>Telefone</label>
- <input type="text" class="form-control" name="phone" placeholder="(00) 90000-0000">
- </div>
- </div>
- <hr>
- <h2>Concorra</h2>
- <p>Escolha seus números da sorte!</p>
- <div class="row centered">
- <div class="col-xl-10 col-sm-12 col-md-12 col-xl-10 centered">
- <label><input class="form-check-input" type="checkbox" name="number[]" value="00"><span>00</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="01"><span>01</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="02"><span>02</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="03"><span>03</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="04"><span>04</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="05"><span>05</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="06"><span>06</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="07"><span>07</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="08"><span>08</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="09"><span>09</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="10"><span>10</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="11"><span>11</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="12"><span>12</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="13"><span>13</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="14"><span>14</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="15"><span>15</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="16"><span>16</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="17"><span>17</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="18"><span>18</span></label>
- <label><input class="form-check-input" type="checkbox" name="number[]" value="19"><span>19</span></label>
- </div>
- </div>
- <button class="btn btn-primary" type="submit">ENVIAR</button>
- </form>
- </div><!-- COL-10 -->
- </div><!-- ROW -->
- </div><!-- CONTAINER -->
- <!-- Optional JavaScript -->
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
- <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://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 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>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement