پروژه کارت پروفایل با استفاده از تصویر و توضیحات حسن طهرانی مقدم

ما می‌خواهیم یک کارت پروفایل ایجاد کنیم که ظاهر ساده و حرفه‌ای داشته باشد. در این کارت، عناصری مانند تصویر پروفایل، توضیحات مختصر درباره فرد، مهارت‌های برنامه‌نویسی، و یک دکمه "Know more" وجود دارد که به صفحه‌ای برای اطلاعات بیشتر لینک داده می‌شود.


در این پروژه ما دو فایل داریم : index.html, style.css و یک پوشه assets که فایلهای تصویر ما در آن قرار میگیرند.

کدهای قسمت html

<!DOCTYPE html>
<html lang=&quoten&quot>
  <head>
    <meta charset=&quotUTF-8&quot>
    <title>Profile Card</title>
    <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
    <link rel=&quotpreconnect&quot href=&quothttps://fonts.googleapis.com&quot>
    <link rel=&quotpreconnect&quot href=&quothttps://fonts.gstatic.com&quot crossorigin>
    <link href=&quothttps://fonts.googleapis.com/css2?family=Inter&display=swap&quot rel=&quotstylesheet&quot type='text/css'>
    <link rel=&quotstylesheet&quot type=&quottext/css&quot href=&quotstyle.css&quot>
  </head>
  <body>
    <article class=&quotprofile&quot>
      <div class=&quotprofile__preview&quot>
        <img src=&quotassets/hasan-tehrani-moghadam.jpg&quot alt=&quotMelissa Taylor&quot />
      </div>
      
      <div class=&quotprofile__right&quot>
        <div class=&quotprofile__content&quot>
          <h2>Hasan Tehrani Moghadam</h2>
          <div class=&quotprofile__skills&quot>
            <div class=&quotprofile__skill profile__skill--typescript&quot>
                <a href=&quothttps://www.typescriptlang.org/&quot target=&quot_blank&quot rel=&quotnoopener noreferrer&quot>
                TypeScript
                </a>
            </div>
            <div class=&quotprofile__skill profile__skill--react&quot>
                <a href=&quothttps://reactjs.org/&quot target=&quot_blank&quot rel=&quotnoopener noreferrer&quot>
                    React
                </a>
            </div>
            <div class=&quotprofile__skill profile__skill--vue&quot>
                <a href=&quothttps://vuejs.org/&quot target=&quot_blank&quot rel=&quotnoopener noreferrer&quot>
                Vue
                </a>
            </div>
          </div>
          <p class=&quotprofile__description&quot>
        <a href=&quothttps://www.google.com/search?q=hasan+tehrani+moghadam&quot target=&quot_blank&quot><strong>Tehrani Moqaddam</strong></a> is a general known for his relentless efforts to further develop <strong>Iran’s missile program</strong>. He began establishing <strong>Iran’s</strong> missile program amidst the Iran-Iraq war which began on 1980 and lasted for eight years.
          </p>
        </div>
        <div class=&quotprofile__footer&quot>
          <button class=&quotbtn btn--primary&quot><a href=&quothttps://www.tehrantimes.com/news/491188/IRGC-says-Tehrani-Moghadam-still-a-nightmare-for-Israel&quot title=&quotIRGC says Tehrani Moghadam still a nightmare for Israel&quot target=&quot_blank&quot>Know more!</a></button>
        </div>
      </div>
    </article>
  </body>
</html>

ادرس فایل در گیت هاب:

https://github.com/seyedahmaddv/ui-cards-01/blob/main/index.html

حمایت:

https://zil.ink/seyedahmaddev

