HOME Add Your Heading Text Here<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UniIndia - Higher Education News</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #f5f5f5; } .header { background-color: #002147; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: bold; } .nav { background-color: #003366; padding: 1rem; } .nav ul { display: flex; list-style: none; gap: 2rem; } .nav a { color: white; text-decoration: none; font-weight: 500; } .main-container { max-width: 1200px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; } .news-card { background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .news-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; } .sidebar { background: white; padding: 1rem; border-radius: 8px; } .latest-updates { list-style: none; } .latest-updates li { padding: 0.5rem 0; border-bottom: 1px solid #eee; } .footer { background-color: #002147; color: white; padding: 2rem; margin-top: 2rem; } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .category-tag { background-color: #003366; color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin: 0.5rem 0; } .search-bar { padding: 0.5rem; width: 300px; border-radius: 4px; border: 1px solid #ccc; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; } .modal-content { background: white; padding: 2rem; width: 80%; max-width: 800px; margin: 2rem auto; border-radius: 8px; } </style> </head> <body> <header class="header"> <div class="logo">UniIndia</div> <input type="text" class="search-bar" placeholder="Search news..."> </header> <nav class="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#universities">Universities</a></li> <li><a href="#admissions">Admissions</a></li> <li><a href="#careers">Careers</a></li> </ul> </nav> <div class="main-container"> <main> <section class="featured-news"> <div class="news-card"> <img src="featured-news.jpg" alt="Featured News"> <h2>Latest Education Policy Updates</h2> <span class="category-tag">Policy</span> <p>Government announces new reforms in higher education sector...</p> <button onclick="showFullArticle(1)">Read More</button> </div> </section> <section class="news-grid" id="newsContainer"></section> </main> <aside class="sidebar"> <h3>Latest Updates</h3> <ul class="latest-updates"> <li>University rankings 2024 released</li> <li>New scholarship program announced</li> <li>Entrance exam dates updated</li> </ul> </aside> </div> <footer class="footer"> <div class="footer-content"> <div> <h4>Quick Links</h4> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> <div> <h4>Contact Us</h4> <p>Email: info@uniindia.com</p> <p>Phone: +91 1234567890</p> </div> <div> <h4>Follow Us</h4> <div class="social-icons"> <i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i> </div> </div> </div> </footer> <div class="modal" id="newsModal"> <div class="modal-content"> <span class="close-btn" onclick="closeModal()">×</span> <h2 id="modalTitle"></h2> <div id="modalContent"></div> </div> </div> <script> // Sample news data const newsData = [ { title: "IIT Entrance Exam Pattern Changed", category: "Admissions", content: "Detailed changes in the entrance examination process...", image: "news1.jpg" }, { title: "New Research Grants Announced", category: "Research", content: "Government allocates ₹500 crore for university research...", image: "news2.jpg" } ]; // Generate news cards function generateNewsCards() { const container = document.getElementById('newsContainer'); newsData.forEach((news, index) => { const card = document.createElement('div'); card.className = 'news-card'; card.innerHTML = ` <img src="${news.image}" alt="${news.title}"> <h3>${news.title}</h3> <span class="category-tag">${news.category}</span> <p>${news.content.substring(0, 100)}...</p> <button onclick="showFullArticle(${index})">Read More</button> `; container.appendChild(card); }); } // Modal functions function showFullArticle(index) { const modal = document.getElementById('newsModal'); const title = document.getElementById('modalTitle'); const content = document.getElementById('modalContent'); title.textContent = newsData[index].title; content.innerHTML = ` <img src="${newsData[index].image}" style="width:100%;height:300px;object-fit:cover;margin-bottom:1rem;"> <p>${newsData[index].content}</p> `; modal.style.display = 'block'; } function closeModal() { document.getElementById('newsModal').style.display = 'none'; } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('newsModal'); if (event.target === modal) { closeModal(); } } // Initialize generateNewsCards(); // Search functionality document.querySelector('.search-bar').addEventListener('input', function(e) { const searchTerm = e.target.value.toLowerCase(); const cards = document.querySelectorAll('.news-card'); cards.forEach(card => { const text = card.textContent.toLowerCase(); card.style.display = text.includes(searchTerm) ? 'block' : 'none'; }); }); </script> </body> </html>