How to create a responsive contact section for web pages?

CSS Web Development Front End Technology

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

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   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;
      }
   }
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Contact Section Example</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src="https://i.picsum.photos/id/8/400/400.jpg"/>
</div>
<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" />
</form>
</div>
</div>
</div>
</body>
</html>