prabhakarzx/htmlforms-lucianoandprabhakar

This project is a collaborative learning project to create a HTML form same as mint.com's signup page.

HTML Form Project(Mint.com's SignUp Form clone)

Luciano and Prabhakar's 2nd project in HTML&CSS3 module.

In this task we were required to create a clone of mint.com's sighnup form using the best practices of HTML AND CSS with GitHub process flow.

Built With

• HTML,
• CSS3,

Live Demo

Live Demo Link

Authors

👤 Luciano Sarno

• Github: @githubhandle

👤 Prabhakar Pandey

• Github: @githubhandle
• Twitter: @twitterhandle
• Linkedin: linkedin

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Microverse
• GitHub
• TheOdinProject

📝 License

This project is open licensed.

htmlforms-lucianoandprabhakar's Issues

Input borders don't match

HTMLforms-LucianoAndPrabhakar/css/tags.css

Lines 68 to 69 in b4654b0

	border-color: rgb(193, 197, 200);
	border-radius: 3px;

Original page >> https://accounts.intuit.com/signup.html?offering_id=Intuit.ifs.mint&namespace_id=50000026&redirect_url=https%3A%2F%2Fmint.intuit.com%2Foverview.event%3Futm_medium%3Ddirect%26cta%3Dhero_sign_up_free_ProspectWeb%26ivid%3D0b720966-3ddf-4f4d-9fac-dbc840bac13a%26adobe_mc%3DMCMID%253D35514261000221439911321019328239003039%257CMCORGID%253D969430F0543F253D0A4C98C6%252540AdobeOrg%257CTS%253D1591638859%26ivid%3D0b720966-3ddf-4f4d-9fac-dbc840bac13a

I specified the border attributes to be exactly identical the original page.
But if we look carefully, we can see that the borders of input fields are not equal original.
Beyond this, it seems that the superior-left borders are with different colors, and this is not specified on the code!

Adjusting the textPart of icons

HTMLforms-LucianoAndPrabhakar/index.html

Lines 30 to 38 in acd3308

	<div id="auxiliarServicesDiv">
	<img class="auxiliarServicesLogoImg" src="images/mint.svg">
	<img class="auxiliarServicesTextImg" id="auxiliarServicesMintTextImg" src="images/mintText.svg">
	<img class="auxiliarServicesLogoImg" src="images/quickbooks.svg">
	<img class="auxiliarServicesTextImg" src="images/quickbooksText.svg">
	<img class="auxiliarServicesLogoImg" src="images/turbotax.svg">
	<img class="auxiliarServicesTextImg" src="images/turbotaxText.svg">
	</div>
	<div id="borderFormDiv">

I've got the exact original icons from the source, but if we look carefully, we'll see that the texts "mint / quickbooks / turbotax" are misaligned, and I would like to know more about how to solve this :)
It is done with .svg, I did some google but it appeared very complicated :/

Source >> https://accounts.intuit.com/signup.html?offering_id=Intuit.ifs.mint&namespace_id=50000026&redirect_url=https%3A%2F%2Fmint.intuit.com%2Foverview.event%3Futm_medium%3Ddirect%26cta%3Dhero_sign_up_free_ProspectWeb%26ivid%3D0b720966-3ddf-4f4d-9fac-dbc840bac13a%26adobe_mc%3DMCMID%253D35514261000221439911321019328239003039%257CMCORGID%253D969430F0543F253D0A4C98C6%252540AdobeOrg%257CTS%253D1591638859%26ivid%3D0b720966-3ddf-4f4d-9fac-dbc840bac13a

My Index >> https://github.com/Prabhakarzx/HTMLforms-LucianoAndPrabhakar/blob/feature-branch/index.html

Morning session

Lock icon is appearing white instead of its true appearence.

Padding-bottom never get equal

HTMLforms-LucianoAndPrabhakar/css/tags.css

Lines 77 to 78 in b4654b0

	line-height: 1.5;
	}

If we see this line, we will see that padding-bottom:6px (same specification from the original site), but when running, the space between label/input is very different!

Form border does not appear

HTMLforms-LucianoAndPrabhakar/css/tags.css

Lines 30 to 31 in 7e585cf

	border-width: 1px;
	height: 80%;

In my index.html I have the border-width=1px, there is a color defined, I checked for possible conflicts.. everything that I could check is allright, but the border does not appear around the form!