Simple Form

by mickeyvip

HTML

<form id="my-login-form">
    <div class="form-row required">        
        <label for="name">name</label>
        <input id="name" required="required" />
    </div>
    <div class="form-row required">
        <label for="email">email</label>
        <input id="email" required="required"/>
    </div>
    <div class="form-row required">        
        <label for="cellular">cellular</label>
        <input id="cellular" required="required"/>
    </div>
</form>

SCSS

body {
    font-family: Helvetica, Verdna, Arial, sans-serif;
    font-size: 1.2em;
    color: #454545;
}

form {
    margin: 10px;
    
    .form-row {
        margin-top: 10px;
        &.required {
            label:after { 
                content: "*";            
                color: red;
                margin-left: 2px;    
            }
        }
    }
    
    label {
        display: block;
        text-transform: capitalize;     
    }

    input {
        border: 1px solid #ddd;
        padding: 2px 5px;        
        font-size: 1.2em;
        border-radius: 5px;
        box-shadow: inset 2px 2px 8px #ddd;    
    }
}