title
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap" rel="stylesheet"> <title>Ophy's Subgrid Products Cards</title> </head> <body> <div class="cards-container"> <article class="sedans"> <img src="./assets/icon-sedans.svg" alt="an icon showing a sedan vehicle"> <h3>Sedans</h3> <p> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip in and out of town - let your imaginations run. </p> <button> Learn more </button> </article> <article class="suvs"> <img src="./assets/icon-suvs.svg" alt="an icon showing an suv vehicle"> <h3>SUVs</h3> <p> Take an SUV for its spacious interior, power, and versatility. </p> <button> Learn more </button> </article> <article class="luxury"> <img src="./assets/icon-luxury.svg" alt="an icon showing a luxury vehicle"> <h3> Extremely Luxurious </h3> <p> Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style. </p> <button> Learn more </button> </article> </div> <footer> Ophy's Subgrid Products Cards | <a href="https://www.frontendmentor.io/">Design from Frontend Mentor </a> </footer> </body> </html>
body { font-family: "Lexend Deca", sans-serif; margin: 0 auto; max-width: 920px; } h3 { font-family: "Big Shoulders Display", sans-serif; color: #F2F2F2; font-size: 2.5rem; } p { font-family: "Lexend Deca", sans-serif; font-optical-sizing: auto; font-weight: 200; color: #FFF; padding: 1rem 0; line-height: 1.5; } footer { text-align: center; margin-top: 1.5rem; } footer a { text-decoration: none; }
snap
new
fork
download
html
css
js
output
config
➚ link to output
➚ list all stems
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code