1.2K views
CSSAdd prefixes
1.contact-form { 2 background-color: #f2f2f2; 3 padding: 20px; 4 border-radius: 10px; 5} 6 7.contact-form label { 8 color: black; 9} 10 11.contact-form .heading { 12 font-size: 24px; 13 color: black; 14 ; 15 margin-bottom: 12px; 16 font-weight: bold; 17 display: block; 18} 19 20.contact-form form { 21 display: flex; 22 flex-direction: column; 23} 24 25.contact-form label { 26 margin-bottom: 10px; 27} 28 29textarea { 30 resize: none; 31 height: 80px; 32 width: 200px; 33} 34 35.contact-form input, .contact-form textarea { 36 padding: 10px; 37 border: none; 38 border-radius: 5px; 39 margin-bottom: 20px; 40} 41 42.contact-form input:focus, .contact-form textarea:focus { 43 outline: none; 44 box-shadow: 0 0 5px #ff6384; 45 transform: scale(1.05); 46 transition: transform 0.3s ease-in-out; 47} 48 49.contact-form button[type="submit"] { 50 background-color: #ff6384; 51 color: #fff; 52 border: none; 53 border-radius: 5px; 54 padding: 10px 20px; 55 font-size: 16px; 56 cursor: pointer; 57} 58 59.contact-form button[type="submit"]:hover { 60 transform: scale(1.1); 61 transition: transform 0.3s ease-in-out; 62} 63
HTML
1<div class="contact-form"> 2 <span class="heading">Contact Us</span> 3 <form> 4 <label for="name">Name:</label> 5 <input type="text" required=""> 6 <label for="email">Email:</label> 7 <input type="email" id="email" name="email" required=""> 8 <label for="message">Message:</label> 9 <textarea id="message" name="message" required=""></textarea> 10 <button type="submit">Submit</button> 11 </form> 12</div> 13