├── .github
    └── workflows
    │   └── linters.yml
├── .gitignore
├── .hintrc
├── .stylelintrc.json
├── LICENSE
├── README.md
├── assets
    ├── app_screenshot.png
    ├── images
    │   ├── intuit-logo.png
    │   ├── mint-icon.svg
    │   ├── qb_icon.png
    │   └── turbotax-icon.svg
    └── styles
    │   └── style.css
├── index.html
└── package-lock.json


/.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 stylelint-csstree-validator
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 | 


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "connector": {
 3 |       "name": "local",
 4 |       "options": {
 5 |         "pattern": ["**", "!.git/**", "!node_modules/**"]
 6 |       }
 7 |     },
 8 |     "extends": ["development"],
 9 |     "formatters": ["stylish"],
10 |     "hints": [
11 |       "button-type",
12 |       "disown-opener",
13 |       "html-checker",
14 |       "meta-charset-utf-8",
15 |       "meta-viewport"
16 |     ]
17 |   }


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": ["stylelint-config-standard"],
 3 |     "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |     "rules": {
 5 |       "at-rule-no-unknown": null,
 6 |       "scss/at-rule-no-unknown": true,
 7 |       "csstree/validator": true
 8 |     },
 9 |     "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
10 |   }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Dipesh Bajgain & Henok Mossissa
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://img.shields.io/badge/Microverse-blueviolet)
 2 | 
 3 | # HTML form page 
 4 | 
 5 | ## Definition 
 6 | 
 7 | HTML form is a web page form in order to collect information from users. A form have different input type elements based on the requirement of data collection. 
 8 | 
 9 | ## About the Project 
