445 views
CSSAdd prefixes
1.card { 2 background-color: #fff; 3 border-radius: 10px; 4 padding: 20px; 5 width: 350px; 6 display: flex; 7 flex-direction: column; 8} 9 10.title { 11 font-size: 24px; 12 font-weight: 600; 13 text-align: center; 14} 15 16.form { 17 margin-top: 20px; 18 display: flex; 19 flex-direction: column; 20} 21 22.group { 23 position: relative; 24} 25 26.form .group label { 27 font-size: 14px; 28 color: rgb(99, 102, 102); 29 position: absolute; 30 top: -10px; 31 left: 10px; 32 background-color: #fff; 33 transition: all .3s ease; 34} 35 36.form .group input, 37.form .group textarea { 38 padding: 10px; 39 border-radius: 5px; 40 border: 1px solid rgba(0, 0, 0, 0.2); 41 margin-bottom: 20px; 42 outline: 0; 43 width: 100%; 44 background-color: transparent; 45} 46 47.form .group input:placeholder-shown+ label, .form .group textarea:placeholder-shown +label { 48 top: 10px; 49 background-color: transparent; 50} 51 52.form .group input:focus, 53.form .group textarea:focus { 54 border-color: #3366cc; 55} 56 57.form .group input:focus+ label, .form .group textarea:focus +label { 58 top: -10px; 59 left: 10px; 60 background-color: #fff; 61 color: #3366cc; 62 font-weight: 600; 63 font-size: 14px; 64} 65 66.form .group textarea { 67 resize: none; 68 height: 100px; 69} 70 71.form button { 72 background-color: #3366cc; 73 color: #fff; 74 border: none; 75 border-radius: 5px; 76 padding: 10px; 77 font-size: 16px; 78 cursor: pointer; 79 transition: all 0.3s ease; 80} 81 82.form button:hover { 83 background-color: #27408b; 84} 85 86
HTML
1<div class="card"> 2 <span class="title">Leave a Comment</span> 3 <form class="form"> 4 <div class="group"> 5 <input placeholder="" type="text" required=""> 6 <label for="name">Name</label> 7 </div> 8<div class="group"> 9 <input placeholder="" type="email" id="email" name="email" required=""> 10 <label for="email">Email</label> 11 </div> 12<div class="group"> 13 <textarea placeholder="" id="comment" name="comment" rows="5" required=""></textarea> 14 <label for="comment">Comment</label> 15</div> 16 <button type="submit">Submit</button> 17 </form> 18</div> 19