استفاده از کلاس‌ها:

  1. profile: کلاس اصلی کارت که شامل تمامی محتوای پروفایل است.
  2. profile__preview: برای نمایش تصویر پروفایل استفاده شده است.
  3. profile__right: بخشی که محتوای سمت راست پروفایل شامل نام، توضیحات و دکمه است.
  4. profile__content: محتوای اصلی پروفایل که شامل نام فرد و توضیحات اوست.
  5. profile__skills: بخشی برای نمایش مهارت‌های شخص.
  6. profile__skill: کلاس مربوط به هر مهارت که با کلاس‌های خاص (مانند profile__skill--typescript, profile__skill--react, و profile__skill--vue) رنگ و استایل خاص خود را دارند.
  7. profile__description: توضیحات مختصر درباره فرد که شامل لینک‌هایی برای کسب اطلاعات بیشتر است.
  8. profile__footer: بخشی در پایین پروفایل که دکمه "Know more" در آن قرار دارد.
  9. btn و btn--primary: کلاس‌هایی برای استایل دادن به دکمه، با استفاده از رنگ اصلی (primary) برای پس‌زمینه.


کد CSS پروژه کارت پروفایل حسن طهرانی مقدم

:root {
  --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --primary-dark: #4834d4;
  --react: #61dafb;
  --typescript: #3178c6;
  --vue: #42b883;
  --white: #fff;
  --background: #f8f8ff;
  --text: #262626;
}

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::selection {
  background: var(--primary);
  color: var(--white);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #f8f8ff;
  font-family: &quotInter&quot, sans-serif;
}

.profile {
  display: flex;
  align-items: center;
  max-width: 40rem;
  width: 100%;
  padding: 3rem 2rem 3rem 1.25rem;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
  border-radius: 1.5rem;
  transition: all 0.2s ease-in-out;
}

.profile__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-left: 2rem;
}

.profile:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px;
}

.profile__preview {
  position: relative;
  max-width: 30rem;
  min-width: 18rem;
  width: 100%;
  margin-left: -4rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.profile__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
}

.profile__content {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.profile__footer {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: end;
}

.profile h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.profile p {
  font-size: 1.075rem;
  font-weight: 400;
}

.profile__skills {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.profile__skill {
  --text-color: var(--primary);
  --border-color: var(--primary);
  color: var(--text-color);
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--border-color);
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 800;
  transition: all 0.2s ease-in-out;
}

.profile__skill:hover {
  background: var(--border-color);
  color: var(--white);
}

.profile__skill--react {
  --text-color: var(--react);
  --border-color: var(--react);
}

.profile__skill--typescript {
  --text-color: var(--typescript);
  --border-color: var(--typescript);
}

.profile__skill--vue {
  --text-color: var(--vue);
  --border-color: var(--vue);
}
a {
  color: inherit;
  text-decoration: none;
}
.btn {
  background: var(--primary);
  color: var(--white);
  font-family: inherit;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  min-width: 13rem;
  border-radius: 2.5rem;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  background: var(--primary-dark);
}

@media (width <= 740px) {
  .profile {
    margin: 0 2.25rem;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 100%;
    text-align: center;
    flex-direction: column;
  }

  .profile__content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }

  .profile__skills {
    justify-content: center;
  }

  .profile__right {
    margin-left: 0;
  }

  .profile h2 {
    margin-right: 0;
    font-size: 1.5rem;
  }

  .profile__preview {
    margin: -8rem 0 2rem 0;
  }

  .profile__preview img {
    border-radius: 50%;
  }

  .profile__footer {
    justify-content: center;
  }
}

در این کد از CSS (سی اس اس) برای طراحی و استایل‌دهی به یک پروفایل (profile) استفاده شده است. با استفاده از متغیرهای CSS (سی اس اس) در بخش `:root`، رنگ‌ها و مقادیر پیش‌فرض تعریف شده‌اند که در سایر بخش‌های کد برای زیبایی و یکپارچگی استفاده می‌شوند.

