Veritas - The Truth Beneath

Veritas is a visually striking, immersive news webpage designed to provide not only the headlines, but the full context—allowing users to explore the truth beneath each story.

🌐 Overview

Veritas offers a modern, responsive layout for a news/media website with a unique "truth lens" feature that reveals a secondary narrative behind a featured article. It leverages HTML, CSS, and vanilla JavaScript to deliver a dynamic, interactive experience without any frameworks.

🎯 Features

• Truth Lens Reveal: A circular magnifier follows the user's cursor, unveiling the hidden "truth" version of a featured article.
• Responsive Design: Fully adaptive across desktops, tablets, and mobile devices.
• Category-Based Sections: Includes Politics, Economy, Technology, Health, Science, and more.
• Trending & Editor’s Picks: Highlights of the most important and popular content.
• Newsletter Subscription UI: A call-to-action area to collect user emails.
• Interactive UI Elements:
  • Breaking news ticker
  • Hoverable news cards
  • Instruction modal with toggles
• Dark Aesthetic Theme: Modern design using custom CSS variables for dark mode visuals.

📁 Folder Structure

/index.html # Main HTML file /images/ # Folder for all visual assets used in the articles(not added here in github)

🚀 Getting Started

To launch the site locally:

1. Clone or download the repository.
2. Open index.html in any modern browser.
3. Hover over the featured article (desktop) or use the eye toggle (mobile) to reveal hidden truths.

📱 Mobile Optimization

• On smaller screens, the lens is hidden and replaced by a toggle button (👁) for user-friendly access to hidden content.
• An onboarding animation welcomes users.
• Instructional modals guide new users for optimal interaction.

🧠 Insights

This project experiments with media literacy in design. By showing contrasting narratives (e.g., political announcement vs. analysis), Veritas encourages users to question surface-level news and seek deeper understanding.

🛠 Built With

• HTML5
• CSS3 (Custom properties & animations)
• JavaScript (ES6+)
• Google Fonts (Poppins)
• SVG Icons (for navigation & UI)

📌 Known Limitations

• Not yet connected to a real database or CMS.
• All content and navigation are static.
• The mobile menu and search are placeholder alerts.

📜 License

This project is for educational and personal showcase purposes. Feel free to modify and extend it for your own learning or portfolio use.

---

“Veritas” is Latin for "truth" — this site is your lens to see beyond the surface.