HTML Explanation
01
the <body> tag encompasses the main content of the webpage.
02
Within it, a <div> element with the class "container" serves as a wrapper for multiple card elements.
03
The card structure consists of several <div class="box"> elements, each representing an individual card.
04
Each card contains an <div class="imgBx">, housing an <img> tag that displays a profile image with an alt attribute to enhance accessibility.
05
Inside the card, an inner <div class="glass"> provides a glassmorphism effect and contains an <h3> tag for the person's name and role.
06
The name is prominently displayed, while the role is rendered in a smaller font using a <span> tag.
07
An unordered list (<ul>) is also part of each card, containing list items (<li>) with anchor tags (<a>).
08
Each anchor tag features an Ionicon representing different social media platforms, including Twitch, Instagram, and Twitter.
09
The style attribute on each <a> tag employs CSS variables to introduce animation delays for hover effects.
10
Overall, the card content effectively showcases the names and roles of various users, merging images with relevant information and social media links, creating a visually appealing and informative display.
CSS Explanation
01
The font import statement brings in the Poppins font from Google Fonts, providing a modern typography style that enhances the overall design of the webpage.
02
The universal selector (*) is employed to reset the margin and padding for all elements, apply border-box sizing for a consistent box model, and set the font family to Poppins across the document.
03
The body is styled as a flex container, centering its content both vertically and horizontally.
04
It has a minimum height of 100vh, ensuring it occupies the full viewport height. A dark blue background is applied, along with a transition effect that allows for smooth changes in the background color.
05
To enhance interactivity, specific selectors change the body’s background color when a card (designated by the .box class) is hovered over, creating a dynamic visual effect that reflects the color of the card being interacted with.
06
The container class is defined as a flex container, centering its child elements while providing a gap of 40 pixels between them.
07
The flex-wrap: wrap property allows the cards to wrap onto new lines if the number of cards exceeds the width of the container.
08
Each card is given a fixed width and height, rounded corners, and utilizes flexbox to center its content.
09
A transition effect is applied to facilitate smooth hover animations.
10
The image box within each card is positioned absolutely, allowing it to occupy the full area of the card.
11
It features a subtle border and rounded corners for a polished appearance.
12
Images within the card are styled to cover the entire box, ensuring they maintain their aspect ratio.
13
A transition effect is also applied to create smooth opacity changes. When a card is hovered over, the image’s opacity decreases to 0.5, resulting in a dimming effect that draws attention to the overlay.
14
The .glass class adds a semi-transparent overlay with a blur effect, mimicking the glassmorphism aesthetic.
15
Initially, this overlay is scaled down and hidden with an opacity of 0.
16
Upon hover, the glass effect becomes visible (opacity: 1) and scales up, creating a more pronounced glass-like appearance.
17
Text styling within the glass effect is focused on visibility, with the title text transformed to uppercase and centered for emphasis.
18
An unordered list for social media icons is positioned at the bottom of the card, centered and spaced with gaps between each icon.
19
Anchor links within the list are styled with a scaling effect that starts at 0, ensuring they remain hidden until the card is hovered over.
20
When the card is interacted with, the anchor links scale up to their full size, becoming visible and enhancing the card's interactivity.
Javascript Explanation
01
The template does not have any javascript code
HTML
CSS
JS
CSS