diff options
Diffstat (limited to 'css/04-external-css/index.html')
| -rw-r--r-- | css/04-external-css/index.html | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/css/04-external-css/index.html b/css/04-external-css/index.html new file mode 100644 index 0000000..872a05b --- /dev/null +++ b/css/04-external-css/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Reusable CSS Demo</title> + <!-- Linking the separate CSS file --> + <link rel="stylesheet" href="styles.css"> +</head> +<body> + + <h1>Reusable Components Example</h1> + + <!-- Reusing the .card class and different button variations --> + <div class="card"> + <h2>Product Feature A</h2> + <p>This layout uses the primary action button style.</p> + <button class="btn btn-primary">Accept</button> + </div> + + <div class="card"> + <h2>Product Feature B</h2> + <p>This layout reuses the exact same card wrapper but switches to a secondary button.</p> + <button class="btn btn-secondary">Learn More</button> + </div> + + <div class="card"> + <h2>The beauty of CSS design</h2> + <p>Visit <a href="https://csszengarden.com/" target="_blank">CSS Zen Garden</a> and try changing designs.</p> + </div> +</body> +</html> + |