├── .gitignore ├── README.md └── signup #1 ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A collection of ready to use signup pages and forms built using CSS. -------------------------------------------------------------------------------- /signup #1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SignUp #1 | AsmrProg 10 | 11 | 12 | 13 |
14 |
15 | 18 |

Create Account

19 |
20 | 21 | 22 | 23 | 24 |
25 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /signup #1/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | html{ 7 | height: 100%; 8 | } 9 | 10 | body{ 11 | height: 100%; 12 | display: grid; 13 | place-items: center; 14 | margin: 0; 15 | padding: 0 32px; 16 | background: #f5f5f5; 17 | font-family: "Ubuntu"; 18 | animation: rotate 6s infinite alternate linear; 19 | } 20 | 21 | .circle{ 22 | position: fixed; 23 | top: -50vmin; 24 | left: -50vmin; 25 | width: 100vmin; 26 | height: 100vmin; 27 | border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%; 28 | background: #65c8ff; 29 | } 30 | 31 | .circle::after{ 32 | content: ""; 33 | position: inherit; 34 | right: -50vmin; 35 | bottom: -55vmin; 36 | width: inherit; 37 | height: inherit; 38 | border-radius: inherit; 39 | background: #143d81; 40 | } 41 | 42 | .card{ 43 | overflow: hidden; 44 | position: relative; 45 | z-index: 3; 46 | width: 100%; 47 | margin: 0 20px; 48 | padding: 160px 30px 38px; 49 | border-radius: 1.25rem; 50 | background: #fff; 51 | text-align: center; 52 | box-shadow: 0 100px 100px rgb(0 0 0 / 10%); 53 | } 54 | 55 | .card::before{ 56 | content: ""; 57 | position: absolute; 58 | background: #216ce7; 59 | top: -880px; 60 | left: 50%; 61 | width: 1000px; 62 | height: 1000px; 63 | border-radius: 50%; 64 | translate: -50% 0; 65 | } 66 | 67 | .card .logo{ 68 | position: absolute; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | border-radius: 50%; 73 | background-color: #fff; 74 | height: 64px; 75 | width: 64px; 76 | top: 30px; 77 | left: 50%; 78 | translate: -50% 0; 79 | } 80 | 81 | .card .logo i{ 82 | font-size: 50px; 83 | color: #216ce7; 84 | font-weight: 500; 85 | } 86 | 87 | .card>h2{ 88 | font-size: 22px; 89 | font-weight: 400; 90 | margin: 0 0 30px; 91 | color: #2a3444; 92 | } 93 | 94 | .form{ 95 | margin: 0 0 30px; 96 | display: grid; 97 | gap: 18px; 98 | } 99 | 100 | .form>input, .form>button{ 101 | width: 100%; 102 | height: 50px; 103 | border-radius: 28px; 104 | } 105 | 106 | .form>input{ 107 | border: 2px solid #e0e0e0; 108 | font-family: inherit; 109 | font-size: 16px; 110 | padding: 0 24px; 111 | color: #11274c; 112 | transition: all 0.375s; 113 | } 114 | 115 | .form>input:hover{ 116 | border: 2px solid #000; 117 | } 118 | 119 | .form>input::placeholder{ 120 | color: #cac8c8; 121 | } 122 | 123 | .form>button{ 124 | cursor: pointer; 125 | width: 100%; 126 | height: 50px; 127 | padding: 0 16px; 128 | background: #216ce7; 129 | color: #f9f9f9; 130 | border: 0; 131 | font-family: inherit; 132 | font-size: 1rem; 133 | font-weight: 600; 134 | text-align: center; 135 | letter-spacing: 2px; 136 | transition: all 0.375s; 137 | } 138 | 139 | .form>button:hover{ 140 | color: #fff; 141 | background: #143d81; 142 | } 143 | 144 | .card>footer{ 145 | color: #7c7c7c; 146 | } 147 | 148 | .card>footer>a{ 149 | color: #216ce7; 150 | transition: all 0.375s; 151 | } 152 | 153 | .card>footer>a:hover{ 154 | color: #143d81; 155 | } 156 | 157 | @media (width >=500px) { 158 | body{ 159 | padding: 0; 160 | } 161 | .card{ 162 | margin: 0; 163 | width: 360px; 164 | } 165 | } --------------------------------------------------------------------------------