10 | 
11 | This project is about building a sign-up page for user registration by cloning from [mint](https://www.mint.com/) signup page. The sign-up form collects data from users: 
12 | - email address and 
13 | - phone number. 
14 | 
15 | ![screenshot](./assets/app_screenshot.png)
16 | 
17 | The features of this project are listed as below:
18 | 1. Have a SignUp Form 
19 |     - With input types: Email, Phone number and Password 
20 |     - Has Create Account Button 
21 |     - Terms and Privacy statement links
22 |     - reCaptcha information     
23 | 2. Have a Signin Button 
24 |     - with forgotten password request link 
25 | 3. Has a footer with 
26 |    - Nav links to Legal, Privacy and Security 
27 |    - Copy right information statement 
28 | 
29 | ## Built With
30 | 
31 | - HTML5
32 | - CSS3
33 | 
34 | ## Live Demo
35 | 
36 | [Live Demo Link](https://dipbazz.github.io/html-forms/)
37 | 
38 | 
39 | ## Getting Started
40 | 
41 | **Just clone this repo and open index.html file in your browser then you are good to go.**
42 | 
43 | 
44 | **To get a local copy up and running follow these simple example steps.**
45 | 
46 | ### clone the repo.
47 | 
48 | 
49 | ## Authors
50 | 
51 | 👤 **Henok Mossissa**
52 | 
53 | - GitHub: [@henatan99](https://github.com/henatan99)
54 | - Twitter: [@henatan99](https://twitter.com/henatan99)
55 | - LinkedIn: [Henok Mossissa](https://www.linkedin.com/in/henok-mekonnen-2a251613/)
56 | 
57 | 👤 **Dipesh Bajgain**
58 | 
59 | - GitHub: [@dipbazz](https://github.com/dipbazz)
60 | - Twitter: [@dipbazz](https://twitter.com/dipbazz)
61 | - LinkedIn: [Dipesh Bajgain](https://www.linkedin.com/in/dipbazz/)
62 | 
63 | ## 🤝 Contributing
64 | 
65 | Contributions, issues, and feature requests are welcome!
66 | 
67 | ## Show your support
68 | 
69 | Give a ⭐️ if you like this project!
70 | 
71 | ## Acknowledgments
72 | 
73 | - icons used from [iconify](https://iconify.design/)
74 | - intuit, mint, quickbooks, turbotax icons where downloaded from [here](https://accounts.intuit.com/signup.html)
75 | 
76 | ## 📝 License
77 | 
78 | This project is [MIT](./LICENSE) licensed. 
79 | 


--------------------------------------------------------------------------------
/assets/app_screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dipbazz/html-forms/8d2d5a02d6251600d316d16c0b5a35a5f3a763a2/assets/app_screenshot.png


--------------------------------------------------------------------------------
/assets/images/intuit-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dipbazz/html-forms/8d2d5a02d6251600d316d16c0b5a35a5f3a763a2/assets/images/intuit-logo.png


--------------------------------------------------------------------------------
/assets/images/mint-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="none"><circle cx="10" cy="10" r="10" fill="#00A6A4"/><path fill="#FFF" d="M10 2.777c-.658.66-5.174 5.309-5.174 8.93 0 2.578 2.055 3.432 5.174 5.554 3.12-2.122 5.174-2.976 5.174-5.554 0-3.621-4.515-8.27-5.174-8.93zm0 12.748l-.607-.397c-2.32-1.511-3.123-2.101-3.123-3.421 0-2.044 2.028-4.888 3.73-6.816v10.634z"/></g></svg>


--------------------------------------------------------------------------------
/assets/images/qb_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dipbazz/html-forms/8d2d5a02d6251600d316d16c0b5a35a5f3a763a2/assets/images/qb_icon.png


--------------------------------------------------------------------------------
/assets/images/turbotax-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-598.5 971.5 50 50"><circle cx="-573.5" cy="996.5" r="25" fill="#d52b1e"/><path d="M-579.1,1005.7c-2.8-2-5.6-4.2-8.2-6.6c-1,2.2-1.8,4.4-2.6,6.6c4.2,3.6,9.8,7.6,13.8,10 c5-13,12.8-21.4,20.4-27.4c-1-2-2.2-3.8-3.8-5.4C-567.7,988.9-574.3,996.7-579.1,1005.7z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/assets/styles/style.css:
--------------------------------------------------------------------------------
  1 | /* General Style */
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | .btn-blue {
 11 |   background: #0077c5;
 12 |   border: 1px solid #0077c5;
 13 |   border-radius: 4px;
 14 |   color: #fff;
 15 |   text-transform: capitalize;
 16 | }
 17 | 
 18 | body {
 19 |   background-color: #eceef1;
 20 | }
 21 | 
 22 | .text-size-13 {
 23 |   font-size: 13px;
 24 | }
 25 | 
 26 | .text-size-12 {
 27 |   font-size: 12px;
 28 | }
 29 | 
 30 | .text-size-14 {
 31 |   font-size: 14px;
 32 | }
 33 | 
 34 | .light-color {
 35 |   color: #49494c;
 36 | }
 37 | 
 38 | /* header */
 39 | .header {
 40 |   padding: 10px 30px;
 41 |   display: flex;
 42 |   justify-content: flex-end;
 43 | }
 44 | 
 45 | .account-info {
 46 |   padding-right: 5px;
 47 | }
 48 | 
 49 | .account-check {
 50 |   padding: 5px;
 51 | }
 52 | 
 53 | .hyperlink {
 54 |   text-decoration: none;
 55 |   color: #0077c5;
 56 | }
 57 | 
 58 | .signup-btn {
 59 |   padding: 8px 20px;
 60 |   height: 38px;
 61 | }
 62 | 
 63 | /* Form */
 64 | .form-container {
 65 |   width: 380px;
 66 |   margin: auto;
 67 |   margin-top: 25px;
 68 | }
 69 | 
 70 | .form-title {
 71 |   text-align: center;
 72 | }
 73 | 
 74 | .logo-wrapper {
 75 |   display: flex;
 76 |   justify-content: space-around;
 77 |   padding-top: 5px;
 78 | }
 79 | 
 80 | .logo-icons {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   padding: 5px 5px;
 84 | }
 85 | 
 86 | .logo-icons img {
 87 |   height: 34px;
 88 |   width: 34px;
 89 |   padding-right: 8px;
 90 |   object-fit: contain;
 91 | }
 92 | 
 93 | .caption {
 94 |   color: #868686;
 95 |   font-size: 20px;
 96 | }
 97 | 
 98 | .form-info {
 99 |   text-align: center;
100 |   margin: auto;
101 | }
102 | 
103 | .form-heading {
104 |   font-weight: normal;
105 |   margin-bottom: 20px;
106 | }
107 | 
108 | .signup-form {
109 |   background-color: #fff;
110 |   border: 1px solid #bfbdca;
111 |   border-radius: 2px;
112 |   padding: 30px;
113 |   margin-top: 10px;
114 |   padding-bottom: 0;
115 | }
116 | 
117 | fieldset {
118 |   border: none;
119 |   padding: 0;
120 |   margin-top: 25px;
121 | }
122 | 
123 | .input-group {
124 |   margin-bottom: 30px;
125 |   position: relative;
126 | }
127 | 
128 | .input-group input {
129 |   margin-top: 15px;
130 |   width: 100%;
131 |   padding: 7px 10px;
132 |   border: 1px solid #b5b6b7;
133 |   border-radius: 2px;
134 | }
135 | 
136 | .input-group input:focus {
137 |   box-shadow: 0 0 10px #0077c5c4;
138 |   outline: none;
139 | }
140 | 
141 | .input-group .iconify {
142 |   position: absolute;
143 |   bottom: 5px;
144 | }
145 | 
146 | .password-lock {
147 |   right: 10px;
148 |   font-size: 22px;
149 |   color: #808080;
150 | }
151 | 
152 | .help-text {
153 |   margin-top: 5px;
154 |   top: 0;
155 |   right: 0;
156 |   bottom: 0;
157 | }
158 | 
159 | .register-btn {
160 |   width: 100%;
161 |   padding: 11px;
162 |   margin-top: 1px;
163 |   cursor: pointer;
164 | }
165 | 
166 | .terms-info {
167 |   margin-top: 30px;
168 |   text-align: center;
169 |   padding: 5px 20px;
170 |   font-style: italic;
171 |   line-height: 22px;
172 |   word-spacing: 2px;
173 | }
174 | 
175 | /* form footer */
176 | .captcha {
177 |   padding: 15px 0;
178 |   text-align: center;
179 |   background: #ececec;
180 |   margin: 25px -30px 0;
181 | }
182 | 
183 | /* Footer */
184 | .footer {
185 |   text-align: center;
186 |   width: 54%;
187 |   margin: auto;
188 |   margin-top: 28px;
189 | }
190 | 
191 | .nav-link .hyperlink {
192 |   color: #49494c;
193 |   padding: 5px;
194 | }
195 | 
196 | .copyright-info {
197 |   margin-bottom: 20px;
198 |   line-height: 20px;
199 | }
200 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 |  <html lang="en">
  4 |  <head>
  5 |      <meta charset="UTF-8">
  6 |      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |      <title>html signup form</title>
  8 |      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  9 |     <link rel="stylesheet" href="assets/styles/style.css"> 
 10 | 
 11 |     <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
 12 |   </head>
 13 |  <body>
 14 |      <header class="header">
 15 |          <div class="account-info text-size-12" >
 16 |              <p class="account-check light-color">Already have an Intuit account? </p>
 17 |              <a href="#" class="hyperlink"> I forgot my User ID or Password</a>
 18 |          </div>
 19 |          <button type="button" class="btn-blue signup-btn">
 20 |             <span class="iconify" data-icon="bx:bxs-lock" data-inline="false"></span>
 21 |             <span>Sign In</span>
 22 |          </button>
 23 |      </header>
 24 | 
 25 |      <main class="form-container">
 26 |          <div class="form-title">
 27 |             <figure>
 28 |                 <img src="assets/images/intuit-logo.png" alt="Intuit logo">
 29 |             </figure>             
 30 |          </div>
 31 |          <div class="logo-wrapper">
 32 |             <figure class="logo-icons">
 33 |                 <img src="assets/images/mint-icon.svg" alt="mint logo">
 34 |                 <figcaption class="caption">mint</figcaption>
 35 |             </figure>
 36 |            
 37 |             
 38 |             <figure class="logo-icons">
 39 |                 <img src="assets/images/qb_icon.png" alt="quickbooks logo">
 40 |                 <figcaption class="caption">quickbooks</figcaption>
 41 |             </figure>
 42 | 
 43 |             <figure class="logo-icons">
 44 |                 <img src="assets/images/turbotax-icon.svg" alt="turbotax logo">
 45 |                 <figcaption class="caption">turbotax</figcaption>
 46 |             </figure>           
 47 | 
 48 |          </div>
 49 |          
 50 |         <form class="signup-form" action="#" method="POST"> 
 51 |             <section class="form-info">
 52 |                 <h2 class="form-heading light-color">Create an Intuit account</h2>                 
 53 |                 <p class="text-size-13 light-color">
 54 |                     <span>One account for everything Intuit, including Mint.</span> 
 55 |                     <br>
 56 |                     <a href="#" class="hyperlink">Learn more</a>
 57 |                 </p>                
 58 |             </section>
 59 |             
 60 |             <fieldset>
 61 | 
 62 |                 <div class="input-group">
 63 |                     <label for="email" class="light-color text-size-14">Email Address</label>
 64 |                     <input type="email" name="email" id="email">
 65 |                 </div>
 66 |                 <div class="input-group">
 67 |                     <label for="phone" class="light-color text-size-14">Phone (Recommended)</label>
 68 |                     <input type="tel" name="phone" id="phone">
 69 |                     <p class="text-size-12 help-text light-color">
 70 |                         <small>Standard call, messaging or data rates may apply.</small>
 71 |                     </p>
 72 |                 </div>
 73 |                 <div class="input-group">                    
 74 |                     <label for="password" class="light-color text-size-14">Password</label>
 75 |                     <input type="password" name="password" id="password">
 76 |                     <span class="iconify password-lock" data-icon="la:lock-open-solid" data-inline="false"></span>
 77 |                 </div>
 78 | 
 79 |                 <button type="button" class="btn-blue register-btn">
 80 |                     <span class="iconify" data-icon="bx:bxs-lock" data-inline="false"></span>
 81 |                     <span>Create Account</span>
 82 |                  </button>
 83 |                  
 84 |                  <div class="terms-info">
 85 |                      <p class="text-size-12 light-color">                        
 86 |                         By clicking Create account, you agree to our <br> 
 87 |                         <a href="#" class="hyperlink">Terms</a> 
 88 |                         and have read and acknowledge our 
 89 |                         <a href="#" class="hyperlink">Privacy Statement.</a>                                               
 90 |                     </p>
 91 |                  </div>
 92 | 
 93 |             </fieldset>
 94 | 
 95 |             <div class="captcha text-size-12 light-color">
 96 |                 <small>
 97 |                     Invisible reCAPTCHA by Google 
 98 |                     <a href="#" class="hyperlink">Privacy Policy</a> 
 99 |                     and 
100 |                     <a href="#" class="hyperlink">Terms of Use.</a>
101 |                 </small>
102 |             </div>
103 |             
104 |         </form>
105 | 
106 |     </main>
107 | 
108 |      <footer class="footer text-size-12 light-color">
109 |          <nav class="nav-link "> 
110 |              <a href="#" class="hyperlink">Legal</a>
111 |              <a href="#" class="hyperlink">Privacy</a>
112 |              <a href="#" class="hyperlink">Security</a>
113 |          </nav>
114 |          <p class="copyright-info">
115 |             © 2020 Intuit, Inc. All rights reserved. Intuit, QuickBooks, QB, TurboTax, ProConnect and Mint are registered trademarks of Intuit Inc. 
116 |             Terms and conditions, features, support, pricing, and service options subject to change without notice.
117 |          </p>
118 |     </footer>
119 |      
120 |  </body>
121 |  </html> 
122 | 


--------------------------------------------------------------------------------