:root {
  --primary: #6c5ce7; /* پرایمیری */
  --primary-light: #a29bfe; /* پرایمیری لایت */
  --primary-dark: #4834d4; /* پرایمیری دارک */
  --react: #61dafb; /* ریکت */
  --typescript: #3178c6; /* تایپ اسکریپت */
  --vue: #42b883; /* ویو */
  --white: #fff; /* سفید */
  --background: #f8f8ff; /* پس‌زمینه */
  --text: #262626; /* متن */
}

- `:root` مشخص می‌کند که متغیرها برای کل سند قابل دسترسی هستند.

- متغیرهای رنگ تعریف شده‌اند که به راحتی می‌توانند در کل کد استفاده شوند.



body,
html {
  height: 100%; /* ارتفاع کامل */
}

- ارتفاع بدنه (`body`) و HTML به ۱۰۰ درصد تنظیم شده است تا از فضای صفحه به‌طور کامل استفاده شود.



* {
  box-sizing: border-box; /* باکس سایزینگ */
  margin: 0; /* حاشیه */
  padding: 0; /* پدینگ */
}

- با استفاده از `box-sizing`، اندازه عناصر شامل پدینگ و حاشیه‌ها خواهد بود. این به طراحی بهتر کمک می‌کند.



*::selection {
  background: var(--primary); /* پس‌زمینه انتخاب */
  color: var(--white); /* رنگ انتخاب */
}

- این بخش مشخص می‌کند که وقتی کاربر متنی را انتخاب می‌کند، پس‌زمینه و رنگ آن چگونه باشد.



body {
  display: flex; /* فلکس باکس */
  align-items: center; /* تراز عمودی */
  justify-content: center; /* تراز افقی */
  margin: 0; /* حاشیه */
  background: #f8f8ff; /* پس‌زمینه */
  font-family: &quotInter&quot, sans-serif; /* فونت */
}

- با استفاده از `flex`، محتویات بدنه به مرکز صفحه تراز می‌شوند و پس‌زمینه با رنگ مشخص شده است.



.profile {
  display: flex; /* فلکس باکس */
  align-items: center; /* تراز عمودی */
  max-width: 40rem; /* حداکثر عرض */
  width: 100%; /* عرض کامل */
  padding: 3rem 2rem 3rem 1.25rem; /* پدینگ */
  background: #ffffff; /* پس‌زمینه */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px; /* سایه */
  border-radius: 1.5rem; /* گوشه گرد */
  transition: all 0.2s ease-in-out; /* ترانزیشن */پ
}

- کلاس `.profile` برای استایل‌دهی به پروفایل کاربر استفاده شده است که شامل سایه و گوشه‌های گرد است.



.profile:hover {
  cursor: pointer; /* نشانگر ماوس */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px; /* سایه */
}

- با قرار دادن ماوس روی پروفایل، سایه و نشانگر ماوس تغییر می‌کند.

.profile__preview {
  position: relative; /* موقعیت نسبی */
  max-width: 30rem; /* حداکثر عرض */
  min-width: 18rem; /* حداقل عرض */
  width: 100%; /* عرض کامل */
  margin-left: -4rem; /* حاشیه چپ منفی */
  aspect-ratio: 1 / 1; /* نسبت ابعاد */
  object-fit: cover; /* اندازه‌گیری مناسب */
}
- این کلاس برای تصویر پروفایل کاربر طراحی شده و شامل تنظیمات اندازه و موقعیت است.
a {
  color: inherit; /* رنگ وراثتی */
  text-decoration: none; /* بدون زیرخط */
}

- لینک‌ها بدون زیرخط و با رنگ وراثتی از والدین خود نمایش داده می‌شوند.

.btn {
  background: var(--primary); /* پس‌زمینه دکمه */
  color: var(--white); /* رنگ متن */
  font-family: inherit; /* فونت وراثتی */
  padding: 1rem 1.5rem; /* پدینگ */
  font-size: 1.125rem; /* اندازه فونت */
  min-width: 13rem; /* حداقل عرض */
  border-radius: 2.5rem; /* گوشه گرد */
  border: 0; /* بدون حاشیه */
  font-weight: 600; /* وزن فونت */
  cursor: pointer; /* نشانگر ماوس */
  transition: all 0.2s ease-in-out; /* ترانزیشن */
}

