```
```html
<!-- =====================================================
HEAD SECTION ADDITIONS
===================================================== -->

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">

<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
rel="stylesheet">

<style>

:root{

    --ce-primary:#0d6efd;
    --ce-dark:#162b75;
    --ce-success:#198754;
    --ce-warning:#ffc107;
    --ce-light:#f4f7fb;

}

body{
    background:var(--ce-light);
    font-family:'Segoe UI',sans-serif;
}

.navbar{

    background:#ffffff !important;

    box-shadow:
    0 4px 18px rgba(0,0,0,.08);

}

.navbar-brand{

    font-weight:700;

    color:var(--ce-dark) !important;

}

.hero{

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #162b75
    );

    color:white;

    text-align:center;

    padding:90px 20px;

}

.hero h1{

    font-size:3.2rem;

    font-weight:800;

}

.hero p{

    max-width:900px;

    margin:auto;

    font-size:1.2rem;

}

.hero-logo{

    max-height:120px;

    margin-bottom:20px;

}

.card{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 4px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(13,110,253,.18);

}

.footer{

    background:#111827;

    color:white;

    padding:60px 20px;

    margin-top:80px;

}

.footer a{

    color:white;

    text-decoration:none;

}

.footer a:hover{

    color:#ffc107;

}

.floating-create{

    position:fixed;

    right:30px;

    bottom:30px;

    width:70px;

    height:70px;

    border-radius:50%;

    z-index:9999;

    box-shadow:
    0 10px 30px rgba(0,0,0,.25);

}

</style>

<!-- =====================================================
NAVIGATION
===================================================== -->

<nav class="navbar navbar-expand-lg">

<div class="container">

<a
class="navbar-brand"
href="/chatEdge/">

<img
src="https://hodebaba.com/chatEdge/create/img/logo.png"
height="45"
class="me-2">

ChatEdge AI

<span
class="badge bg-warning text-dark ms-2">

BETA

</span>

</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainMenu">

<span class="navbar-toggler-icon"></span>

</button>

<div
class="collapse navbar-collapse"
id="mainMenu">

<ul class="navbar-nav ms-auto">

<li class="nav-item">

<a
class="nav-link"
href="/chatEdge/">

Home

</a>

</li>

<li class="nav-item">

<a
class="nav-link active"
href="/chatEdge/trending.cfm">

Trending

</a>

</li>

<li class="nav-item">

<a
class="nav-link"
href="/chatEdge/directory.cfm">

Directory

</a>

</li>

<li class="nav-item">

<a
class="nav-link"
href="/chatEdge/create/">

Create Channel

</a>

</li>

</ul>

</div>

</div>

</nav>

<!-- =====================================================
HERO
===================================================== -->

<div class="hero">

<a href="/chatEdge/">

<img
src="https://hodebaba.com/chatEdge/create/img/logo.png"
class="hero-logo">

</a>

<h1>

<i class="bi bi-fire"></i>

Trending Channels

</h1>

<p>

Discover the fastest-growing
AI-powered channels
across the ChatEdge Global Network.

</p>

<div class="mt-4">

<span
class="badge bg-light text-dark p-2">

<i class="bi bi-broadcast"></i>

Autonomous Broadcasting

</span>

<span
class="badge bg-light text-dark p-2">

<i class="bi bi-globe"></i>

Global Network

</span>

<span
class="badge bg-light text-dark p-2">

<i class="bi bi-cpu"></i>

AI Powered

</span>

</div>

<div class="mt-4">

<a
href="/chatEdge/create/"
class="btn btn-warning btn-lg me-2">

<i class="bi bi-rocket-takeoff-fill"></i>

Launch Channel

</a>

<a
href="/chatEdge/directory.cfm"
class="btn btn-light btn-lg">

<i class="bi bi-grid-3x3-gap-fill"></i>

Directory

</a>

</div>

</div>

<!-- =====================================================
FOOTER
===================================================== -->

<footer class="footer text-center">

<a href="/chatEdge/">

<img
src="https://hodebaba.com/chatEdge/create/img/logo.png"
height="70"
class="mb-3">

</a>

<h4>

ChatEdge AI

</h4>

<p>

One Room. Many Doors.

</p>

<p>

Autonomous Broadcasting •
Education •
Podcasting •
Community

</p>

<div class="mt-3">

<a href="/chatEdge/">

Home

</a>

|

<a href="/chatEdge/trending.cfm">

Trending

</a>

|

<a href="/chatEdge/directory.cfm">

Directory

</a>

|

<a href="/chatEdge/create/">

Create Channel

</a>

</div>

<p class="mt-4">

© 2026 ChatEdge AI

</p>

</footer>

<!-- =====================================================
FLOATING BUTTON
===================================================== -->

<a
href="/chatEdge/create/"
class="btn btn-warning btn-lg floating-create">

<i class="bi bi-plus-lg"></i>

</a>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
```