This project is a fully functional news website that fetches news articles from the News API and displays them in various sections such as headlines, latest news, popular news, and more. It provides an intuitive user interface for users to read news articles conveniently.
screen-recording.1.mp4
- Data sourced from News API
- Icons provided by Font Awesome icon Library
- Fonts courtesy of Google Fonts
The News API provides developers with access to a wealth of news articles and information from various sources. With this API, developers can retrieve headlines, search for articles, and get information about specific news sources.
All API endpoints are accessed via the following base URL: https://newsapi.org/
| Color | Hex |
|---|---|
| Container Background Color | |
| Header Text Color | |
| Navigation Bar Background Color | |
| Link Color | |
| Link Hover Color | |
| Search Box Border Color | |
| Section Heading Text Color | |
| Headline Text Color | |
| Read More Button Background Color | |
| Read More Button Text Color | |
| Read More Button Hover Background Color | |
| Additional News Item Border Color | |
| Popular News Content Border Color | |
| Popular News Content Hover Border Color | |
| Newsletter Input Background Color | |
| Newsletter Input Text Color | |
| Newsletter Submit Button Color | |
| Newsletter Submit Button Hover Color |
To deploy this project, follow these steps:
-
Clone the Repository: Clone this repository to your local machine using the following command:
git clone https://github.com/your-username/your-repository.git -
Navigate to the Project Directory: Change your current directory to the project directory:
cd your-repository -
Open HTML File: Open the HTML file (
index.html) in your preferred web browser to view the webpage.
-
Responsive Design: The webpage is designed to be responsive, ensuring optimal viewing experience across different devices and screen sizes.
-
Navigation Menu: The navigation menu (
navbar) provides easy access to different sections of the webpage, enhancing user experience. -
Dynamic Headlines: The webpage features dynamic headlines with customizable text content and background colors, adding visual appeal.
-
Latest and Popular News Sections: Separate sections are dedicated to displaying the latest news and popular articles, facilitating content discovery.
-
Newsletter Subscription: Users can subscribe to the newsletter by entering their email address in the provided input field, enabling user engagement and communication.
-
Customizable Styling: The CSS styles (
styles.css) are organized and customizable, allowing easy modification of the webpage's appearance and layout. -
Smooth Scrolling: The webpage utilizes smooth scrolling behavior (
scroll-behavior: smooth;) for enhanced navigation experience. -
Font Import: Custom fonts are imported from Google Fonts (
@import url(...)) to enhance typography and visual presentation. -
CSS Animations: CSS animations are used to add subtle visual effects, improving user engagement and interaction.
-
Cross-browser Compatibility: The webpage is designed to be compatible with major web browsers (Chrome, Firefox, Safari), ensuring consistent performance and display.