Signup 1

├── .gitignore ├── signup-1 ├── index.html ├── logo.svg └── styles.css └── signup-2 ├── bg.svg ├── index.html └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /signup-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Signup 1 5 | 6 | 7 | 8 |

9 |

10 |

11 |

Create Account

12 | 18 | 22 |

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

13 |

14 |

Sign Up

15 |

It's quick & simple

16 | 42 |

43 | 44 | 45 | -------------------------------------------------------------------------------- /signup-2/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | display: grid; 12 | place-items: center; 13 | margin: 0; 14 | padding: 0 20px; 15 | background: #3284ce; 16 | font-family: "Euclid Circular A"; 17 | } 18 | 19 | button, 20 | input { 21 | border: 0; 22 | width: 100%; 23 | height: 60px; 24 | background: transparent; 25 | font-family: inherit; 26 | font-size: 16px; 27 | outline: none; 28 | } 29 | 30 | @keyframes clouds { 31 | 100% { 32 | translate: -50vw -55%; 33 | scale: 1 1.1; 34 | } 35 | } 36 | 37 | .clouds { 38 | position: fixed; 39 | top: 30%; 40 | left: 0; 41 | width: 3000px; 42 | height: 1500px; 43 | translate: 0% -50%; 44 | animation: clouds 15s infinite alternate linear; 45 | } 46 | 47 | .signup { 48 | position: fixed; 49 | z-index: 2; 50 | top: 0; 51 | left: 0; 52 | height: 100%; 53 | width: 70%; 54 | max-width: 460px; 55 | padding: 200px 90px; 56 | background: #111820; 57 | } 58 | 59 | .signup > h2 { 60 | font-size: 32px; 61 | font-weight: 600; 62 | margin: 0 0 6px; 63 | color: rgb(255 255 255 / 96%); 64 | } 65 | 66 | .signup > h3 { 67 | font-size: 16px; 68 | font-weight: 400; 69 | margin: 0 0 30px; 70 | color: rgb(255 255 255 / 40%); 71 | } 72 | 73 | .form { 74 | margin: 0; 75 | display: grid; 76 | gap: 16px; 77 | } 78 | 79 | .textbox { 80 | position: relative; 81 | margin-bottom: 16px; 82 | } 83 | 84 | .textbox span { 85 | position: absolute; 86 | top: 50%; 87 | translate: 0 -50%; 88 | left: 0; 89 | font-size: 22px; 90 | pointer-events: none; 91 | color: rgb(255 255 255 / 40%); 92 | } 93 | 94 | .textbox input { 95 | padding: 0 24px 0 36px; 96 | border-bottom: 2px solid #2b3442; 97 | color: rgb(255 255 255 / 96%); 98 | height: 72px; 99 | } 100 | 101 | :is(input:focus, input:valid) ~ label { 102 | translate: -40px -40px; 103 | scale: 0.875; 104 | } 105 | 106 | input:focus ~ label { 107 | color: #216ce7; 108 | } 109 | 110 | input:focus { 111 | border-color: #216ce7; 112 | } 113 | 114 | :is(input:focus, input:valid) ~ span { 115 | color: rgb(255 255 255 / 96%); 116 | } 117 | 118 | .textbox label { 119 | position: absolute; 120 | top: 50%; 121 | left: 36px; 122 | translate: 0 -50%; 123 | color: rgb(255 255 255 / 40%); 124 | pointer-events: none; 125 | transition: 0.4s; 126 | } 127 | 128 | .form button { 129 | display: flex; 130 | align-items: center; 131 | justify-content: space-between; 132 | cursor: pointer; 133 | padding: 0 24px; 134 | border-radius: 6px; 135 | background: #216ce7; 136 | color: #f9f9f9; 137 | border: 0; 138 | font-family: inherit; 139 | font-weight: 600; 140 | } 141 | 142 | .signup p { 143 | margin: 0 0 22px; 144 | color: #778395; 145 | } 146 | 147 | .signup p > a { 148 | color: #216ce7; 149 | text-decoration: none; 150 | } 151 | --------------------------------------------------------------------------------