Biopic Archive is a curated web platform designed to explore the world of biographical cinema, series, and documentaries. This project serves as a comprehensive showcase of modern front-end fundamentals, focusing on semantic HTML5, advanced CSS3 layout techniques, and a mobile-first responsive strategy.
This project demonstrates high attention to detail and adherence to industry standards and best practices:
- Semantic HTML5 Architecture: Every page is built with accessibility and SEO in mind, using meaningful tags like
<header>,<main>,<section>,<article>,<time>, and<figure>to ensure a logical and accessible content flow. - Modern Layout Engines:
- Flexbox: Extensively used for headers, footers, and content alignment to achieve fluid distribution and precise spacing.
- CSS Grid: Implemented in the catalog section to manage complex multi-column grids for movie cards, ensuring perfect symmetry
- Responsive Web Design (RWD): Fully adaptive layouts using media queries at 1024px (tablets) and 600px (mobile), ensuring a seamless experience across all devices.
- Advanced CSS Features: Implementation of pseudo-elements (
::after) for decorative separators, smoothtransitionsfor UI feedback, and the Box Model (border-box) for precise dimension control. - W3C Compliance: The code is fully validated by the W3C Nu Html Checker and CSS Validation Service, guaranteeing error-free, standard-compliant code.
The entry point features a high-impact "Hero" section with an embedded trailer and a categorical navigation menu.
- Technique: Contrast-based sections using Flexbox to separate textual information from multimedia content.
A complex organizational page featuring a sticky-style sidebar navigation and a dynamic grid of titles.
- Technique: Use of
grid-template-columnsto manage a responsive 2-column distribution of movie cards.
A dedicated technical sheet using Description Lists (<dl>) for movie metadata and a custom biography section.
- Technique: Data hierarchy implementation using the "hanging indent" style and custom decorative separators via CSS pseudo-elements.
A chronological list of articles featuring tags, reading time indicators, and a custom pagination system.
- Technique: Semantic date handling with the
<time datetime="...">attribute and interactive UI components with unique hover states.
- Typography: An elegant combination of Playfair Display (Headings) for high-contrast elegance and Inter (Body) for optimized readability.
- Color Palette: A professional aesthetic featuring deep black (
#000), clean white (#fff), and a distinctive corporate red (#ed1c1c) for interactive elements and calls to action.
- Languages: HTML5, CSS3.
- Fonts: Google Fonts.
- Icons: Scalable Vector Graphics (SVG).
- Validation: W3C Markup Validation Service.
- Clone this repository:
git clone [https://github.com/ClaudiaTrigo/html-css-activity3.git](https://github.com/ClaudiaTrigo/html-css-activity3.git)