Spaces:

tinolin
/

coco4

Running

App Files Files Community

tinolin commited on May 11, 2025

Commit

8ec89dd

verified ·

1 Parent(s): 2c353d9

Add 2 files

Browse files

Files changed (2) hide show

index.html +110 -3
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -71,9 +71,61 @@
             font-size: 40px;
             color: #D4AF37;
         }
     </style>
 </head>
-<body class="bg-black text-white min-h-screen flex flex-col overflow-hidden">
     <!-- Language Selector -->
     <div class="absolute top-4 right-4 z-50">
         <div class="relative">
@@ -160,8 +212,63 @@
                 </div>
             </div>
-            <!-- Contact Button -->
             <div class="menu-item animate-fade-in" style="animation-delay: 0.8s;">
                 <button class="menu-btn w-full bg-black border border-gold-500 text-white py-3 px-6 rounded-lg flex justify-between items-center hover:bg-gray-900 transition-colors">
                     <span data-es="Contacto" data-en="Contact" data-it="Contatto">Contacto</span>
                     <i class="fas fa-chevron-down transition-transform"></i>
@@ -193,7 +300,7 @@
         </div>
         <!-- Download CV Button -->
-        <button id="downloadBtn" class="animate-fade-in animate-pulse-slow bg-gold-600 hover:bg-gold-700 text-black font-bold py-3 px-8 rounded-full flex items-center mt-4 transition-colors" style="animation-delay: 1s;">
             <i class="fas fa-download mr-2"></i>
             <span data-es="Descargar CV" data-en="Download CV" data-it="Scarica CV">Descargar CV</span>
         </button>

             font-size: 40px;
             color: #D4AF37;
         }
+        /* Background image with overlay */
+        body::before {
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+            opacity: 0.15;
+            z-index: -1;
+        }
+        /* Family section styles */
+        .family-section {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            border: 1px solid rgba(212, 175, 55, 0.3);
+        }
+        .family-member {
+            transition: transform 0.3s ease;
+        }
+        .family-member:hover {
+            transform: translateY(-5px);
+        }
+        .family-img {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            border: 2px solid rgba(212, 175, 55, 0.5);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #111;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #D4AF37;
+            border-radius: 4px;
+        }
     </style>
 </head>
+<body class="bg-black text-white min-h-screen flex flex-col overflow-x-hidden">
     <!-- Language Selector -->
     <div class="absolute top-4 right-4 z-50">
         <div class="relative">
                 </div>
             </div>
+            <!-- Family Section -->
             <div class="menu-item animate-fade-in" style="animation-delay: 0.8s;">
