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.
I started by tracing this profile icon in Sketch, which came out to be simple, but quite nice:
The key icon is a bit more complicated, so I decided to make an “abridged” version of it:
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:
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!