Hello Doston, aap sabhi ka aapke apne blog Tech Jugaad Pro me behtareen swagat hai. Jaisa ki aapko maloom hi hai ke hum bahut mehnat karke aapke liye is blog me kuch na kuch khaas content lekar aate hi rehte hain, jo ki valuable bhi hota hai aur majedaar bhi.
Isliye aap is blog ko apna hi blog samajhkar behad pyaar dete hain, uske liye aapka bahut bahut dhanyavaad. Aaj ke liye hum ek behtareen topic par blog post likhne ja rahe hain. Ye blog post ka title dekhkar aap samajh hi gaye honge ke ye post kis par likhi gayi hai. Isliye aapko batane me humein bahut khushi ho rahi hai ke aaj hum ek Stylish Profile Card banayenge jisme Image, Title, Description, Gradient Changing Border Effect aur khaaskar Social Icons honge.
Iski look dekhne me behad khubsurat hogi, aur yadi aap Blogging ke deewane hain to aapko ye post bahut pasand aayegi. Kyunki ismein humne step-by-step simple tarike se aapko ye Profile Card banana sikhaya hai. To chaliye shuru karte hain...
Doston, aapka swagat hai. Sabse pehle hum aapko ye bata dein ke hamari pichli post, jo ki Neon Image Card ke upar thi (Neon Glow Hover Cards HTML aur CSS 2025), usko aapne behad khaas aur bahut pyaar diya hai. Aasha karta hoon ke hamari aaj ki post, jo ki Profile Image Card par hai, use bhi aap utna hi nahi, balki usse bhi zyada pyaar denge.
Sabse Pehle – Profile Image Card Kya Hota Hai, Aur Yeh Kahan-Kahan Istemaal Kiya Jata Hai?
Doston, Profile Card ke mayne samajhte hi hume ye samajh aa jata hai ke yeh card ek profile, yani ki identity batane ke liye istemaal kiya jata hai. Yadi aap blogging athwa website ko thoda bahut jaante ho, to aapko maloom hoga ke is tarah ke card ki value blogging me kitni hoti hai. Kyunki isse hum apne employee ki khasiyat aur uske bare me bata sakte hain, saath hi saath post likhne wala apni profile ko ek Profile Card ke jariye logo tak apni identity pahuncha sakta hai.
Profile Card Ke Alag-Alag Prakaar
Profile Card bahut tarah ke ho sakte hain. Niche kuch alag-alag tarah ke Profile Card ke prakaar diye gaye hain, jis se aapko samajhne me koi dikkat nahi hogi:
- Simple Profile Card
- Simple Profile Card With Image
- Simple Profile Card With Title Aur Description
- Simple Profile Card With Border
- Stylish Profile Card With Round Image Effect
- Stylish Profile Card With Gradient Border Effect
- Stylish Profile Card With Gradient Border Effect Aur Social Icons
To Doston, dekha aapne upar diye gaye Profile Cards ko alag-alag tarike se ek Blogger dwara apne blog me dikhaya jata hai. Simple aur Stylish Profile Card me bahut antar hota hai, lekin yadi simple tarike se Profile Card ko na banakar ek Stylish Look wala Profile Card banaya jaye aur apni blog post me dikhaya jaye, to blog ki sundarta bahut badh jaati hai. Aaj hum aisa hi ek Stylish Profile Card banana aapko sikhayenge.
Doston, yadi aap HTML aur CSS sikhna chahte hain to aap hamse hamare blog aur YouTube channel ke jariye jud sakte hain. Jaha hum rozana aapke liye alag-alag tarike aur blog posts lekar aate hain, jisse aapki blogging skills aur HTML aur CSS language me ijafa hoga. Aap kripya niche diye gaye buttons par click karke hamse jud sakte hain.
Doston, aapko yah Profile Card banane ke liye hum apne YouTube Channel par video bana rahe hain. Uski sahayta se aap bahut hi asaani se aisa Stylish Profile Card bana sakte hain. Lekin yadi aapke paas itna waqt nahi hai to aapke liye humne ek shortcut upaye bhi nikala hai, jisme aap Code Copy-Paste ke jariye Profile Card bana sakte ho. Lekin yadi aap shortcut tarika apnaoge to aap aage kabhi nahi badh paoge, kyunki aisa karne se aapko behad sharmindgi mehsoos ho sakti hai. Copy-Paste ka tarika ghar tak thik hai, lekin yadi aap kisi profession me aisa karoge to aap Job se haath bhi dho sakte ho. Isliye hamari ray me aap video ko bahut jyada baar dekh kar rojana practice karke khud Profile Card banana sikhe — usi me asli maja hai.
Doston, profile card banane ke liye sabse pehle HTML code ki aavashyakta padti hai. Niche box ke jariye aap HTML code ko copy karke apne Blogger me HTML section me paste kijiye.
<div class="profile-card">
<div class="profile-image">
<img src="https://via.placeholder.com/150" alt="Profile">
</div>
<h2>John Doe</h2>
<p>Creative Web Designer</p>
<div class="social-links">
<a href="#" title="Facebook">
<!-- Facebook SVG -->
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="currentColor" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91V136.09c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S293.3 0 262.09 0c-73.5 0-121.39 44.38-121.39 124.72v70.62H86.4V288h54.3v224h100.2V288z"/></svg>
</a>
<a href="#" title="Twitter">
<!-- Twitter SVG -->
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="currentColor" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.72-105.6 298.7-298.7 298.7-59.4 0-114.7-17.2-161.2-47 8.4 1 16.8 1.6 25.6 1.6 49.4 0 94.9-16.8 131-45.6-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 20 1.6 9.4 0 18.7-1.3 27.5-3.6-48.4-9.7-84.3-52.4-84.3-103.7v-1.3c14 7.8 30.1 12.5 47.2 13.1-28.3-18.9-47-51.4-47-88.2 0-19.1 5.2-36.7 14-51.9 51.2 62.8 127.7 104.4 213.9 108.8-1.8-7.6-2.8-15.6-2.8-23.8 0-57.3 46.4-104 104-104 29.9 0 56.9 12.5 75.9 32.9 23.7-4.5 46.4-13.4 66.5-25.4-7.8 24.5-24.5 45.1-46.4 58.1 21.1-2.3 41.5-8.1 60.4-16.2-14 20.8-31.4 39.4-51.6 54.3z"/></svg>
</a>
<a href="#" title="Instagram">
<!-- Instagram SVG -->
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="currentColor" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm146.4-15c0 14.9-12.1 27-27 27H320c-14.9 0-27-12.1-27-27V80.6c0-14.9 12.1-27 27-27h23.5c14.9 0 27 12.1 27 27v45.4zM398.8 80C391.9 53.6 372.4 34.1 346 27.2 312.4 18.1 224 18.1 224 18.1s-88.4 0-122 9.1c-26.4 6.9-45.9 26.4-52.8 52.8-9.1 33.6-9.1 103.7-9.1 103.7s0 70.1 9.1 103.7c6.9 26.4 26.4 45.9 52.8 52.8 33.6 9.1 122 9.1 122 9.1s88.4 0 122-9.1c26.4-6.9 45.9-26.4 52.8-52.8 9.1-33.6 9.1-103.7 9.1-103.7s0-70.1-9.1-103.7z"/></svg>
</a>
</div>
</div>
Doston, ab aapko is div ki designing ke liye ek CSS code ki jarurat padegi. Aapki suvidha ke liye hamne niche code box me wo CSS code aapko de diya hai. Aap YouTube video ke jariye bhi us code ko dekh sakte hai aur is blog post ke jariye bhi. Dono hi tarike aapke liye best hai.
CSS code ko kaha paste kare:
Iske liye aapko niche di gayi jankari ko ache se samjhna hoga:
.profile-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border-radius: 25px;
text-align: center;
padding: 35px;
width: 300px;
margin: 20px auto;
position: relative;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 0 20px rgba(0,255,255,0.3);
border: 2px solid transparent;
animation: neonBorder 5s linear infinite;
}
.profile-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 0 30px rgba(0,255,255,0.6);
}
@keyframes neonBorder {
0% { border-color: #00e5ff; }
25% { border-color: #ff00aa; }
50% { border-color: #9b59b6; }
75% { border-color: #ff6600; }
100% { border-color: #00e5ff; }
}
.profile-image img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #00e5ff;
transition: transform 0.4s ease, border-color 0.4s ease;
}
.profile-image img:hover {
transform: rotate(5deg) scale(1.1);
border-color: #ff00aa;
}
h2 {
color: #fff;
margin: 15px 0 5px;
font-size: 22px;
}
p {
color: #a8d0e6;
font-size: 15px;
margin-bottom: 15px;
}
.social-links a {
display: inline-block;
margin: 0 8px;
color: #00e5ff;
font-size: 20px;
padding: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.social-links a:hover {
transform: scale(1.2) rotate(10deg);
background: linear-gradient(45deg, #ff00aa, #00e5ff);
color: #fff;
}
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
font-family: Arial, sans-serif;
}
No comments:
Post a Comment