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.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com/create...
---
⌚ 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
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...

[@mkh3312]

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

[@kovra1305]

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.

[@CodingLabYT]

Very good message.

[@valashruten7804]

Whos i scoming here by ezsnippet suggestion

[@jorgienalim7944]

this is amazing.. thank you for this content

[@rinokgaming9497]

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

[@melikebstrk]

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

[@user-xj9zy4tq6i]

I did it, Thank for tutorial

[@Davgarcia96]

Amazing content bro, new subscriber! 🤙

[@user-wi9ue9on7t]

wow amazing brother such creative mind

[@user-yi4hy2rp6v]

thanks i learned something new ...

[@tGoldenPhoenix]

Thank you. I learned something :D

[@chilupe839]

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

[@ziachudary1469]

can we talk in ib?

[@Wudstick]

how is it going because i am starting today

[@AbdurahmonXamdamov-yc1ms]

So amazing bro

[@mohitkaushik21]

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...😊

[@shivarajgg2120]

Like how many hour's?

[@mehdibelakbir5308]

@@shivarajgg2120 It's not just about the time spent, but rather how you approach copying the video. Are you simply replicating without understanding, or are you actively seeking out properties you don't know? Do you pause the video to work through it from scratch until completion, and then resume to follow along? The method you choose determines the true measure of time spent, not just your perception.

[@shivarajgg2120]

​@@mehdibelakbir5308 thnx Bhai.

[@Kiran23456]

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

[@christiannaira6076]

Thanks for this!

[@ghulfamhusaain4456]

Really amazing content

[@vinodbarti9237]

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

[@spartondon3591]

Bro am a beginner any tips for me? it will be helpful...iam totally frustrated

[@mrits_vlogs]

@@spartondon3591 first learn the basics like display and position properties etc. then come to the tutorial and try to make it by yourself without watching, then watch the tutorial. Because just by watching the tutorial you will feel like it is easy but in reality it is not.

