HTML & CSS profile picture snippet
I you are looking for some nice looking easy to set up profile picture front end. Here's a code snippet I have just created.
Live preview:
codepen.io/ocanodiego/pen/ayYeeN
Github:
github.com/poncianodiego/pic-easy
Dependencies:
- font-awesome
Installation:
- Just copy and paste the snippet into your html and css respectively
Instructions:
If you don't want a circular image just remove the pic-circle
class
Select your size with the following classes:
pic-xs
pic-small
pic-medium
pic-large
pic-xl
Or feel free to edit as you like for colors and size, I added sizes so you can easily display the picture at different places across an entire application, in which you often display this kind of sizes.
If you are using a css grid system you can wrap the picture within your column setup and omit the size class to make it responsive.
The edit and delete buttons are simple anchor elements so you can open a modal for image edition before uploading and delete via Ajax.
Any addition or improvement is welcome, but keep in mind I want to keep it simple.