How to Make Responsive Profile Card in HTML & CSS

How to Make Responsive Profile Card in HTML & CSS | Profile Card UI Design

In this video tutorial, you will learn to create a Responsive Profile Card using HTML and CSS step by step. I have created this profile card from scratch.

🗂️ Get Source Code of this Profile Card

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work with a coffee

⌚ Timestamps:
00:00 Profile Card Demo
00:40 File Structure
00:57 Importing Google Fonts
0201 Importing Font Icons
02:32 HTML Code for Profile Card
03:03 CSS code for Profile Card
28:02 Home section & Swiper js
45:16 Creating About Us section
16:08 Profile Card Final Demo

#Profile_Card #Card_Design #HTML_CSS

---

🎵 Music Credit:
Something 'bout July (Instrumental) by RYYZN

Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.

[mkh]

i just completed html css course and i was looking for projects and find this master piece thanks a lot may god help you in your path

[kovra]

As a beginner coder I think it's very useful to tag along with as many project as possible, but don't just copy the code. First learn fundamentals of HTML & CSS then follow along and try to understand what is happening on the screen. After a few projects do try something on your on. It's fun and challenging all the same. Have fun and keep coding and of course big thanks for the creators of these fin projects.

[jorgienalim]

this is amazing.. thank you for this content

[valashruten]

Whos i scoming here by ezsnippet suggestion

[melikebstrk]

açık ve okunabilir olmuş teşekkürler :)

[chilupe]

Thank you for this, I've only recently started my coding journey.

[rinokgaming]

you are very great i am new to css its getting harder for me but i wil try
thanks a lot

[mohitkaushik]

I have created the whole thing exactly but it took me a lot of time btw thanks, now I am going to practice all of your videos...😊

[AmitK]

Hello, why did you selected more than one weights of font from google fonts?

[Davgarcia]

Amazing content bro, new subscriber! 🤙

[fguerreroo]

Why did you set the background of the 'link' class elements directly in the HTML document, instead of applying that style from the CSS file used to stylize the rest of the page?

[wiueont]

wow amazing brother such creative mind

[j__o__k__e__r]

Bro on using absolute position in profile-card:: before background is going out from the profile-card div please help

[vinodbarti]

Before 2 months i made this mini project by watching tutorial now It's easy For me thanks 🙏❤

[tuqlbsu]

Sir where can I get this code in written like do you have a website or something

[angusmorgan]

anyone know why he styles .image {} with position relative?? maybe something positioned absolute after it?

[Kiran]

Thanks Very good design it helped me a lot 👍☺️ mr CodingLab

[AmitKumar-cpoz]

can anyone tell me how to use multiple cursor in vs code in linux

[allhailalona]

very nice thank you very much!
the music is also quite good!

[ANDROiDBOYab]

5:00 if we define width:100% first instead of max-width why the image move to left side and after defining max-width came to its place plz answer if anyone knows