BlogSphere is a responsive web application designed to showcase a diverse range of blog articles. It employs a card-based layout that dynamically adjusts to different screen sizes, ensuring an optimal viewing experience across devices. Each card represents a distinct blog post, including an image, title, description, author details, and relevant tags. The site is crafted with HTML and CSS, leveraging modern design principles to enhance user engagement and accessibility.
- Responsive Design: The layout is optimized for various devices using CSS Grid and Flexbox. Cards resize and rearrange automatically based on screen width.
- Card Components: Each card features an image, a title with a link, a description, and metadata including the author's name, publication date, and tags.
- Interactive Elements: Hover effects are applied to cards for a more engaging user experience. Card images zoom slightly, and the title changes color when hovered.
- Metadata Display: Author avatars, names, and publication dates are clearly displayed, adding credibility and context to each post.
index.html: The main HTML file containing the structure of the webpage.assets/:images/: Contains all the images used in the project.style_sheets/:Project_007_styles.css: The main stylesheet for the project, defining the look and feel of the webpage.
- Base Styles: The * selector ensures consistent margin, padding, and box-sizing across all elements.
- Layout: The .container class centers content and applies padding. The .main_container uses CSS Grid to arrange the cards.
- Card Styling: Cards have a border, border-radius, and a subtle hover effect for interactivity.
- Responsive Images: Images within cards are set to cover their containers and scale appropriately based on screen size.
Suhas Kanwar