DeepSeek ArtifactsDeepSeek Artifacts

Crea tu página web

4.0
es
Desarrollo Web
diseño web
página personalizada
español

Prompt

Crea una pagína web con este estilo exacto: https://mimivelmashop.com/
DEBE de tener el nombre "_EIGHT_BOOKS" y aplicarle un logo de tu elección con ese nombre, pero aplicar el estilo de la página que te he pasado.
DEBE de ser todo en español.
DEBE de tener las secciones "fundas", "marcapaginas", "coleteros", "bolsitas multiuso", y "pajaritas de boda"

Resultado Generado

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="bg-gray-800 text-white p-4">
        <div className="container mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <img src="https://placehold.co/50x50" alt="EIGHT_BOOKS Logo" className="mr-2" />
            <h1 className="text-xl font-bold">_EIGHT_BOOKS</h1>
          </div>
          <nav>
            <ul className="flex space-x-4">
              <li><a href="#fundas" className="hover:text-gray-400">Fundas</a></li>
              <li><a href="#marcapaginas" className="hover:text-gray-400">Marcapáginas</a></li>
              <li><a href="#coleteros" className="hover:text-gray-400">Coleteros</a></li>
              <li><a href="#bolsitas" className="hover:text-gray-400">Bolsitas Multiuso</a></li>
              <li><a href="#pajaritas" className="hover:text-gray-400">Pajaritas de Boda</a></li>
            </ul>
          </nav>
        </div>
      </header>

      <main className="container mx-auto p-4">
        <section id="fundas" className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Fundas</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Funda 1" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Funda 1</h3>
              <p className="text-gray-700">Descripción de la funda 1.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Funda 2" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Funda 2</h3>
              <p className="text-gray-700">Descripción de la funda 2.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Funda 3" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Funda 3</h3>
              <p className="text-gray-700">Descripción de la funda 3.</p>
            </div>
          </div>
        </section>

        <section id="marcapaginas" className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Marcapáginas</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Marcapáginas 1" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Marcapáginas 1</h3>
              <p className="text-gray-700">Descripción del marcapáginas 1.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Marcapáginas 2" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Marcapáginas 2</h3>
              <p className="text-gray-700">Descripción del marcapáginas 2.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Marcapáginas 3" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Marcapáginas 3</h3>
              <p className="text-gray-700">Descripción del marcapáginas 3.</p>
            </div>
          </div>
        </section>

        <section id="coleteros" className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Coleteros</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Coletero 1" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Coletero 1</h3>
              <p className="text-gray-700">Descripción del coletero 1.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Coletero 2" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Coletero 2</h3>
              <p className="text-gray-700">Descripción del coletero 2.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Coletero 3" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Coletero 3</h3>
              <p className="text-gray-700">Descripción del coletero 3.</p>
            </div>
          </div>
        </section>

        <section id="bolsitas" className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Bolsitas Multiuso</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Bolsita 1" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Bolsita 1</h3>
              <p className="text-gray-700">Descripción de la bolsita 1.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Bolsita 2" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Bolsita 2</h3>
              <p className="text-gray-700">Descripción de la bolsita 2.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Bolsita 3" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Bolsita 3</h3>
              <p className="text-gray-700">Descripción de la bolsita 3.</p>
            </div>
          </div>
        </section>

        <section id="pajaritas" className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Pajaritas de Boda</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Pajarita 1" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Pajarita 1</h3>
              <p className="text-gray-700">Descripción de la pajarita 1.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Pajarita 2" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Pajarita 2</h3>
              <p className="text-gray-700">Descripción de la pajarita 2.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Pajarita 3" className="w-full h-auto mb-4" />
              <h3 className="text-xl font-semibold">Pajarita 3</h3>
              <p className="text-gray-700">Descripción de la pajarita 3.</p>
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-gray-800 text-white p-4 mt-8">
        <div className="container mx-auto text-center">
          <p>&copy; 2025 _EIGHT_BOOKS. Todos los derechos reservados.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;
Open on CodeSandboxOpen Sandbox

Más Recomendaciones

Ver Todo

LSB提取网页生成

4.0
技术工具
es
LSB提取
网页生成
数据隐藏
generame una web para extraer LSBs ...

Crea tu tienda _EIGHT_BOOKS

4.0
Diseño Web
es
diseño web
tienda online
Super Mario Bros
Crea una página web para vender fundas, marcapáginas, coleteros, bolsitas multiuso y pajaritas de Super Mario Bros, DEBE tener una visual en tonos pastel y con nombre de la página "_EIGHT_BOOKS", DEBE...

Vende productos de Super Mario Bros

4.0
Diseño web
es
Super Mario Bros
página web
productos personalizados
Crea una página web para vender fundas, marcapáginas, coleteros, bolsitas multiuso y pajaritas de Super Mario Bros, DEBE tener una visual en tonos pastel y con nombre de la página "_EIGHT_BOOKS"...

Globatienda: Plataforma Digital para Negocios

4.0
Negocios Digitales
es
emprendimiento
ecommerce
React
SEO
MercadoPago
Favor colocale un bonito diseño a esta presentación de negocio usando React, no use tailwind, conservar todo el texto Globatienda: Tu Plataforma para Impulsar Negocios Digitales Globatienda no es sol...

Globatienda: Impulsa tu negocio digital

4.0
Negocios
es
negocios digitales
plataforma online
emprendimiento
Favor colocale un bonito diseño a esta presentación de negocio usando React, no use tailwind Globatienda: Tu Plataforma para Impulsar Negocios Digitales Globatienda no es solo una tienda virtual; es ...