03 WordPress Theme

Homework: HTML5 Forms

by Polina Petrova

HTML

<section>
        <figure>            
            <img src="http://prikachi.com/images/874/7415874n.png" alt="Wordpress Logo" />
        </figure>
        
        <form id="upload">
            <label form="upload">Upload a theme:</label>
            <input type="file" class="upload" />
        </form>
        <form id="search">
            <label form="search">Or search in wordpress: </label> 
            <input type="text" class="search">
            <button value="search" id="search" type="submit">
                <img src="http://prikachi.com/images/877/7415877Y.png" />
            </button>            
        </form>
    </section>

CSS

html{
    background-color:#fff;
    font-family:Tahoma, Arial,sans-serif;
    color:#444;
    font-size:12px;    
    line-height:14px;    
}
section{
     margin:0.5rem auto;
     width:380px;     
}
form{   
    display:block;
    margin:1rem 0;
    border-top:1px dotted #ccc;
    padding:1rem 0 0 1rem;   
}
figure img{    
    width:310px;
}
input[type=text]{
    padding:0.5rem;    
    border:1px solid #ccc;   
}
label{
    font-weight:bold;
}
button{   
    vertical-align:middle;
    background-color:transparent;
    border:none;    
    margin:0;
    cursor: pointer;
}
button:hover img{
    opacity:0.6;    
    cursor: pointer;
}