কম্পিউটার

ওয়েব পৃষ্ঠাগুলির জন্য একটি প্রতিক্রিয়াশীল যোগাযোগ বিভাগ কীভাবে তৈরি করবেন?


ওয়েব পৃষ্ঠাগুলির জন্য একটি প্রতিক্রিয়াশীল যোগাযোগ বিভাগ তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

ওয়েব পৃষ্ঠাগুলির জন্য একটি প্রতিক্রিয়াশীল যোগাযোগ বিভাগ কীভাবে তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি বিভাগ কাউন্টার তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ব্লগ লেআউট তৈরি করবেন?

  3. ওয়েবের জন্য পাওয়ারপয়েন্টে কীভাবে একটি টাইমলাইন তৈরি করবেন

  4. কিভাবে বিনামূল্যে আপনার নিজস্ব ওয়েব ব্রাউজার তৈরি করবেন