Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
Iago_August

CSS (type-radop

Question

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:[email protected];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

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

Cloud Computing


  • Forum Statistics

    • Total Topics
      148386
    • Total Posts
      643773
×
×
  • Create New...