NOW CHANGE COLORS TO DIFFERENT HUES OGF A WHITE TO LIGHT YELLOW GREADIENTS IN REPLACE OFALLCURRENTCOLORS,AFTER REPLACE ALL TEXT CONTENT WITH ALL THIUSINFO,USE BEST UDGEMENT WHERETO PUT WHAT Home About Memberships & Packages Teachers Classes Training Events Gifts Private Events Zumba Fiesta Event Love & Light Yoga and Wellness Logo Soundbath & Breathwork Event MAT PILATES • ZUMBA • BARRE NEW STUDENT SPECIAL 7 Days Unlimited Only $30 RISE • RADIATE • RECONNECT 4877 Mission Street, San Francisco Expert Guidance Our dedicated teachers bring years of experience, wisdom, and compassion to every class, ensuring a safe and supportive environment for all. Holistic Wellness Beyond physical asanas, our classes integrate mindfulness, breathwork, and meditation to promote overall well-being. Community Connection Join our inclusive classes to connect with fellow yogis and become part of our vibrant community. MON First Monday Soundbath + Breathwork (45min) every first Monday of the month Book 12:05-12:55 Gentle Stretch (50min) Book 6:30-7:30pm Dynamic Flow (1hr) Book TUE 12:05-12:55 Vinyasa (All Levels) (50min) Book 6:00-7:00pm Vinyasa (All Levels) (1hr) Book 7:15-8:15pm Candlelit Slow Flow (1hr) Book WED 6:30-7:30pm Yin + Restorative + Sound Bath (1hr) Book THU 6:00-7:00pm Candlelight Vinyasa (Heated) (1hr) Book FRI 12:05-12:55 Friday Power Flow (50min) Book 5:30-6:20pm Barre Class (50min) Book SAT 9:15-10:15am Strong Core: Yoga + Pilates (1hr) Book 10:00-11:00am Vinyasa + Sound Bath (1hr) Book 10:30-11:30am Zumba (1hr) Book SUN 6:00-7:00pm Sunday Slow Flow (1hr) Book Find us on ClassPass Call us (415) 555-1234 Email us hello@loveandlightyoga.com Connect with us: Our Offerings Start Your Journey Today Choose the perfect way to begin or continue your yoga practice with our welcoming community Most Popular New to Love & Light 7 Days Unlimited $30 Perfect for beginners! Experience all our classes and find your perfect fit with unlimited access for a full week. All class styles Beginner friendly Community support Full week access Begin Your Journey Zumba with Sergio Saturdays 10:30–11:30 AM $15 High-energy dance fitness that combines Latin rhythms with easy-to-follow moves. Fun, effective, and addictive! Dance fitness Latin rhythms All skill levels Saturday mornings Book Now Love & Light Yoga Discount Special Community Pricing 20% Off We honor those who serve our community with special pricing for students, military, first responders, teachers, and seniors 55+. Students Military First Responders Teachers Seniors 55+ Learn More Excelsior Corridor Partners Special 15% off first month memberships/class packages EXCELSIORCORRIDOR15 Use code at checkout on loveandlightsfyoga.com/cart Community Love What Our Yogis Say Hear from our amazing community members about their transformative experiences "Love & Light has become my sanctuary. The teachers are incredible and the community is so welcoming. I've grown so much in my practice here!" Sarah M. 2 weeks ago "Amazing studio! The variety of classes keeps me engaged and challenged. Sergio's Zumba class is absolutely fantastic - so much fun!" Michael R. 1 month ago "The new student special was perfect for trying different styles. Found my favorite teachers and now I'm a regular. Highly recommend!" Jessica L. 3 weeks ago "Clean, beautiful space with knowledgeable instructors. The community here genuinely cares about each other's growth and well-being." David K. 1 week ago Your feedback helps us create an even better experience for our community Get in Touch Visit Our Studio Come experience the warmth of our community in person. We're located in the heart of the Mission District. Love & Light Yoga and Wellness 4877 Mission Street San Francisco, CA Mission District Connect With Us Studio Hours Monday - Friday 6:00 AM - 9:00 PM Saturday 7:00 AM - 8:00 PM Sunday 8:00 AM - 7:00 PM Find Us 4877 Mission Street, San Francisco, CA Get Directions Send Us a Message Have questions? We'd love to hear from you! Name Your full name Email your@email.com Message Tell us how we can help you on your yoga journey... Admin only — Zapier Webhook URL https://hooks.zapier.com/hooks/catch/... If set, submissions will be sent to Zapier then emailed to lo@loveandlightsfyoga.com. Love & Light YOGA A welcoming community space where yoga practitioners of all levels find balance, strength, and inner peace. Quick Links About Us Classes Teachers Packages & Memberships Programs & Events Yoga Teacher Training Events Gift Certificates Private Events Visit Our Studio 4877 Mission Street San Francisco, CA Book a Class Stay Connected Join our community for class updates, wellness tips, and special events Join Our Community © 2025 Love & Light Yoga and Wellness. All rights reserved. Privacy Policy Terms of Service Made with in SF Edit with × - Initial Deployment
6140626
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Raw Materials - Unusual Design Company</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'stone-200': '#f4e9e1', | |
| 'orange-500': '#ff3d00', | |
| 'orange-600': '#e03600', | |
| 'purple-600': '#6a0dad', | |
| 'blue-500': '#3b82f6', | |
| 'blue-600': '#2563eb', | |
| 'red-500': '#ef4444', | |
| 'yellow-400': '#facc15', | |
| 'green-400': '#4ade80', | |
| 'lime-500': '#84cc16' | |
| }, | |
| fontFamily: { | |
| sans: ['Stabil Grotesk', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f4e9e1; | |
| color: #0e0e0e; | |
| overflow-x: hidden; | |
| } | |
| .perspective { | |
| perspective: 1000px; | |
| } | |
| .rotate-3d { | |
| transform-style: preserve-3d; | |
| } | |
| .nav-dot { | |
| transition: opacity 0.3s ease; | |
| } | |
| .case-study-card:hover .case-study-thumb { | |
| opacity: 0.8; | |
| transform: translateY(-5px); | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #0e0e0e; | |
| } | |
| .animate-marquee { | |
| animation: marquee 20s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(to bottom, transparent 60%, currentColor 60%); | |
| background-size: 1px 100%; | |
| background-position: 0 0.69vw; | |
| background-repeat: repeat-x; | |
| } | |
| .section-divider { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| } | |
| .sticky-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-stone-200 text-black"> | |
| <!-- Navigation --> | |
| <header class="lg:hidden sticky top-0 z-50 bg-stone-200 border-b border-black"> | |
| <nav class="flex overflow-x-auto py-3 px-4 gap-2"> | |
| <button class="bg-white text-black rounded-2xl border border-black px-3 py-2 text-xs whitespace-nowrap min-w-max">00 Raw Materials</button> | |
| <button class="bg-orange-500 text-white rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">01 Hello</button> | |
| <button class="bg-purple-600 text-white rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">02 Approach</button> | |
| <button class="bg-black text-white rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">03 Work</button> | |
| <button class="bg-blue-500 text-white rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">04 Talent</button> | |
| <button class="bg-red-500 text-white rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">05 Careers</button> | |
| <button class="bg-yellow-400 text-black rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">06 Contact</button> | |
| <button class="bg-green-400 text-black rounded-2xl px-3 py-2 text-xs whitespace-nowrap min-w-max">07 Unusual Index</button> | |
| </nav> | |
| </header> | |
| <div class="flex"> | |
| <!-- Desktop Navigation --> | |
| <aside class="hidden lg:flex lg:w-56 lg:flex-col lg:items-center lg:pt-6 lg:pb-6 lg:z-50 lg:sticky lg:top-0 lg:h-screen"> | |
| <nav class="flex flex-col items-center gap-3 w-full px-6"> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 min-h-26 bg-white text-black hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">00</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Raw Materials</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-black transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-orange-600 text-stone-200 hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">01</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Hello</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-stone-200 transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-purple-600 text-stone-200 hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">02</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Approach</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-stone-200 transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-black text-stone-200 hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">03</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Work</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-stone-200 transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-blue-600 text-stone-200 hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">04</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Talent</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-stone-200 transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-red-600 text-stone-200 hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">05</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Careers</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-stone-200 transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-yellow-400 text-black hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">06</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Contact</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-black transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| <button class="relative flex flex-col justify-between items-start border border-transparent rounded-2xl transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto w-44 p-0 m-0 h-26 bg-green-400 text-black hover:border-black hover:bg-transparent hover:text-black"> | |
| <span class="text-xs ml-4 mt-4">07</span> | |
| <span class="text-lg ml-4 mb-4 text-left">Unusual Index</span> | |
| <span class="absolute w-1.5 h-1.5 rounded-full right-2 top-1/2 transform -translate-y-1/2 bg-black transition-opacity duration-300 opacity-0"></span> | |
| </button> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1"> | |
| <!-- Hero Section --> | |
| <section class="flex flex-col lg:flex-row min-h-screen"> | |
| <div class="hidden lg:flex lg:w-56 lg:flex-col lg:items-center lg:pt-6 lg:pb-6"></div> | |
| <div class="flex-1 flex items-center justify-center p-8"> | |
| <div class="w-full max-w-6xl bg-stone-200 rounded-3xl p-12 relative overflow-hidden border border-black"> | |
| <div class="absolute top-12 left-12"> | |
| <h2 class="text-lg text-black font-normal">Raw</h2> | |
| <h2 class="text-lg text-black font-normal">Materials</h2> | |
| </div> | |
| <div class="absolute top-12 right-12"> | |
| <h2 class="text-lg text-black font-normal">An Unusual</h2> | |
| <h2 class="text-lg text-black font-normal">Design Company</h2> | |
| </div> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="text-black font-normal" style="font-size: 20vw; line-height: 1;">RM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hello Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-orange-500 text-stone-200 flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Hello ) section</h1> | |
| <div class="text-xs md:text-[10px] text-[#0e0e0e]">● 01 / 01</div> | |
| </div> | |
| <div class="bg-orange-500 text-stone-200 rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw]">01</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Hello</h1> | |
| </div> | |
| <div class="border border-[#0e0e0e] rounded-2xl flex flex-col items-center justify-center mb-4 relative"> | |
| <div class="flex flex-col items-center justify-start w-full my-[2.44vw] md:my-[8.4vw] px-0"> | |
| <h1 class="text-[#0e0e0e] text-[13.88vw] md:text-[16.75vw] font-normal leading-[14.25vw] md:leading-[17.6vw] m-0 p-0 text-justify w-[calc(100%-96px)] md:w-[calc(100%-8.4vw)] gradient-text">We Are</h1> | |
| <h1 class="text-[#ff3d00] text-[13.88vw] md:text-[16.75vw] font-normal leading-[14.25vw] md:leading-[17.6vw] m-0 p-0 text-right pr-[12%] w-[calc(88%-96px)] md:w-[calc(88%-8.4vw)] md:text-left md:pr-0">Raw</h1> | |
| <h1 class="text-[#ff3d00] text-[13.88vw] md:text-[16.75vw] font-normal leading-[14.25vw] md:leading-[17.6vw] m-0 p-0 text-justify w-[calc(100%-96px)] md:w-[calc(100%-8.4vw)]">Materials</h1> | |
| </div> | |
| <div class="flex items-center justify-center text-[1.66666vw] md:text-[5vw] leading-[1.944vw] md:leading-[5.6vw] absolute left-12 md:left-auto top-[20vw] md:top-auto md:bottom-[12vw] w-[24vw] md:w-[calc(100%-8.4vw)] text-left text-indent-[25%] md:border-t md:border-b md:border-[#0e0e0e] md:pt-[8vw] md:pb-[8vw] md:relative md:text-indent-[12%]"> | |
| We design and launch unusually creative digital products that change brands' fortunes. | |
| </div> | |
| <div class="absolute bottom-[4.44vw] flex items-center justify-between w-[calc(100%-96px)] md:w-[calc(100%-10.2vw)]"> | |
| <div class="text-[#ff3d00] text-[0.833vw] md:text-[2.133vw] font-normal tracking-tight leading-[0.833vw] md:leading-[2.133vw]">(Hello)</div> | |
| <div class="text-[#0e0e0e] text-[0.833vw] md:text-[2.133vw] font-normal tracking-tight leading-[0.833vw] md:leading-[2.133vw] text-right">● 01 / 02</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Approach Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-purple-600 text-stone-200 flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Approach ) section</h1> | |
| <div class="text-xs md:text-[10px] text-[#0e0e0e]">● 02 / 01</div> | |
| </div> | |
| <div class="bg-purple-600 text-stone-200 rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw]">02</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Approach</h1> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-4 mb-4"> | |
| <div class="border border-black rounded-2xl p-6 flex-1"> | |
| <h3 class="text-xl font-bold mb-2">One Team</h3> | |
| <p>Our clients become part of our team, and our team a part of their company.</p> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 flex-1"> | |
| <h3 class="text-xl font-bold mb-2">Creator Led</h3> | |
| <p>Every team member's higher priority is to make the different.</p> | |
| </div> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 mb-4"> | |
| <h3 class="text-xl font-bold mb-2">Capabilities</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <h4 class="font-semibold mb-2">DESIGN</h4> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Creative Direction</li> | |
| <li>Digital Product Design</li> | |
| <li>Brand Design</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">STRATEGY</h4> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Product Management</li> | |
| <li>Business Analysis</li> | |
| <li>Product Roadmapping</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">TECHNOLOGY</h4> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Technical Architecture</li> | |
| <li>Platform Development</li> | |
| <li>Front End Development</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-black text-stone-300 flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Work ) section</h1> | |
| <div class="text-stone-500 text-xs md:text-[10px]">● 03 / 01</div> | |
| </div> | |
| <div class="bg-black text-stone-300 rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw]">03</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Work</h1> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="border border-black rounded-2xl p-6 case-study-card cursor-pointer transition-all duration-300 hover:shadow-lg"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">7-Eleven Mobile</h3> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Product Innovation</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">End-to-end product design for 7-11's digital consumer experience.</p> | |
| <div class="flex gap-2"> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-200 rounded-lg"></div> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-300 rounded-lg"></div> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-400 rounded-lg"></div> | |
| </div> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 case-study-card cursor-pointer transition-all duration-300 hover:shadow-lg"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Volta Charging</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Product Design</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Creating the next generation of EV charging network experiences.</p> | |
| <div class="flex gap-2"> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-200 rounded-lg"></div> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-300 rounded-lg"></div> | |
| <div class="case-study-thumb w-16 h-16 bg-gray-400 rounded-lg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Talent Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-blue-500 text-white flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Talent ) section</h1> | |
| <div class="text-black text-xs md:text-[10px]">● 04 / 01</div> | |
| </div> | |
| <div class="bg-blue-500 text-white rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw] text-right">04</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Talent</h1> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 mb-4"> | |
| <h3 class="text-xl font-bold mb-4">The Talent Network</h3> | |
| <p class="mb-4">A community created by RM to be a super connector for the unusually talented.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-full text-sm tab-active">Everywhere Company</button> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm">The Academy</button> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm">Creative Community</button> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 h-48 flex items-center justify-center"> | |
| <p class="text-gray-500">Talent Network Visualization</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Careers Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-red-500 text-white flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Careers ) section</h1> | |
| <div class="text-black text-xs md:text-[10px]">● 05 / 01</div> | |
| </div> | |
| <div class="bg-red-500 text-white rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw] text-right">05</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Careers</h1> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">We Are Looking For The Unusually Talented</h2> | |
| <p class="text-lg max-w-2xl mx-auto">Join our mission to create an unusual kind of creative company</p> | |
| </div> | |
| <div class="space-y-4 mb-8"> | |
| <div class="border border-black rounded-2xl p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Creative, Product Design</h3> | |
| <span class="bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded">(CREATIVE)</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Product designers are one of the most important raw materials of raw materials.</p> | |
| <button class="bg-black text-white px-4 py-2 rounded-lg">Apply Now</button> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Creative, Motion Design</h3> | |
| <span class="bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded">(DELIVERY)</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">In a world mediated by screens, static designs are unfit and boring.</p> | |
| <button class="bg-black text-white px-4 py-2 rounded-lg">Apply Now</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-yellow-400 text-black flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Contact ) section</h1> | |
| <div class="text-black text-xs md:text-[10px]">● 06 / 01</div> | |
| </div> | |
| <div class="bg-yellow-400 text-black rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw] text-right">06</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Contact</h1> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4">Let's Talk Creativity</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="border border-black rounded-2xl p-6 text-center bg-white"> | |
| <h3 class="text-xl font-bold mb-2">New Business</h3> | |
| <p class="mb-4">john@therawmaterials.com</p> | |
| <button class="bg-yellow-400 text-black px-4 py-2 rounded-lg w-full">Talk with John</button> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 text-center bg-white"> | |
| <h3 class="text-xl font-bold mb-2">News & Press</h3> | |
| <p class="mb-4">jennifer.allen@therawmaterials.com</p> | |
| <button class="bg-yellow-400 text-black px-4 py-2 rounded-lg w-full">Talk with Jennifer</button> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 text-center bg-white"> | |
| <h3 class="text-xl font-bold mb-2">Join The Team</h3> | |
| <p class="mb-4">pabs@therawmaterials.com</p> | |
| <button class="bg-yellow-400 text-black px-4 py-2 rounded-lg w-full">Talk with Pablo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Unusual Index Section --> | |
| <section class="px-4 md:px-12 py-8"> | |
| <div class="section-divider bg-lime-500 text-black flex items-center justify-between h-8 md:h-10 px-4 md:px-12 rounded-2xl md:rounded-3xl mb-4"> | |
| <h1 class="text-xs md:text-[10px] font-normal tracking-tight">You are now entering ( Unusual Index ) section</h1> | |
| <div class="text-black text-xs md:text-[10px]">● 07 / 01</div> | |
| </div> | |
| <div class="bg-lime-500 text-black rounded-2xl flex flex-col justify-between min-h-[640px] md:aspect-[343/480] relative mb-4"> | |
| <div class="text-[6.9vw] md:text-[13.8vw] font-normal tracking-tight mt-[4.4vw] md:mt-[8vw] ml-12 md:ml-[4.2vw]">07</div> | |
| <h1 class="text-[13.8vw] md:text-[16.75vw] font-normal tracking-tight leading-[13.8vw] md:leading-[17.6vw] mb-[4.4vw] md:mb-[8vw] ml-12 md:ml-[4.2vw]">Unusual Index</h1> | |
| </div> | |
| <div class="border border-black rounded-2xl p-6 mb-8"> | |
| <h3 class="text-xl font-bold mb-4">Subscribe to The (Unusual) Index</h3> | |
| <p class="mb-4">Our compendium of unusually great products, people, and ideas that inspire us to think differently.</p> | |
| <div class="flex flex-col md:flex-row gap-2"> | |
| <input type="email" placeholder="NOTACULT@THERAWMATERIALS.COM" class="flex-1 border border-black rounded-full px-4 py-2"> | |
| <button class="bg-black text-white px-6 py-2 rounded-full whitespace-nowrap">SUBSCRIBE</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="px-4 md:px-12 py-8 border-t border-black"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-gray-300 rounded-full"></div> | |
| <div> | |
| <h4 class="font-bold">Raw Materials.</h4> | |
| <h4>An Unusual Design Company.</h4> | |
| </div> | |
| </div> | |
| <div class="flex flex-col gap-2"> | |
| <a href="#" class="underline">Contact Us</a> | |
| <a href="#" class="underline">Instagram</a> | |
| <a href="#" class="underline">Twitter</a> | |
| <a href="#" class="underline">LinkedIn</a> | |
| </div> | |
| <div class="text-sm">© 2023</div> | |
| </div> | |
| </footer> | |
| </main> | |
| </div> | |
| <script> | |
| // Simple interactivity for demonstration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile navigation scrolling | |
| const nav = document.querySelector('nav'); | |
| if (nav) { | |
| nav.addEventListener('wheel', function(e) { | |
| if (e.deltaY > 0) { | |
| nav.scrollLeft += 100; | |
| } else { | |
| nav.scrollLeft -= 100; | |
| } | |
| }); | |
| } | |
| // Tab switching in talent section | |
| const tabs = document.querySelectorAll('.tab-active ~ button'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelector('.tab-active').classList.remove('tab-active'); | |
| this.classList.add('tab-active'); | |
| }); | |
| }); | |
| // Case study hover effect | |
| const caseStudyCards = document.querySelectorAll('.case-study-card'); | |
| caseStudyCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const thumbs = this.querySelectorAll('.case-study-thumb'); | |
| thumbs.forEach(thumb => { | |
| thumb.style.opacity = '0.8'; | |
| thumb.style.transform = 'translateY(-5px)'; | |
| }); | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| const thumbs = this.querySelectorAll('.case-study-thumb'); | |
| thumbs.forEach(thumb => { | |
| thumb.style.opacity = '1'; | |
| thumb.style.transform = 'translateY(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=FGF897/rm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |