Spaces:

wolfkaku
/

stagecrafters-pro

Running

App Files Files Community

wolfkaku commited on Oct 31

Commit

7df122f

verified ·

1 Parent(s): ccc3e94

devi togliere questa parte o sistemarla meglio

Browse files

Files changed (2) hide show

index.html +33 -43
style.css +14 -0

index.html CHANGED Viewed

@@ -60,56 +60,46 @@
             </div>
         </div>
     </section>
-    <!-- Portfolio Section -->
-    <section id="portfolio" class="py-20 bg-gray-100">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-16">I nostri progetti</h2>
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div class="relative group overflow-hidden rounded-xl shadow-lg">
-                    <img src="http://static.photos/concert/1200x630/1" alt="Concerto Rock" class="w-full h-64 object-cover">
-                    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
-                        <div class="text-white p-6 text-center">
-                            <h3 class="text-xl font-bold mb-2">Concerto Rock</h3>
-                            <p class="mb-4">Palco principale per tour musicale</p>
-                            <button class="border border-white px-4 py-2 rounded hover:bg-white hover:text-black transition duration-300">
-                                Dettagli
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <div class="relative group overflow-hidden rounded-xl shadow-lg">
-                    <img src="http://static.photos/theater/1200x630/2" alt="Teatro" class="w-full h-64 object-cover">
-                    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
-                        <div class="text-white p-6 text-center">
-                            <h3 class="text-xl font-bold mb-2">Spettacolo Teatrale</h3>
-                            <p class="mb-4">Scenografia per commedia classica</p>
-                            <button class="border border-white px-4 py-2 rounded hover:bg-white hover:text-black transition duration-300">
-                                Dettagli
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <div class="relative group overflow-hidden rounded-xl shadow-lg">
-                    <img src="http://static.photos/event/1200x630/3" alt="Evento Aziendale" class="w-full h-64 object-cover">
-                    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
-                        <div class="text-white p-6 text-center">
-                            <h3 class="text-xl font-bold mb-2">Convention Aziendale</h3>
-                            <p class="mb-4">Allestimento per lancio prodotto</p>
-                            <button class="border border-white px-4 py-2 rounded hover:bg-white hover:text-black transition duration-300">
-                                Dettagli
-                            </button>
-                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="text-center mt-12">
-                <a href="portfolio.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
-                    Vedi tutti i progetti <i data-feather="arrow-right" class="ml-2"></i>
-                </a>
-            </div>
         </div>
-    </section>
 <!-- CTA Section -->
     <section class="py-16 bg-gray-900 text-white">
         <div class="container mx-auto px-4 text-center">

             </div>
         </div>
     </section>
+<!-- Portfolio Section -->
+<section id="portfolio" class="py-20 bg-gray-100">
+    <div class="container mx-auto px-4">
+        <h2 class="text-3xl font-bold text-center mb-16">I nostri progetti</h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <a href="portfolio.html#concerti" class="relative group overflow-hidden rounded-xl shadow-lg block">
+                <img src="https://huggingface.co/spaces/wolfkaku/stagecrafters-pro/resolve/main/images/Immagine%202025-10-31%20113201.png" alt="Concerto Rock" class="w-full h-64 object-cover transform transition duration-500 group-hover:scale-105">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
+                    <div class="text-white">
+                        <h3 class="text-xl font-bold">Concerto Rock</h3>
+                        <p>Palco principale per tour musicale</p>
                     </div>
                 </div>
+            </a>
+            <a href="portfolio.html#teatro" class="relative group overflow-hidden rounded-xl shadow-lg block">
+                <img src="http://static.photos/theater/1200x630/2" alt="Teatro" class="w-full h-64 object-cover transform transition duration-500 group-hover:scale-105">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
+                    <div class="text-white">
+                        <h3 class="text-xl font-bold">Spettacolo Teatrale</h3>
+                        <p>Scenografia per commedia classica</p>
                     </div>
                 </div>
+            </a>
+            <a href="portfolio.html#eventi" class="relative group overflow-hidden rounded-xl shadow-lg block">
+                <img src="http://static.photos/event/1200x630/3" alt="Evento Aziendale" class="w-full h-64 object-cover transform transition duration-500 group-hover:scale-105">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
+                    <div class="text-white">
+                        <h3 class="text-xl font-bold">Convention Aziendale</h3>
+                        <p>Allestimento per lancio prodotto</p>
                     </div>
                 </div>
+            </a>
         </div>
+        <div class="text-center mt-12">
+            <a href="portfolio.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
+                Vedi tutti i progetti <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+</section>
 <!-- CTA Section -->
     <section class="py-16 bg-gray-900 text-white">
         <div class="container mx-auto px-4 text-center">

style.css CHANGED Viewed

@@ -60,6 +60,19 @@ body {
 .hero-button:hover {
     background-color: #e6900b;
 }
 /* Responsive adjustments */
 @media (max-width: 768px) {
@@ -81,3 +94,4 @@ body {
         font-size: 1rem;
     }
 }

 .hero-button:hover {
     background-color: #e6900b;
 }
+/* Portfolio Section Enhancements */
+#portfolio img {
+    transition: transform 0.5s ease;
+}
+#portfolio a {
+    transition: all 0.3s ease;
+}
+#portfolio a:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+}
 /* Responsive adjustments */
 @media (max-width: 768px) {
         font-size: 1rem;
     }
 }