Formulário Novo

by cintia_rodrigues

HTML

<div class="wrpp-form">
    <form class="form-block"> 
            
            <input id="firstname" type="text" placeholder="First Name"/>
            <input id="secondname" type="text" placeholder="Second Name"/>
            <input id="phone" type="phone" placeholder="Phone"> 
            
                    <select  name="select" >
                        <option value="Afganistán">Afganistán</option>
                        <option value="Akrotiri">Akrotiri</option>
                        <option value="Albania">Albania</option>
                        <option value="Alemania">Alemania</option>
                        <option value="Andorra">Andorra</option>
                        <option value="Angola">Angola</option>
                        <option value="Anguila">Anguila</option>
                        <option value="Antártida">Antártida</option>
                        <option value="Antigua y Barbuda">Antigua y Barbuda</option>
                        <option value="Antillas Neerlandesas">Antillas Neerlandesas</option>
                        <option value="Arabia Saudí">Arabia Saudí</option>
                        <option value="Arctic Ocean">Arctic Ocean</option>
                        <option value="Argelia">Argelia</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Armenia">Armenia</option>
                        <option value="Aruba">Aruba</option>
                        <option value="Ashmore and Cartier Islands">Ashmore and Cartier Islands</option>
                        <option value="Atlantic Ocean">Atlantic Ocean</option>
                        <option value="Australia">Australia</option>
                        <option value="Austria">Austria</option>
                        <option value="Azerbaiyán">Azerbaiyán</option>
                        <option value="Bahamas">Bahamas</option>
                        <option value="Bahráin">Bahráin</option>
                   ...

CSS

.wrpp-form
{
    width:100%;
    max-width:1024px;
    height:800px;
    margin: 0 auto;    
}

input[type="phone"], input[type="email"], .form-block textarea
{
        padding: 10px;
        border-radius: 6px;
        border-color: #ebe7df;
        border-width: 2px;
        border-style: solid;
        transition: border-color ease 500ms;
        box-sizing: border-box;
        width: 100%;
        font-size: 18px;
        font-weight: 200;
        font-family: 'open sans', sans-serif;
        margin-bottom:10px;
    }
input[type="text"],input[type="phone"],  .form-block select
{
        float:left;
        padding: 10px;
        border-radius: 6px;
        border-color: #ebe7df;
        border-width: 2px;
        border-style: solid;
        transition: border-color ease 500ms;
        box-sizing: border-box;
        width: 50%;
        font-size: 18px;
        font-weight: 200;
        font-family: 'open sans', sans-serif;
        margin-bottom:10px;
        
}
.form-block textarea
{
    height:200px;
}
.form-block select
{
    height:45px;
}

MEDIA QUERIES