+                <button class="menu-btn w-full bg-black border border-gold-500 text-white py-3 px-6 rounded-lg flex justify-between items-center hover:bg-gray-900 transition-colors">
+                    <span data-es="Mi Familia" data-en="My Family" data-it="La Mia Famiglia">Mi Familia</span>
+                    <i class="fas fa-chevron-down transition-transform"></i>
+                </button>
+                <div class="menu-content bg-gray-900 rounded-b-lg overflow-hidden">
+                    <div class="p-6">
+                        <p class="text-gray-300 mb-4" data-es="Lo más importante en mi vida es mi familia. Ellos son mi mayor motivación y apoyo en todo lo que hago." data-en="The most important thing in my life is my family. They are my greatest motivation and support in everything I do." data-it="La cosa più importante nella mia vita è la mia famiglia. Sono la mia più grande motivazione e supporto in tutto ciò che faccio.">
+                            Lo más importante en mi vida es mi familia. Ellos son mi mayor motivación y apoyo en todo lo que hago.
+                        </p>
+                        <div class="family-section rounded-lg p-4 mt-4">
+                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                <!-- Family Member 1 -->
+                                <div class="family-member text-center">
+                                    <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80"
+                                         alt="Esposa"
+                                         class="family-img rounded-full mx-auto mb-2">
+                                    <h4 class="text-gold-400 font-medium" data-es="María" data-en="Maria" data-it="Maria">María</h4>
+                                    <p class="text-gray-400 text-xs" data-es="Esposa" data-en="Wife" data-it="Moglie">Esposa</p>
+                                </div>
+                                <!-- Family Member 2 -->
+                                <div class="family-member text-center">
+                                    <img src="https://images.unsplash.com/photo-1531123897727-8f129e332c15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80"
+                                         alt="Hija"
+                                         class="family-img rounded-full mx-auto mb-2">
+                                    <h4 class="text-gold-400 font-medium" data-es="Lucía" data-en="Lucia" data-it="Lucia">Lucía</h4>
+                                    <p class="text-gray-400 text-xs" data-es="Hija" data-en="Daughter" data-it="Figlia">Hija</p>
+                                </div>
+                                <!-- Family Member 3 -->
+                                <div class="family-member text-center">
+                                    <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="Hijo"
+                                         class="family-img rounded-full mx-auto mb-2">
+                                    <h4 class="text-gold-400 font-medium" data-es="Carlos" data-en="Carlos" data-it="Carlos">Carlos</h4>
+                                    <p class="text-gray-400 text-xs" data-es="Hijo" data-en="Son" data-it="Figlio">Hijo</p>
+                                </div>
+                                <!-- Family Member 4 -->
+                                <div class="family-member text-center">
+                                    <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="Madre"
+                                         class="family-img rounded-full mx-auto mb-2">
+                                    <h4 class="text-gold-400 font-medium" data-es="Isabel" data-en="Isabel" data-it="Isabella">Isabel</h4>
+                                    <p class="text-gray-400 text-xs" data-es="Madre" data-en="Mother" data-it="Madre">Madre</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Contact Button -->
+            <div class="menu-item animate-fade-in" style="animation-delay: 1s;">
                 <button class="menu-btn w-full bg-black border border-gold-500 text-white py-3 px-6 rounded-lg flex justify-between items-center hover:bg-gray-900 transition-colors">
                     <span data-es="Contacto" data-en="Contact" data-it="Contatto">Contacto</span>
                     <i class="fas fa-chevron-down transition-transform"></i>
         </div>
         <!-- Download CV Button -->
+        <button id="downloadBtn" class="animate-fade-in animate-pulse-slow bg-gold-600 hover:bg-gold-700 text-black font-bold py-3 px-8 rounded-full flex items-center mt-4 transition-colors" style="animation-delay: 1.2s;">
             <i class="fas fa-download mr-2"></i>
             <span data-es="Descargar CV" data-en="Download CV" data-it="Scarica CV">Descargar CV</span>
         </button>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 preciso una sola página sin scroll para un abogado que tenga menus que muestren contacto y trayectoria y sobre mi. Co animaciones. Debe tener los colores negro dorado y blanco con la posibilidad d descargar un archivo pdf con el cv del mismo y tiene que tener un disño de toda la página y además seer resposive. sin mucho texto y con la posibilidad de traducir en 3 idiomas, español, inglés y italiano. EL diseño debe ser limpio y no tener scrooll.
-podrías agregar arriba del nombre una imagen de justicia a modo de logotipo y además un botón para descargar su curriculum

 preciso una sola página sin scroll para un abogado que tenga menus que muestren contacto y trayectoria y sobre mi. Co animaciones. Debe tener los colores negro dorado y blanco con la posibilidad d descargar un archivo pdf con el cv del mismo y tiene que tener un disño de toda la página y además seer resposive. sin mucho texto y con la posibilidad de traducir en 3 idiomas, español, inglés y italiano. EL diseño debe ser limpio y no tener scrooll.
+podrías agregar arriba del nombre una imagen de justicia a modo de logotipo y además un botón para descargar su curriculum
+esta perfecto! preciso que agreguemos en el diseño una imagen de fondo y alguna sección con imágenes de su serees queridos