15K views
CSSAdd prefixes
1.card { 2 width: 190px; 3 height: 254px; 4 background: #F4F6FB; 5 border: 1px solid white; 6 box-shadow: 10px 10px 64px 0px rgba(180, 180, 207, 0.75); 7 -webkit-box-shadow: 10px 10px 64px 0px rgba(186, 186, 202, 0.75); 8 -moz-box-shadow: 10px 10px 64px 0px rgba(208, 208, 231, 0.75); 9} 10 11.form { 12 padding: 25px; 13} 14 15.card_header { 16 display: flex; 17 align-items: center; 18} 19 20.card svg { 21 color: #7878bd; 22 margin-bottom: 20px; 23 margin-right: 5px; 24} 25 26.form_heading { 27 padding-bottom: 20px; 28 font-size: 21px; 29 color: #7878bd; 30} 31 32.field { 33 padding-bottom: 10px; 34} 35 36.input { 37 border-radius: 5px; 38 background-color: #e9e9f7; 39 padding: 5px; 40 width: 100%; 41 color: #7a7ab3; 42 border: 1px solid #dadaf7 43} 44 45.input:focus-visible { 46 outline: 1px solid #aeaed6; 47} 48 49.input::placeholder { 50 color: #bcbcdf; 51} 52 53label { 54 color: #B2BAC8; 55 font-size: 14px; 56 display: block; 57 padding-bottom: 4px; 58} 59 60button { 61 background-color: #7878bd; 62 margin-top: 10px; 63 font-size: 14px; 64 padding: 7px 12px; 65 height: auto; 66 font-weight: 500; 67 color: white; 68 border: none; 69} 70 71button:hover { 72 background-color: #5f5f9c; 73}
HTML
1<form class="form card"> 2 <div class="card_header"> 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> 4 <path fill="none" d="M0 0h24v24H0z"></path> 5 <path fill="currentColor" d="M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z"></path> 6 </svg> 7 <h1 class="form_heading">Sign in</h1> 8 </div> 9 <div class="field"> 10 <label for="username">Username</label> 11 <input class="input" name="username" type="text" placeholder="Username" id="username"> 12 </div> 13 <div class="field"> 14 <label for="password">Password</label> 15 <input class="input" name="user_password" type="password" placeholder="Password" id="password"> 16 </div> 17 <div class="field"> 18 <button class="button">Login</button> 19 </div> 20</form>