<div class="main">
        
        <div class="info">
               <div class="info-detail">
                	  <ul class="contact-info">
                      <li><h3 style="font-size: 1.5rem">FIND US</h3></li>
       <li><i class="fa fa-map-marker" aria-hidden="true"></i><span> 1212 Somewhere Street, USA, Earth</span></li>
               	    	<li><i class="fa fa-envelope" aria-hidden="true"></i></i> myemail@website.com</li>
               		    <li><i class="fa fa-skype" aria-hidden="true"></i> mySkype.name</li>
               	    	<li><i class="fa fa-mobile" aria-hidden="true"></i> +001 01010122</li>
               	    </ul>
               	    <ul class="social">
               	    	<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
               	    	<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
               	    	<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
               	    </ul>
                </div>
            </div>
            
            <div class="supporting">
               <div class="wrapper">
                   <h3>Get in Touch</h3>
                   <p>Feel free to drop us a line below!</p>
                   <form>
                     	<input type="text" name="firstName" placeholder="First Name"> <br>
                     	<input type="text" name="lastName" placeholder="Last Name"><br>
                    	<input type="text" name="emailAddress" placeholder="Your Email"><br>
                    	<textarea placeholder="Write Message Here" rows="5" cols="36"></textarea><br>
                    	<input id="submit" type="submit" name="submit" value="SUBMIT">
                   </form>
               </div>
            </div>
    </div>
body, html {
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
  height: 100%;
}

.main {
  height: 100%;;
  background-color:#99ccff;
  padding: 5px;
  text-align:center;
  position: relative;
  padding: 5px;
}

.info {
  background-color: #004280;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 450px;
  width:300px;
  position:absolute;
  top: 55px;
  left: 270px;
  text-align: left;

}

.info ul {
  list-style: none;
}

.info ul li {
  color: #fff; #999999;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  margin-top: 20px;
}

.info-detail {
  padding: 10px;
}

.info-detail li i {
  margin-right: 5px;
}

.info .social {
  display: inline;
  font-size: 1.5rem;
}

.info .social li {
  display: inline-block;
  margin-right: 10px;
}


.supporting {
  background-color: #fff;
  width: 600px;
  height:550px;
  margin:0 auto;
  border-radius: 3px;
}

.supporting .wrapper {
  width: 60%;
  float: right;
  text-align: left;
  margin-top: 55px;
}

.wrapper h3 {
  color: #004280;
  font-family: arial;
}

.wrapper p {
  color: #b3b3b3;
  font-family: arial;
  font-size: 13px;
}

.wrapper form input {
  margin-top: 20px;
  border-radius: 5px;
  padding: 10px;
  width: 70%;
  background-color: #d9d9d9;
  border-style: none;
}

.wrapper form textarea {
  margin-top: 20px;
  border-radius: 5px;
  background-color: #d9d9d9;
  border-style: none;
}

.wrapper input:focus {
  border-style: none;
  border-color: none;
}

#submit {
  background-color: #99ccff;
  width: 40%;
  border-radius: 30px;
  color: #fff;
  font-family: arial;
  font-weight: bold;
}

#submit:hover {
  background-color: #004280;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.