Mini Shell

<style>
    div.line {
        --color: rgba(30, 30, 30);
        --bgColor: rgba(245, 245, 245);
        /* --theme-color: #FF7350; */
        --theme-color: #95bd7b;
        /* --theme-color2: #125875; */
        --theme-color2: #2c5c0c;
        min-height: 100vh;
        display: grid;
        align-content: center;
        gap: 2rem;
        padding: 2rem;
        font-family: "Poppins", sans-serif;
        color: var(--color);
        background: var(--bgColor);
    }

    .line h1 {
        text-align: center;
    }

    .line ul {
        --col-gap: 2rem;
        --row-gap: 2rem;
        --line-w: 0.25rem;
        display: grid;
        grid-template-columns: var(--line-w) 1fr;
        grid-auto-columns: max-content;
        column-gap: var(--col-gap);
        list-style: none;
        width: min(80rem, 90%);
        margin-inline: auto;
    }

    /* line */
    .line ul::before {
        content: "";
        grid-column: 1;
        grid-row: 1 / span 20;
        background: rgb(225, 225, 225);
        border-radius: calc(var(--line-w) / 2);
    }

    /* columns*/
    /* row gaps */
    .line ul li:not(:last-child) {
        margin-bottom: var(--row-gap);
    }

    /* card */
    .line ul li {
        grid-column: 2;
        --inlineP: 1.5rem;
        margin-inline: var(--inlineP);
        grid-row: span 2;
        display: grid;
        grid-template-rows: min-content min-content min-content;
    }

    /* date */
    .line ul li .date {
        --dateH: 3rem;
        height: var(--dateH);
        margin-inline: calc(var(--inlineP) * -1);
        text-align: center;
        /* background-color: var(--accent-color); */
        background-color: var(--accent-color);
        color: white;
        font-size: 1.25rem;
        font-weight: 700;
        display: grid;
        place-content: center;
        position: relative;
        border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
    }

    /* date flap */
    .line ul li .date::before {
        content: "";
        width: var(--inlineP);
        aspect-ratio: 1;
        background: var(--accent-color);
        background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
        position: absolute;
        top: 100%;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        right: 0;
    }

    /* circle */
    .line ul li .date::after {
        content: "";
        position: absolute;
        width: 2rem;
        aspect-ratio: 1;
        background: var(--bgColor);
        border: 0.3rem solid var(--accent-color);
        border-radius: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        right: calc(100% + var(--col-gap) + var(--line-w) / 2);
    }

    /* title descr */
    .line ul li .title,
    .line ul li .descr {
        background: var(--bgColor);
        position: relative;
        padding-inline: 1.5rem;
    }

    .line ul li .title {
        overflow: hidden;
        padding-block-start: 1.5rem;
        padding-block-end: 1rem;
        font-weight: 500;
    }

    .line ul li .descr {
        padding-block-end: 1.5rem;
        font-weight: 300;
    }

    /* shadows */
    .line ul li .title::before,
    .line ul li .descr::before {
        content: "";
        position: absolute;
        width: 90%;
        height: 0.5rem;
        background: rgba(0, 0, 0, 0.5);
        left: 50%;
        border-radius: 50%;
        filter: blur(4px);
        transform: translate(-50%, 50%);
    }

    .line ul li .title::before {
        bottom: calc(100% + 0.125rem);
    }

    .line ul li .descr::before {
        z-index: -1;
        bottom: 0.25rem;
    }

    @media (min-width: 60rem) {
        .line ul {
            grid-template-columns: 1fr var(--line-w) 1fr;
        }

        .line ul::before {
            grid-column: 2;
        }

        .line ul li:nth-child(odd) {
            grid-column: 1;
        }

        .line ul li:nth-child(even) {
            grid-column: 3;
        }

        /* start second card */
        .line ul li:nth-child(2) {
            grid-row: 2/4;
        }

        .line ul li:nth-child(odd) .date::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            left: 0;
        }

        .line ul li:nth-child(odd) .date::after {
            transform: translate(-50%, -50%);
            left: calc(100% + var(--col-gap) + var(--line-w) / 2);
        }

        .line ul li:nth-child(odd) .date {
            border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
        }

    }

    .credits {
        margin-top: 1rem;
        text-align: right;
    }

    .credits a {
        color: var(--color);
    }

    @media (max-width: 500px) {
        div.line {
            gap: 1rem;
            padding: 0rem;
        }

        .line ul {
            --col-gap: 0rem;
            --row-gap: 0rem;
            --line-w: 0.25rem;
            display: grid;
            grid-template-columns: var(--line-w) 1fr;
            grid-auto-columns: max-content;
            column-gap: var(--col-gap);
            list-style: none;
            width: min(80rem, 98%);
            margin-inline: auto;
        }

        .line ul li .title,
        .line ul li .descr {
            padding-inline: 0.5rem;
        }

        .line ul li .title {
            overflow: hidden;
            padding-block-start: 1.5rem;
            padding-block-end: 0.4rem;
            font-weight: 500;
        }
    }
</style>
<div class="line">
    <div class="site-heading mb-3 text-center">
        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> TIMELINE</span>
        <h2 class="site-title">
            We Are In <span>History</span>
        </h2>
    </div>
    <ul>
        <?php
        $colors = ["#41516C", "#4c3700", "#E24A68"];
        $sql = "SELECT * FROM tb1_timeline WHERE status = 1 ORDER BY updated_log ASC";

        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            $index = 0;
            while ($row = $result->fetch_assoc()) {
                $color = $colors[$index % count($colors)];
                $index++;
        ?>

                <li style="--accent-color:<?= $color ?>">
                    <div class="date"><?= $row['year'] ?></div>
                    <div class="title"><?= $row['title'] ?></div>
                    <div class="descr"><?= $row['description'] ?></div>
                </li>
        <?php }
        }
        ?>
        <!-- <li style="--accent-color:#4c3700">
            <div class="date">2000</div>
            <div class="title">SRI ARAVINDAR ARTS & SCIENCE COLLEGE</div>
            <div class="descr">The Trust started "SRI ARAVINDAR ARTS & SCIENCE COLLEGE" in the year 2000. Over 24
                years the College has grown as Post Graduation institution which was affiliated by Annamalai University, Chidambaram and recognized by UGC.</div>
        </li>
        <li style="--accent-color:#E24A68">
            <div class="date">2004</div>
            <div class="title">SRI ARAVINDAR VIDHYALAYA NURSERY AND PRIMARY SCHOOL</div>
            <div class="descr">As a Second Educational Institution the Trust started "SRI ARAVINDAR MATRICULATION HIGH SCHOOL" in the year 2004. The School
                is very much renowned for its standard around this area.</div>
        </li> -->
        <!-- <li style="--accent-color:#1B5F8C">
            <div class="date">2008</div>
            <div class="title">SRI ARAVINDAR ENGINEERING COLLEGE</div>
            <div class="descr">Having set up two reputed educational institutions, the Trust gained confidence and
                started "SRI ARAVINDAR ENGINEERING COLLEGE" in 2008 with due approval by AICTE and Govt. of Tamilnadu.
                The College is also affiliated to the world renowned Anna University.</div>
        </li>
        <li style="--accent-color:#4CADAD">
            <div class="date">2010</div>
            <div class="title">ENGINEERING / TECHNOLOGY </div>
            <div class="descr">The College as four branches of Engineering / Technology and two more branches were added
                in the year 2010. I feel proud to say that the first batch of students in four branches has gone out
                with flying colors. Over 80% of the students have left the portals with offer letters from reputed
                companies.</div>
        </li>-->
    </ul>
</div>