המלצה | אתר חדש של גוגל לבניית אפליקציות או אתרים בחינם

pinir

אתר חדש של גוגל לבניית אפליקציות או אתרים
https://stitch.withgoogle.com/

cfopuser

@pinir אתר ממש מגניב לא מבין למה הם לא מקדמים את זה יותר.

זה די מיועד למק ולמעצבים אבל עדין.

pinir

@cfopuser מסכים איתך לגמרי אבל האתר חדש אז אני מאמין שילך וישתפר

cfopuser

@pinir לא כזה חדש קיים כבר כ8 חודשים אבל אכן.

cfopuser

וואו זה גם מביא את הקוד לעיצוב.

<!DOCTYPE html>

<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Elite Pizza Mastery | Naples, Italy</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#e21235",
                        "background-light": "#f8f6f6",
                        "background-dark": "#221013",
                    },
                    fontFamily: {
                        "display": ["Epilogue", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
<style>
        body {
            font-family: 'Epilogue', sans-serif;
        }
        .hero-gradient {
            background: linear-gradient(to bottom, rgba(34, 16, 19, 0.6) 0%, rgba(34, 16, 19, 0.4) 50%, rgba(34, 16, 19, 0.8) 100%);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(226, 18, 53, 0.3);
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark text-[#1b0d10] dark:text-[#fcf8f9] antialiased">
<!-- Wrapper -->
<div class="relative min-h-screen flex flex-col overflow-x-hidden">
<!-- Navigation -->
<header class="absolute top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-6 md:px-12 lg:px-24">
<div class="flex items-center gap-3">
<div class="text-primary size-8">
<svg fill="currentColor" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4C25.7818 14.2173 33.7827 22.2182 44 24C33.7827 25.7818 25.7818 33.7827 24 44C22.2182 33.7827 14.2173 25.7818 4 24C14.2173 22.2182 22.2182 14.2173 24 4Z"></path>
</svg>
</div>
<h2 class="text-white text-xl font-bold tracking-tight uppercase">Elite Pizza Mastery</h2>
</div>
<nav class="hidden md:flex items-center gap-10">
<a class="text-white/80 hover:text-white text-sm font-medium tracking-widest transition-colors uppercase" href="#">The Experience</a>
<a class="text-white/80 hover:text-white text-sm font-medium tracking-widest transition-colors uppercase" href="#">The Master</a>
<a class="text-white/80 hover:text-white text-sm font-medium tracking-widest transition-colors uppercase" href="#">Apply</a>
</nav>
<div class="flex items-center gap-4">
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg text-sm font-bold tracking-wide transition-all uppercase">
                    Reserve Seat
                </button>
</div>
</header>
<!-- Hero Section -->
<main class="relative flex-1 flex flex-col justify-center items-center text-center px-6 md:px-12 pt-20">
<!-- Full Width Background -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 hero-gradient z-10"></div>
<div class="w-full h-full bg-cover bg-center" data-alt="Close up of wood-fired pizza oven with glowing embers" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDhd9wDn-OlrqZPx2OnWqVkBpqELDVmFif_qRpddkhJ3En2Y7OlU-cDG_rYFxOFsGYtGoaOkM98ObfxbpTiwT7ON8JbkKi0xGkMlFB0dt7NrDLMjfMTVCSu8tiCaYnYoE185NrQERmaamzTlMS88dj1KdWlE-arfbzlWrthOQ55Zg7oELPIkWVS7VvGPclJi6Lrti5oTI4qiU8klVNIOUA6Y5saBgBEdRLxsN3h8JkKcuvAUf9kzv8RHeptykkk_6mVtEevxKwBR1s');">
</div>
</div>
<!-- Content -->
<div class="relative z-20 max-w-4xl mx-auto flex flex-col items-center gap-6 md:gap-8">
<div class="flex flex-col items-center gap-4">
<span class="text-primary text-sm md:text-base font-bold tracking-[0.3em] uppercase">
                        An Exclusive Once-a-Year Opportunity
                    </span>
<h1 class="text-white text-5xl md:text-7xl lg:text-8xl font-black leading-tight tracking-[-0.04em] text-glow">
                        The Annual <br/>
<span class="italic font-display font-light">Neapolitan</span> Mastery
                    </h1>
</div>
<p class="text-white/90 text-lg md:text-xl font-light leading-relaxed max-w-2xl">
                    Master the ancient art of the perfect crust under the Mediterranean sun. 
                    Join an elite circle for seven days of flour, fire, and tradition in the heart of Naples.
                </p>
<div class="flex flex-col md:flex-row items-center gap-6 mt-4">
<button class="min-w-[240px] bg-primary hover:bg-primary/90 text-white h-14 px-8 rounded-lg text-lg font-bold tracking-wide transition-all flex items-center justify-center gap-2 group">
<span>Reserve Your Seat</span>
<span class="material-symbols-outlined text-xl group-hover:translate-x-1 transition-transform">arrow_right_alt</span>
</button>
</div>
<!-- Detail Badges -->
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-white/70 mt-12 border-t border-white/10 pt-8 w-full max-w-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">calendar_today</span>
<span class="text-sm font-medium tracking-wider uppercase">Oct 12 – 19, 2024</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">location_on</span>
<span class="text-sm font-medium tracking-wider uppercase">Naples, Italy</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">group</span>
<span class="text-sm font-medium tracking-wider uppercase">12 Seats Remaining</span>
</div>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2 text-white/40">
<span class="text-[10px] tracking-[0.4em] uppercase">Discover More</span>
<span class="material-symbols-outlined animate-bounce">expand_more</span>
</div>
</main>
<!-- Feature Grid (Subtle Transition) -->
<section class="relative z-20 bg-background-light dark:bg-background-dark py-24 px-6 md:px-24">
<div class="max-w-[1200px] mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="flex flex-col gap-4">
<div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center text-primary">
<span class="material-symbols-outlined">local_fire_department</span>
</div>
<h3 class="text-xl font-bold dark:text-white">Heritage Techniques</h3>
<p class="text-[#9a4c59] dark:text-white/60 leading-relaxed">
                        Learn the centuries-old secrets passed down through generations of authentic Neapolitan pizzaiolos.
                    </p>
</div>
<div class="flex flex-col gap-4">
<div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center text-primary">
<span class="material-symbols-outlined">eco</span>
</div>
<h3 class="text-xl font-bold dark:text-white">The Secret Dough</h3>
<p class="text-[#9a4c59] dark:text-white/60 leading-relaxed">
                        Understand the delicate science of hydration, natural fermentation, and heritage flour selection.
                    </p>
</div>
<div class="flex flex-col gap-4">
<div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center text-primary">
<span class="material-symbols-outlined">sunny</span>
</div>
<h3 class="text-xl font-bold dark:text-white">Live Fire Mastery</h3>
<p class="text-[#9a4c59] dark:text-white/60 leading-relaxed">
                        Perfect your technique using traditional artisan-built wood-fired ovens under expert supervision.
                    </p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-background-light dark:bg-background-dark border-t border-[#e7cfd3] dark:border-white/5 py-12 px-6">
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
<div class="flex items-center gap-3 grayscale opacity-60">
<div class="size-6 text-primary">
<svg fill="currentColor" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4C25.7818 14.2173 33.7827 22.2182 44 24C33.7827 25.7818 25.7818 33.7827 24 44C22.2182 33.7827 14.2173 25.7818 4 24C14.2173 22.2182 22.2182 14.2173 24 4Z"></path>
</svg>
</div>
<h2 class="text-[#1b0d10] dark:text-white text-lg font-bold tracking-tight uppercase">Elite Pizza Mastery</h2>
</div>
<div class="flex gap-8">
<a class="text-[#9a4c59] dark:text-white/50 text-xs font-bold tracking-widest uppercase hover:text-primary transition-colors" href="#">Privacy</a>
<a class="text-[#9a4c59] dark:text-white/50 text-xs font-bold tracking-widest uppercase hover:text-primary transition-colors" href="#">Terms</a>
<a class="text-[#9a4c59] dark:text-white/50 text-xs font-bold tracking-widest uppercase hover:text-primary transition-colors" href="#">Contact</a>
</div>
<p class="text-[#9a4c59] dark:text-white/40 text-sm">© 2024 Elite Pizza Class Naples.</p>
</div>
</footer>
</div>
</body></html>

דור נאמן

@pinir @cfopuser

הוא בחינם?
על מה הוא יושב?
הוא כולל אחסון ודומיין?

cfopuser

@דור-נאמן זה רק לעיצוב ראשוני ולהשראה (מה שנקרא מוקאפ mockup),
זה יותר למעצבים פחות לבנייה.

הוא בחינם?

כן, עם הגבלה.

על מה הוא יושב?

גוגל ג'ימיני

הוא כולל אחסון ודומיין?

לא. (עיין לעיל)