Welcome to the Microsoft Docs Product Guide

Hero Image

Featured Products

Product 1

Product 1

Description of Product 1.

Learn More
Product 2

Product 2

Description of Product 2.

Learn More

This page provides detailed documentation for all Microsoft products.

``` ```css /* style.css */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; line-height: 1.6; } header { background-color: #2981B6; color: #EEEEEE; padding: 10px; text-align: center; } header .nav a { color: #E0E0E0; text-decoration: none; margin-left: 10px; } main { padding: 20px; max-width: 960px; margin: 0 auto; } .hero { text-align: center; padding: 20px; background-color: #EEEEEE; color: #E0E0E0; border-radius: 10px; } .hero img { width: 300px; height: auto; } .featured-products { padding: 20px; background-color: #F4F4F4; color: #333; margin-top: 20px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .product-card { border: 1px solid #E0E0E0; border-radius: 5px; padding: 15px; text-align: center; } .product-card img { width: 150px; height: 150px; object-fit: cover; border-radius: 5px; } .product-card h3 { margin-bottom: 10px; } .product-card p { margin-bottom: 5px; } footer { background-color: #2981B6; color: #EEEEEE; padding: 20px; text-align: center; font-size: 14px; position: absolute; bottom: 20px; left: 20px; } /* Responsive Design (Basic) */ @media (max-width: 768px) { main { padding: 10px; } .hero { text-align: center; } .product-grid { grid-template-columns: 1fr; } .product-card { padding: 20px; } }