How to create a responsive contact section for web pages?

CSSWeb DevelopmentFront End Technology

To create a responsive contact section for web pages, the code is as follows −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   * {
      box-sizing: border-box;
   input[type="text"], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
      font-size: 18px;
   input[type="submit"] {
      background-color: rgb(139, 76, 175);
      color: white;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      font-size: 18px;
   label {
      font-weight: bold;
   .contactImg {
      width: 300px;
      height: 300px;
   input[type="submit"]:hover {
      background-color: #45a049;
   .contactForm {
      margin: auto;
      border-radius: 5px;
      background-color: #d3d3d3;
      padding: 10px;
      max-width: 1000px;
   .contactCol {
      float: left;
      width: 35%;
      margin-top: 6px;
      padding: 20px;
   .contactSection:after {
      content: "";
      display: table;
      clear: both;
   @media screen and (max-width: 600px) {
      .contactCol, input[type="submit"] {
         width: 100%;
         margin-top: 0;
<h1 style="text-align: center;">Responsive Contact Section Example</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>Contact Us</h2>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src=""/>
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />


The above code will produce the following output −

Published on 12-May-2020 16:09:09