RayanneRamos

Boa noite! Estou desenvolvendo um site de agência de viagem para um trabalho na faculdade com alguns requisitos e uns desses requisitos pedidos e a tela de escolha de assento de avião depois de procurar muito na internet achei um código pronto e acabei utilizando portanto o css do código não está funcionando. Segue aí a foto de como deveria ficar e de como ficou e também o código do css. Espero muito que vocês possam me ajudar o trabalho vale 50% da nota da prova. Imagem de como é pra ficar o código Imagem de como ficou *,*:before,*:after { box-sizing: border-box; } html { font-size: 16px; } .plane { margin: 20px auto; max-width: 300px; } .cockpit { height: 250px; position: relative; overflow: hidden; text-align: center; border-bottom: 5px solid #d8d8d8; &:before { content: ""; display: block; position: absolute; top: 0; left: 0; height: 500px; width: 100%; border-radius: 50%; border-right: 5px solid #d8d8d8; border-left: 5px solid #d8d8d8; } h1 { width: 60%; margin: 100px auto 35px auto; } } .exit { position: relative; height: 50px; &:before, &:after { content: "EXIT"; font-size: 14px; line-height: 18px; padding: 0px 2px; font-family: "Arial Narrow", Arial, sans-serif; display: block; position: absolute; background: green; color: white; top: 50%; transform: translate(0, -50%); } &:before { left: 0; } &:after { right: 0; } } .fuselage { border-right: 5px solid #d8d8d8; border-left: 5px solid #d8d8d8; } ol { list-style :none; padding: 0; margin: 0; } .row { } .seats { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .seat { display: flex; flex: 0 0 14.28571428571429%; padding: 5px; position: relative; &:nth-child(3) { margin-right: 14.28571428571429%; } input[type=checkbox] { position: absolute; opacity: 0; } input[type=checkbox]:checked { + label { background: #bada55; -webkit-animation-name: rubberBand; animation-name: rubberBand; animation-duration: 300ms; animation-fill-mode: both; } } input[type=checkbox]:disabled { + label { background: #dddddd; text-indent: -9999px; overflow: hidden; &:after { content: "X"; text-indent: 0; position: absolute; top: 4px; left: 50%; transform: translate(-50%, 0%); } &:hover { box-shadow: none; cursor: not-allowed; } } } label { display: block; position: relative; width: 100%; text-align: center; font-size: 14px; font-weight: bold; line-height: 1.5rem; padding: 4px 0; background: #F42536; border-radius: 5px; animation-duration: 300ms; animation-fill-mode: both; &:before { content: ""; position: absolute; width: 75%; height: 75%; top: 1px; left: 50%; transform: translate(-50%, 0%); background: rgba(255,255,255,.4); border-radius: 3px; } &:hover { cursor: pointer; box-shadow: 0 0 0px 2px #5C6AFF; } } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }

Boa noite! Estou fazendo um trabalho para a faculdade sobre uma agência de viagem e na parte de cadastrar o cliente precisa fazer a validação pode usar javascript ou jquery. Porém não tenho nenhuma ideia de como fazer isso. <form name="cadastro" action="#" method="post" id="form"> <div class="form-row"> <div class="form-group col-sm-6"> <label for="seuNome">Nome:</label> <input type="text" class="form-control" id="seuNome" placeholder="Nome" required> </div> <div class="form-group col-sm-6"> <label for="seuSobrenome">Sobrenome:</label> <input type="text" class="form-control" id="seuSobrenome" placeholder="Sobrenome" required> </div> <div class="form-group col-sm-8"> <label for="seuEndereço">Endereço:</label> <input type="text" class="form-control" id="seuEndereço" placeholder="Av.Paris, 54, Bonsucesso" required> </div> <div class="form-group col-sm-4"> <label for="seuData">Data de Nascimento:</label> <input type="text" class="form-control" id="seuData" placeholder="DD/MM/AAAA" required> </div> <div class="form-group col-sm-4"> <label for="seuCidade">Cidade:</label> <input type="text" class="form-control" id="seuCidade" placeholder="Cidade" required> </div> <div class="form-group col-sm-4"> <label for="seuCEP">CEP:</label> <input type="text" class="form-control" id="seuCEP" placeholder="00000-000" required> </div> <div class="form-group col-sm-4"> <label for="seuEstado">Estado:</label> <select id="seuEstado" class="form-control" required> <option selected>Estado</option> <option>SP</option> <option>RJ</option> <option>MG</option> <option>ES</option> <option>PR</option> <option>SC</option> <option>RS</option> </select> </div> <div class="form-group col-sm-6"> <label for="seuEmail">Email:</label> <input type="text" class="form-control" id="seuEmail" placeholder="[email protected]" required> </div> <div class="form-group col-sm-6"> <label for="seuSenha">Senha:</label> <input type="password" class="form-control" id="seuSenha" placeholder="Senha" required> </div> <div class="form-group col-sm-4"> <label for="seuCartao">Cartão de Crédito:</label> <input type="text" class="form-control" id="seuCartao" placeholder="0000-0000-0000-0000" required> </div> <div class="form-group col-sm-4"> <label for="seuBandeira">Bandeira do Cartão</label> <select id="seuBandeira" class="form-control" required> <option selected>Escolha</option> <option>Mastecard</option> <option>Visa</option> <option>American Expresss</option> <option>Elo</option> <option>Sodexo</option> </select> </div> <div class="form-group col-sm-4"> <label for="seuCS">Código de Segurança</label> <input type="text" class="form-control" id="seuCS" placeholder="000" required> </div> <div class="form-group col-sm-12"> <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Cadastrar-se</button> </div> </div> </form>