MailChimp Form Clone

This is my Solution for The Odin Project: HTML and CSS Path project: HTML Forms.

PROJECT: HTML FORMS

In this project, We have to rebuild the form used by Mailchimp.com. for signing up new users.

Assignment

• Go to Mint.com’s signup page or Mailchimp and have a look around.
• Create a blank HTML document.
• Plan out how the elements on the page need to be grouped together.
• Lay out the empty semantic HTML elements for the major sections (form, sidebar, footer…) and make them the proper size and alignment. It may be helpful to change their background colors while you’re positioning them on the page. Don’t forget to use your browser’s developer tools (right click on the page, click “inspect element”)!
• Fill in those elements with the content you want to include.
• Now style them to look like the real webpage.
• Push your solution up to GitHub and you’re good to go!

Expected Outcomes

• HTML
• CSS
• Forms
• Grid based alignment

Livepreview

Live preview here on Github Pages

Original Page

Visit Mailchimp original form

Mentions

Special thanks to Odin Project Community!

Resources

• MDN WebDocs. Using CSS gradients
• W3 Schools CSS Flex Responsive
• Odin Project: Displaying and Inputting Data
• Google Fonts - Kiwi Maru / QuickSand
• How to change bullets collor with CSS