Contact us Inline form

      No Comments on Contact us Inline form

Contact us Inline form -simple looking and elegant form for contact us

CONTACT US

Contact us Inline form:

HTML:

<div class="row" id="contact">
 <h2 class="heading" style="color: #fff;margin-bottom:10px;">CONTACT US</h2>
 <form>
    <input type="tel" placeholder="Enter your contact" required/>
    <input type="text" placeholder="your query" required="required" />
    <button class="btn" type="submit">Ask</button>
 </form>
</div>

CSS:

#contact
{
    padding:2% 0%;text-align:center;background-color:#333;
}
#contact h2
{
    font-size:20px;
}
#contact input{
    background-color: #333;
    padding:10px;
    color:#f2f2f2;
    width:30%;
    border-bottom:solid 1px lightgrey;
    border-top:solid 0px lightgrey;
    border-left:solid 0px lightgrey;
    border-right:solid 0px lightgrey;
}
#contact input:hover
{
    border-bottom:solid 1px orange;
}
#contact button
{
    padding:10px;
    background-color: #000;color:#fff;
    border:solid 1px black;
    border-radius:0px;
    width:80px;
}
#contact button:hover
{
    border-color:#fff;
}
@media screen and (min-width: 680px)
{
#contact
{
    padding:2% 0%;
}
#contact input{

    width:300px;
   
}
#contact button
{

    width:120px;
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *