├── .github └── workflows │ ├── linters.yml │ └── linters.yml ├── .gitignore ├── .hintrc ├── README.md ├── images ├── .github │ └── workflows │ │ └── linters.yml ├── company-logo.jpg ├── icon-1.jpg ├── icon-2.jpg ├── icon-3.jpg └── page_screenshot1.png ├── index.html └── style.css /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.4.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.0.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint --telemetry=off . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml : -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.4.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.0.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint --telemetry=off . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | .DS_Store -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | // 20200604222429 2 | // https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 3 | 4 | { 5 | "connector": { 6 | "name": "local", 7 | "options": { 8 | "pattern": [ 9 | "**", 10 | "!.git/**", 11 | "!node_modules/**" 12 | ] 13 | } 14 | }, 15 | "extends": [ 16 | "development" 17 | ], 18 | "formatters": [ 19 | "stylish" 20 | ], 21 | "hints": [ 22 | "button-type", 23 | "disown-opener", 24 | "html-checker", 25 | "meta-charset-utf-8", 26 | "meta-viewport" 27 | ] 28 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML Forms 2 | 3 | > This is the clone mint.com’s sign up page. Prepared for as a collaboration project with my coding partner Rocio from Microverse. 4 | This project's name is "HTML Forms" in Microverse. 5 | 6 | ![screenshot](images/page_screenshot1.png) 7 | 8 | ## Built With 9 | 10 | - HTML and CSS 11 | - without any extra css library 12 | 13 | ## Live Demo 14 | 15 | [Live Demo Link](https://rawcdn.githack.com/RaminMammadzada/html-forms/9a645feda691f9a9afe2c98eef15299580551152/index.html) 16 | 17 | ## Authors 18 | 19 | 👤 **Ramin Mammadzada** 20 | 21 | - Github: [@raminmammadzada](https://github.com/raminmammadzada) 22 | - Twitter: [@raminmammadzada](https://twitter.com/raminmammadzada) 23 | - Linkedin: [raminmammadzada](https://linkedin.com/raminmammadzada) 24 | 25 | 👤 **Zulma Rocio** 26 | 27 | - Github: [@rocio01](https://github.com/Rocio01) 28 | - Twitter: [@rugiada8801](https://twitter.com/rugiada8801) 29 | - Linkedin: [zulma-martinez-5247a31a8](https://www.linkedin.com/in/zulma-martinez-5247a31a8) 30 | 31 | ## 🤝 Contributing 32 | 33 | Contributions, issues and feature requests are welcome! 34 | 35 | Feel free to check the [issues page](issues/). 36 | 37 | ## Show your support 38 | 39 | Give a ⭐️ if you like this project! 40 | 41 | ## 📝 License 42 | 43 | This project is [MIT](lic.url) licensed. -------------------------------------------------------------------------------- /images/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.4.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.0.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint --telemetry=off . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" -------------------------------------------------------------------------------- /images/company-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaminMammadzada/html-forms/d97d0b64031b42793b8a708e755563e4264a3868/images/company-logo.jpg -------------------------------------------------------------------------------- /images/icon-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaminMammadzada/html-forms/d97d0b64031b42793b8a708e755563e4264a3868/images/icon-1.jpg -------------------------------------------------------------------------------- /images/icon-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaminMammadzada/html-forms/d97d0b64031b42793b8a708e755563e4264a3868/images/icon-2.jpg -------------------------------------------------------------------------------- /images/icon-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaminMammadzada/html-forms/d97d0b64031b42793b8a708e755563e4264a3868/images/icon-3.jpg -------------------------------------------------------------------------------- /images/page_screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaminMammadzada/html-forms/d97d0b64031b42793b8a708e755563e4264a3868/images/page_screenshot1.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sign Up Form 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 21 |
22 | 23 |
24 |
25 |
26 | 27 |
28 | 29 |
    30 |
  • 31 | 32 | 33 | list item 1 34 | 35 | mint 36 |
    • 37 |
  • 38 | 39 | 40 | list item 2 41 | 42 | quickbooks 43 |
    • 44 |
  • 45 | 46 | 47 | list item 3 48 | 49 | turbotax 50 |
    • 51 |
52 |
53 | 54 |
55 |

Create an Intuit account

56 |
One account for everything Intuit, including Mint.
57 | Learn more 58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 |

66 |
67 |

