diff --git a/snippets/animal-hair-ambassador/index.html b/snippets/animal-hair-ambassador/index.html new file mode 100644 index 00000000..b662b09a --- /dev/null +++ b/snippets/animal-hair-ambassador/index.html @@ -0,0 +1,38 @@ + + + + + + Animal Hair Ambassador + + + +
+

Animal Hair Ambassador

+

Adorable spokes-animals show off stylish hair accessories.

+
+
+ +
+ + + + diff --git a/snippets/animal-hair-ambassador/script.js b/snippets/animal-hair-ambassador/script.js new file mode 100644 index 00000000..b378f398 --- /dev/null +++ b/snippets/animal-hair-ambassador/script.js @@ -0,0 +1,12 @@ +// Simple theme toggle +const header = document.querySelector('header'); +const toggle = document.createElement('button'); +toggle.textContent = 'Toggle Theme'; +header.appendChild(toggle); + +let dark = false; +toggle.addEventListener('click', () => { + dark = !dark; + document.body.style.background = dark ? '#333' : '#fdfdfd'; + document.body.style.color = dark ? '#fdfdfd' : '#333'; +}); diff --git a/snippets/animal-hair-ambassador/styles.css b/snippets/animal-hair-ambassador/styles.css new file mode 100644 index 00000000..6dd8b540 --- /dev/null +++ b/snippets/animal-hair-ambassador/styles.css @@ -0,0 +1,48 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + background: #fdfdfd; + color: #333; +} + +header { + background: #ff6f91; + color: #fff; + padding: 1rem; + text-align: center; +} + +.gallery { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + padding: 1rem; +} + +.card { + background: #fff; + border: 1px solid #ddd; + border-radius: 8px; + width: 300px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.card img { + width: 100%; + border-bottom: 1px solid #ddd; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.card h2 { + margin: 0.5rem 0; +} + +footer { + text-align: center; + padding: 1rem; + background: #eee; + margin-top: 1rem; +}