|
|
<!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> |
