September 27, 2021

Contact us Form

<div class="container">
        <div class="col-left">
            <h2>Contact us</h2>
            <ul class="contact-info">
                <li><span>Address</span><p>1234 Any street House No. IInd New Delhi India.</p></li>
                <li><span>Phone Number</span><p>+91 1234 123 123, 1234 123 123</p></li>
                <li><span>Email</span><p>tolmatol2016@gmail.com</p></li>
                <li><span>Work Hours</span><p>Mon. - Fri: 09:00-22:00</p> </li>
            </ul>
        </div>
        <div class="col-right">
                <h2>Keep in Touch with us</h2>
           <form action="">
                 <label for=""><input type="text" name="Name" id="" class="form-control" placeholder="Name"></label>
                 <label for=""><input type="text" name="Email" id="" class="form-control" placeholder="Email"></label>
                 <label for=""><textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="Message"></textarea></label>
                    <button>Submit</button>
           </form>
        </div>
    </div>

 

body { font-family: 'Roboto', sans-serif; }
        .container { max-width: 1200px; margin:auto;}
        .col-left { float: left; width:45%; margin-right:5%;}
        ul.contact-info { margin:0; padding:0; list-style-type:none;}
        ul.contact-info li span { font-weight: 500;  margin-right:15px; color:coral;}
        .col-right { float: right; width:50%;}
        .form-control { float: left; width:100%; line-height: 25px; padding:10px; margin:10px 0px; background: #eee; border: solid 1px #ccc;}
        button { background: #333; border:none; width:120px; line-height: 50px; color:#fff;}
        iframe { margin:20px 0px; }

 

Leave a Reply

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