Página de inicio - Modelo IA

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

1 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeuraTech - The Future of AI</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6200ff;
            --secondary-color: #ff00ff;
            --background-color: #1a1040;
            --text-color: #ffffff;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(to right, #1a1040, #2a1060);
            z-index: -2;
        }

.grid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(98, 0, 255, 0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(98, 0, 255, 0.2) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            opacity: 0.5;
            animation: gridMove 20s linear infinite;
            transform-origin: center;
        }

@keyframes gridMove {
            0% {
                transform: perspective(500px) rotateX(5deg) translateZ(0);
            }
            50% {
                transform: perspective(500px) rotateX(5deg) translateZ(50px);
            }
            100% {
                transform: perspective(500px) rotateX(5deg) translateZ(0);
            }
        }

nav {
            background-color: rgba(26, 16, 64, 0.8);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }

.logo svg {
            margin-right: 0.5rem;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 2rem;
        }

.nav-links a {
            color: var(--text-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: var(--secondary-color);
        }

.cta-button {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--text-color);
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
        }

.cta-button:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }

.hero {
            padding: 8rem 0 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(98, 0, 255, 0.2) 0%, transparent 70%);
            z-index: -1;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: titleGlow 2s ease-in-out infinite alternate;
        }

@keyframes titleGlow {
            from {
                text-shadow: 0 0 5px rgba(98, 0, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5);
            }
            to {
                text-shadow: 0 0 20px rgba(98, 0, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.8);
            }
        }

.hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 2rem;
            color: #cccccc;
        }

.features {
            padding: 4rem 0;
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.feature-card {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.feature-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            transform: rotate(45deg);
            z-index: -1;
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

.stats {
            padding: 4rem 0;
            background-color: rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

.stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(98, 0, 255, 0.1), rgba(255, 0, 255, 0.1));
            z-index: -1;
        }

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }

.stat-card {
            text-align: center;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 2rem;
            transition: transform 0.3s ease;
        }

.stat-card:hover {
            transform: translateY(-5px);
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.about {
            padding: 6rem 0;
            position: relative;
            overflow: hidden;
            background: rgba(26, 16, 64, 0.5);
        }

.team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.team-member {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }

.team-member.animate {
            opacity: 1;
            transform: translateY(0);
        }

.team-member:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.1);
        }

.member-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            padding: 5px;
        }

.member-image img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

.contact {
            padding: 6rem 0;
            position: relative;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.3);
        }

.contact-form {
            max-width: 600px;
            margin: 3rem auto 0;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            color: var(--text-color);
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--secondary-color);
            background: rgba(255, 255, 255, 0.15);
        }

.form-group textarea {
            min-height: 150px;
            resize: vertical;
        }

.submit-btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--text-color);
            padding: 1rem 2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 1.1rem;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
        }

.submit-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 0 20px rgba(98, 0, 255, 0.3);
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1rem;
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.animate {
            animation: fadeInUp 0.6s ease-out forwards;
        }

.feature-card, .stat-card {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="background"></div>
    <div class="grid"></div>

<nav>
        <div class="container nav-container">
            <div class="logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                NeuraTech
            </div>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#stats">Stats</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="cta-button">Get Started</button>
        </div>
    </nav>

<main>
        <section class="hero">
            <div class="container">
                <h1>The Future of Artificial Intelligence</h1>
                <p>Discover the power of AI with NeuraTech. We transform data into knowledge and action to propel your business into the future.</p>
                <button class="cta-button">Explore Solutions</button>
            </div>
        </section>

<section id="features" class="features">
            <div class="container">
                <h2>Key Features</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 2V4" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 20V22" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.92993 4.92993L6.34993 6.34993" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M17.6501 17.6501L19.0701 19.0701" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H4" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M20 12H22" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M6.34993 17.6501L4.92993 19.0701" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19.0701 4.92993L17.6501 6.34993" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Deep Learning</h3>
                        <p>Advanced algorithms that improve over time to deliver precise results.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 16V12" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 8H12.01" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Advanced Security</h3>
                        <p>Enterprise-level data protection to keep your information secure.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 12H3" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 6H3" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 18H3" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Predictive Analysis</h3>
                        <p>Anticipate trends and make informed decisions based on accurate data.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 12H18L15 21L9 3L6 12H2" stroke="#FF00FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Scalability</h3>
                        <p>Solutions that grow with your business, from startups to global enterprises.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="stats" class="stats">
            <div class="container">
                <h2>Our Impact</h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number">99%</div>
                        <p>Prediction Accuracy</p>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">1000+</div>
                        <p>Satisfied Clients</p>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">24/7</div>
                        <p>Technical Support</p>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">50+</div>
                        <p>Countries Reached</p>
                    </div>
                </div>
            </div>
        </section>

<section id="about" class="about">
            <div class="container">
                <h2>Our Team</h2>
                <p class="section-description">Meet the experts behind NeuraTech who are shaping the future of AI.</p>
                <div class="team-grid">
                    <div class="team-member">
                        <div class="member-image">
                            <img src="https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Team member">
                        </div>
                        <h3>Anna Garcia</h3>
                        <p>AI Director</p>
                    </div>
                    <div class="team-member">
                        <div class="member-image">
                            <img src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?q=80&w=1966&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Team member">
                        </div>
                        <h3>Carlos Ruiz</h3>
                        <p>Solutions Architect</p>
                    </div>
                    <div class="team-member">
                        <div class="member-image">
                            <img src="https://images.unsplash.com/photo-1664575600850-c4b712e6e2bf?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Team member">
                        </div>
                        <h3>Laura Martinez</h3>
                        <p>Senior Data Scientist</p>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="contact">
            <div class="container">
                <h2>Contact Us</h2>
                <p class="section-description">Ready to transform your business with AI? Get in touch today.</p>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <input id="message" name="message" required />
                        </div>
                        <button type="submit" class="submit-btn">Send Message</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

// Intersection Observer for Animations
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate');
                    }
                });
            }, { threshold: 0.1 });

document.querySelectorAll('.feature-card, .stat-card, .team-member').forEach(el => {
                observer.observe(el);
            });

// Form submission handler
            document.getElementById('contactForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // Add your form submission logic here
                alert('Thank you for your message! We will get back to you soon.');
                this.reset();
            });
        });
    </script>
</body>
</html>

Página de inicio - Modelo IA

Recomendado

Diagrama de Venn animado

Botón de autodestrucción

Un código de andres.stahr

HTML

CSS

JS

Recomendado

Diagrama de Venn animado

Botón de autodestrucción

Un código de andres.stahr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS