INFORMATION & CODE

Meet The Team Display

This code is a structured HTML template designed to create a "Meet the Team" display page. It renders a clean, grid-based layout featuring profile cards for individual team members, complete with images, job titles, contact information, and social media icons.

How it Works and What it Does

The code uses a standard HTML5 structure to organize content into a row containing three columns. Each column holds a "card" element.

• Layout: It uses CSS Flexbox for the body alignment and a standard floated grid system for the cards. It includes a media query to ensure that on smaller screens (like mobile devices), the cards stack vertically rather than side-by-side.
• Styling: The visual aesthetic is defined by CSS variables in the :root pseudo-class, keeping the theme consistent (grayscale tones with specific accent colors). It applies a grayscale filter to the entire card, giving the photos a muted, professional look.
• Typography: It imports two Google Fonts ("Press Start 2P" and "VT323") to give the page a retro, pixelated, or "tech-terminal" aesthetic.
• Interactive Elements: Each card includes a "Contact" button with a hover effect and embedded Font Awesome icons for social media links.

Technologies Used

1. HTML5: Used for the document structure and semantic layout.
2. CSS3: Used for styling, including Flexbox for alignment, CSS Variables for theme management, and Media Queries for responsive design.
3. Google Fonts: External typography services to load the retro-styled fonts.
4. Font Awesome: A content delivery network (CDN) script is used to inject scalable vector icons (the social media symbols) into the page.

How to Use This Code

To implement this on your own website, follow these steps:

1. Create a file: Create a new file on your computer and name it team.html.
2. Paste the code: Copy the entire code block you provided and paste it into your team.html file.
3. Create a file: Create a new file on your computer and name it team.css.
4. Paste the code: Copy the entire code block you provided and paste it into your team.css file.
5. Save and Open: Save the files and double-click the html file it to open it in any modern web browser (Chrome, Firefox, Safari, or Edge).
6. Customization:
• Images: Change the src attribute inside the <img> tags to point to your own team member photos.
• Content: Edit the text inside the <h2< and <p> tags to match your team’s names, roles, and emails.
• Social Media: You can link the social media icons by wrapping the <i> tags in anchor <a> tags (e.g., <a href="https://linkedin.com/..."><i class="fab fa- linkedin"></i></a>).