[@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?

[@Saf23116]

Thanks you, it been 20 days im learning html and css, i diid this in less than a hour, im a ready learn js ?

[@al-aminmollah7650]

Really nice.

[@hakan.seyhan1]

Can you make a comment box, please, it is very necessary..

[@bewise7773]

Love it.

[@AmitK007]

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

[@ashwinr8317]

Why this video is underrated ?

[@harshkumar-kx4hz]

Great brother

[@Codinglife-gv1qd]

The Best Ever

[@bhuwankashyap4756]

This exercise is absolutely amazing. I learnt so many things.❤

[@CodingLabYT]

So glad!

[@oncoding4520]

Thank you 💌

[@user-kr3rr6pd4e]

thanks bro!!!!!

[@mj_techno]

In love 😍

[@user-pi2ju1ri3i]

Thank You

[@quotespower9911]

It took me more than 2 hours to prepare . I am quite demotivated😢

[@mominstatus8499]

Thanks❤

[@DjFinestWorldWide]

Awesome

[@ajwadzidan1509]

Amazing 😍

[@CodingLabYT]

Thanks 🤗

[@user-tu2ql1bs4u]

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

[@raushankumar6993]

thanku buddy

[@SunilGupta-gz8jj]

Amazing

[@ahmedzakan9829]

thanks😍🤩

[@whynotkimhari]

Thank you

[@seahmadnailal-darabi8985]

creative.

[@basicupdates786]

finally found thanks to the author

[@limonahmed3619]

Wow bro superb

[@CodingLabYT]

Thanks 🤗

[@angusmorgan8446]

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

[@arndTheInternet]

Hello may i ask why you targeting the class again and again for example
.identity-parent .media-container after that you wrote
.media-container .links is there any difference between targeting in single or it have difference?

[@firefoxexel2596]

i don't really know

[@BhagatBhutale..]

Mast

[@user-eq3bb5po8w]

It's special content, Thank you!!

[@Mahfooz_20]

Great dear ♥️

[@CodingLabYT]

Thank you! Cheers!

[@floraayvazyan6676]

can we find the code somewhere?

[@slimfit9605]

hello, how to make filtering buttons that will list the people on these cards according to their city, district and profession? Can you make a sample video?

[@gauravsaini1412]

this is a logic based so it can be done by js

[@fuzailahmed7295]

where i will get this same posite

[@designerov9079]

Thank you.

[@CodingLabYT]

You're welcome!

[@barankurt4316]

Hello there. I want to have profile cards listed by adding "location" and category to this profile card, filtering with "city-district-neighborhood-categories" select options buttons and searching the website. Can you shoot a video for this? I don't know how to do it.

[@CodingLabYT]

I will think about it.

[@barankurt4316]

@@CodingLabYT I'm waiting, I'm following.

[@sariahsaade2776]

The media symbols is not center, someone know what can i do? Because it show me the column to the left but not center and the justify-content and the align-items are center.

[@ghansahdaniel2259]

kindly take your time and go through the video.

[@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

[@Abdulrahman-cj9mx]

Cuz the center property is in the body of the page not in the image.

[@mikeywilliams6860]

Thanks for your vids .. my image is gigantic .. any ideas how to correct this ? Do I resize it before putting it into my files or do I resize it in CSS?

[@againagainagainagain.]

use this:
.image {
height: 150px;
width: 150px;
}

[@user-ez8ry3pq2j]

can i post this project to my github account

[@MohamedMostafa-km1ej]

thank you

[@CodingLabYT]

You're welcome

[@yashvanthkumar2576]

I cant see user image appear over blue background created using profile-card::before psuedo elements
.profile-card {
display: flex;
flex-direction: column;
align-items: center;
max-width: 370px;
width: 100%;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
padding: 25px;
border-radius: 24px;
position: relative;
}
.profile-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 36%;
width: 100%;
border-radius: 24px 24px 0 0;
background-color: #4070f4;
}

[@AmitKumar-cp1oz]

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

[@lalit-singh-bisht]

i didn't understood the blue background behind the profile pic was earlier taking the full width but as soon as we added relative to the .profile-card the got fixed

[@afifarazzaq3818]

thn it takes the width of a parent element i guess, correct anyone if i am wrong

[@Pili_Devx]

You can bypass this issue by simply setting the property z-index: 1; on the .image{} container

[@unclepoly]

position absolute is respective of the closest parent/ancestor with position other than static set to them otherwise if this condition is not available, it will automatically be with respect to view port no wonder it was filling the whole screen. Adding position relative to .profile-card activates this condition. Now Position Absolute is respective to the .profile card. I hope you find this useful. Cheers!

[@SaGaR-is1jg]

my f picture not becoming round

[@pixiedustdreams]

Hi CodingLab,
My profile::before content is overlapping on top of all the content. I have the same code as yours in the before part. Could you guess what could be the problem?

[@abdulazezzeinuali7983]

make the position of ".profile-card" relative👇👇
.profile-card {
.
.
.
position: relative;
}

[@pixiedustdreams]

@@abdulazezzeinuali7983 it already is 😓

[@jorgienalim7944]

im having the same issue.. tried the position: relative part but was still not working.. were you able to troubleshoot the bug?

[@Pili_Devx]

@@jorgienalim7944 You can bypass this issue by simply setting the property z-index: 1; on the .image{} container

[@user-oj8wj1ds8t]

cant load image please help

[@aniketnimbalkar6637]

Can someone tell me why everyone make a div and another div in it for pictures can it be not possible without it . Please tel me.

[@Iu4uyyyyy]

Hi, 👋🏻
We make div inside the div due to the content position and space form horizontalely and vertically.

[@mdnaimulislam.3858]

would you please give your source codes ?

[@nainashallet1878]

Video isn't clear

[@Anime.heaven24]

Lol bro how?

[@chimaemmanuel-nr4yp]

Which editor did you use

[@ahsansher58]

Vs Code

[@yasinsherif8875]

It take me 2hrs to do 😂

[@somesaykosm732]

i also like display: flex

[@CodingLabYT]

That's great.

[@Abdullahckhan]

how to practiv

[@gautamgarg6334]

I would have loved these videos and this playlist but they don't have any voice over so skipping. Sorry 😑😑

[@ahsansher58]

Source Code???

[@Omarhussein1112]

my images keep coming out larger than i wish

[@RGamerzOfficial]

Bro source code

[@SakshamManav25]

who is here after watching ezsnippet😁😁

[@limonahmed3619]

Code please bro

[@CodingLabYT]

www.codinglabweb.com

[@refraincomewhatmay8203]

8:10

[@Flepix.]

Using only classes is dumb because it makes confusion and its become little bit difficult to understand i mostly use ids if need to modify one element and if need to modify or give css to multiple elements then i use classes

[@fuzailahmed7295]

pic

[@user-em6kb8zo4k]

Song kyun lagaya huwa pgl admi uksi wajah se focus hi nhi horha

[@mohammedboulmokh2945]

Why the link of facebook and instagram and ..... not work ?someone help me ?

[@ahsansher58]

you have to first link the cdn link of box icons then copy the logos i codes

[@aravinds6406]

Amazing

[@CodingLabYT]

Thank you