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
Pergunta
Iago_August
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
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.