نحوه ایجاد نمایه رسانه اجتماعی برای صفحات مختلف با استفاده از TailwindCSS

ek3nk4r 2023-03-06

0 37 خواندن این مطلب 4 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

طراحی با الهام از [icodethis]پلت فرم (https://icodethis.com).

رسانه های اجتماعی فناوری های تعاملی هستند که ایجاد و به اشتراک گذاری اطلاعات، ایده ها، علایق و سایر اشکال بیان را از طریق جوامع و شبکه های مجازی تسهیل می کنند.

یکی از ویژگی‌های شگفت‌انگیز رسانه‌های اجتماعی، امکان برقراری ارتباط با مردم و پیدا کردن دوستان جدید و گاهی اوقات حتی همکاران آینده است. اما به طور کلی، قبل از اینکه با هم دوست شوند یا با یکدیگر آشنا شوند، عموماً از طریق چیزی که به آن می گویند، ایده ای از اینکه شما کی هستید به دست می آورند. نمایه رسانه اجتماعی شما.

این ویژگی به شما این امکان را می‌دهد که بیشتر در مورد خودتان به دنیا بگویید، چه چیزی دوست دارید، چه چیزی دوست دارید و غیره

با هم، ما قصد داریم یکی از این مولفه‌های نمایه رسانه اجتماعی را بسازیم، که می‌توانید آن را در پروژه بعدی خود، یا شاید در بزرگترین رسانه اجتماعی بعدی که خواهید ساخت، قرار دهید.😏

بیا بریم!

نسخه ی نمایشی نمایه اجتماعی

فهرست مطالب

درک وظیفه

این در واقع آسان از آنچه فکر می کنید است. این در واقع یک جزء است که اشکال مختلفی بر اساس اندازه صفحه دارد. شگفت انگیز درست است؟

اما در این آموزش ما آن را اینگونه نمی سازیم، فقط روی ساختن نماهای مختلف تمرکز می کنیم، سپس در یک جلسه متفاوت، آن را یکی می کنیم.

نماهای مختلف از نمایه اجتماعی

بیایید دیدگاه های مختلف را نام ببریم.

Mobile-View
تبلت-نما
Desktop-View

ساختار کد

ما می توانیم کد خود را به این ترتیب ساختار دهیم

<body>

 <div>
  <div>
            <!-- Mobile View-->
          <div></div>
           <!-- Tablet View-->
          <div></div>   
           <!-- Desktop View-->
          <div></div>  
  </div>
 </div>

</body>

نمایش موبایل

این ساده ترین است. فقط مستقیم به جلو

<div class="w-[20rem] py-10 flex flex-col items-center gap-y-5">
        <!--Profile Image-->
    <div>
      <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
    </div>
     <!--Profile Details-->
    <div>
        <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
        <p class="text-slate-500">@mbianou_bradon</p>
    </div>
     <!--Follow Button-->
    <div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>

</div>

ما یک تصویر نمایه، جزئیات نمایه و دکمه تماس برای اقدام داریم.

تصویر نمایه: الف داد width از w-16، با یک border-radius از rounded-full. ما همچنین آن را پاسخگو با aspect-square object-center object-cover . ما همچنین اثر را اضافه کردیم scale-125 بر hover.
جزئیات پروفایل: یک ظاهر طراحی شده اولیه اعمال شد، فقط به آنها داد font-size از text-xl برای نام و رنگ text-slate-500 به دسته
دکمه پیگیری: اینجا هیچ چیز خارق العاده ای نیست، padding-inline px-7 padding-block py-2 border و افکت شناور را روی متن و رنگ پس‌زمینه قرار دهید.

آسان درست است؟ اینطور نیست؟😁

نمایش تبلت

این نما اطلاعات بیشتری نسبت به نمای موبایل دارد. اینطوری به نظر می رسد.

<div class="w-[25rem] px-6 py-10 col-span-2 col-start-3">
   <div class="flex items-center justify-between">
        <!--Profile Image-->
      <div>
        <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
        </div>
        <!--Follow Button-->
   <div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>
   </div>
        <!--Profile Details-->
  <div>
     <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
     <p class="text-slate-500">@mbianou_bradon</p>
   </div>
        <!--Profile About-->
  <div class="font-bold"><p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p></div>
  </div>

در مقایسه با نمای موبایل، ما یک بخش جدید داریم، آن هم نمایه درباره. این به سادگی یک پاراگراف با یک است font-weight از font-bold. 👌

نمای دسکتاپ

این نمای تقریباً شبیه به نمای تبلت است، فقط جزئیات بیشتری دارد که نمای تبلت ندارد.

<div class="w-[30rem] px-6 py-10 col-span-4 place-self-center">
  <div class="flex items-center justify-between">
        <!--Profile Image-->
    <div>
        <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
      </div>
        <!--Follow Button -->
     <div class="rounded-3xl px-7 py-2 bg-[#0e192c] text-white hover:border hover:bg-white hover:text-black transition-all ease-linear duration-300 cursor-pointer"><h2>follow</h2></div>
</div>
        <!--Profile IDetails-->
<div>
    <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
    <p class="text-slate-500">@mbianou_bradon</p>
</div>
        <!--Profile About-->
  <div class="font-bold">
    <p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p>
  </div>
        <!--Profile System Details -->
  <div class="[&>*>h2>span]:font-semibold [&>*>h2>span]:text-black flex items-center text-slate-600">
      <div><h2><span>15K</span> Followers</h2></div>
       <div class="flex items-center gap-1 mx-1">
          <div class="text-sm">
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
           </div>
        <h2><span>7K</span> Following</h2>
 </div>
 <div class="flex items-center gap-1">
      <div class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
      </div>
   <h2>Since September 30, 2020</h2>
    </div>
  </div>

</div>

اسمی بهتر از این پیدا نکردم مشخصات سیستم مشخصات، امیدوارم مشکلی نداشته باشید 😅

این بخش فقط در مورد تعداد اتصالات نمایه و زمان پیوستن وی به پلت فرم به شما می گوید.

و بس!

نتیجه نهایی

نتیجه

همانطور که قبلاً ذکر شد، ما فقط نماهای فردی را ایجاد می کنیم، من مطمئناً جلسه ای را تشکیل می دهم که در آن همه چیز را به عنوان یکی به هم می پیوندیم. بهتر از آن، می توانید آن را به عنوان یک چالش در نظر بگیرید و به عنوان یک آن را با هم بپیوندید. باور کن سخت نیست اما آسان هم نیست.

می توانید یک پیش نمایش زنده در Codepen داشته باشید یا کد را در GitHub پیدا کنید.

دریغ نکنید که اگر توانستید این آموزش را کامل کنید، با من به اشتراک بگذارید، خوشحال می‌شوم که استایل دیگری را که اضافه کرده‌اید ببینم.

اگر نگرانی یا پیشنهادی دارید، دریغ نکنید که آنها را در بخش نظرات مطرح کنید! 😊

می بینمت! 👋

ek3nk4r 2023-03-06

0 37 خواندن این مطلب 4 دقیقه زمان میبرد