- این کلاس برای دکمه‌ها طراحی شده و شامل پدینگ، سایه و حالت hover است.

@media (width <= 740px) {
  .profile {
    margin: 0 2.25rem; /* حاشیه */
    padding-left: 3rem; /* پدینگ چپ */
    padding-right: 3rem; /* پدینگ راست */
    width: 100%; /* عرض کامل */
    text-align: center; /* تراز متن */
    flex-direction: column; /* چینش عمودی */
  }
}

- با استفاده از media query، استایل‌ها برای صفحه‌نمایش‌های کوچکتر تغییر می‌کنند تا طراحی واکنش‌گرا (Responsive) باشد.

این کد CSS (سی اس اس) طراحی یک پروفایل کاربری را با استفاده از اصول طراحی وب مدرن به تصویر می‌کشد. استفاده از متغیرها، فلکس باکس و media queries به ایجاد یک رابط کاربری زیبا و واکنش‌گرا کمک می‌کند. با به‌کارگیری رنگ‌ها و استایل‌های مناسب، این کد به ایجاد تجربه کاربری بهتر و دسترسی آسان‌تر به اطلاعات کمک می‌کند.

تصویر نسخه موبایل:


توضیحات پروژه در گیت هاب:

# ui-cards-01
Profile Card for Hasan Tehrani Moghadam

Here’s a concise README description for your GitHub repository based on the HTML and CSS code provided:

---

# Profile Card Component

This project demonstrates a responsive **Profile Card** component built with HTML and CSS, featuring an interactive layout and hover effects. The card is designed to display a user's image, name, skills, and a brief description with a call-to-action button for more information. It is styled using custom CSS properties and modern web design techniques.

## Features

- **Profile Picture**: Displays a user’s profile picture with a hover effect.
- **Skills Section**: Showcases the user’s skills (TypeScript, React, Vue) with links to their respective websites.
- **Responsive Design**: Adjusts layout and styling based on screen size, optimized for both desktop and mobile devices.
- **Hover Effects**: Interactive hover effects for skills and the card itself.
- **Customizable**: Easily change colors and styles by modifying CSS variables.

## CSS Custom Properties (Variables)

The design uses a set of CSS custom properties (variables) for easy customization:

```css
:root {
  --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --primary-dark: #4834d4;
  --react: #61dafb;
  --typescript: #3178c6;
  --vue: #42b883;
  --white: #fff;
  --background: #f8f8ff;
  --text: #262626;
}
```

These variables control the theme colors, including primary, React, TypeScript, and Vue colors, allowing for easy modification of the component's appearance.

## Structure

- **HTML**: The profile card is structured using semantic HTML elements.
- **CSS**: The layout is created using Flexbox, ensuring a clean, responsive design.
  
### File Breakdown:
- `index.html`: Contains the structure of the profile card, including the user image, name, description, skills, and button.
- `style.css`: Contains all the styles for the profile card, including responsive design for mobile screens.
  

## How to Use

1. Clone the repository.
2. Open `index.html` in a browser to view the profile card.
3. Customize the profile content and styles as needed.

## Preview

Here's an example of the profile card:
[Link of Card 01 Hasan Tehrani Moghadam](https://seyedahmaddv.github.io/ui-cards-01/)

![Profile Card Preview](assets/card-01-hasan-tehrani-moghadam.jpg)

![Profile Card Mobile Version Preview](assets/card-01-hasan-tehrani-moghadam-mobile-version.jpg)


حمایت و لینک کانال تلگرام:

https://zil.ink/seyedahmaddev

مشاهده صفحه در گیت هاب پیجز:

https://seyedahmaddv.github.io/ui-cards-01

لینک گیت هاب:

https://github.com/seyedahmaddv/ui-cards-01.git