«Stitch de Google» es la herramienta de inteligencia artificial (IA) de Google lanzada en su conferencia Google I/O 2025.
Stitch aún en fase experimental utiliza inteligencia artificial para transformar descripciones en lenguaje natural (prompts de texto) o imágenes de referencia (bocetos, wireframe, captura de pantalla, etc) en interfaces de usuario (IU) para aplicaciones moviles o web. Utiliza modelos avanzados de IA, como Gemini 2.5 Pro para comprender tus intenciones y crear diseños coherentes y atractivos.
Una vez que estés satisfecho con el diseño, Stitch te proporciona opciones para:
¿Cómo acceder a Stitch?
Stitch está disponible de forma gratuita y puedes acceder a ella a través del sitio oficial: stitch.withgoogle.com. Necesitarás iniciar sesión con tu cuenta de Google.
¿Cómo se usa Stitch?
Una vez logueado en la aplicación, debes escribir un prompt indicando el tipo de diseño que quieres, mientras más especifico seas mucho mejor, es decir, no solo le indiques «quiero una web para una veterinaria», ese requerimiento es bastante amplio, se puntual, indica como quieres que sea maquetado la web, los colores que quieres usar (paleta de colores), la tecnologia a usar, Tailwind , Bootstrap, etc.
Puedes incluso subir una imagen de referencia como un boceto, wireframe o alguna captura de pantalla que sirva de inspiración o plantilla para el diseño.
Presiona el boton «Generate designs» y espera unos segundos.
El resultado es el siguiente:
Si necesitas de alguna corrección, puedes continuar con su edición hasta estar satisfecho. Luego Stitch te da las opción de exportar a Figma o de generar el codigo HTML/CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Restauranty</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body {
font-family: 'Poppins', sans-serif;
}
.color1 {
color: #c92c2c;
}
.bg-color1 {
background-color: #c92c2c;
}
.color2 {
color: #cf6123;
}
.bg-color2 {
background-color: #cf6123;
}
.color3 {
color: #f3c363;
}
.bg-color3 {
background-color: #f3c363;
}
.color4 {
color: #f1e9bb;
}
.bg-color4 {
background-color: #f1e9bb;
}
.text-color4 {
color: #f1e9bb;
}
.color5 {
color: #5c483a;
}
.bg-color5 {
background-color: #5c483a;
}
.text-color5 {
color: #5c483a;
}
.border-color5 {
border-color: #5c483a;
}
.active-nav {
background-color: #c92c2c;
color: #f1e9bb;
}
</style>
</head>
<body class="bg-color4">
<header class="bg-color5 text-color4">
<div class="container mx-auto px-4 py-3 flex flex-wrap justify-between items-center">
<div class="flex items-center">
<span class="material-icons text-3xl mr-2">restaurant_menu</span>
<h1 class="text-2xl font-semibold">Restauranty</h1>
</div>
<nav class="hidden md:flex space-x-1 items-center">
<a class="px-3 py-2 rounded-md text-sm font-medium active-nav" href="#">Home</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">About</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">Menu</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">Reservation</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">Gallery</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">Perks</a>
<a class="px-3 py-2 rounded-md text-sm font-medium hover:bg-color1 hover:text-color4" href="#">Account</a>
</nav>
<button class="bg-color1 text-color4 px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700">CONTACT NOW</button>
<button class="md:hidden text-color4">
<span class="material-icons">menu</span>
</button>
</div>
</header>
<main>
<section class="py-16 md:py-24 bg-color4">
<div class="container mx-auto px-4 text-center text-color5">
<h2 class="text-4xl md:text-6xl font-bold mb-4">Organic Foods Made <br class="hidden md:block" /> Easy & Healthy</h2>
<div class="flex justify-center items-center my-8 max-w-xl mx-auto">
<div class="relative flex-grow">
<span class="material-icons absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">search</span>
<input class="w-full pl-10 pr-4 py-3 rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color1" placeholder="Search your food here" type="text" />
</div>
<button class="bg-color5 text-color4 px-6 py-3 rounded-r-md hover:bg-opacity-90 flex items-center">
<span class="material-icons mr-2">search</span> Search
</button>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="flex flex-col items-center">
<span class="material-icons text-4xl text-color1 mb-2">schedule</span>
<p class="text-sm">24/7 Fresh Food</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-4xl text-color1 mb-2">eco</span>
<p class="text-sm">Nature First</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-4xl text-color1 mb-2">home_work</span>
<p class="text-sm">Home Services</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-4xl text-color1 mb-2">local_shipping</span>
<p class="text-sm">Free Delivery</p>
</div>
</div>
</div>
</section>
<section class="py-12 bg-white text-color5">
<div class="container mx-auto px-4">
<h3 class="text-lg font-semibold mb-4">Book a Table:</h3>
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
<div class="relative">
<input class="w-full p-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color1" placeholder="Your name" type="text" />
</div>
<div class="relative">
<span class="material-icons absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">calendar_today</span>
<input class="w-full p-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color1" placeholder="Select Date" type="text" />
</div>
<div class="relative">
<span class="material-icons absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">schedule</span>
<input class="w-full p-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color1" placeholder="Select Time" type="text" />
</div>
<div class="relative">
<span class="material-icons absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">people</span>
<input class="w-full p-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color1" placeholder="Select People" type="text" />
</div>
<button class="bg-color1 text-color4 p-3 rounded-md hover:bg-red-700 w-full md:w-auto">BOOK NOW</button>
</div>
</div>
</section>
<section class="py-16 bg-color4 text-color5">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-2">Choose & Enjoy</h2>
<p class="text-center text-gray-600 mb-10">Inspire by people and creations of world's best chefs</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Chicken Biryani" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRzJbqN9yHxk6CxAwV_dKY2NNOVL7ooDa0XwrATSLF8Wrj7YLXmzbPmexXt4BsQuRvpCJKZlj0Hl_YMketqamGcNMBUFa8WUFc4Q3A_-Q4E7WQV4-AjPNDpgdILMHxF6Lr1QyFfxqMPBoZwULE9pCFSjpasRqOB_yCTJOqYjSldHzeFc9v5I-qMoBJKckiWyvLNXovKWD4r_bwC15orQz8gsmKTW5T4lFZCLfQnl6xYyFuTVP0u6wfVXQSDujWVCb2jk8hLXAzXg" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$10.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Chicken Biryani</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">restaurant</span> Curries
<span class="material-icons text-base ml-3 mr-1">timer</span> 30 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Mutton Biryani" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDt_mJn22trTORYAo-h2K6JHRjj5VHJrw6Fe73IhcCbEeE9KI6rMZrb-voUshRQ-8ZRPuhG3VYcXocexjloSkBKmc7dmFnZ7TM9dVU7Pi57wwwQrtYjPkz-Dk5Nj5Pw07IbBTzK3GNE3ILLW7LU4Hs0lGYtZlm5VltEKrWyablQTSGYL9PcatN3U1gnVUaybRRGGn-MITv-GSU0I4c4dtPa54wMy2TMr-WH26f6IOjeczD8cQdXBZQ6IWhzYJfW373D0UAlZWEirw" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$12.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Mutton Biryani</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">restaurant</span> Curries
<span class="material-icons text-base ml-3 mr-1">timer</span> 45 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Mutton Karahi" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfh3SOJ-EloqENzymyHTkhbuSkqSxIDUZLHZn9Sx9OhN7agzkQo1PaPTJ14-5gb1QzFs2QK9IvpXHsjRHQAwJSA48VeNuJkT9dZ1gI5gjhFxSvIMa2x2RSZY8Qwd3Ej5KYrBPxbsGFlb2m3u4R2DBFo6WY0PHz_pO_KTy5KER0SJutn7WSTrGVPl4KXcKRcYEtdxrqNegWu_2dWViDGGsSdbF10-z5sJ5jOiti8kdpLqWHpJ3Hu6G0yL2GtF65qSf-lAdcDooIGw" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$15.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Mutton Karahi</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">restaurant</span> Curries
<span class="material-icons text-base ml-3 mr-1">timer</span> 60 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Chicken Korma" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIWrxVqkV1Ox0Th23JDyM2z5dMUiMXrjQHxiT8kV-uu8utJHPUSE10siI4Yx1K17eEMFe6KVTyfoiiekTWaSTbm38TGHW_E9eBICjutRDriWldwxeQIPtnYa9Rge4gTQG8thxAMWpjvTPwTN-xO8zeMazSbddq2wXOPeUls9EhBaTIqrY-wt7nXDvmcHm4D1T2qF_ykKY1yGmoAhfGCL2P1Eo6vw99xslV6NRDdGgwbl1CxGQC7mqi6eg_J3el-d7Z_Pp90i6PsA" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$11.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Chicken Korma</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">restaurant</span> Curries
<span class="material-icons text-base ml-3 mr-1">timer</span> 35 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Chicken Nihari" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqzvh8Q8BS1IhmJz7vOa3BUlvRs8yDdKj8x-2-Know8onZn0AYUwb6qxkwjsSnlEpdOl9QUc7fwLZqtBrcarB2Jv28-K15EJnDTqiQcPpFGpcBOOW6AWkdWghBB5drsfEPIMkDOewysFO4GYrh_JY_v-zIftHgIym4NU_SWfGEGvuMNitwl--ukkX66wYuu09fRilat3usTM8a8CWt2w8PwixX9rM7_-MHAl_QJR8LGJZ8r56wzkslEt19snBZ6LJ5teAq0B3qfQ" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$14.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Chicken Nihari</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">restaurant</span> Curries
<span class="material-icons text-base ml-3 mr-1">timer</span> 50 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Arabic Salad" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxSL4MRC7EVwC7xX3fAvkTVPKPNRFWcy168Yt5njSjQwBrKifJ7M1rfEp911K_f6LTrJNNbqgQmQQfLDRUI0bntSH8EK-CggSQASnTb3A2k6AqBCS8Iuc8V2qUsjsjDuIMdimMAk7MhLMQokHRJ4b5Il5TNw17J87Z2tXm7aE5MhKLweha3uDGc2yBhO3U49zOH_DwNkt4C8l8jy57VO0ptfwI23jy2o2Q7p6kCNXnAKBtf-_w03blPMwePOKigd-8tngpygGukA" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$8.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Arabic Salad</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">spa</span> Salad
<span class="material-icons text-base ml-3 mr-1">timer</span> 10 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Samosa" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAKSclB7CO7-mdpZYdUfLulIUc4XigqyzxG8R6UrVtFh4SQDAg-ANKiQo3SLTyw8nVKPJn3F0VKuYmhmzdh10MxGJA2xIh5G1HDHTi1zGbRRKQ3vcOnBPY_-1I5ApQU7uOJn_rywFoaoGIGv3wzP3xY1lqG6ppQXLU1VA51nqM8LcM12sE24q6AI77zaeyZGV0T3DoqWmo5nj9y7I6wDWy7dy4kGw8gK-YcJpymWsamTBxrsBwTCVnNpBnMwubAxUyfKqbXOU-fMA" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$5.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Samosa</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">fastfood</span> Refreshments
<span class="material-icons text-base ml-3 mr-1">timer</span> 30 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-4 relative">
<img alt="Rasmalai" class="w-full h-48 object-cover rounded-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmCzPn3IltV22K03ASxMR77vAduVJSt4dYyXCtK5tbqrz9Qi-W605VpBu7pespBLsbzlcffgjLeFxBGlGZxDWjbNdIudpDviguJWxgverjS8vOaodJhsmMRbS5JazLPActvZvx1di-25CYGxveGmqMC8zMGCbbBwNGxqC7cjaiiy3pHBulXMx_H-30dYpherYLkX6GewU5ivB4tlGr9bUgk8rzKlCfN-_HbPHrwTy6dPJB6IaywpfAz72cem2shp8ZqgthpLyWwg" />
<span class="absolute top-6 left-6 bg-color2 text-white text-xs px-2 py-1 rounded">$7.00</span>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">Rasmalai</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="material-icons text-base mr-1">cake</span> Refreshments
<span class="material-icons text-base ml-3 mr-1">timer</span> 45 min
</div>
<button class="w-full bg-color1 text-color4 py-2 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-color5 text-color4 px-8 py-3 rounded-md hover:bg-opacity-90">VIEW ALL</button>
</div>
</div>
</section>
<section class="py-16 bg-color5 text-color4">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<p class="text-sm text-color3 mb-1">Special Offer</p>
<h2 class="text-5xl font-bold mb-3">50% OFF</h2>
<p class="mb-4 text-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font-semibold text-xl mb-6">Use Coupon: <span class="text-color3">50OFF</span></p>
<button class="bg-color1 text-color4 px-8 py-3 rounded-md hover:bg-red-700">ORDER NOW</button>
</div>
<div class="md:w-1/2">
<img alt="Special offer food item" class="w-full h-auto rounded-lg shadow-lg object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgOaB0K2YoMZUUBeqWPkHHJxJlXb_4a2lPG791hLrMeK3DJmXd5OYNmQLKMPw26iJx_tgL0O5JZ62azz2tEzGUdIcdbYtkG1ugtaf_B-zpHueg-T_lJcbscSsPqK5NEbp1umZIjqT9ME37pLtCKNT1rhJu9iOBrTFLLUNHzRo7PEriZqAwX_mMuu_PwoNBrDV7LmaC14cP6PI9eTlYI9YjOx7nJAf5pYHcez81bts6_-Dsxwe9EzIauwU__1BRFmoNWl-23VbNbA" style="max-height: 350px;" />
</div>
</div>
</div>
</section>
<section class="py-16 bg-white text-color5">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Why Choose Us?</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
<div class="flex flex-col items-center">
<span class="material-icons text-5xl text-color2 mb-3">work_history</span>
<p class="font-semibold text-xl">10+ Years of Experience</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-5xl text-color2 mb-3">groups</span>
<p class="font-semibold text-xl">200+ Professional Chefs</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-5xl text-color2 mb-3">sentiment_satisfied_alt</span>
<p class="font-semibold text-xl">5000+ Happy Customers</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-5xl text-color2 mb-3">emoji_events</span>
<p class="font-semibold text-xl">20+ Awards Won</p>
</div>
</div>
</div>
</section>
<section class="py-16 bg-color4 text-color5">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Customers Reviews</h2>
<div class="relative">
<div class="flex overflow-x-auto space-x-8 pb-4 snap-x snap-mandatory no-scrollbar">
<div class="snap-center flex-shrink-0 w-full sm:w-1/2 lg:w-1/3">
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img alt="John Doe" class="w-16 h-16 rounded-full mr-4 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQDpwk1qRB43lyglwFDdnttDCPoOzcz0oqvsQoUH-Fjxj4Hd6sJ2Amibnqx0bX1hsOpDXjoodqmLIgKTn7zioSxob0J5FybJvbeqAlqd1lPbQ24RcPG5gcVSA8tPIqQkeyOtg4FzJkiW5kIIj_Chi0fMAzbcdKVzrkyFXS5Am0z6zbpiLbxebqlUQJ0mCwn-tFGIkP0fHRZ-Q3k7yYwy3BVDmizo1oW_0lS7DWiI2jQxyLNl7Il4OJkoL02TbWveBzH_IHutRlFg" />
<div>
<h4 class="font-semibold text-lg">John Doe</h4>
</div>
</div>
<p class="text-gray-600 text-sm">"I order food from there, they have good food and taste, my favourite is Biryani."</p>
</div>
</div>
<div class="snap-center flex-shrink-0 w-full sm:w-1/2 lg:w-1/3">
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img alt="John Smith" class="w-16 h-16 rounded-full mr-4 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAVjsIW3hK7p2Rnz4MLFEcV6OYtLQOEjN4l9ftG0Uqbvhk88_LsjBJLZb0Pcn2JD2UR6hQ77WtknkTiAksoINyyCQeY_mdVJZjGkevV313p3liayU_BVP7Ddv9hOH9Rn5RHDIR4iQU3Ao0uphaUFtuKzU7Z1Zx1-SyL1MvtcwlizDsz7dxV_2huMvwCn3VCxc_2Mfw_QHHOxa55Cj1aXm-P93HfRt6QohowI8PW5nGFo5wc7jb5paGa5BJlNkDfCvo2ym5fn2gADQ" />
<div>
<h4 class="font-semibold text-lg">John Smith</h4>
</div>
</div>
<p class="text-gray-600 text-sm">"I order food from there, they have good food and taste, my favourite is Biryani."</p>
</div>
</div>
<div class="snap-center flex-shrink-0 w-full sm:w-1/2 lg:w-1/3">
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img alt="Pamela John" class="w-16 h-16 rounded-full mr-4 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADy-_UJUxX0Fc65t4MZEUhMTIGRYzy4-qAo4TFG-HbrKbGz_rS80T2GubUnLndwEQHsI5yas7ZL0A0Lcg2_rAq_c_kc95puwyX_RulFpSJsf9HO8BwoztNBKxac7BeTwdu4k3hVOhmaKksGQxtECjGI4N5VYnOdRRbyge9udc71W0Sm4FbhTrO_qKXKNPHb-vg_qzPiJBunsmkoAb-1nwIhVqdzOptEbj3U7eJfuQkxF7RO7Qs00wFwGLS4NoeSnZppI4xvHTN8A" />
<div>
<h4 class="font-semibold text-lg">Pamela John</h4>
</div>
</div>
<p class="text-gray-600 text-sm">"I order food from there, they have good food and taste, my favourite is Biryani."</p>
</div>
</div>
<div class="snap-center flex-shrink-0 w-full sm:w-1/2 lg:w-1/3">
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img alt="Jane Doe" class="w-16 h-16 rounded-full mr-4 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCYlHY7JV_XBLL-8wBfjA1suQ1XmyOVHsGRKRH0a7Ld1PW5n6KBHp62YKzrjG_ZNZKnSEulcCNnHzfL3U71esRVOLjs37qz7ezfEtryZQFnTLtBK_OLmcfsCqxXE4l-zvz7H9yFnqHIi8gQVdYKpichDhQ1Vp2W0exsKxE9qEWES0oCAEJSRp1ugDDA0TcMKAGNmyR6X6dmkZLN9alQstNnI0hVaWuozSBFcTyMb3g6I62t7zHGCcOem2HsDnIMF3a9XbQGbMWSVw" />
<div>
<h4 class="font-semibold text-lg">Jane Doe</h4>
</div>
</div>
<p class="text-gray-600 text-sm">"Amazing food and great service! Highly recommend."</p>
</div>
</div>
</div>
<button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md -ml-4 hover:bg-gray-100 z-10">
<span class="material-icons text-color5">chevron_left</span>
</button>
<button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md -mr-4 hover:bg-gray-100 z-10">
<span class="material-icons text-color5">chevron_right</span>
</button>
</div>
</div>
</section>
</main>
<footer class="bg-color5 text-color4 pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
<div>
<h5 class="font-semibold text-lg mb-3">Popular Page</h5>
<ul class="space-y-2 text-sm">
<li><a class="hover:text-color3" href="#">Home</a></li>
<li><a class="hover:text-color3" href="#">About Us</a></li>
<li><a class="hover:text-color3" href="#">Our Menu</a></li>
<li><a class="hover:text-color3" href="#">Our Blog</a></li>
<li><a class="hover:text-color3" href="#">Contact Us</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold text-lg mb-3">Popular Category</h5>
<ul class="space-y-2 text-sm">
<li><a class="hover:text-color3" href="#">Chicken</a></li>
<li><a class="hover:text-color3" href="#">Mutton</a></li>
<li><a class="hover:text-color3" href="#">Salad</a></li>
<li><a class="hover:text-color3" href="#">Vegetarian</a></li>
<li><a class="hover:text-color3" href="#">Refreshment</a></li>
<li><a class="hover:text-color3" href="#">Sweets</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold text-lg mb-3">Reach us!</h5>
<ul class="space-y-2 text-sm">
<li class="flex items-center"><span class="material-icons text-color3 mr-2">phone</span> +971 (0) 55 1234567</li>
<li class="flex items-center"><span class="material-icons text-color3 mr-2">email</span> info@restauranty.ae</li>
<li class="flex items-center"><span class="material-icons text-color3 mr-2">location_on</span> +971 (0) 4 1234568 <br /> Dubai, United Arab Emirates</li>
<li class="flex items-center"><span class="material-icons text-color3 mr-2">public</span> www.restauranty.ae</li>
</ul>
</div>
<div>
<h5 class="font-semibold text-lg mb-3">Connect with us!</h5>
<div class="flex space-x-3">
<a class="text-color4 hover:text-color3" href="#"><img alt="Facebook icon" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeoeDcVkjSRqi8-ObWTW5B5LUflqKzAcMxCNs-NsW95KwuATrxBpB8-ngNEswWIbq3fv5ROtTQ4SiFtYZvDausMfLQSI6ub7UZbZ6FwoidPOho6kbj3NPa01jajBF55rH6k9GDKBXYeVX1VCws6T_5DPaqp4yXSD96HPT6FPrfNTBE_GY8GJlI4C9Yen-YTbRyJBowiDA7atJFZ0KQJEcfxn2mXKiy266kHUzlwHjLj3F2neQua5bU4J0qYxzhri8_YKEUJ6YDGg" /></a>
<a class="text-color4 hover:text-color3" href="#"><img alt="Twitter icon" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxraqlYyprW4_lREAp9Mgp28YdrZxo20uuzDpPia5m53K5Pu52EResc7FSBJQThWnfbkicjET-RDxJtc4qYewx4QNM3JMTdjl05uYTFf9agW23FSLfZhyL62nQOx2OV7idX1MNwpzR2z1kEm6nAk2TNdYJ4pYrNA5ER3nkoozlc4aR298Rtej8m5vG8s8N3EhB-tgYT4AkbZx3XSeSxtqPsde9PUhIWYZfn8e-GUn-bp8pkgKhs83RryeRPDKZQh_OrUC3z3hhPQ" /></a>
<a class="text-color4 hover:text-color3" href="#"><img alt="Instagram icon" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrLI4mhoWGN-lwzVr5pdsWGYtHDN9znPHu6ElZIoWC0RE_XtXmRxsJk4mxpM_QztvqmQul-2cFCjtqrSN46xixpFdLOXpvcrK07Q-LOZrn5tPrhm9gdtnt44hUfgk5KT9GTy5m49cAReZJH3X-JYB1LL_Kmpkj9FqTxVjx6cC33I91BCVc1zF_wwC4fzAvPIuetfCpMlFwDVjKUCOFv5Hn1HoTGejpBnPuiKsIwhqruUz9eOfmAM79cYnhSvAjLGQDxz-7JMuf9g" /></a>
<a class="text-color4 hover:text-color3" href="#"><img alt="LinkedIn icon" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAySh89STHZbMmgE0Bm2d3IttXEihFZckAVqL5UX_Rn_M7RUo9rNBP8mvX-02qeBq-0xuVuNf0uuKBlAIEHsRDzUs2KE5SdQvJNvwB28R0ZOVH3-MXV8V8V-tWlgRhC3lp9LjwSyh1FLP9u0DYZMxv1DP9pUkKki5fjfIoMePdEKfZgruXMeOBwoqKhLzSRFoas7_mUllZccWbPw8burqTlPX4GJQaBRgcbv2vpbMGWqMvq515eae8BXOGj62VMWSIVq2FYcIchlg" /></a>
</div>
</div>
</div>
<hr class="border-gray-700 my-8" />
<div class="text-center text-sm">
<p>© 2019 Restauranty. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
En conclusión, el resultado para unos segundos de espera es bastante impresionante. Ademas, lejos del estigma de reemplazar al diseñador web, Stitch y herramientas de IA similares, actúan como un acelerador de ideas, automatizando tareas repetitivas y permitiendo que los creadores se enfoquen en lo más importante: diseñar experiencias que resuelvan problemas reales.
En este tutorial crearemos una aplicación que bloqueara toda la pantalla de la PC y no nos dejara realizar ninguna tarea[...]
En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces[...]
Lenguaje: C# Nivel: Básico 1) Se desea desarrollar un programa que permita introducir una oración por teclado y contar l[...]
TextToSpeech o TTS, es el sintetizador de voz para android, en los celulares inteligentes viene un motor TTS por defecto[...]
Rompecabezas 3×3 realizado en Visual Basic .NET, lo que se hizo fue una migración de un proyecto hecho en java (pue[...]
«Be Internet Awesome» (Se genial en Internet) es un recurso de Google para la enseñanza de conceptos fundamentales sobr[...]
