در قسمت قبل با برخی از متد های کمکی لاراول در blade آشنا شدیم و حالا نوبت به نوشتن HTML و ظاهر اینستاگرام است. اگر یادتان باشد در جلسه ی قبل تصویر لوگوی روکسو را در فایل app.blade.php قرار دادیم. همانطور که می بینید این شکل دو اشکال دارد: اولا لوگو بیش از حد بزرگ است و دوما لوگو و نوشته ی ما روی هم قرار گرفته اند. مشکل اول را با یک تگ استایل و height ساده حل می کنم:

و برای مشکل دوم از بوت استرپ استفاده کرده و کلاس d-flex را به آن می دهیم. در حال حاضر لوگوی روکسو در کنار نوشته ی RoxoGram قرار می گیرد اما به هم چسبیده اند و باید آن ها را از هم جدا کنیم بنابراین. من به هر کدام کلاس های pr (همان padding-right – ما از بوت استرپ استفاده می کنیم) و pl (مخفف padding left) را داده ام تا از هم فاصله پیدا کنند. من می خواهم بین آن ها خطی را نیز قرار بدهم بنابراین به تصویر لوگو یک border-right می دهم:




