diff --git a/img/chroma-1.jpg b/img/chroma-1.jpg new file mode 100755 index 0000000..6e7bff6 Binary files /dev/null and b/img/chroma-1.jpg differ diff --git a/img/chroma-2.jpg b/img/chroma-2.jpg new file mode 100755 index 0000000..131a9fb Binary files /dev/null and b/img/chroma-2.jpg differ diff --git a/img/chroma-3.jpg b/img/chroma-3.jpg new file mode 100755 index 0000000..b8ff3dc Binary files /dev/null and b/img/chroma-3.jpg differ diff --git a/img/sankofa-accra.jpg b/img/sankofa-accra.jpg new file mode 100755 index 0000000..67a7932 Binary files /dev/null and b/img/sankofa-accra.jpg differ diff --git a/index.html b/index.html index 69447f0..db431a0 100644 --- a/index.html +++ b/index.html @@ -262,6 +262,69 @@ color: var(--gold); } + /* INSTALLATIONS */ + .installations-section { + background: var(--midnight); + color: var(--sand); + } + + .installations-section .section-label { color: var(--gold-light); } + .installations-section .section-title { color: var(--sand); } + + .installations-intro { + font-size: 1rem; + color: rgba(245, 237, 224, 0.75); + line-height: 1.8; + max-width: 800px; + margin-bottom: 3rem; + } + + .installations-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + } + + .installation-item { + position: relative; + overflow: hidden; + } + + .installation-item img { + width: 100%; + height: 350px; + object-fit: cover; + transition: transform 0.5s ease; + } + + .installation-item:hover img { + transform: scale(1.03); + } + + .installation-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 1.5rem 1rem 1rem; + background: linear-gradient(transparent, rgba(10, 10, 15, 0.85)); + } + + .installation-caption h4 { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.2rem; + letter-spacing: 0.08em; + color: var(--sand); + margin-bottom: 0.2rem; + } + + .installation-caption p { + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--gold-light); + } + /* ABOUT — dark section */ .about-section { background: var(--midnight); @@ -535,6 +598,14 @@ height: 280px; } + .installations-grid { + grid-template-columns: 1fr; + } + + .installation-item img { + height: 280px; + } + .contact-grid { grid-template-columns: 1fr; gap: 2rem; @@ -555,6 +626,7 @@