index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <!-- ! Page Title Icon -->
  <link rel="icon" href="images/chart-line-solid.svg">
  <!-- ! Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- ! Main Template CSS File -->
  <link rel="stylesheet" href="css/style.min.css">
  <link rel="stylesheet" href="css/framework.min.css">
  <link rel="stylesheet" href="css/darkMode.min.css">
  <!-- ! File Of Animations -->
  <link rel="stylesheet" href="css/aos.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css">
  <!-- ! Render All Elements Normally -->
  <link rel="stylesheet" href="css/normalize.min.css">
  <!-- ! Font Awesome Library -->
  <link rel="stylesheet" href="css/all.min.css">
  <!-- ! Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap">
  <script>
    window.onload = function () {
      AOS.init();
    };
  </script>
</head>

<body>
  <div class="dashboard d-flex">
    <!-- ! Start Sidebar -->
    <div class="sidebar bg-white position-relative">
      <div class="holder position-fixed">
        <h3 class="position-relative text-center fw-bold">Allam</h3>
        <div class="links">
          <ul>
            <li>
              <a class="active d-flex align-items-center" href="index.html">
                <i class="fa-regular fa-chart-bar fa-fw"></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="settings.html">
                <i class="fa-solid fa-gear fa-fw"></i>
                <span>Settings</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="profile.html">
                <i class="fa-regular fa-user fa-fw"></i>
                <span>Profile</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="projects.html">
                <i class="fa-solid fa-diagram-project fa-fw"></i>
                <span>Projects</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="statistics.html">
                <i class="fa-solid fa-chart-simple fa-fw"></i>
                <span>Statistics</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="courses.html">
                <i class="fa-solid fa-graduation-cap fa-fw"></i>
                <span>Courses</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="friends.html">
                <i class="fa-regular fa-circle-user fa-fw"></i>
                <span>Friends</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="files.html">
                <i class="fa-regular fa-file fa-fw"></i>
                <span>Files</span>
              </a>
            </li>
            <li>
              <a class="d-flex align-items-center" href="plans.html">
                <i class="fa-regular fa-credit-card fa-fw"></i>
                <span>Plans</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="log-out">
          <span>
            <i class="fa-solid fa-arrow-right-from-bracket" style="color: #e10000;"></i>
            <a href="">Log out</a>
          </span>
        </div>
      </div>
    </div>
    <!-- ! End Sidebar -->
    <!-- ! Start Content -->
    <div class="content">
      <!-- ! Start Header -->
      <div class="header bg-white d-flex justify-content-between align-items-center">
        <div class="search position-relative">
          <input type="text" id="keywordInput" placeholder="Type A Keyword" name="keyword">
          <i class="fa-solid fa-search"></i>
        </div>
        <button id="darkmode-button" class="btn rounded-circle">
          <i class="fa-solid fa-moon toggle-icon"></i>
        </button>
        <div class="notifications d-flex align-items-center">
          <i class="fa-regular fa-bell fa-lg"></i>
        </div>
        <div id="notif-container" class="notif-container">
          <ul id="notif-list" class="show">
            <h4>Notifications</h4>
            <li>
              <a href="https://gzixnine.github.io/Template_Three/#events" target="_blank">
                <img src="images/team-05.png" alt="Avatar">
                <div>
                  <span>It's Ahmed Allam's birthday!</span>
                  <span>12 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#"><img src="images/team-01.png" alt="Avatar">
                <div>
                  <span>Ahmed sent you a friend request.</span>
                  <span>19 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/team-03.png" alt="Avatar">
                <div>
                  <span>Ahlam reacted to your post.</span>
                  <span>23 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/team-04.png" alt="Avatar">
                <div>
                  <span>Asmaa reacted to your comment.</span>
                  <span>7 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/team-05.png" alt="Avatar">
                <div>
                  <span>Ahmed sent you a friend request.</span>
                  <span>10 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/team-02.png" alt="Avatar">
                <div>
                  <span>Ashraf invited you to a group.</span>
                  <span>8 Hours Ago</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/team-03.png" alt="Avatar">
                <div>
                  <span>Abbas replied to your comment.</span>
                  <span>2 Hours Ago</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="profile">
          <a href="profile.html">
            <img src="images/avatar.png" alt="" />
            <span>Allam</span>
          </a>
        </div>
      </div>
      <!-- ! End Header -->
      <!-- ! Start Dashboard -->
      <h1 class="position-relative header-page">Dashboard</h1>
      <div class="dashboard-page">
        <div class="wrapper">
          <!-- ! Start Welcome Section -->
          <div class="welcome mega" data-aos="fade-right" data-aos-delay="250">
            <div class="banner d-flex justify-content-between">
              <div>
                <h2 class="section-header">Welcome</h2>
                <span class="section-des">Allam</span>
              </div>
              <img src="images/welcome.png" alt="">
            </div>
            <img src="images/avatar.png" alt="" class="avatar">
            <div class="info d-flex justify-content-around align-items-center text-center">
              <div>Ahmed Allam<span>Front end learner</span></div>
              <div>80<span>Projects</span></div>
              <div>$8500<span>Earned</span></div>
            </div>
            <div class="link d-flex">
              <a href="profile.html"><button class="button">Profile</button></a>
            </div>
          </div>
          <!-- ! End Welcome Section -->
          <!-- ! Start Quick Draft Section -->
          <div class="quick-draft mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Quick Draft</h2>
              <span class="section-des">Write A Draft For Your Ideas</span>
            </div>
            <input type="text" id="text" name="text" placeholder="Title">
            <textarea name="userComment" id="commentArea" placeholder="Your Thought"></textarea>
            <div class="link d-flex"></div>
            <div class="link d-flex">
              <a href=""><button class="button">Save</button></a>
            </div>
          </div>
          <!-- ! End Quick Draft Section -->
          <!-- ! Start Yearly Target Section -->
          <div class="yearly-target mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Yearly Targets</h2>
              <span class="section-des">Targets Of The Year</span>
            </div>
            <div class="prog">
              <div class="theme d-flex align-items-center justify-content-center blue">
                <i class="fa-solid fa-dollar-sign fa-lg c-blue"></i>
              </div>
              <div class="details">
                <span class="name">Money</span>
                <span class="data d-flex justify-content-between align-items-center">$20.000 <span
                    class="percent bg-blue">80%</span></span>
                <div class="progress position-relative blue">
                  <span class="bg-blue" data-prog="80%">
                  </span>
                </div>
              </div>
            </div>
            <div class="prog">
              <div class="theme d-flex align-items-center justify-content-center orange">
                <i class="fa-solid fa-code fa-lg c-orange"></i>
              </div>
              <div class="details">
                <span class="name">Projects</span>
                <span class="data d-flex justify-content-between align-items-center">24<span
                    class="percent bg-orange">55%</span></span>
                <div class="progress position-relative orange">
                  <span class="bg-orange" data-prog="55%">
                  </span>
                </div>
              </div>
            </div>
            <div class="prog">
              <div class="theme d-flex align-items-center justify-content-center green">
                <i class="fa-solid fa-user fa-lg c-green"></i>
              </div>
              <div class="details">
                <span class="name">Team</span>
                <span class="data d-flex justify-content-between align-items-center">12<span
                    class="percent bg-green">75%</span></span>
                <div class="progress position-relative green">
                  <span class="bg-green" data-prog="75%">
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- ! End Yearly Target Section -->
          <!-- ! Start Tickets Statistics Section -->
          <div class="statistics mega" id="statistics" data-aos="fade-right" data-aos-delay="250">
            <div>
              <h2 class="section-header">Tickets Statistics</h2>
              <span class="section-des">Everything About Support Tickets</span>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-12 col-sm-12 box text-center">
                <i class="fa-regular fa-rectangle-list c-orange"></i>
                <span class="d-block" data-goal="2500">0</span>
                Total
              </div>
              <div class="col-lg-6 col-md-12 col-sm-12 box text-center">
                <i class="fa-solid fa-spinner c-blue"></i>
                <span class="d-block" data-goal="500">0</span>
                Pending
              </div>
              <div class="col-lg-6 col-md-12 col-sm-12 box text-center">
                <i class="fa-regular fa-circle-check c-green"></i>
                <span class="d-block" data-goal="1900">0</span>
                Closed
              </div>
              <div class="col-lg-6 col-md-12 col-sm-12 box text-center">
                <i class="fa-regular fa-rectangle-xmark c-red"></i>
                <span class="d-block" data-goal="100">0</span>
                Deleted
              </div>
            </div>
          </div>
          <!-- ! End Tickets Statistics Section -->
          <!-- ! Start Lastest News Section -->
          <div class="news mega" data-aos="fade-right" data-aos-delay="250">
            <div>
              <h2 class="section-header">Lastest News</h2>
            </div>
            <div class="data">
              <div class="row">
                <div class="col-lg-12 d-flex align-items-center item">
                  <img src="images/news-01.png" alt="">
                  <div class="info">
                    <h3>Created SASS Section</h3>
                    <p>New SASS Examples & Tutorials</p>
                  </div>
                  <div class="time">3 Days Ago</div>
                </div>
                <div class="col-lg-12 d-flex align-items-center item">
                  <img src="images/news-02.png" alt="">
                  <div class="info">
                    <h3>Changed The Design</h3>
                    <p>A Brand New Website Design</p>
                  </div>
                  <div class="time">5 Days Ago</div>
                </div>
                <div class="col-lg-12 d-flex align-items-center item">
                  <img src="images/news-03.png" alt="">
                  <div class="info">
                    <h3>Team Increased</h3>
                    <p>3 Developers Joined The Team</p>
                  </div>
                  <div class="time">7 Days Ago</div>
                </div>
                <div class="col-lg-12 d-flex align-items-center item">
                  <img src="images/news-04.png" alt="">
                  <div class="info">
                    <h3>Added Payment Gateway</h3>
                    <p>Many New Payment Gateways Added</p>
                  </div>
                  <div class="time">9 Days Ago</div>
                </div>
              </div>
            </div>
          </div>
          <!-- ! End Lastest News Section -->
          <!-- ! Start Latest Tasks Section -->
          <div class="tasks mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Latest Tasks</h2>
            </div>
            <div class="data">
              <div class="d-flex align-items-center item">
                <div class="info">
                  <h3>Record One New Video</h3>
                  <p>Record Python Create Exe Project</p>
                </div>
                <div class="contain-delete">
                  <i class="fa-regular fa-trash-can delete"></i>
                </div>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <h3>Write Article</h3>
                  <p>Write Low Level vs High Level Languages</p>
                </div>
                <div class="contain-delete">
                  <i class="fa-regular fa-trash-can delete"></i>
                </div>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <h3>Finish Project</h3>
                  <p>Publish Academy Programming Project</p>
                </div>
                <div class="contain-delete">
                  <i class="fa-regular fa-trash-can delete"></i>
                </div>
              </div>
              <div class="d-flex align-items-center item done">
                <div class="info">
                  <h3>Attend The Meeting</h3>
                  <p>Attend The Project Business Analysis Meeting</p>
                </div>
                <div class="contain-delete">
                  <i class="fa-regular fa-trash-can delete"></i>
                </div>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <h3>Finish Lesson</h3>
                  <p>Finish Teaching Flex Box</p>
                </div>
                <div class="contain-delete">
                  <i class="fa-regular fa-trash-can delete"></i>
                </div>
              </div>
            </div>
          </div>
          <!-- ! End Latest Tasks Section -->
          <!-- ! Start Top Search Section -->
          <div class="search mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Top Search Items</h2>
            </div>
            <div class="data">
              <div class="d-flex align-items-center item">
                <div class="top">
                  <p>Keyword</p>
                </div>
                <p>Search Count</p>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>Programming</p>
                </div>
                <span>220</span>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>JavaScript</p>
                </div>
                <span>180</span>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>PHP</p>
                </div>
                <span>160</span>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>Code</p>
                </div>
                <span>145</span>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>Design</p>
                </div>
                <span>110</span>
              </div>
              <div class="d-flex align-items-center item">
                <div class="info">
                  <p>Logic</p>
                </div>
                <span>95</span>
              </div>
            </div>
          </div>
          <!-- ! End Top Search Section -->
          <!-- ! Start Latest Uploads Section -->
          <div class="latest mega" data-aos="fade-right" data-aos-delay="250">
            <div>
              <h2 class="section-header">Latest Uploads</h2>
            </div>
            <div class="data">
              <div class="d-flex align-items-center item">
                <img src="images/pdf.svg" alt="">
                <div class="info">
                  <h3>my-file.pdf</h3>
                  <p>Elzero</p>
                </div>
                <div class="time">2.9mb</div>
              </div>
              <div class="d-flex align-items-center item">
                <img src="images/avi.svg" alt="">
                <div class="info">
                  <h3>My-Video-File.avi</h3>
                  <p>Admin</p>
                </div>
                <div class="time">4.9mb</div>
              </div>
              <div class="d-flex align-items-center item">
                <img src="images/psd.svg" alt="">
                <div class="info">
                  <h3>My-Psd-File.pdf</h3>
                  <p>Osama</p>
                </div>
                <div class="time">4.5mb</div>
              </div>
              <div class="d-flex align-items-center item">
                <img src="images/zip.svg" alt="">
                <div class="info">
                  <h3>My-Zip-File.pdf</h3>
                  <p>User</p>
                </div>
                <div class="time">8.9mb</div>
              </div>
              <div class="d-flex align-items-center item">
                <img src="images/dll.svg" alt="">
                <div class="info">
                  <h3>My-DLL-File.pdf</h3>
                  <p>Admin</p>
                </div>
                <div class="time">4.9mb</div>
              </div>
              <div class="d-flex align-items-center item">
                <img src="images/eps.svg" alt="">
                <div class="info">
                  <h3>My-Eps-File.pdf</h3>
                  <p>Designer</p>
                </div>
                <div class="time">8.9mb</div>
              </div>
            </div>
          </div>
          <!-- ! End Latest Uploads Section -->
          <!-- ! Start Last Project Progress Section -->
          <div class="projects mega" data-aos="fade-right" data-aos-delay="250">
            <div>
              <h2 class="section-header">Last Project Progress</h2>
            </div>
            <div class="list">
              <ul>
                <li>
                  <span class="compelete">
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <p>Got The Project</p>
                </li>
                <li>
                  <span class="compelete">
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <p>Started The Project</p>
                </li>
                <li>
                  <span class="compelete">
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <p>The Project About To Finish</p>
                </li>
                <li>
                  <span class="current"></span>
                  <p>Test The Project</p>
                </li>
                <li>
                  <span class=""></span>
                  <p>Finish The Project & Get Money</p>
                </li>
              </ul>
              <img src="images/project.png" alt="">
            </div>
          </div>
          <!-- ! End Last Project Progress Section -->
          <!-- ! Start Reminders Section -->
          <div class="reminders mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Reminders</h2>
            </div>
            <div class="data position-relative">
              <div class="info-box d-flex align-items-center">
                <span class="ball bg-blue"></span>
                <div class="info b-blue">
                  <p>Check My Tasks List</p>
                  <span>28/09/2022 - 12:00am</span>
                </div>
              </div>
              <div class="info-box d-flex align-items-center">
                <span class="ball bg-green"></span>
                <div class="info b-green">
                  <p>Check My Projects</p>
                  <span>26/10/2022 - 12:00am</span>
                </div>
              </div>
              <div class="info-box d-flex align-items-center">
                <span class="ball bg-orange"></span>
                <div class="info b-orange">
                  <p>Call All My Clients</p>
                  <span>05/11/2022 - 12:00am</span>
                </div>
              </div>
              <div class="info-box d-flex align-items-center">
                <span class="ball bg-red"></span>
                <div class="info b-red">
                  <p>Finish The Development Workshop</p>
                  <span>20/12/2022 - 12:00am</span>
                </div>
              </div>
            </div>
          </div>
          <!-- ! End Reminders Section -->
          <!-- ! Start Latest Post Widget Section -->
          <div class="latest-post mega" data-aos="fade-left" data-aos-delay="250">
            <div>
              <h2 class="section-header">Latest Post</h2>
            </div>

            <!-- Post 1 -->
            <div class="data active">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-01.png" alt="" />
                <div class="info">
                  <span class="d-block name">Ahmed Allam</span>
                  <span class="time">About 3 Hours Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Hard work beats talent when talent doesn't work hard.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>1.1K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>340</span></div>
              </div>
            </div>

            <!-- Post 2 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-02.png" alt="" />
                <div class="info">
                  <span class="d-block name">Osama Elzero</span>
                  <span class="time">About 12 Hours Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                You can fool some people all the time, but not everyone.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>1.8K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>500</span></div>
              </div>
            </div>

            <!-- Post 3 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-03.png" alt="" />
                <div class="info">
                  <span class="d-block name">Mohamed Farghaly</span>
                  <span class="time">About 2 Days Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Your time is limited, don't waste it living someone else's life.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>600</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>200</span></div>
              </div>
            </div>

            <!-- Post 4 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-04.png" alt="" />
                <div class="info">
                  <span class="d-block name">Mohammed Hassan</span>
                  <span class="time">About 3 Hours Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                In the middle of every difficulty lies opportunity.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>2K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>1.2K</span></div>
              </div>
            </div>

            <!-- Post 5 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-05.png" alt="" />
                <div class="info">
                  <span class="d-block name">Eslam Ahmed</span>
                  <span class="time">About 12 Days Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Success is not final, failure is not fatal: It’s the courage to continue that counts.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>1.2K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>400</span></div>
              </div>
            </div>

            <!-- Post 6 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-03.png" alt="" />
                <div class="info">
                  <span class="d-block name">Sara Ibrahim</span>
                  <span class="time">About 5 Days Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                The only way to do great work is to love what you do.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>900</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>350</span></div>
              </div>
            </div>

            <!-- Post 7 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-01.png" alt="" />
                <div class="info">
                  <span class="d-block name">Yasser Ali</span>
                  <span class="time">About 7 Hours Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Don't watch the clock; do what it does. Keep going.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>1.5K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>670</span></div>
              </div>
            </div>

            <!-- Post 8 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-05.png" alt="" />
                <div class="info">
                  <span class="d-block name">Nour El-Deen</span>
                  <span class="time">About 4 Days Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Dream big, work hard, stay focused, and surround yourself with good people.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>2.2K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>1.1K</span></div>
              </div>
            </div>

            <!-- Post 9 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-04.png" alt="" />
                <div class="info">
                  <span class="d-block name">Ali Kamal</span>
                  <span class="time">About 6 Hours Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Life is 10% what happens to you and 90% how you react to it.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>3K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>900</span></div>
              </div>
            </div>

            <!-- Post 10 -->
            <div class="data">
              <div class="top d-flex align-items-center">
                <img class="avatar" src="images/team-02.png" alt="" />
                <div class="info">
                  <span class="d-block name">Fatma Zahra</span>
                  <span class="time">About 1 Day Ago</span>
                </div>
              </div>
              <div class="post-content d-flex align-items-center justify-content-center">
                Failure will never overtake me if my determination to succeed is strong enough.
              </div>
              <div class="post-stats d-flex align-items-center justify-content-between">
                <div><i class="fa-solid fa-heart"></i> <span>1.4K</span></div>
                <div><i class="fa-solid fa-comments"></i> <span>540</span></div>
              </div>
            </div>
          </div>

          <!-- ! End Latest Post Widget Section -->
          <!-- ! Start Social Media Stats Widget Section -->
          <div class="social-media mega" data-aos="fade-right" data-aos-delay="250">
            <div>
              <h2 class="section-header">Social Media Stats</h2>
            </div>
            <div class="data">
              <div class="box twitter d-flex align-items-center justify-content-between">
                <i class="fa-brands bg-twitter fa-twitter fa-2x"></i>
                <span class="c-twitter info">90K Followers</span>
                <a class="bg-twitter" href="#">Follow</a>
              </div>
              <div class="box facebook d-flex align-items-center justify-content-between">
                <i class="fa-brands bg-facebook fa-facebook-f fa-2x"></i>
                <span class="c-facebook info">2M Like</span>
                <a class="bg-facebook" href="#">Like</a>
              </div>
              <div class="box youtube d-flex align-items-center justify-content-between">
                <i class="fa-brands bg-youtube fa-youtube fa-2x"></i>
                <span class="c-youtube info">1M Subs</span>
                <a class="bg-youtube" href="#">Subscribe</a>
              </div>
              <div class="box linkedin d-flex align-items-center justify-content-between">
                <i class="fa-brands bg-linkedin fa-linkedin fa-2x"></i>
                <span class="c-linkedin info">70K Followers</span>
                <a class="bg-linkedin" href="#">Follow</a>
              </div>
            </div>
          </div>
          <!-- ! Start End Media Stats Widget -->
        </div>
        <!-- ! Start Projects Table Section -->
        <div class="table mega" data-aos="fade-down" data-aos-delay="300">
          <div>
            <h2 class="section-header">Projects</h2>
          </div>
          <div class="responsive-table">
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Finish Date</th>
                  <th>Client</th>
                  <th>Price</th>
                  <th>Team</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Ministry Wikipedia</td>
                  <td>10 May 2022</td>
                  <td>Ministry</td>
                  <td>$5300</td>
                  <td>
                    <img src="images/team-01.png" alt="" />
                    <img src="images/team-02.png" alt="" />
                    <img src="images/team-03.png" alt="" />
                    <img src="images/team-05.png" alt="" />
                  </td>
                  <td>
                    <span class="label bg-orange">Pending</span>
                  </td>
                </tr>
                <tr>
                  <td>Elzero Shop</td>
                  <td>12 Oct 2021</td>
                  <td>Elzero Company</td>
                  <td>$1500</td>
                  <td>
                    <img src="images/team-01.png" alt="" />
                    <img src="images/team-02.png" alt="" />
                    <img src="images/team-05.png" alt="" />
                  </td>
                  <td><span class="label bg-blue">In Progress</span></td>
                </tr>
                <tr>
                  <td>Bouba App</td>
                  <td>05 Sep 2021</td>
                  <td>Bouba</td>
                  <td>$800</td>
                  <td>
                    <img src="images/team-02.png" alt="" />
                    <img src="images/team-03.png" alt="" />
                  </td>
                  <td><span class="label bg-green">Completed</span></td>
                </tr>
                <tr>
                  <td>Mahmoud Website</td>
                  <td>22 May 2021</td>
                  <td>Mahmoud</td>
                  <td>$600</td>
                  <td>
                    <img src="images/team-01.png" alt="" />
                    <img src="images/team-02.png" alt="" />
                  </td>
                  <td><span class="label bg-green">Completed</span></td>
                </tr>
                <tr>
                  <td>Sayed Website</td>
                  <td>24 May 2021</td>
                  <td>Sayed</td>
                  <td>$300</td>
                  <td>
                    <img src="images/team-01.png" alt="" />
                    <img src="images/team-03.png" alt="" />
                  </td>
                  <td><span class="label bg-red">Rejected</span></td>
                </tr>
                <tr>
                  <td>Arena Application</td>
                  <td>01 Mar 2021</td>
                  <td>Arena Company</td>
                  <td>$2600</td>
                  <td>
                    <img src="images/team-01.png" alt="" />
                    <img src="images/team-02.png" alt="" />
                    <img src="images/team-03.png" alt="" />
                    <img src="images/team-04.png" alt="" />
                  </td>
                  <td><span class="label bg-green">Completed</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- ! End Projects Table Section -->
      </div>
    </div>
    <!-- ! End Dashboard -->
  </div>
  <!-- ! End Content -->
  <!---------------------------------------------------------------------------->
  <script src="js/bootstrap.bundle.min.js"></script>
  <!-- * This Render Icon As SVG... -->
  <script src="js/all.min.js"></script>
  <!-- ! JavaScript File -->
  <script src="js/main.js"></script>
  <script src="js/aos.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
</body>

</html>