Iago_August
-
Total de itens
1 -
Registro em
-
Última visita
Sobre Iago_August
Iago_August's Achievements
0
Reputação
-
Olá pessoas venho aqui perguntar se alguém, sabe me ajuda com um problema estou tentando fazer a parte do front end do facebook, porem estou com um erro o não estou conseguindo colocar o type radio um do lado do outro da parte do feminino e masculino, vou colocar o código do html e css HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Facebook</title> <link rel="stylesheet" href="style.css"> <!-- aplicar depois meta tags --> </head> <body> <header> <div class="center"> <div class="logo"> <h2>facebook</h2> </div><!-- logo --> <form method="post" class="form-login"> <div class="form-element"> <p>Email ou telefone</p> <input type="email" name="email" /> </div><!-- form-element --> <div class="form-element"> <p>Senha</p> <input type="password" name="password" /> </div><!-- form-element --> <div class="form-element"> <input type="submit" name="acao" value="Entrar" /> </div><!-- form-element --> </form><!-- form-login --> <div class="clear"></div><!-- clear --> </div><!-- center --> </header> <section class="main"> <div class="center"> <div class="img-pessoas"> <img src="image/img1.png"/> </div><!-- img-pessoas --> <div class="abrir-conta"> <h2>Abra sua conta </h2> <h3>É rapido e fácil</h3> <form class="criar-conta"> <div class="w50"> <input type="text" placeholder="Nome" /> </div><!-- w50 --> <div class="w50"> <input type="text" placeholder="Sobrenome" /> </div><!-- w50 --> <div class="w100"> <input type="email" placeholder="Celular ou email" /> </div><!-- w100 --> <div class="w100"> <input type="password" placeholder="Nova senha" /> </div><!-- w100 --> <div class="w100"> <h2>Data de Nascimentos</h2> <select name="nascimento-dia" class="nascimento"> <?php for($i = 1; $i <= 31; $i++){ ?> <option value="<?php echo $i; ?>"><?php echo $i; ?></option> <?php } ?> </select> <select name="nascimento-mes" class="nascimento"> <!-- PHP APLICAR DEPOIS --> <option value="0">Junho</option> </select> <select name="nascimento-ano" class="nascimento"> <?php for($i = 1960; $i <= 2020; $i++){ ?> <option value="<?php echo $i; ?>"><?php echo $i; ?></option> <?php } ?> </select> <div class="clear"></div> <h2>Gênero</h2> </div><!-- w100 --> <div class="w100"> <div class="input-radio"> <input type="radio" name="sexo" value="masculino"> <h2>Masculino</h2> </div><!-- input-radio --> </div><!-- w100 --> <div class="w100"> <div class="input-radio"> <input type="radio" name="sexo" value="feminino"> <h2>Feminino</h2> </div><!-- input-radio --> <div class="clear"></div> </div><!-- w100 --> <div class="w100"> <input type="submit" value="Cadastre-se"> </div><!-- w100 --> </form><!-- criar-conta --> </div><!-- abir-conta --> <div class="clear"></div><!-- clear --> </div><!-- center --> </section><!-- main --> </body> </html> CSS: @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); *{ margin:0; padding:0; box-sizing: border-box; font-family: Lato } .center{ max-width: 1100px; padding: 0 2%; margin: 0 auto; } .clear{clear: both;} header{ padding: 8px 0;background: linear-gradient(#fdfdfe,#e9ebf3,#d7dcea); background: linear-gradient(#4b66a0,#3b5998,#3b5998); } .logo{ float: left; color: white; } .logo h2{ font-size: 35px; font-weight: normal; } form.form-login{ float: right; } .form-login .form-element{ display: inline-block; margin-right: 15px; } .form-element p{ color: white; font-size: 14px; } .form-element input[type=email], .form-element input[type=password]{ padding: 2px; border:0.3px solid black; margin-top: 4px; } .form-element input[type=submit]{ cursor: pointer; width: 50px; height: 25px; border: 0.5px solid #29487d; color: white; background-color: #4267b2; } .form-element input[type=submit]:hover{ background-color: #365899 } section.main{ background: linear-gradient(#fdfdfe,#e9ebf3,#d7dcea); padding: 40px 0 ; } .img-pessoas{ float: left; width: 60%; } .img-pessoas img{ max-width: 100%; } .abrir-conta{ width: 30%; float: left; } .abrir-conta h2{ color: black; font-size: 40px; } .abrir-conta h3{ font-weight: normal; font-size: 17px; margin: 8px 0; } form.criar-conta{ margin-top: 10px; } .w50{ width: 50%; float: left; padding: 0 5px; } .w100{ padding: 0 5px; width: 100%; float: left; } form.criar-conta input{ width: 100%; margin-top: 8px; } form.criar-conta input[type=email], form.criar-conta input[type=text], form.criar-conta input[type=password]{ height: 30px; padding-left: 10px; font-size: 15px; border:0.5px solid #bdc7d8; border-radius: 5px; } form.criar-conta input[type=submit]{ height: 40px; max-width: 200px; font-size: 19px; color: white; cursor: pointer; border: 0.5px solid #3b6e22; background: linear-gradient(#66ab54,#5f9b4c,#588a44); } form .w100 h2{ margin-top: 15px; font-weight: normal; color: #1d2129; font-size: 17px; } form select.nascimento{ float: left; margin-top: 8px; } .input-radio{ float: left; width: 50%; } .input-radio h2{ display: inline-block; } .input-radio input[type=radio]{ width: auto !important; display: inline-block; } Há gradeço desde já pela a resposta