Custom CSS Log In Form


I happened to come across this task on codersclan the other day and decided to see how competent I am to solving this problem.

The goal is relatively simple, create this in HTML and CSS.

Goal

I started by tracing this profile icon in Sketch, which came out to be simple, but quite nice:

An amazing profile icon

The key icon is a bit more complicated, so I decided to make an “abridged” version of it:

An amazing key icon

Everything after this is also pretty straight forward. CSS is a lot easier to write thanks to the “Copy CSS Attributes” function of Sketch’s. The HTML is even simpler:

<form class="login">
    <i class="user-icon"></i><input type="text" placeholder="Username" />
    <br />
    <i class="key-icon"></i><input type="password" placeholder="Password" />
</form>

It looked like this at the end:

Result

The whole project took around an hour and half to complete, which, with the reward of a chance to earn $25, might not seem worthwhile. But I like to view it as an opportunity to shape up my skills, for possible future projects.

The result came in my favour two days after I submitted my response, the person chose mine as the best solution. :D

The code can be found here has a gist, and a demo is made on CodePen. Feel free to share your feedbacks(or critisisms) in the comment section of the gist, I would love to hear what you think about this project!