Save the code as index.html and open in any modern browser. No build step required. All styles, icons (FontAwesome), and logic are self-contained.

Headline:
The New Era of Celebrity. Unfiltered. Unmissable. Unstoppable.

Subheadline:
Get closer to the stars. Breaking news, exclusive interviews, red carpet moments, and behind-the-scenes access — all in one sleek, ad-light space.

Primary CTA Button:
[ Join the Inner Circle – Free ]

Secondary CTA Button:
[ Explore Latest Stories ]

Background Visual Suggestion:
A dynamic collage of high-res celebrity portraits + paparazzi-style candid shots fading into a premium dark/light gradient.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>CelebGae — Latest Celebrity News & Gossip</title>
  <!-- Font Awesome 6 (free icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;

body 
  font-family: 'Inter', sans-serif;
  background-color: #faf8f5;
  color: #1e1e2a;
  scroll-behavior: smooth;
/* Utility classes */
.container 
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
.section-title 
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
  border-left: 5px solid #e91e63;
  padding-left: 16px;
/* Header / Navbar */
.top-header 
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(2px);
.navbar 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  flex-wrap: wrap;
  gap: 16px;
.logo h1 
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
.logo span 
  font-size: 0.75rem;
  background: #f0f0f0;
  color: #e91e63;
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 8px;
  font-weight: 400;
.nav-links 
  display: flex;
  gap: 28px;
  list-style: none;
.nav-links a 
  text-decoration: none;
  font-weight: 600;
  color: #2d2d3a;
  transition: 0.2s;
.nav-links a:hover, .nav-links a.active 
  color: #e91e63;
.search-icon 
  background: #f0f0f0;
  padding: 8px 14px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 0.9rem;
/* Hero Carousel (full width) */
.hero 
  margin-top: 8px;
  background: #111;
  overflow: hidden;
.carousel-container 
  position: relative;
  max-width: 1400px;
  margin: auto;
.carousel-slide 
  display: flex;
  transition: transform 0.5s ease;
.hero-card 
  min-width: 100%;
  position: relative;
  height: 500px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
.hero-overlay 
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  width: 100%;
  padding: 40px 50px;
  color: white;
.hero-category 
  background: #e91e63;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
.hero-title 
  font-size: 2.4rem;
  font-weight: 800;
  max-width: 700px;
  margin-bottom: 12px;
.hero-desc 
  max-width: 550px;
  opacity: 0.9;
  margin-bottom: 16px;
.carousel-btn 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 1.8rem;
  padding: 8px 16px;
  cursor: pointer;
  z-index: 2;
  border-radius: 30px;
.prev  left: 20px; 
.next  right: 20px;
.dots 
  text-align: center;
  position: relative;
  bottom: 30px;
  z-index: 2;
.dot 
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
.dot.active  background: #e91e63; width: 24px; border-radius: 8px;
/* Grid layout */
.two-columns 
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin: 48px 0;
/* Trending / News Grid */
.news-grid 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
.news-card 
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.02);
  transition: 0.25s ease;
  border: 1px solid #f0eae3;
.news-card:hover 
  transform: translateY(-5px);
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
.card-img 
  height: 180px;
  background-size: cover;
  background-position: center;
.card-content 
  padding: 18px;
.card-category 
  color: #e91e63;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
.card-title 
  font-weight: 800;
  font-size: 1.2rem;
  margin: 10px 0 8px;
  line-height: 1.3;
.card-meta 
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #777;
  margin-top: 12px;
/* Sidebar */
.sidebar 
  background: white;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #eeece8;
.sidebar-widget 
  margin-bottom: 32px;
.sidebar h3 
  font-size: 1.3rem;
  margin-bottom: 16px;
  border-bottom: 2px solid #ffe0e7;
  display: inline-block;
.trending-list 
  list-style: none;
.trending-list li 
  padding: 12px 0;
  border-bottom: 1px solid #f0eae3;
  display: flex;
  gap: 12px;
  align-items: center;
.trend-num 
  font-weight: 800;
  font-size: 1.2rem;
  color: #e91e63;
  width: 28px;
.social-icons 
  display: flex;
  gap: 16px;
  margin-top: 12px;
.social-icons a 
  color: #333;
  font-size: 1.4rem;
/* Video Section */
.video-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
.video-card 
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
.video-card img 
  width: 100%;
  display: block;
  opacity: 0.85;
