Spaces:

tinolin
/

coco1

Running

App Files Files Community

tinolin commited on May 11, 2025

Commit

e65b3bc

verified ·

1 Parent(s): ba28430

Add 2 files

Browse files

Files changed (2) hide show

index.html +85 -22
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -8,18 +8,19 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.cdnfonts.com/css/beautiful-minds" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Constantia&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
-                        'beautiful-minds': ['Beautiful Minds', 'sans-serif'],
-                        'constantia': ['Constantia', 'serif']
                     },
                     colors: {
                         'gold': '#D4AF37',
                     },
                     backgroundImage: {
                         'gold-pattern': "url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-29c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM60 91c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM35 41c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E\")"
@@ -28,59 +29,82 @@
             }
         }
     </script>
 </head>
-<body class="bg-black text-white font-constantia overflow-x-hidden min-h-screen">
     <!-- Language Button -->
-    <button id="languageBtn" class="fixed top-5 right-5 z-50 bg-black/70 border border-gold text-white px-4 py-2 rounded-full flex items-center gap-2 hover:bg-gold hover:text-black transition-all duration-300">
         <i class="fas fa-language"></i>
         <span>IT</span>
     </button>
     <div class="container mx-auto min-h-screen flex flex-col justify-between px-6 py-12 bg-gold-pattern">
         <!-- Header -->
-        <header class="flex justify-between items-center">
-            <div class="text-2xl font-bold font-beautiful-minds text-gold">J.MONTGOMERY</div>
             <nav class="hidden md:flex space-x-8">
                 <a href="#about" class="text-white hover:text-gold transition">About</a>
                 <a href="#achievements" class="text-white hover:text-gold transition">Achievements</a>
                 <a href="#contact" class="text-white hover:text-gold transition">Contact</a>
             </nav>
-            <button class="md:hidden text-white">
-                <i class="fas fa-bars text-2xl"></i>
             </button>
         </header>
         <!-- Main Content -->
         <main class="flex-grow flex flex-col md:flex-row items-center justify-center gap-12">
             <!-- Left Column - Portrait -->
             <div class="w-full md:w-1/3 flex justify-center">
                 <div class="relative w-72 h-96">
-                    <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                          alt="Attorney James Montgomery"
                          class="w-full h-full object-cover grayscale-[30%] contrast-110">
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
                     <div class="absolute inset-0 flex items-end p-6">
-                        <h2 class="font-beautiful-minds text-3xl font-bold" id="nameTitle">JAMES MONTGOMERY</h2>
                     </div>
                     <div class="absolute -bottom-5 -right-5 w-20 h-20 bg-gold flex items-center justify-center rotate-6">
-                        <span class="text-black font-bold text-xs text-center" id="experienceText">15+ YEARS<br>EXPERIENCE</span>
                     </div>
                 </div>
             </div>
             <!-- Right Column - Info -->
             <div class="w-full md:w-2/3 space-y-8">
-                <h1 class="font-beautiful-minds text-4xl md:text-5xl font-bold tracking-tight">
                     <span id="mainTitle">DISTINGUISHED</span> <span class="text-gold" id="legalText">LEGAL</span> <span id="counselText">COUNSEL</span>
                 </h1>
-                <p class="text-lg text-gray-300 max-w-2xl" id="descriptionText">
                     Specializing in corporate law, intellectual property, and high-stakes litigation with a proven track record of securing favorable outcomes for clients ranging from Fortune 500 companies to individual entrepreneurs.
                 </p>
                 <!-- Achievements -->
                 <div id="achievements" class="space-y-4">
-                    <h3 class="text-xl font-semibold text-gold font-beautiful-minds" id="achievementsTitle">NOTABLE ACHIEVEMENTS</h3>
                     <ul class="space-y-3">
                         <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement1">
                             Successfully argued before the Supreme Court in landmark IP case (2021)
@@ -99,7 +123,7 @@
                 <!-- CTA Buttons -->
                 <div class="flex flex-wrap gap-4 pt-4">
-                    <a href="#" class="bg-gold text-black font-bold px-8 py-3 rounded-sm flex items-center gap-2 hover:-translate-y-1 hover:shadow-lg hover:shadow-gold/30 transition-all duration-300">
                         <i class="fas fa-file-alt"></i> <span id="resumeBtnText">DOWNLOAD RESUME</span>
                     </a>
                     <a href="#contact" class="border-2 border-gold text-white font-bold px-8 py-3 rounded-sm hover:bg-gold/10 transition">
