From d1686619951ad956b158f7b0823e2adcaa004964 Mon Sep 17 00:00:00 2001 From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com> Date: Fri, 18 Oct 2024 20:08:22 +0530 Subject: [PATCH] Update blog.html ### Structure: - **HTML Document**: The document is well-structured, with a proper doctype declaration and language attribute. - **Head Section**: Contains metadata, title, links to stylesheets, and icons, ensuring responsiveness and access to required libraries for icons and styles. ### Components: - **Blog Section**: - Includes a section element with a class and ID for easy styling and JavaScript manipulation. - Contains a container for blog cards that showcase individual blog posts, each represented as a `div` with an image, title, description, and a "Read More" button. - **Blog Cards**: - Each card is visually distinct and contains key information about the blog post, promoting user engagement. - **Modal Implementation**: - A modal element is used for displaying detailed blog content when the "Read More" button is clicked. - The modal includes a close button and dynamically loads content based on user interaction. ### JavaScript Functionality: - **Event Handling**: - Listens for clicks on the "Read More" buttons and the modal close button, enabling a dynamic user experience. - Uses the Fetch API to retrieve blog content from JSON files, ensuring that data is loaded asynchronously without reloading the page. - **Modal Control**: - Displays the modal when a blog is selected and hides it upon user interaction. - Prevents background scrolling when the modal is open to maintain focus on the content. ### Accessibility: - The code includes some accessibility features (like the `aria-label` on the close button), which is crucial for users relying on screen readers. ### Usability: - The design promotes user interaction and keeps content organized and accessible. - The modal enhances usability by presenting additional information without navigating away from the current page. --- blog.html | 201 ++++++++++++++++++++++++++---------------------------- 1 file changed, 96 insertions(+), 105 deletions(-) diff --git a/blog.html b/blog.html index e20dcd7..058aba4 100644 --- a/blog.html +++ b/blog.html @@ -2,128 +2,119 @@ - - - - - - - - - Blogs + + + + + + + + + Blogs - -
-
-

BLOGS

-
- -
- AI and ML Impact -

AI and ML

-

Discover how AI and ML are reshaping the world...

- -
+ +
+
+

Blogs

+
+ +
+ AI and ML Impact +

AI and ML

+

Discover how AI and ML are reshaping the world...

+ +
- -
- A Guide to Java Development -

A Guide to Java Development

-

Learn how to become a successful Java developer...

- -
+ +
+ A Guide to Java Development +

A Guide to Java Development

+

Learn how to become a successful Java developer...

+ +
- -
- Coding Journey -

Beginner's Guide to Coding

-

Starting your coding journey with the right tools...

- -
+ +
+ Coding Journey +

Beginner's Guide to Coding

+

Starting your coding journey with the right tools...

+ +
- -
- Tips for Efficient Coding -

Efficient Coding Techniques

-

Maximize your coding efficiency with these tips...

- -
-
- + +
+ Tips for Efficient Coding +

Efficient Coding Techniques

+

Maximize your coding efficiency with these tips...

+ +
+
- - -
+ + +
+
- - - +