.play-icon 
  position: absolute;
  top: 40%;
  left: 45%;
  color: white;
  font-size: 2.5rem;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 10px;
/* Footer */
footer 
  background: #151515;
  color: #ccc;
  margin-top: 60px;
  padding: 40px 0 20px;
.footer-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 40px;
  margin-bottom: 40px;
.footer-logo 
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
@media (max-width: 800px) 
  .two-columns  grid-template-columns: 1fr; 
  .hero-title  font-size: 1.6rem; 
  .hero-card  height: 380px; 
  .navbar  flex-direction: column; align-items: center; 
  .nav-links  gap: 18px; flex-wrap: wrap; justify-content: center;



</style>
</head>
<body>


<header class="top-header">
<div class="container">
<div class="navbar">
<div class="logo">
<h1>CELEBGAE <span>🔥 gossip hub</span></h1>
</div>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Exclusives</a></li>
<li><a href="#">Red Carpet</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Rankings</a></li>
</ul>
<div class="search-icon">
<i class="fas fa-search"></i> Search
</div>
</div>
</div>
</header>


<!-- Hero Carousel Full -->
<section class="hero">
<div class="carousel-container">
<div class="carousel-slide" id="carouselSlide">
<!-- slides injected via JS but also static fallback -->
</div>
<button class="carousel-btn prev" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-btn next" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
<div class="dots" id="dotsContainer"></div>
</div>
</section>


<div class="container">
<!-- Two column layout -->
<div class="two-columns">
<!-- Main content: Latest News -->
<main>
<div class="section-title">🔥 Latest Buzz</div>
<div class="news-grid" id="newsGrid"></div>
</main>


<!-- Sidebar -->
<aside class="sidebar">
  <div class="sidebar-widget">
    <h3><i class="fas fa-chart-line"></i> Trending Now</h3>
    <ul class="trending-list" id="trendingList"></ul>
  </div>
  <div class="sidebar-widget">
    <h3><i class="fas fa-calendar-alt"></i> This Week in Gae</h3>
    <p>✨ Selena's new look<br>🎤 Drake's surprise album<br>🍿 Marvel casting rumors</p>
  </div>
  <div class="sidebar-widget">
    <h3>Follow Us</h3>
    <div class="social-icons">
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-tiktok"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
  </div>
</aside>



</div>


<!-- Video highlights section -->
<div class="section-title">🎥 Viral Clips</div>
<div class="video-grid" id="videoGrid"></div>
</div>


<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-logo">CELEBGAE</div>
<p style="margin-top:12px;">Unfiltered celebrity news, behind the scenes & pop culture.</p>
</div>
<div>
<h4>Explore</h4>
<p>About<br>Advertise<br>Privacy<br>Contact</p>
</div>
<div>
<h4>Hot right now</h4>
<p>Met Gala looks<br>Breakups 2025<br>Oscar predictions</p>
</div>
</div>
<hr style="border-color:#2a2a2a;">
<p style="text-align:center; margin-top:24px;">© 2025 CelebGae — gossip never sleeps ✨</p>
</div>
</footer>


<script>
// ---------- HERO CAROUSEL DATA ----------
const heroSlides = [
img: "https://picsum.photos/id/20/1400/500",  // Celebrity-like random (use unsplash later)
category: "EXCLUSIVE",
title: "Taylor Swift & Travis Kelce: The secret wedding plans?",
desc: "Insider reveals couple is ‘more serious than ever’ and planning a summer ceremony."
,
img: "https://picsum.photos/id/104/1400/500",
category: "SCANDAL",
title: "Blockbuster feud: Kanye vs. The Industry – full timeline",
desc: "Everything you missed from the explosive rant to label meetings."
,
img: "https://picsum.photos/id/106/1400/500",
category: "RED CARPET",
title: "Oscars 2025 best dressed: Shocking winners and worst looks",
desc: "Zendaya, Timothée and unexpected fashion moments."
];


// News data
const newsArticles = [
 img: "https://picsum.photos/id/26/400/250", category: "ROYALS", title: "Prince Harry makes surprise London appearance – without Meghan", date: "2 hours ago", comments: 47 ,
 img: "https://picsum.photos/id/30/400/250", category: "BIZ", title: "Beyoncé becomes most decorated artist in Grammys history", date: "5 hours ago", comments: 203 ,
 img: "https://picsum.photos/id/64/400/250", category: "COUPLES", title: "Ben Affleck and JLo spotted together amid divorce rumors", date: "Yesterday", comments: 112 ,
 img: "https://picsum.photos/id/91/400/250", category: "EXCLUSIVE", title: "Inside Dua Lipa's $20M Malibu mansion – pool, studio & more", date: "Yesterday", comments: 88 
];


const trendingItems = [
"#1 Zendaya's new haircut breaks the internet",
"#2 Did Ariana Grande confirm new album?",
"#3 Johnny Depp returns to Hollywood",
"#4 Kardashians under fire over tone-deaf post",
"#5 Stranger Things final season spoilers leak"
];


const videoItems = [
 thumb: "https://picsum.photos/id/155/400/220", title: "Best celebrity interviews 2025" ,
 thumb: "https://picsum.photos/id/169/400/220", title: "Top 10 red carpet fails" ,
 thumb: "https://picsum.photos/id/177/400/220", title: "Drama alert: podcast full episode" 
];


// Render news grid
function renderNews() 
const grid = document.getElementById('newsGrid');
if(!grid) return;
grid.innerHTML = newsArticles.map(article => <div class="news-card"> <div class="card-img" style="background-image: url('$article.img');"></div> <div class="card-content"> <div class="card-category">$article.category</div> <div class="card-title">$article.title</div> <div class="card-meta"><span><i class="far fa-clock"></i> $article.date</span> <span><i class="far fa-comment"></i> $article.comments</span></div> </div> </div>).join('');



function renderTrending() 
const list = document.getElementById('trendingList');
list.innerHTML = trendingItems.map((item, idx) => <li><span class="trend-num">$idx+1</span> $item</li>).join('');



function renderVideos() 
const videoGrid = document.getElementById('videoGrid');
videoGrid.innerHTML = videoItems.map(vid => <div class="video-card"> <img src="$vid.thumb" alt="video thumb"> <div class="play-icon"><i class="fas fa-play-circle"></i></div> <div style="padding:12px; background:#151515; color:white;">$vid.title</div> </div>).join('');



// Carousel logic
let currentIndex = 0;
const slideContainer = document.getElementById('carouselSlide');
const dotsContainer = document.getElementById('dotsContainer');
let autoInterval;


function buildCarousel() 
slideContainer.innerHTML = '';
heroSlides.forEach((slide, idx) => 
const slideDiv = document.createElement('div');
slideDiv.className = 'hero-card';
slideDiv.style.backgroundImage = linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2)), url('$slide.img');
slideDiv.innerHTML = <div class="hero-overlay"> <div class="hero-category">$slide.category</div> <div class="hero-title">$slide.title</div> <div class="hero-desc">$slide.desc</div> </div>;
slideContainer.appendChild(slideDiv);
);
updateDots();
updateSlideTransform();



function updateDots() 
dotsContainer.innerHTML = '';
heroSlides.forEach((_, idx) => 
const dot = document.createElement('span');
dot.classList.add('dot');
if (idx === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(idx));
dotsContainer.appendChild(dot);
);



function updateSlideTransform() 
if(slideContainer) 
slideContainer.style.transform = translateX(-$currentIndex * 100%);
if(dotsContainer) 
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, idx) => 
if(idx === currentIndex) dot.classList.add('active');
else dot.classList.remove('active');
);



function goToSlide(index) 
currentIndex = (index + heroSlides.length) % heroSlides.length;
updateSlideTransform();
updateDots(); // refresh active state
resetAutoSlide();



function nextSlide()  goToSlide(currentIndex + 1); 
function prevSlide()  goToSlide(currentIndex - 1); 


function resetAutoSlide() 
if(autoInterval) clearInterval(autoInterval);
autoInterval = setInterval(() =>  nextSlide(); , 5000);



// Event listeners for carousel
document.getElementById('prevBtn')?.addEventListener('click', prevSlide);
document.getElementById('nextBtn')?.addEventListener('click', nextSlide);


// Initialize full homepage
function initHomepage() 
renderNews();
renderTrending();
renderVideos();
buildCarousel();
resetAutoSlide();



initHomepage();
</script>
</body>
</html>

You may also like

Celebgae Homepage Full -