@@ -112,7 +136,7 @@
         <!-- Footer -->
         <footer id="contact" class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-800">
             <div class="mb-4 md:mb-0">
-                <h3 class="text-lg font-semibold text-gold font-beautiful-minds" id="footerName">JAMES MONTGOMERY, ESQ.</h3>
                 <p class="text-gray-400" id="footerTitle">PRINCIPAL ATTORNEY | MONTGOMERY & ASSOCIATES</p>
             </div>
             <div class="flex flex-col md:flex-row gap-4 md:gap-6">
@@ -127,6 +151,23 @@
     </div>
     <script>
         const translations = {
             en: {
                 nameTitle: "JAMES MONTGOMERY",
@@ -184,9 +225,31 @@
         languageBtn.addEventListener('click', function() {
             currentLanguage = currentLanguage === 'en' ? 'it' : 'en';
             updateContent(currentLanguage);
-            this.innerHTML = currentLanguage === 'en'
-                ? '<i class="fas fa-language"></i><span>IT</span>'
-                : '<i class="fas fa-language"></i><span>EN</span>';
         });
         // Initialize with English content

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
+                        'serif': ['EB Garamond', 'serif'],
+                        'sans': ['Montserrat', 'sans-serif'],
                     },
                     colors: {
                         'gold': '#D4AF37',
+                        'dark': '#111827',
                     },
                     backgroundImage: {
                         'gold-pattern': "url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-29c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM60 91c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM35 41c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E\")"
             }
         }
     </script>
