| <html lang="en"><head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68855d55ffb23779b0e00265"}};</script> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Black Artists Archive | Preserving Black Artistic Legacies</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| .hero-bg { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1400&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .artist-tile { |
| transition: all 0.3s ease; |
| } |
| |
| .artist-tile:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| } |
| |
| .event-card { |
| transition: all 0.3s ease; |
| } |
| |
| .event-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .support-card { |
| transition: all 0.3s ease; |
| } |
| |
| .support-card:hover { |
| transform: scale(1.03); |
| } |
| </style> |
| <style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:0.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-48{height:12rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.flex-grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.object-cover{object-fit:cover}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-serif{font-family:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\:bg-yellow-500:hover{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.hover\:text-yellow-400:hover{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.hover\:text-yellow-600:hover{--tw-text-opacity:1;color:rgb(202 138 4 / var(--tw-text-opacity, 1))}.hover\:text-yellow-800:hover{--tw-text-opacity:1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-yellow-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(250 204 21 / var(--tw-ring-opacity, 1))}@media (min-width: 640px){.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}</style></head> |
| <body class="bg-gray-50 text-gray-900"> |
| |
| <nav class="bg-black text-white py-4 px-6 shadow-md"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-archive text-2xl text-yellow-400"></i> |
| <span class="text-xl font-bold">Black Artists Archive</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#" class="hover:text-yellow-400 transition">Archive</a> |
| <a href="#" class="hover:text-yellow-400 transition">BCI</a> |
| <a href="#" class="hover:text-yellow-400 transition">Events</a> |
| <a href="#" class="hover:text-yellow-400 transition">About</a> |
| <a href="#" class="hover:text-yellow-400 transition">Contact</a> |
| </div> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-bg text-white py-24 px-6"> |
| <div class="container mx-auto max-w-4xl text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Preserving Black Artistic Legacies. Empowering Future Voices.</h1> |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed">The Black Artists Archive is a living, evolving record of Black creativity from Detroit and beyond—honoring artists, curators, and cultural stewards through archival storytelling, education, and community action.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-8 rounded-full transition flex items-center justify-center gap-2"> |
| <i class="fas fa-search"></i> Explore the Archive |
| </button> |
| <button class="bg-transparent hover:bg-white hover:text-black border-2 border-white text-white font-bold py-3 px-8 rounded-full transition flex items-center justify-center gap-2"> |
| <i class="fas fa-graduation-cap"></i> Learn about BCI |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-white"> |
| <div class="container mx-auto max-w-4xl"> |
| <h2 class="text-3xl font-bold mb-8 text-center font-serif">What We Stand For</h2> |
| <p class="text-lg mb-8 text-center leading-relaxed"> |
| The Black Artists Archive (BAA) is a community-rooted initiative focused on preserving, amplifying, and celebrating Black artistic contributions—especially from Detroit and the Midwest. Through our digital and physical archive, educational programs, and cultural events, we aim to foster a more equitable and representative art historical record. |
| </p> |
| <div class="text-center"> |
| <a href="#" class="inline-flex items-center text-black font-bold hover:text-yellow-600 transition"> |
| Learn more about our mission <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-gray-100"> |
| <div class="container mx-auto max-w-4xl"> |
| <div class="flex flex-col md:flex-row items-center gap-8"> |
| <div class="md:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1562564055-71e051d33c19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Black Curatorial Institute" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6 font-serif">Curating with Care and Purpose</h2> |
| <p class="text-lg mb-6 leading-relaxed"> |
| The Black Curatorial Institute (BCI) is a groundbreaking program equipping the next generation of curators, scholars, and cultural workers. BCI centers community-responsive practices, ethical curation, and the elevation of Black perspectives within the arts. |
| </p> |
| <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition flex items-center gap-2"> |
| <i class="fas fa-graduation-cap"></i> Join or Support the BCI |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-white"> |
| <div class="container mx-auto"> |
| <h2 class="text-3xl font-bold mb-12 text-center font-serif">New Voices, Rediscovered Histories</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Elaine Sanford" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Elaine Sanford (b. 1946)</h3> |
| <p class="text-gray-600 mb-4">"Textile artist and social historian whose quilts captured the changing neighborhoods of 1960s Detroit."</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a> |
| </div> |
| </div> |
| |
| |
| <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Marcus Johnson" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Marcus Johnson (1932-2009)</h3> |
| <p class="text-gray-600 mb-4">Painter and muralist known for his vibrant depictions of Detroit's jazz scene and urban landscapes.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a> |
| </div> |
| </div> |
| |
| |
| <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Aisha Thompson" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Aisha Thompson (b. 1978)</h3> |
| <p class="text-gray-600 mb-4">Mixed-media artist exploring themes of identity, migration, and African diaspora through sculpture.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a> |
| </div> |
| </div> |
| |
| |
| <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="James Watkins" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">James Watkins (1955-2017)</h3> |
| <p class="text-gray-600 mb-4">Photographer documenting Detroit's underground music scene and political movements.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition"> |
| Browse the full Archive |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-gray-100"> |
| <div class="container mx-auto max-w-4xl"> |
| <h2 class="text-3xl font-bold mb-12 text-center font-serif">Engage With the Archive in Action</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="event-card bg-white rounded-lg overflow-hidden shadow-md"> |
| <div class="bg-yellow-400 text-black py-3 px-6"> |
| <p class="font-bold">June 15, 2023</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-4">Community Oral History Night</h3> |
| <p class="text-gray-600 mb-4">Join us for an evening of storytelling as we record and preserve personal narratives from Detroit's creative community.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="event-card bg-white rounded-lg overflow-hidden shadow-md"> |
| <div class="bg-yellow-400 text-black py-3 px-6"> |
| <p class="font-bold">July 8, 2023</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-4">Workshop: Caring for Your Own Creative Legacy</h3> |
| <p class="text-gray-600 mb-4">Learn archival best practices to preserve your artwork, writings, and creative materials for future generations.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="event-card bg-white rounded-lg overflow-hidden shadow-md"> |
| <div class="bg-yellow-400 text-black py-3 px-6"> |
| <p class="font-bold">August 22, 2023</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-4">Pop-up Exhibit: "Black Futures in Print"</h3> |
| <p class="text-gray-600 mb-4">Exploring the radical printmaking traditions of Detroit's Black artists and their visions for the future.</p> |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition flex items-center gap-2 mx-auto"> |
| <i class="far fa-calendar-alt"></i> View All Events |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-black text-white"> |
| <div class="container mx-auto max-w-4xl"> |
| <h2 class="text-3xl font-bold mb-12 text-center font-serif">Be Part of the Movement</h2> |
| <p class="text-xl mb-12 text-center leading-relaxed"> |
| This archive thrives through community support—whether by contributing materials, participating in our programs, or donating to fund our work. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="support-card bg-gray-900 rounded-lg p-8 text-center"> |
| <div class="text-4xl mb-4 text-yellow-400"> |
| <i class="fas fa-inbox"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Submit to the Archive</h3> |
| <p class="mb-6">Share your artwork, documents, or family collections to help expand our historical record.</p> |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition"> |
| Learn How |
| </button> |
| </div> |
| |
| |
| <div class="support-card bg-gray-900 rounded-lg p-8 text-center"> |
| <div class="text-4xl mb-4 text-yellow-400"> |
| <i class="fas fa-comments"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Volunteer or Share Your Story</h3> |
| <p class="mb-6">Contribute your time, skills, or personal experiences to our growing community.</p> |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition"> |
| Get Involved |
| </button> |
| </div> |
| |
| |
| <div class="support-card bg-gray-900 rounded-lg p-8 text-center"> |
| <div class="text-4xl mb-4 text-yellow-400"> |
| <i class="fas fa-heart"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Donate to Support</h3> |
| <p class="mb-6">Your financial contributions help sustain our programs and preserve Black artistic heritage.</p> |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition"> |
| Give Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-100 py-12 px-6"> |
| <div class="container mx-auto max-w-6xl"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-yellow-600 transition">Archive</a></li> |
| <li><a href="#" class="hover:text-yellow-600 transition">BCI</a></li> |
| <li><a href="#" class="hover:text-yellow-600 transition">Events</a></li> |
| <li><a href="#" class="hover:text-yellow-600 transition">About</a></li> |
| <li><a href="#" class="hover:text-yellow-600 transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Contact Us</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center gap-2"> |
| <i class="fas fa-envelope text-yellow-600"></i> |
| <a href="mailto:info@blackartistsarchive.org" class="hover:text-yellow-600 transition">info@blackartistsarchive.org</a> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i class="fas fa-map-marker-alt text-yellow-600"></i> |
| <span>Detroit, MI</span> |
| </li> |
| </ul> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-instagram text-xl"></i></a> |
| <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-facebook text-xl"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="md:col-span-2"> |
| <h3 class="text-lg font-bold mb-4">Get updates on artists, events, and archive news.</h3> |
| <form class="flex flex-col sm:flex-row gap-2"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> |
| <button type="submit" class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-6 rounded transition"> |
| Subscribe |
| </button> |
| </form> |
| <p class="text-sm mt-2 text-gray-600">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-300 mt-12 pt-8 text-center text-gray-600"> |
| <p>© 2023 Black Artists Archive. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('button.md\\:hidden').addEventListener('click', function() { |
| const navLinks = document.querySelector('.md\\:flex.space-x-8'); |
| navLinks.classList.toggle('hidden'); |
| navLinks.classList.toggle('flex'); |
| navLinks.classList.toggle('flex-col'); |
| navLinks.classList.toggle('absolute'); |
| navLinks.classList.toggle('top-16'); |
| navLinks.classList.toggle('right-6'); |
| navLinks.classList.toggle('bg-black'); |
| navLinks.classList.toggle('p-4'); |
| navLinks.classList.toggle('rounded'); |
| navLinks.classList.toggle('shadow-lg'); |
| navLinks.classList.toggle('space-y-4'); |
| navLinks.classList.toggle('space-x-0'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank">DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=icosajim/baa-1" style="color: #fff;text-decoration: underline;" target="_blank">Remix</a></p> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=icosajim/baa-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body></html> |
