Project Preview

project img

Links

Live

Built with

• Semantic HTML mark up
• Flexbox
• Grid
• CSS grid
• Vanilla JavaScript

What I learned

<input placeholder="enter your email">

learnt how to import Google font into CSS file.

@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400&display=swap");

function isValidEmail(email) {
   const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(String(email).toLowerCase());
};

Useful resources

• Stackoverflow - This helps me understanding the Regular expression(Regex) function to check valid email in an input field.
• Google-font - This assists me in getting the accurate font (libre frankin) for the project challenge.
• fontawesome - fontawesome library was cool, it also assist me adding nice social media icons and styles.

Author

• Frontend Mentor - @yourusername
• Twitter - @Brymmobaggins.

Acknowledgments

I will like to give a shoutout to Florin pop, Grace snow, and the frontend mentor community for the inspiration and ideas given whilst on the challenge.