+    <style>
+        .mobile-menu {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .mobile-menu.open {
+            max-height: 500px;
+        }
+    </style>
 </head>
+<body class="bg-dark text-white font-serif min-h-screen overflow-x-hidden">
     <!-- Language Button -->
+    <button id="languageBtn" class="fixed top-5 right-5 z-50 bg-dark/70 border border-gold text-white px-4 py-2 rounded-full flex items-center gap-2 hover:bg-gold hover:text-dark transition-all duration-300">
         <i class="fas fa-language"></i>
         <span>IT</span>
     </button>
     <div class="container mx-auto min-h-screen flex flex-col justify-between px-6 py-12 bg-gold-pattern">
         <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="text-2xl font-bold font-sans text-gold">J.MONTGOMERY</div>
+            <!-- Desktop Navigation -->
             <nav class="hidden md:flex space-x-8">
                 <a href="#about" class="text-white hover:text-gold transition">About</a>
                 <a href="#achievements" class="text-white hover:text-gold transition">Achievements</a>
                 <a href="#contact" class="text-white hover:text-gold transition">Contact</a>
             </nav>
+            <!-- Mobile Menu Button -->
+            <button id="mobileMenuButton" class="md:hidden text-white text-2xl">
+                <i class="fas fa-bars"></i>
             </button>
         </header>
+        <!-- Mobile Menu -->
+        <div id="mobileMenu" class="mobile-menu md:hidden bg-dark/90 rounded-lg mt-2 mb-6">
+            <div class="flex flex-col space-y-4 p-4">
+                <a href="#about" class="text-white hover:text-gold transition">About</a>
+                <a href="#achievements" class="text-white hover:text-gold transition">Achievements</a>
+                <a href="#contact" class="text-white hover:text-gold transition">Contact</a>
+            </div>
+        </div>
         <!-- Main Content -->
         <main class="flex-grow flex flex-col md:flex-row items-center justify-center gap-12">
             <!-- Left Column - Portrait -->
             <div class="w-full md:w-1/3 flex justify-center">
                 <div class="relative w-72 h-96">
+                    <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
                          alt="Attorney James Montgomery"
                          class="w-full h-full object-cover grayscale-[30%] contrast-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-dark/30 to-transparent"></div>
                     <div class="absolute inset-0 flex items-end p-6">
+                        <h2 class="font-sans text-3xl font-bold" id="nameTitle">JAMES MONTGOMERY</h2>
                     </div>
                     <div class="absolute -bottom-5 -right-5 w-20 h-20 bg-gold flex items-center justify-center rotate-6">
+                        <span class="text-dark font-bold text-xs text-center" id="experienceText">15+ YEARS<br>EXPERIENCE</span>
                     </div>
                 </div>
             </div>
             <!-- Right Column - Info -->
             <div class="w-full md:w-2/3 space-y-8">
+                <h1 class="font-sans text-4xl md:text-5xl font-bold tracking-tight leading-tight">
                     <span id="mainTitle">DISTINGUISHED</span> <span class="text-gold" id="legalText">LEGAL</span> <span id="counselText">COUNSEL</span>
                 </h1>
+                <p class="text-lg text-gray-300 max-w-2xl leading-relaxed" id="descriptionText">
                     Specializing in corporate law, intellectual property, and high-stakes litigation with a proven track record of securing favorable outcomes for clients ranging from Fortune 500 companies to individual entrepreneurs.
                 </p>
                 <!-- Achievements -->
                 <div id="achievements" class="space-y-4">
+                    <h3 class="text-xl font-semibold text-gold font-sans" id="achievementsTitle">NOTABLE ACHIEVEMENTS</h3>
                     <ul class="space-y-3">
                         <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement1">
                             Successfully argued before the Supreme Court in landmark IP case (2021)
                 <!-- CTA Buttons -->
                 <div class="flex flex-wrap gap-4 pt-4">
+                    <a href="#" class="bg-gold text-dark font-bold px-8 py-3 rounded-sm flex items-center gap-2 hover:-translate-y-1 hover:shadow-lg hover:shadow-gold/30 transition-all duration-300">
                         <i class="fas fa-file-alt"></i> <span id="resumeBtnText">DOWNLOAD RESUME</span>
                     </a>
                     <a href="#contact" class="border-2 border-gold text-white font-bold px-8 py-3 rounded-sm hover:bg-gold/10 transition">
         <!-- Footer -->
         <footer id="contact" class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-800">
             <div class="mb-4 md:mb-0">
+                <h3 class="text-lg font-semibold text-gold font-sans" id="footerName">JAMES MONTGOMERY, ESQ.</h3>
                 <p class="text-gray-400" id="footerTitle">PRINCIPAL ATTORNEY | MONTGOMERY & ASSOCIATES</p>
             </div>
             <div class="flex flex-col md:flex-row gap-4 md:gap-6">
     </div>
     <script>
+        // Mobile menu functionality
+        const mobileMenuButton = document.getElementById('mobileMenuButton');
+        const mobileMenu = document.getElementById('mobileMenu');
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.toggle('open');
+            const icon = this.querySelector('i');
+            if (mobileMenu.classList.contains('open')) {
+                icon.classList.remove('fa-bars');
+                icon.classList.add('fa-times');
+            } else {
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-bars');
+            }
+        });
+        // Language switching functionality
         const translations = {
             en: {
                 nameTitle: "JAMES MONTGOMERY",
         languageBtn.addEventListener('click', function() {
             currentLanguage = currentLanguage === 'en' ? 'it' : 'en';
             updateContent(currentLanguage);
+            this.querySelector('span').textContent = currentLanguage === 'en' ? 'IT' : 'EN';
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                // Close mobile menu if open
+                if (mobileMenu.classList.contains('open')) {
+                    mobileMenu.classList.remove('open');
+                    mobileMenuButton.querySelector('i').classList.remove('fa-times');
+                    mobileMenuButton.querySelector('i').classList.add('fa-bars');
+                }
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+            });
         });
         // Initialize with English content

prompts.txt CHANGED Viewed

@@ -1,4 +1,5 @@
  I need you to create a single-screen (no scrolling) responsive website with black, gold, and white colors for a lawyer, with a brief description of their achievements and the option to download their resume.
 la imagen no se ve podrías corregir? además me gustaría que utilizaras la fuente antenna y mattock
 agregarías un botón de traduccion en italiano? y cambia de fuentes a "beautiful minds" y "Constantia"
-no funciona bien ya que se ve duplicado. Además me gustaría que los estilos esten realizados con tailwind integramente

  I need you to create a single-screen (no scrolling) responsive website with black, gold, and white colors for a lawyer, with a brief description of their achievements and the option to download their resume.
 la imagen no se ve podrías corregir? además me gustaría que utilizaras la fuente antenna y mattock
 agregarías un botón de traduccion en italiano? y cambia de fuentes a "beautiful minds" y "Constantia"
+no funciona bien ya que se ve duplicado. Además me gustaría que los estilos esten realizados con tailwind integramente
+no funionan los menús y me gustaría una fuente mucho mas legible