Blog Card Component

About the Challenge

In this Frontend challenge, I have build a Blog Card Component.
This challenge is perfect for you if you've been learning CSS and want to take your CSS skills to the next level by building something new and beginner-friendly.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.

Challenge Requirements

1. Show the hover state of all the elements.
2. The component should be responsive and display correctly on different screen sizes.
3. Make this landing page look as close to the design as possible.

Demo

You can see a live preview on my Code Pen tool: Code Pen

Screenshot

Features

• Responsive Design: The blog card component is fully responsive, ensuring it displays correctly on different screen sizes, from mobile devices to desktop screens.
• Hover Effects: Each element in the blog card has a hover state to enhance interactivity and user experience.
• Content Display:
  • Category Label: The category label is styled to stand out, using uppercase text and a background color.
  • Blog Title: The blog title is prominently displayed to attract the reader's attention.
  • Blog Description: A brief description provides a sneak peek into the blog post content.
  • User Details: Displays the user's profile picture, name, and the time since the post was published, stacked vertically for clarity.

Technologies Used

1. HTML: Structure of the blog card component.
2. CSS: Styling for the component and responsiveness.

Installation

1. Clone the repository:
git clone https://github.com/Yashi-Singh-1/Blog-Card-Component.git
2. Open index.html in your web browser.

Usage

To implement the Blog Card Component in your project:

1. HTML Structure: Use the provided HTML structure to define the layout of the blog card, ensuring all necessary elements (category, title, description, and user details) are included.
2. CSS Styling: Apply the provided CSS styles to achieve the desired visual presentation of the blog card. The styles handle positioning, sizing, typography, and responsive behavior.
3. Customization: Customize the component further based on specific design requirements or branding guidelines, ensuring consistency across your project.

Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

Please make sure to update tests as appropriate and follow the existing code style.

Credits

The credits go to the FrontendPro Challenge for their Blog Card Component

Resouces

Want to learn more about Flexbox? Check out A Complete Guide to Flexbox