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

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

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

[@jorgienalim7944]

this is amazing.. thank you for this content

[@valashruten7804]

Whos i scoming here by ezsnippet suggestion

[@melikebstrk]

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

[@tGoldenPhoenix]

Thank you. I learned something :D

[@user-yi4hy2rp6v]

thanks i learned something new ...

[@user-xj9zy4tq6i]

I did it, Thank for tutorial

[@rinokgaming9497]

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

[@user-wi9ue9on7t]

wow amazing brother such creative mind

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

[@aboolwahith2312]

thank you so much sir 💝

[@christiannaira6076]

Thanks for this!

[@Davgarcia96]

Amazing content bro, new subscriber! 🤙

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

[@AbdurahmonXamdamov-yc1ms]

So amazing bro

[@user-kr3rr6pd4e]

thanks bro!!!!!

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

[@raushankumar6993]

thanku buddy

[@Kiran23456]

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

[@bewise7773]

Love it.

[@AmitK007]

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

[@ghulfamhusaain4456]

Really amazing content

[@allhailalona]

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

[@CodingLabYT]

Thank you too!

[@al-aminmollah7650]

Really nice.

[@mominstatus8499]

Thanks❤

[@Codinglife-gv1qd]

The Best Ever

[@user-pi2ju1ri3i]

Thank You

[@oncoding4520]

Thank you 💌

[@harshkumar-kx4hz]

Great brother

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

[@DjFinestWorldWide]

Awesome

[@ahmedzakan9829]

thanks😍🤩

[@mj_techno]

In love 😍

[@user-tu2ql1bs4u]

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

[@bhuwankashyap4756]

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

[@CodingLabYT]

So glad!

[@SunilGupta-gz8jj]

Amazing

[@whynotkimhari]

Thank you

[@seahmadnailal-darabi8985]

creative.

[@ashwinr8317]

Why this video is underrated ?

[@ajwadzidan1509]

Amazing 😍

[@CodingLabYT]

Thanks 🤗

[@limonahmed3619]

Wow bro superb

[@CodingLabYT]

Thanks 🤗

[@BhagatBhutale..]

Mast

[@hakan.seyhan1]

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

[@basicupdates786]

finally found thanks to the author

[@angusmorgan8446]

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

[@user-eq3bb5po8w]

It's special content, Thank you!!

[@floraayvazyan6676]

can we find the code somewhere?

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

[@sisilove-qz3bw]

i like your style dont change your style 🤗🤗😝🤑🥲

[@AMITTHAKUR-rs5yp]

06:09 Creating a responsive profile card 16:20 Creating a responsive profile card using HTML & CSS. Crafted by Merlin AI.

[@designerov9079]

Thank you.

[@CodingLabYT]

You're welcome!

[@fuzailahmed7295]

where i will get this same posite

[@Mahfooz_20]

Great dear ♥️

[@CodingLabYT]

Thank you! Cheers!

[@MohamedMostafa-km1ej]

thank you

[@CodingLabYT]

You're welcome

[@quotespower9911]

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

[@AmitKumar-cp1oz]

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

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

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

[@user-ez8ry3pq2j]

can i post this project to my github account

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

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

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

[@user-oj8wj1ds8t]

cant load image please help

[@mdnaimulislam.3858]

would you please give your source codes ?

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

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

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

[@RGamerzOfficial]

Bro source code

[@chimaemmanuel-nr4yp]

Which editor did you use

[@ahsansher58]

Vs Code

[@Abdullahckhan]

how to practiv

[@somesaykosm732]

i also like display: flex

[@CodingLabYT]

That's great.

[@lil_nina4u]

7:36

[@yasinsherif8875]

It take me 2hrs to do 😂

[@ahsansher58]

Source Code???

[@nainashallet1878]

Video isn't clear

[@Anime.heaven24]

Lol bro how?

[@slyterkit]

how bro???

[@Warzonemobile2024.]

Believe me css is harder than js script

[@gautamgarg6334]

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

[@Omarhussein1112]

my images keep coming out larger than i wish

[@refraincomewhatmay8203]

8:10

[@limonahmed3619]

Code please bro

[@CodingLabYT]

www.codinglabweb.com

[@SakshamManav25]

who is here after watching ezsnippet😁😁

[@stevo6132]

Needs words to explain things, like it took for half the video to figure out why you were using boxicons. Like even text on the screen to be like "We'll use this for ___ later" type of thing. I have the attention span of a goldfish so this is just a personal grief, but it might help others too.

[@fuzailahmed7295]

pic

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

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