TECHGADGET PRICE MATRIX

Project Overview

TechGadget Price Matrix is a responsive product comparison layout built using HTML and CSS.
The project demonstrates the use of advanced CSS selectors, combinators, pseudo-classes, and responsive CSS units to style elements efficiently without relying on excessive classes.

The layout compares two gadget models while showcasing modern CSS techniques such as structural targeting, hover effects, and flexible sizing.

Features

• Responsive product comparison grid
• Gold highlight for featured product
• Hover effects on buttons
• Even-row highlighting in feature lists
• Responsive sizing using rem, vh, %, and em
• Clean card-based UI design
• Efficient CSS using combinators and pseudo-classes

Technologies Used

• HTML
• CSS

CSS Concepts Demonstrated

CSS Units

• rem → container width and spacing
• vh → responsive section height
• % → flexible card widths
• em → scalable padding and margins

---

Selectors & Combinators

Universal Selector

*{
    box-sizing: border-box;
}

Pseudo-class Selector

article:first-of-type

Descendant Combinator

footer a

Child Combinator

.price-tag > span

Adjacent Sibling Combinator

h2 + div

Hover Effect

button:hover

Structural Selector

.features li:nth-child(even)

Project Structure

TechGadget-Price-Matrix/
│
├── index.html
└── README.md

Layout Structure

MAIN CONTAINER
│
├── Heading
│
├── Product Grid
│   ├── Standard Model
│   └── Pro Model
│
├── Feature List
│
└── Footer Links

How to Run the Project

1. Download or clone the project
2. Open the folder
3. Launch index.html in your browser

Learning Outcomes

This project helps in understanding:

• Responsive CSS units
• Efficient selector usage
• CSS combinators
• Structural styling
• Pseudo-classes
• Responsive layouts
• Cleaner CSS architecture

License

This project is under MIT License

Author

Created by abbiejonnes