Markup

<div class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="white-box">
                    <h4>Send us a message</h4>
                    <div class="contact-form">
                        <form action="http://formspree.io/bdhostit@gmail.com" method="POST">
                            <div class="row">
                                <div class="col-md-6">
                                    <input name="firstname" type="text" placeholder="First Name" required>
                                </div>
                                <div class="col-md-6">
                                    <input name="lastname" type="text" placeholder="Last Name" required>
                                </div>
                                <div class="col-md-6">
                                    <input name="email" type="email" placeholder="Your Email" required>
                                </div>
                                <div class="col-md-6">
                                    <input name="subject" type="text" placeholder="Subject" required>
                                </div>
                            </div>
                            <textarea name="message" id="1" cols="30" rows="10" placeholder="Write Your Message" required></textarea>
                            <input type="submit" value="Send Message">                                    
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="colored-box">
                    <h4>Get In Touch</h4>
                    <p class="contact-info"><i class="fa fa-home"></i>2123/1, Mazar, College Taltola<br />Uttar Khan, Dhaka - 1230</p>
                    <p class="contact-info"><i class="fa fa-phone"></i><a href="tel:8801911235233">+880 1911-235233</a> <br /><a href="tel:8801780808075">+880 1780-808075</a> </p>
                    <p class="contact-info"><i class="fa fa-envelope"></i><a href="mailto:bdhostit@email.com">bdhostit@email.com</a> <br /><a href="mailto:bdhostit@email.com">codexcafe@email.com</a> </p>
                    <div class="social-icons">
                        <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
                        <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="" target="_blank"><i class="fa fa-linkedin"></i></a>
                        <a href="" target="_blank"><i class="fa fa-skype"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Style

/* Base CSS */
.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus, input:focus, textarea:focus, button:focus { 
    outline: 0 solid 
}
img {
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}
body {
    
}
a:hover { text-decoration: none }


.section-padding {
    padding: 80px 0;
}
.white-box {
    box-shadow: 0 0 10px #f5f5f5;
    padding: 30px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], textarea {
    background: #f9f9f9 none repeat scroll 0 0;
    border: medium none;
    padding: 15px;
}
.contact-form input, .contact-form textarea {
    margin-bottom: 15px;
    width: 100%;
}
input[type="submit"] {
    margin: 0;
    width: auto;
}
.contact-form textarea {
    height: 143px;
    resize: none;
}
.contact-form input[type="submit"], .contact-form button[type="submit"] {
    background: #52b0fb none repeat scroll 0 0;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    padding: 15px 30px;
}
.colored-box {
    background: #52b0fb none repeat scroll 0 0;
    color: #fff;
    min-height: 460px;
    padding: 30px;
}
.colored-box a {
    color: #fff;
}
.contact-info {
    margin-bottom: 30px;
    padding-left: 45px;
    position: relative;
}
.contact-info i.fa {
    font-size: 20px;
    left: 0;
    position: absolute;
    top: 3px;
}
.colored-box h4, .white-box h4 {
    font-weight: 400;
    margin-bottom: 40px;
}
.social-icons a {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 3px #999;
    color: #333;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
}
.social-icons a:hover {
    box-shadow: 0 0 0;
    color: #52b0fb;
}