How to Make Responsive Profile Card in HTML & CSS
Vložit
- čas přidán 16. 07. 2024
- 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 (...
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.
Very good message.
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
this is amazing.. thank you for this content
açık ve okunabilir olmuş teşekkürler :)
Whos i scoming here by ezsnippet suggestion
Thank you for this, I've only recently started my coding journey.
can we talk in ib?
how is it going because i am starting today
I did it, Thank for tutorial
Thank you. I learned something :D
thanks i learned something new ...
Amazing content bro, new subscriber! 🤙
wow amazing brother such creative mind
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...😊
Like how many hour's?
@@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.
@@mehdibelakbir5308 thnx Bhai.
So amazing bro
you are very great i am new to css its getting harder for me but i wil try
thanks a lot
Thanks for this!
Love it.
very nice thank you very much!
the music is also quite good!
Thank you too!
thanks bro!!!!!
Really amazing content
The Best Ever
Great brother
Really nice.
thanku buddy
In love 😍
Thank you 💌
06:09 Creating a responsive profile card
16:20 Creating a responsive profile card using HTML & CSS.
Crafted by Merlin AI.
Thanks Very good design it helped me a lot 👍☺️ mr CodingLab
Before 2 months i made this mini project by watching tutorial now It's easy For me thanks 🙏❤
Bro am a beginner any tips for me? it will be helpful...iam totally frustrated
@@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.
Thanks❤
Thank You
thank you so much sir 💝
thanks😍🤩
Thank you
Awesome
This exercise is absolutely amazing. I learnt so many things.❤
So glad!
Amazing 😍
Thanks 🤗
Wow bro superb
Thanks 🤗
Amazing
creative.
Can you make a comment box, please, it is very necessary..
Mast
Why this video is underrated ?
Thank you.
You're welcome!
Great dear ♥️
Thank you! Cheers!
Hello, why did you selected more than one weights of font from google fonts?
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?
i like your style dont change your style
🤗🤗😝🤑🥲
finally found thanks to the author
anyone know why he styles .image {} with position relative?? maybe something positioned absolute after it?
It took me more than 2 hours to prepare . I am quite demotivated😢
thank you
You're welcome
Sir where can I get this code in written like do you have a website or something
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?
i don't really know
It's special content, Thank you!!
Bro on using absolute position in profile-card:: before background is going out from the profile-card div please help
can we find the code somewhere?
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
thn it takes the width of a parent element i guess, correct anyone if i am wrong
You can bypass this issue by simply setting the property z-index: 1; on the .image{} container
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!
my f picture not becoming round
can anyone tell me how to use multiple cursor in vs code in linux
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?
this is a logic based so it can be done by js
where i will get this same posite
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.
I will think about it.
@@CodingLabYT I'm waiting, I'm following.
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
Cuz the center property is in the body of the page not in the image.
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.
kindly take your time and go through the video.
cant load image please help
would you please give your source codes ?
can i post this project to my github account
7:36
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?
use this:
.image {
height: 150px;
width: 150px;
}
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;
}
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?
make the position of ".profile-card" relative👇👇
.profile-card {
.
.
.
position: relative;
}
@@abzzz-y7o it already is 😓
im having the same issue.. tried the position: relative part but was still not working.. were you able to troubleshoot the bug?
@@jorgienalim7944 You can bypass this issue by simply setting the property z-index: 1; on the .image{} container
i also like display: flex
That's great.
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.
Hi, 👋🏻
We make div inside the div due to the content position and space form horizontalely and vertically.
Which editor did you use
Vs Code
Video isn't clear
Lol bro how?
how bro???
how to practiv
I would have loved these videos and this playlist but they don't have any voice over so skipping. Sorry 😑😑
Believe me css is harder than js script
It take me 2hrs to do 😂
Bro source code
8:10
my images keep coming out larger than i wish
Source Code???
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.
pic
Code please bro
www.codinglabweb.com
who is here after watching ezsnippet😁😁
Song kyun lagaya huwa pgl admi uksi wajah se focus hi nhi horha
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
Why the link of facebook and instagram and ..... not work ?someone help me ?
you have to first link the cdn link of box icons then copy the logos i codes
Amazing
Thank you