| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Minimalist Design Studio</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'sans': ['Poppins', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| .bw-bg { |
| background-color: #000; |
| } |
| |
| .hero-bg { |
| background-image: url('hero.png'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| } |
| |
| .section-bg { |
| background-color: #000; |
| } |
| |
| .text-black { |
| color: #000; |
| } |
| |
| .text-white { |
| color: #fff; |
| } |
| |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #000; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #333; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-black text-white"> |
| |
| <nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-black backdrop-blur-sm"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="text-xl font-bold text-black">Studio</div> |
| |
| |
| <button id="mobile-menu-button" class="md:hidden text-black"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| |
| |
| <div class="hidden md:flex space-x-6 items-center"> |
| <a href="#hero" class="hover:text-gray-500 transition-colors duration-300 nav-link text-black">Home</a> |
| <a href="#team" class="hover:text-gray-500 transition-colors duration-300 nav-link text-black">Meet Our Team</a> |
| <a href="#contact" class="hover:text-gray-500 transition-colors duration-300 nav-link text-black">Contact</a> |
| |
| <div class="flex space-x-2"> |
| <button id="lang-en" class="px-3 py-1 bg-black text-white border border-black rounded-full text-sm font-medium hover:bg-gray-800 transition-colors duration-300 lang-btn">EN</button> |
| <button id="lang-lt" class="px-3 py-1 bg-white text-black border border-black rounded-full text-sm font-medium hover:bg-gray-100 transition-colors duration-300 lang-btn">LT</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-black"> |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
| <a href="#hero" class="py-2 hover:text-gray-500 transition-colors duration-300 nav-link text-black">Home</a> |
| <a href="#team" class="py-2 hover:text-gray-500 transition-colors duration-300 nav-link text-black">Meet Our Team</a> |
| <a href="#contact" class="py-2 hover:text-gray-500 transition-colors duration-300 nav-link text-black">Contact</a> |
| |
| <div class="flex space-x-2 py-2"> |
| <button id="lang-en-mobile" class="px-3 py-1 bg-black text-white border border-black rounded-full text-sm font-medium hover:bg-gray-800 transition-colors duration-300 lang-btn">EN</button> |
| <button id="lang-lt-mobile" class="px-3 py-1 bg-white text-black border border-black rounded-full text-sm font-medium hover:bg-gray-100 transition-colors duration-300 lang-btn">LT</button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="hero" class="hero-bg min-h-screen flex flex-col justify-center items-center relative pt-16"> |
| |
| <div class="text-center px-4 max-w-3xl"> |
| <h1 id="hero-title" class="text-4xl md:text-6xl font-bold mb-6 text-black">Welcome to Our Design Studio</h1> |
| <p id="hero-subtitle" class="text-xl md:text-2xl text-black opacity-90">Creating minimalist experiences with purpose</p> |
| </div> |
| |
| <div class="absolute bottom-8 animate-bounce"> |
| <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <section id="team" class="py-20 section-bg"> |
| <div class="container mx-auto px-4"> |
| <h2 id="team-title" class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">Meet Our Team</h2> |
| |
| <div class="flex flex-col md:flex-row justify-center items-center gap-12"> |
| |
| <div class="max-w-sm text-center"> |
| <div class="w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden border-4 border-white"> |
| <img src="Asta.png" alt="Asta Astrauskienė" class="w-full h-full object-cover"> |
| </div> |
| <h3 id="member1-name" class="text-2xl font-semibold mb-2 text-white">Asta Astrauskienė</h3> |
| <p id="member1-bio" class="text-white opacity-80">Creative Director with over 10 years of experience in minimalist design and brand strategy.</p> |
| </div> |
| |
| |
| <div class="max-w-sm text-center"> |
| <div class="w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden border-4 border-white"> |
| <img src="Simona.png" alt="Simona Jašmonaitė" class="w-full h-full object-cover"> |
| </div> |
| <h3 id="member2-name" class="text-2xl font-semibold mb-2 text-white">Simona Jašmonaitė</h3> |
| <p id="member2-bio" class="text-white opacity-80">Lead Designer specializing in user experience and interface design for digital products.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 section-bg"> |
| <div class="container mx-auto px-4"> |
| <h2 id="contact-title" class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">Contact Us</h2> |
| |
| <div class="max-w-2xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> |
| <div class="p-6 bg-gray-900 border border-white rounded-lg"> |
| <div class="text-2xl mb-4 text-white">✉️</div> |
| <h3 id="email-label" class="text-xl font-semibold mb-2 text-white">Email</h3> |
| <p id="contact-email" class="text-white">hello@minimaliststudio.com</p> |
| </div> |
| |
| <div class="p-6 bg-gray-900 border border-white rounded-lg"> |
| <div class="text-2xl mb-4 text-white">📍</div> |
| <h3 id="address-label" class="text-xl font-semibold mb-2 text-white">Address</h3> |
| <p id="contact-address" class="text-white">123 Design Street, Creative City</p> |
| </div> |
| |
| <div class="p-6 bg-gray-900 border border-white rounded-lg"> |
| <div class="text-2xl mb-4 text-white">📞</div> |
| <h3 id="phone-label" class="text-xl font-semibold mb-2 text-white">Phone</h3> |
| <p id="contact-phone" class="text-white">+370 000 00000</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="mailto:hello@minimaliststudio.com" class="inline-block px-8 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition-colors duration-300"> |
| Send us a message |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="py-8 bg-black border-t border-white"> |
| <div class="container mx-auto px-4 text-center text-white"> |
| <p id="footer-text">© 2023 Minimalist Design Studio. All rights reserved.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const translations = { |
| en: { |
| home: "Home", |
| team: "Meet Our Team", |
| contact: "Contact", |
| heroTitle: "Welcome to Our Design Studio", |
| heroSubtitle: "Creating minimalist experiences with purpose", |
| teamTitle: "Meet Our Team", |
| member1Name: "Asta Astrauskienė", |
| member1Bio: "Creative Director with over 10 years of experience in minimalist design and brand strategy.", |
| member2Name: "Simona Jašmonaitė", |
| member2Bio: "Lead Designer specializing in user experience and interface design for digital products.", |
| contactTitle: "Contact Us", |
| emailLabel: "Email", |
| addressLabel: "Address", |
| phoneLabel: "Phone", |
| contactEmail: "hello@minimaliststudio.com", |
| contactAddress: "123 Design Street, Creative City", |
| contactPhone: "+370 000 00000", |
| contactButton: "Send us a message", |
| footerText: "© 2023 Minimalist Design Studio. All rights reserved." |
| }, |
| lt: { |
| home: "Pagrindinis", |
| team: "Susipažinkite su komanda", |
| contact: "Kontaktai", |
| heroTitle: "Sveiki atvykę į mūsų dizaino studiją", |
| heroSubtitle: "Kuriame minimalistinius patyrimus su paskirtimi", |
| teamTitle: "Susipažinkite su mūsų komanda", |
| member1Name: "Asta Astrauskienė", |
| member1Bio: "Kūrybinis direktorius, turintis daugiau nei 10 metų patirties minimalistiniame dizaine ir prekių ženklo strategijoje.", |
| member2Name: "Simona Jašmonaitė", |
| member2Bio: "Vyriausiasis dizaineris, specializuojantis naudotojo patyrimo ir sąsajos dizaine skaitmeniniams produktams.", |
| contactTitle: "Susisiekite su mumis", |
| emailLabel: "El. Paštas", |
| addressLabel: "Adresas", |
| phoneLabel: "Tl. Numeris", |
| contactEmail: "labas@minimaliststudija.lt", |
| contactAddress: "123 Dizaino gatvė, Kūrybiškas miestas", |
| contactPhone: "+370 000 00000", |
| contactButton: "Parašykite mums", |
| footerText: "© 2023 Minimalistinės dizaino studija. Visos teisės saugomos." |
| } |
| }; |
| |
| |
| const langButtons = document.querySelectorAll('.lang-btn'); |
| const navLinks = document.querySelectorAll('.nav-link'); |
| const heroTitle = document.getElementById('hero-title'); |
| const heroSubtitle = document.getElementById('hero-subtitle'); |
| const teamTitle = document.getElementById('team-title'); |
| const member1Name = document.getElementById('member1-name'); |
| const member1Bio = document.getElementById('member1-bio'); |
| const member2Name = document.getElementById('member2-name'); |
| const member2Bio = document.getElementById('member2-bio'); |
| const contactTitle = document.getElementById('contact-title'); |
| const emailLabel = document.getElementById('email-label'); |
| const addressLabel = document.getElementById('address-label'); |
| const phoneLabel = document.getElementById('phone-label'); |
| const contactEmail = document.getElementById('contact-email'); |
| const contactAddress = document.getElementById('contact-address'); |
| const contactPhone = document.getElementById('contact-phone'); |
| const contactButton = document.querySelector('#contact a'); |
| const footerText = document.getElementById('footer-text'); |
| |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| |
| let currentLang = 'en'; |
| |
| |
| function updateContent(lang) { |
| currentLang = lang; |
| |
| |
| const navLinksArray = Array.from(navLinks); |
| navLinksArray[0].textContent = translations[lang].home; |
| navLinksArray[1].textContent = translations[lang].team; |
| navLinksArray[2].textContent = translations[lang].contact; |
| |
| if (navLinksArray.length > 3) { |
| navLinksArray[3].textContent = translations[lang].home; |
| navLinksArray[4].textContent = translations[lang].team; |
| navLinksArray[5].textContent = translations[lang].contact; |
| } |
| |
| |
| heroTitle.textContent = translations[lang].heroTitle; |
| heroSubtitle.textContent = translations[lang].heroSubtitle; |
| |
| |
| teamTitle.textContent = translations[lang].teamTitle; |
| member1Name.textContent = translations[lang].member1Name; |
| member1Bio.textContent = translations[lang].member1Bio; |
| member2Name.textContent = translations[lang].member2Name; |
| member2Bio.textContent = translations[lang].member2Bio; |
| |
| |
| contactTitle.textContent = translations[lang].contactTitle; |
| emailLabel.textContent = translations[lang].emailLabel; |
| addressLabel.textContent = translations[lang].addressLabel; |
| phoneLabel.textContent = translations[lang].phoneLabel; |
| contactEmail.textContent = translations[lang].contactEmail; |
| contactAddress.textContent = translations[lang].contactAddress; |
| contactPhone.textContent = translations[lang].contactPhone; |
| contactButton.textContent = translations[lang].contactButton; |
| |
| |
| footerText.textContent = translations[lang].footerText; |
| |
| |
| document.querySelectorAll('#lang-en, #lang-lt, #lang-en-mobile, #lang-lt-mobile').forEach(btn => { |
| if (btn.id === `lang-${lang}` || btn.id === `lang-${lang}-mobile`) { |
| |
| btn.classList.add('bg-black', 'text-white'); |
| btn.classList.remove('bg-white', 'text-black'); |
| } else { |
| |
| btn.classList.remove('bg-black', 'text-white'); |
| btn.classList.add('bg-white', 'text-black'); |
| } |
| }); |
| } |
| |
| |
| langButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| const lang = button.id.split('-')[1]; |
| updateContent(lang); |
| }); |
| }); |
| |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| updateContent('en'); |
| </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=ryzikas/oh-yes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