Save the code as index.html and open in any modern browser. No build step required. All styles, icons (FontAwesome), and logic are self-contained.

Headline:
The New Era of Celebrity. Unfiltered. Unmissable. Unstoppable.

Subheadline:
Get closer to the stars. Breaking news, exclusive interviews, red carpet moments, and behind-the-scenes access — all in one sleek, ad-light space.

Primary CTA Button:
[ Join the Inner Circle – Free ]

Secondary CTA Button:
[ Explore Latest Stories ]

Background Visual Suggestion:
A dynamic collage of high-res celebrity portraits + paparazzi-style candid shots fading into a premium dark/light gradient.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>CelebGae — Latest Celebrity News & Gossip</title>
  <!-- Font Awesome 6 (free icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;

body 
  font-family: 'Inter', sans-serif;
  background-color: #faf8f5;
  color: #1e1e2a;
  scroll-behavior: smooth;
/* Utility classes */
.container 
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
.section-title 
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
  border-left: 5px solid #e91e63;
  padding-left: 16px;
/* Header / Navbar */
.top-header 
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(2px);
.navbar 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  flex-wrap: wrap;
  gap: 16px;
.logo h1 
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
.logo span 
  font-size: 0.75rem;
  background: #f0f0f0;
  color: #e91e63;
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 8px;
  font-weight: 400;
.nav-links 
  display: flex;
  gap: 28px;
  list-style: none;
.nav-links a 
  text-decoration: none;
  font-weight: 600;
  color: #2d2d3a;
  transition: 0.2s;
.nav-links a:hover, .nav-links a.active 
  color: #e91e63;
.search-icon 
  background: #f0f0f0;
  padding: 8px 14px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 0.9rem;
/* Hero Carousel (full width) */
.hero 
  margin-top: 8px;
  background: #111;
  overflow: hidden;
.carousel-container 
  position: relative;
  max-width: 1400px;
  margin: auto;
.carousel-slide 
  display: flex;
  transition: transform 0.5s ease;
.hero-card 
  min-width: 100%;
  position: relative;
  height: 500px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
.hero-overlay 
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  width: 100%;
  padding: 40px 50px;
  color: white;
.hero-category 
  background: #e91e63;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
.hero-title 
  font-size: 2.4rem;
  font-weight: 800;
  max-width: 700px;
  margin-bottom: 12px;
.hero-desc 
  max-width: 550px;
  opacity: 0.9;
  margin-bottom: 16px;
.carousel-btn 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 1.8rem;
  padding: 8px 16px;
  cursor: pointer;
  z-index: 2;
  border-radius: 30px;
.prev  left: 20px; 
.next  right: 20px;
.dots 
  text-align: center;
  position: relative;
  bottom: 30px;
  z-index: 2;
.dot 
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
.dot.active  background: #e91e63; width: 24px; border-radius: 8px;
/* Grid layout */
.two-columns 
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin: 48px 0;
/* Trending / News Grid */
.news-grid 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
.news-card 
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.02);
  transition: 0.25s ease;
  border: 1px solid #f0eae3;
.news-card:hover 
  transform: translateY(-5px);
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
.card-img 
  height: 180px;
  background-size: cover;
  background-position: center;
.card-content 
  padding: 18px;
.card-category 
  color: #e91e63;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
.card-title 
  font-weight: 800;
  font-size: 1.2rem;
  margin: 10px 0 8px;
  line-height: 1.3;
.card-meta 
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #777;
  margin-top: 12px;
/* Sidebar */
.sidebar 
  background: white;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #eeece8;
.sidebar-widget 
  margin-bottom: 32px;
.sidebar h3 
  font-size: 1.3rem;
  margin-bottom: 16px;
  border-bottom: 2px solid #ffe0e7;
  display: inline-block;
.trending-list 
  list-style: none;
.trending-list li 
  padding: 12px 0;
  border-bottom: 1px solid #f0eae3;
  display: flex;
  gap: 12px;
  align-items: center;
.trend-num 
  font-weight: 800;
  font-size: 1.2rem;
  color: #e91e63;
  width: 28px;
.social-icons 
  display: flex;
  gap: 16px;
  margin-top: 12px;
.social-icons a 
  color: #333;
  font-size: 1.4rem;
/* Video Section */
.video-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
.video-card 
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
.video-card img 
  width: 100%;
  display: block;
  opacity: 0.85;
.play-icon 
  position: absolute;
  top: 40%;
  left: 45%;
  color: white;
  font-size: 2.5rem;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 10px;
/* Footer */
footer 
  background: #151515;
  color: #ccc;
  margin-top: 60px;
  padding: 40px 0 20px;
.footer-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 40px;
  margin-bottom: 40px;
.footer-logo 
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
@media (max-width: 800px) 
  .two-columns  grid-template-columns: 1fr; 
  .hero-title  font-size: 1.6rem; 
  .hero-card  height: 380px; 
  .navbar  flex-direction: column; align-items: center; 
  .nav-links  gap: 18px; flex-wrap: wrap; justify-content: center;



</style>
</head>
<body>


<header class="top-header">
<div class="container">
<div class="navbar">
<div class="logo">
<h1>CELEBGAE <span>🔥 gossip hub</span></h1>
</div>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Exclusives</a></li>
<li><a href="#">Red Carpet</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Rankings</a></li>
</ul>
<div class="search-icon">
<i class="fas fa-search"></i> Search
</div>
</div>
</div>
</header> celebgae homepage full


<!-- Hero Carousel Full -->
<section class="hero">
<div class="carousel-container">
<div class="carousel-slide" id="carouselSlide">
<!-- slides injected via JS but also static fallback -->
</div>
<button class="carousel-btn prev" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-btn next" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
<div class="dots" id="dotsContainer"></div>
</div>
</section>


<div class="container">
<!-- Two column layout -->
<div class="two-columns">
<!-- Main content: Latest News -->
<main>
<div class="section-title">🔥 Latest Buzz</div>
<div class="news-grid" id="newsGrid"></div>
</main>


<!-- Sidebar -->
<aside class="sidebar">
  <div class="sidebar-widget">
    <h3><i class="fas fa-chart-line"></i> Trending Now</h3>
    <ul class="trending-list" id="trendingList"></ul>
  </div>
  <div class="sidebar-widget">
    <h3><i class="fas fa-calendar-alt"></i> This Week in Gae</h3>
    <p>✨ Selena's new look<br>🎤 Drake's surprise album<br>🍿 Marvel casting rumors</p>
  </div>
  <div class="sidebar-widget">
    <h3>Follow Us</h3>
    <div class="social-icons">
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-tiktok"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
  </div>
</aside>



</div>


<!-- Video highlights section -->
<div class="section-title">🎥 Viral Clips</div>
<div class="video-grid" id="videoGrid"></div>
</div>


<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-logo">CELEBGAE</div>
<p style="margin-top:12px;">Unfiltered celebrity news, behind the scenes & pop culture.</p>
</div>
<div>
<h4>Explore</h4>
<p>About<br>Advertise<br>Privacy<br>Contact</p>
</div>
<div>
<h4>Hot right now</h4>
<p>Met Gala looks<br>Breakups 2025<br>Oscar predictions</p>
</div>
</div>
<hr style="border-color:#2a2a2a;">
<p style="text-align:center; margin-top:24px;">© 2025 CelebGae — gossip never sleeps ✨</p>
</div>
</footer>


<script>
// ---------- HERO CAROUSEL DATA ----------
const heroSlides = [
img: "https://picsum.photos/id/20/1400/500",  // Celebrity-like random (use unsplash later)
category: "EXCLUSIVE",
title: "Taylor Swift & Travis Kelce: The secret wedding plans?",
desc: "Insider reveals couple is ‘more serious than ever’ and planning a summer ceremony."
,
img: "https://picsum.photos/id/104/1400/500",
category: "SCANDAL",
title: "Blockbuster feud: Kanye vs. The Industry – full timeline",
desc: "Everything you missed from the explosive rant to label meetings."
,
img: "https://picsum.photos/id/106/1400/500",
category: "RED CARPET",
title: "Oscars 2025 best dressed: Shocking winners and worst looks",
desc: "Zendaya, Timothée and unexpected fashion moments."
];


