رابط کارت نمایه شخصی – انجمن DEV

Summarize this content to 400 words in Persian Lang
این یک پروژه ساده برای مبتدیان است که به شما در یادگیری کمک می کند HTML و CSS با ایجاد یک کارت نمایه شیک که عکس، نام، نقش و پیوندهای رسانه های اجتماعی را نمایش می دهد.

🌟 بررسی اجمالی پروژه

این پروژه به شما یاد می دهد که چگونه:

ساختار یک سند HTML اساسی.
برای استایل محتوای خود از CSS استفاده کنید.
یک طرح کارت ساده با گوشه ها و سایه های گرد ایجاد کنید.
تصاویر، متن و پیوندها را اضافه و سبک کنید.
از Flexbox برای چیدمان عناصر استفاده کنید.

📂 ساختار فایل

پروژه شما دو فایل خواهد داشت:

personal-profile_card/
│– index.html ← The HTML structure
└– styles.css ← The CSS styling

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

📝 فایل HTML (index.html)

این فایل شامل ساختار (یا اسکلت) صفحه وب است. در اینجا به نظر می رسد:

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Personal Profile Card
rel=”stylesheet” href=”styles.css”>

class=”profile-card”>
src=”https://via.placeholder.com/150″ alt=”Profile Picture” class=”profile-img”>
class=”profile-name”>Jane Doe
class=”profile-role”>Web Developer

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح عناصر کلیدی

کانتینر کارت پروفایل ()A box that holds the image, name, role, and social links.
Image Tag ()عکس پروفایل را نمایش می دهد.

سرفصل ها و پاراگراف ها

برای نام کاربر

for the user’s role.

Links برچسب ها برای پیوندهای رسانه های اجتماعی

🎨 فایل CSS (styles.css)

این فایل یک ظاهر طراحی به HTML شما اضافه می کند. در اینجا به نظر می رسد:

body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.profile-card {
background-color: #ffffff;
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
width: 300px;
}

.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
}

.profile-name {
font-size: 1.5em;
margin: 10px 0 5px;
color: #333;
}

.profile-role {
font-size: 1em;
color: #777;
margin-bottom: 20px;
}

.social-links {
display: flex;
justify-content: center;
gap: 10px;
}

.social-link {
text-decoration: none;
color: #008cba;
font-weight: bold;
transition: color 0.3s ease;
}

.social-link:hover {
color: #005f73;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح سبک های کلیدی

پس زمینه و مرکزیت:را body کارت پروفایل را با استفاده از مرکز می کند فلکس باکس و رنگ پس زمینه آبی روشن را تنظیم می کند.

یک ظاهر طراحی کارت:

background-color: پس زمینه سفید را تنظیم می کند.

border-radius: گوشه ها را گرد می کند.

box-shadow: یک سایه ظریف برای عمق اضافه می کند.

یک ظاهر طراحی شده تصویر:

width و height: اندازه تصویر را تنظیم کنید.

border-radius: 50%: تصویر را دایره ای می کند.

سبک سازی متن:نام و نقش را با اندازه فونت ها و رنگ های مختلف استایل می دهد.

پیوندهای اجتماعی:

تنظیم شده با فلکس باکس برای فاصله گذاری

افکت ماوس را برای تغییر رنگ پیوند.

🚀 نحوه استفاده از این پروژه

فایل ها را دانلود کنید:دانلود یا کپی کنید index.html و styles.css فایل ها
فایل HTML را باز کنید:دوبار کلیک کنید index.html فایل را در مرورگر خود باز کنید.

محتوا را ویرایش کنید:

را تغییر دهید نام و نقش.

را جایگزین کنید آدرس تصویر با عکس پروفایل خودتون

را به روز کنید لینک های رسانه های اجتماعی.

با CSS آزمایش کنید:سعی کنید رنگ ها، فونت ها و اندازه ها را تغییر دهید styles.css تا ببینیم چه تاثیری روی طراحی می گذارد!

🧠 آنچه شما یاد خواهید گرفت

چگونه یک طرح بندی HTML ایجاد کنیم.
نحوه استایل دادن به عناصر با CSS
نحوه استفاده از Flexbox برای تراز کردن
نحوه اضافه کردن افکت های شناور برای تعامل

🌟 مراحل بعدی

افزودن ویژگی های بیشتر: شامل بخش بیو یا دکمه تماس باشید.

آن را پاسخگو کنید: یاد بگیرید که چگونه کارت را در دستگاه های تلفن همراه زیبا کنید.

افزودن انیمیشن: از انیمیشن های CSS برای تعامل بیشتر کارت استفاده کنید.

کد نویسی مبارک! 🎉💻

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">