Card Expander Web page

Basic Idea of the Web Page:

Title and Heading:

• The title of the page is "Iconic Structures of the World".
• The heading <h1> introduces the theme of the page, indicating that it will display famous structures from around the globe.

Container and Panels:

• The container <div> holds multiple panels, each representing a different iconic structure.
• Each panel consists of : An image of the structure as its background, name of the structure (<h3> element) overlaid on the image.

Main Logic Behind the Web Page:

• CSS Styling: The CSS styles are used to format the layout and appearance of the page. It sets the background color, font family, container width, panel size, and hover effects.
• HTML Structure: The HTML markup defines the structure of the page, including the title, heading, container, and panels. Each panel is given a unique class (panel) and inline styles for its background image.
• JavaScript (script.js): The JavaScript code adds interactivity to the page.

1. It selects all the panels using querySelectorAll('.panel') and adds a click event listener to each panel.
2. When a panel is clicked, the removeActiveClasses() function is called to remove the active class from all panels.
3. Then, the clicked panel is assigned the active class, making it visually distinct (e.g., highlighted or enlarged).

Here is the deployed version of the web page discussed above ??

Summary:

The web page serves as a visual showcase of iconic structures worldwide. It uses HTML for structure, CSS for styling, and JavaScript for interactivity. Users can click on each panel to view the details of the respective structure while the other panels are visually distinguished as inactive.

Thank you for your time

Happy exploring!