https://github.com/yashi-singh-1/blog-card-component

In this Front-end 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.
https://github.com/yashi-singh-1/blog-card-component

beginner-friendly blog-component css css-flexbox css3 front-end front-end-challenge front-endchallenge frontend frontend-challenge frontendchallanges html html5 htmlcss web-design web-development webdesign

Last synced: 4 days ago
JSON representation

In this Front-end 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.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/blog-card-component
• Owner: Yashi-Singh-1
• Created: 2024-06-24T06:37:25.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-24T07:11:57.000Z (5 months ago)
• Last Synced: 2024-06-24T08:31:54.991Z (5 months ago)
• Topics: beginner-friendly, blog-component, css, css-flexbox, css3, front-end, front-end-challenge, front-endchallenge, frontend, frontend-challenge, frontendchallanges, html, html5, htmlcss, web-design, web-development, webdesign
• Language: CSS
• Homepage:
• Size: 717 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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




  
 Show the hover state of all the elements. 

  
 The component should be responsive and display correctly on different screen sizes. 

  
 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 


![ScreenShot](Preview.png)

 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




   


HTML: Structure of the blog card component. 

    


CSS: Styling for the component and responsiveness.



Installation




    
Clone the repository:

     git clone https://github.com/Yashi-Singh-1/Blog-Card-Component.git 

    
Open index.html in your web browser.





 Usage 


 To implement the Blog Card Component in your project: 




    
  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. 

    
  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. 

    
  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: 




    
 Fork the repository. 

    
 Create your feature branch (git checkout -b feature/YourFeature). 

    
 Commit your changes (git commit -am 'Add some feature'). 

    
 Push to the branch (git push origin feature/YourFeature).

    
 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