// News data
const newsArticles = [
 img: "https://picsum.photos/id/26/400/250", category: "ROYALS", title: "Prince Harry makes surprise London appearance – without Meghan", date: "2 hours ago", comments: 47 ,
 img: "https://picsum.photos/id/30/400/250", category: "BIZ", title: "Beyoncé becomes most decorated artist in Grammys history", date: "5 hours ago", comments: 203 ,
 img: "https://picsum.photos/id/64/400/250", category: "COUPLES", title: "Ben Affleck and JLo spotted together amid divorce rumors", date: "Yesterday", comments: 112 ,
 img: "https://picsum.photos/id/91/400/250", category: "EXCLUSIVE", title: "Inside Dua Lipa's $20M Malibu mansion – pool, studio & more", date: "Yesterday", comments: 88 
]; Save the code as  index


const trendingItems = [
"#1 Zendaya's new haircut breaks the internet",
"#2 Did Ariana Grande confirm new album?",
"#3 Johnny Depp returns to Hollywood",
"#4 Kardashians under fire over tone-deaf post",
"#5 Stranger Things final season spoilers leak"
];


const videoItems = [
 thumb: "https://picsum.photos/id/155/400/220", title: "Best celebrity interviews 2025" ,
 thumb: "https://picsum.photos/id/169/400/220", title: "Top 10 red carpet fails" ,
 thumb: "https://picsum.photos/id/177/400/220", title: "Drama alert: podcast full episode" 
];


// Render news grid
function renderNews() 
const grid = document.getElementById('newsGrid');
if(!grid) return;
grid.innerHTML = newsArticles.map(article => <div class="news-card"> <div class="card-img" style="background-image: url('$article.img');"></div> <div class="card-content"> <div class="card-category">$article.category</div> <div class="card-title">$article.title</div> <div class="card-meta"><span><i class="far fa-clock"></i> $article.date</span> <span><i class="far fa-comment"></i> $article.comments</span></div> </div> </div>).join('');



function renderTrending() 
const list = document.getElementById('trendingList');
list.innerHTML = trendingItems.map((item, idx) => <li><span class="trend-num">$idx+1</span> $item</li>).join('');



function renderVideos() 
const videoGrid = document.getElementById('videoGrid');
videoGrid.innerHTML = videoItems.map(vid => <div class="video-card"> <img src="$vid.thumb" alt="video thumb"> <div class="play-icon"><i class="fas fa-play-circle"></i></div> <div style="padding:12px; background:#151515; color:white;">$vid.title</div> </div>).join('');



// Carousel logic
let currentIndex = 0;
const slideContainer = document.getElementById('carouselSlide');
const dotsContainer = document.getElementById('dotsContainer');
let autoInterval;


function buildCarousel() 
slideContainer.innerHTML = '';
heroSlides.forEach((slide, idx) => 
const slideDiv = document.createElement('div');
slideDiv.className = 'hero-card';
slideDiv.style.backgroundImage = linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2)), url('$slide.img');
slideDiv.innerHTML = <div class="hero-overlay"> <div class="hero-category">$slide.category</div> <div class="hero-title">$slide.title</div> <div class="hero-desc">$slide.desc</div> </div>;
slideContainer.appendChild(slideDiv);
);
updateDots();
updateSlideTransform();
 function nextSlide()  goToSlide(currentIndex + 1)


function updateDots() 
dotsContainer.innerHTML = '';
heroSlides.forEach((_, idx) => 
const dot = document.createElement('span');
dot.classList.add('dot');
if (idx === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(idx));
dotsContainer.appendChild(dot);
);



function updateSlideTransform() 
if(slideContainer) 
slideContainer.style.transform = translateX(-$currentIndex * 100%);
if(dotsContainer) 
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, idx) => 
if(idx === currentIndex) dot.classList.add('active');
else dot.classList.remove('active');
);



function goToSlide(index) 
currentIndex = (index + heroSlides.length) % heroSlides.length;
updateSlideTransform();
updateDots(); // refresh active state
resetAutoSlide();



function nextSlide()  goToSlide(currentIndex + 1); 
function prevSlide()  goToSlide(currentIndex - 1); 


function resetAutoSlide() 
if(autoInterval) clearInterval(autoInterval);
autoInterval = setInterval(() =>  nextSlide(); , 5000);



// Event listeners for carousel
document.getElementById('prevBtn')?.addEventListener('click', prevSlide);
document.getElementById('nextBtn')?.addEventListener('click', nextSlide);


// Initialize full homepage
function initHomepage() 
renderNews();
renderTrending();
renderVideos();
buildCarousel();
resetAutoSlide();



initHomepage();
</script>
</body>
</html>

Leave a Comment