68 | 69 |
70 |
71 | By clicking Create account, you agree to our 72 | Terms 73 |
74 | and have read and acknowledge our Privacy 75 |
Statement. 76 | 77 |
78 |
79 |
80 |
81 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: #edeef1; 3 | } 4 | 5 | body { 6 | text-align: center; 7 | } 8 | 9 | header { 10 | position: absolute; 11 | top: 0; 12 | right: 0; 13 | } 14 | 15 | .header-container { 16 | width: 380px; 17 | overflow: hidden; 18 | float: right; 19 | } 20 | 21 | .sign-in-text { 22 | overflow: hidden; 23 | text-overflow: ellipsis; 24 | white-space: nowrap; 25 | display: block; 26 | float: right; 27 | margin-top: 6px; 28 | margin-right: 10px; 29 | } 30 | 31 | button { 32 | float: right; 33 | } 34 | 35 | .icons-container { 36 | text-align: center; 37 | } 38 | 39 | .form-container { 40 | background-color: #fff; 41 | border: 1px solid #c7c7c7; 42 | height: 100%; 43 | padding-top: 2px; 44 | padding-bottom: 30px; 45 | margin-top: 30px; 46 | margin-left: 150px; 47 | margin-right: 150px; 48 | } 49 | 50 | main { 51 | display: table; 52 | text-align: center; 53 | margin-left: auto; 54 | margin-right: auto; 55 | } 56 | 57 | footer { 58 | display: table; 59 | text-align: center; 60 | margin-left: auto; 61 | margin-right: auto; 62 | } 63 | 64 | .main-form-container { 65 | display: inline-block; 66 | text-align: center; 67 | margin-left: auto; 68 | margin-right: auto; 69 | } 70 | 71 | .main-form-container img { 72 | margin-top: 50px; 73 | } 74 | 75 | .footer-container { 76 | display: flex; 77 | flex-direction: column; 78 | vertical-align: middle; 79 | align-items: center; 80 | text-align: center; 81 | width: 900px; 82 | } 83 | 84 | form p { 85 | background: #fff; 86 | } 87 | 88 | ul#horizontal-list { 89 | min-width: 296px; 90 | list-style: none; 91 | } 92 | 93 | ul#horizontal-list li { 94 | margin: 0; 95 | padding: 0; 96 | display: inline; 97 | vertical-align: middle; 98 | } 99 | 100 | ul#horizontal-list li span { 101 | vertical-align: middle; 102 | } 103 | 104 | ul#horizontal-list li span a img { 105 | width: 4%; 106 | margin-top: 0; 107 | } 108 | 109 | #signin-button { 110 | border: #000; 111 | background-color: #0077c5; 112 | border-radius: 5%; 113 | text-align: center; 114 | cursor: pointer; 115 | font-size: 18px; 116 | padding: 12px 25px 12px 25px; 117 | color: aliceblue; 118 | } 119 | 120 | input, 121 | select { 122 | width: 100%; 123 | padding: 12px 15px; 124 | margin: 8px 0; 125 | display: inline-block; 126 | border: 1px solid #ccc; 127 | box-sizing: border-box; 128 | background-color: white; 129 | } 130 | 131 | input[type="submit"] { 132 | width: 100%; 133 | background-color: #0077c5; 134 | color: white; 135 | padding: 14px 20px; 136 | margin: 8px 0; 137 | border: none; 138 | cursor: pointer; 139 | } 140 | 141 | label { 142 | background-color: white; 143 | float: left; 144 | } 145 | 146 | #call-messaging-info { 147 | font-size: 11px; 148 | } 149 | 150 | h2 { 151 | background-color: white; 152 | color: #000; 153 | font-family: Arial, Helvetica, sans-serif; 154 | text-align: center; 155 | } 156 | 157 | a { 158 | text-decoration: none; 159 | color: #00f; 160 | } 161 | 162 | h5, 163 | h5 a, 164 | h5 em { 165 | background-color: white; 166 | font-size: 12px; 167 | color: #9c9aac; 168 | text-align: center; 169 | } 170 | 171 | h5 a { 172 | color: blue; 173 | } 174 | 175 | li a { 176 | color: #000; 177 | } 178 | 179 | li a:hover { 180 | text-decoration: underline; 181 | } 182 | 183 | form { 184 | background-color: white; 185 | margin-left: auto; 186 | margin-right: auto; 187 | width: 330px; 188 | } 189 | 190 | #term-and-conditions { 191 | font-size: 12px; 192 | color: #9c9aac; 193 | text-align: center; 194 | } 195 | 196 | .li-footer { 197 | display: inline; 198 | width: 300px; 199 | padding: 5px; 200 | } 201 | 202 | .ul-footer { 203 | display: flex; 204 | text-align: center; 205 | width: 240px; 206 | align-content: center; 207 | vertical-align: middle; 208 | padding: 0; 209 | } 210 | --------------------------------------------------------------------------------