News Project
This project is a News Website where users can view news from various sources in a visually appealing layout. The project includes features such as dark mode to enhance readability and user experience.
Features
- Dark Mode Toggle: Users can switch between light and dark themes to make reading news easier on the eyes, especially in low-light environments.
- Responsive Design: The website is fully responsive, ensuring that it looks great on all devices, including mobile phones and tablets.
- Dynamic News Content: News articles are dynamically fetched and displayed in a card layout with images, headlines, sources, and descriptions.
Dark Mode
When dark mode is enabled:
- Navbar: The background of the navigation bar changes to a darker color to match the theme.
- Text Colors: The color of the text, including headlines and news descriptions, switches to white for better contrast against the dark background.
- News Cards: The cards also adapt to dark mode, changing the background and text colors to ensure the content is always readable.
Custom CSS Variables
The project uses CSS variables to easily switch between light and dark modes, ensuring that all elements, including text, buttons, and backgrounds, change appropriately.
- Light Mode Text Colors: The primary text color in light mode is dark, making it easy to read on a light background.
- Dark Mode Text Colors: In dark mode, the text switches to white, providing optimal readability.
News Card Design
Each news article is presented in a card format, featuring:
- Image: A thumbnail or image related to the news article.
- Headline: The title of the article.
- Source: The name of the news source.
- Description: A short description or excerpt from the article.
When dark mode is activated:
- The card background switches to a dark color.
- The card text, including the headline and description, turns white to remain visible against the darker background.
- Hover effects are adjusted to match the theme.
Technologies Used
- HTML
- CSS (with CSS variables)
- JavaScript
Dark Mode Toggle
The website includes a dark mode toggle button, allowing users to easily switch between light and dark themes. This enhances usability in various lighting conditions.
Future Enhancements
In future updates, the project will include:
- Category Filters: Users will be able to filter news articles by category (e.g., Technology, Sports, Politics).
- Search Functionality: A search bar to allow users to search for specific news articles by keywords.
- API Integration: Fetching real-time news from various news APIs.