Hey learners! Welcome to another blog of Codewithrandom. Here is a New Trending Collection of 20+ profile page UI designs With Source Codes.
Add these various Types of profile page UI designs to Your Code from Codepen and make your code more attractive.
1 . Facebook Profile Page UI Concept
| Code By- | Himalaya Singh |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS, JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
2 . Profile Page – UI
| Code By- | Sunilkumar Gupta |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
3 . Mobile Profile Page UI
| Code By- | Ian |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
4 . Simple profile card
| Code By- | karim jawhar |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | No |
5 . Profile Page UI
| Code By- | Ankit Pavar |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | No |
6 . Instagram Profile Page UI
| Code By- | Ramazan |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | No |
7 . Dark Profile Page
| Code By- | Areal Alien ♡ |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
8 . Responsive profile page
| Code By- | Martin Johansen |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
9 . Modern Neon Profile Page
| Code By- | Areal Alien ♡ |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
10 . Simple Profile Page
| Code By- | ImDezCode |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | No |
11 . Profile page(Second FCC project)
| Code By- | Pavel |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
12 . User Profile Page
| Code By- | BrightCode |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
13 . User Profile
| Code By- | Lima Mmd |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | No |
14 . Profile Page
| Code By- | Ricardo Jean-Pierre |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
15. Personal Profile Page
| Code By- | CHAN LOPEZ |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | No |
| External Links\ Dependencies | No |
16 . Responsive Profile Page
| Code By- | Elle Townsend |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
17 . CSS Grid: Profile Page (A Tribute to Lin-Manuel Miranda)
| Code By- | Olivia Ng |
| Demo And Download | Click here to download |
| Language Used | HTML(Pug), CSS(SCSS) |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
18 . Profile page
| Code By- | Jenky Wilmer Nolasco Nicasio |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
19 . Philip’s portfolio page
| Code By- | Philip |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
20 . Wattpad Profile Page Replica
| Code By- | Tanmay Naik |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
21 . My Personal Profile Page
See the Pen My Personal Profile Page by Danny Englishby (@DanEnglishby) on CodePen.
| Code By- | Danny Englishby |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
22 . Daily UI 006 – Profile Page
| Code By- | Chase Allbee |
| Demo And Download | Click here to download |
| Language Used | HTML, CSS(SCSS) , JS |
| Responsive | Yes |
| External Links\ Dependencies | Yes |
So learners that was all about this tutorial. We have 20+ profile page UI designs. This article includes a variety of original profile page UI design ideas that you can apply to your own projects. I hope you enjoyed reading it. Inform your other developers of this. Please share your thoughts and suggestions in the section below.
To learn more about front-end development, see our other posts on Codewithrandom.
Thank you
Follow Us On Instagram: @Codewith_random
Written By: Aditi
