772 views
CSS
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 width: 300px; 6 background-color: #fff; 7 border-radius: 20px; 8 padding: 30px 20px; 9 box-shadow: 100px 100px 80px rgba(0, 0, 0, 0.03) 10} 11 12.title { 13 color: black; 14 font-weight: bold; 15 text-align: center; 16 font-size: 20px; 17 margin-bottom: 4px; 18} 19 20.sub { 21 text-align: center; 22 color: black; 23 font-size: 14px; 24 width: 100%; 25} 26 27.sub.mb { 28 margin-bottom: 1px; 29} 30 31.sub a { 32 color: rgb(23, 111, 211); 33} 34 35.avatar { 36 height: 50px; 37 width: 50px; 38 background-color: rgb(23, 111, 211); 39 border-radius: 50%; 40 align-self: center; 41 padding: 6px; 42 cursor: pointer; 43 box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03); 44} 45 46.form button { 47 align-self: flex-end; 48} 49 50.input, button { 51 border: none; 52 outline: none; 53 width: 100%; 54 padding: 16px 10px; 55 background-color: rgb(247, 243, 243); 56 border-radius: 10px; 57 box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03); 58} 59 60button { 61 margin-top: 12px; 62 background-color: rgb(23, 111, 211); 63 color: #fff; 64 text-transform: uppercase; 65 font-weight: bold; 66} 67 68.input:focus { 69 border: 1px solid rgb(23, 111, 211); 70} 71 72#file { 73 display: none; 74}
HTML
1<form class="form"> 2 <span class="title">You really like the project</span> 3 <span class="sub mb">Register to get full access now :)</span> 4 <input id="file" type="file"> 5 <label class="avatar" for="file"><span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M17.1813 16.3254L15.3771 14.5213C16.5036 13.5082 17.379 12.9869 18.2001 12.8846C19.0101 12.7837 19.8249 13.0848 20.8482 13.8687C20.8935 13.9034 20.947 13.9202 21 13.9202V15.024C21 19.9452 19.9452 21 15.024 21H8.976C4.05476 21 3 19.9452 3 15.024V13.7522C3.06398 13.7522 3.12796 13.7278 3.17678 13.679L4.45336 12.4024C5.31928 11.5365 6.04969 10.8993 6.71002 10.4791C7.3679 10.0605 7.94297 9.86572 8.50225 9.86572C9.06154 9.86572 9.6366 10.0605 10.2945 10.4791C10.9548 10.8993 11.6852 11.5365 12.5511 12.4024L16.8277 16.679C16.9254 16.7766 17.0836 16.7766 17.1813 16.679C17.2789 16.5813 17.2789 16.423 17.1813 16.3254Z" opacity="0.1"></path> <path stroke-width="2" stroke="#ffffff" d="M3 8.976C3 4.05476 4.05476 3 8.976 3H15.024C19.9452 3 21 4.05476 21 8.976V15.024C21 19.9452 19.9452 21 15.024 21H8.976C4.05476 21 3 19.9452 3 15.024V8.976Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M17.0045 16.5022L12.7279 12.2256C9.24808 8.74578 7.75642 8.74578 4.27658 12.2256L3 13.5022"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M21.0002 13.6702C18.907 12.0667 17.478 12.2919 15.1982 14.3459"></path> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 8.55228 16.5523 9 16 9C15.4477 9 15 8.55228 15 8C15 7.44772 15.4477 7 16 7C16.5523 7 17 7.44772 17 8Z"></path> </g></svg></span></label> 6 <input type="text" class="input" placeholder="username"> 7 <input type="email" class="input" placeholder="email"> 8 <input type="password" class="input" placeholder="password"> 9 <span class="sub">Already have an account ? <a href="#">Sign in</a></span> 10 <button>Register</button> 11</form>