In this example you will learn, how to create a responsive contact section for web pages. To create a responsive contact section for web pages, the code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <!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> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
