banner.html

<div style="
  display: flex;
  flex-direction: row; /* نمایش افقی عناصر */
  align-items: center;
  justify-content: space-between; /* لوگو در چپ و بقیه محتوا وسط */
  background: linear-gradient(45deg, #3CA04D 0%, #2E7D32 100%); /* سبز تیره‌تر و ملایم‌تر */
  padding: 24px;
  border-radius: 8px;
">
  <!-- لوگوی دانشگاه سمت چپ -->
  <div style="display: flex; align-items: center; justify-content: center;">
    <img src="UT.png" alt="University of Tehran Logo" style="width: 120px; height: auto;" />
  </div>

  <!-- محتوای بنر وسط -->
  <div style="
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* گسترش محتوا به وسط */
  ">
    <h1 style="
      font-size: 48px;
      color: #fafafa;
      margin: 0;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    ">
    </h1>
    <p style="
      margin: 0;
      line-height: 1.6rem;
      font-size: 16px;
      color: #fafafa;
      opacity: 0.8;
    ">
      <br />
      This Space is brought to you by Ariamehr Maleki from Data Mining and Optimization of Intelligent Systems Research Lab at University of Tehran, for your convenience, to showcase the capabilities of state-of-the-art models for Persian Speech to text transcription.
    </p>

    <div style="
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 16px;
    ">
      <a href="https://github.com/Ariamehr-M">
        <img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="Github" />
      </a>
      <a href="https://www.linkedin.com/in/ariamehr-maleki">
        <img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" />
      </a>
    </div>
  </div>
</div>