Webleb - fragmentos de código - API para desarrolladores: creación e integración

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Platform - Build & Integrate with Our API</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Basic Reset & Variables */
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --accent-color: #28a745;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
            --bg-color: #ffffff;
            --border-radius: 5px;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --spacing-lg: 4rem;
        }

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

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background-color: var(--bg-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-sm);
        }

h1, h2, h3 {
            margin-bottom: var(--spacing-sm);
            line-height: 1.2;
            color: var(--dark-color);
        }

p {
            margin-bottom: var(--spacing-sm);
        }

a {
            text-decoration: none;
            color: var(--primary-color);
        }

a:hover {
            text-decoration: underline;
        }

/* Buttons */
        .button {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-weight: 600;
            border: none;
            cursor: pointer;
            text-align: center;
        }

.button:hover {
            background-color: #0056b3;
            text-decoration: none;
            transform: translateY(-2px);
        }

.button.secondary {
            background-color: var(--secondary-color);
        }

.button.secondary:hover {
            background-color: #5a6268;
        }

/* Header */
        header {
            background-color: var(--bg-color);
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid #eee;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-color);
        }

.logo a {
            color: inherit;
            text-decoration: none;
        }

nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

nav ul li {
            margin-left: var(--spacing-md);
        }

nav ul li a {
            color: var(--dark-color);
            font-weight: 600;
            transition: color 0.3s ease;
        }

nav ul li a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

.cta-buttons {
            display: flex;
            gap: 0.5rem;
        }

/* Hero Section */
        .hero {
            background-color: #e9f5ff; /* Light blueish background */
            padding: var(--spacing-lg) 0;
            text-align: center;
        }

.hero h1 {
            font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive font size */
            margin-bottom: var(--spacing-sm);
            color: var(--dark-color);
        }

.hero p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--secondary-color);
            max-width: 700px;
            margin: 0 auto var(--spacing-md) auto;
        }

.hero-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

/* Features Section */
        .features {
            padding: var(--spacing-lg) 0;
            background-color: var(--bg-color);
            text-align: center;
        }

.features h2 {
            margin-bottom: var(--spacing-lg);
            font-size: clamp(1.8rem, 4vw, 2.5rem);
        }

.feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-md);
        }

.feature-item {
            background-color: var(--light-color);
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            text-align: left;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 3px solid var(--primary-color); /* Subtle accent */
        }

.feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }

.feature-item h3 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

/* Code Example Section */
        .code-example {
            background-color: var(--dark-color);
            color: white;
            padding: var(--spacing-lg) 0;
            text-align: center;
        }

.code-example h2 {
            color: white;
            margin-bottom: var(--spacing-md);
            font-size: clamp(1.8rem, 4vw, 2.5rem);
        }

.code-example pre {
            background-color: #282c34; /* Darker code background */
            color: #abb2bf; /* Light grey for code text */
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
            overflow-x: auto;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 0.9rem;
            line-height: 1.5;
        }

/* Call to Action Bottom */
        .cta-bottom {
            padding: var(--spacing-lg) 0;
            text-align: center;
            background-color: #e9ecef; /* Light grey background */
        }

.cta-bottom h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: var(--spacing-sm);
        }

.cta-bottom p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--secondary-color);
            margin-bottom: var(--spacing-md);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: var(--spacing-md) 0;
            text-align: center;
            font-size: 0.9rem;
        }

footer .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

footer .footer-links a {
            color: white;
            margin: 0 0.5rem;
            transition: color 0.3s ease;
        }

footer .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

/* Responsive Adjustments */
        @media (max-width: 768px) {
            header .container {
                flex-direction: column;
                gap: 1rem;
            }

nav ul {
                justify-content: center;
                margin-top: 0.5rem;
                gap: 1rem;
            }

nav ul li {
                margin-left: 0; /* Remove horizontal margin */
            }

.cta-buttons {
                width: 100%;
                justify-content: center;
            }

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

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

.feature-grid {
                grid-template-columns: 1fr; /* Stack features on small screens */
            }

.feature-item {
                text-align: center;
            }

.code-example pre {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo"><a href="#">DevFlow API</a></div>
            <nav>
                <ul>
                    <li><a href="#">Docs</a></li>
                    <li><a href="#">API Reference</a></li>
                    <li><a href="#">SDKs</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Community</a></li>
                </ul>
            </nav>
            <div class="cta-buttons">
                <a href="#" class="button secondary">Login</a>
                <a href="#" class="button">Sign Up</a>
            </div>
        </div>
    </header>

<main>
        <section class="hero">
            <div class="container">
                <h1>Build the Future with Our Powerful API</h1>
                <p>Unlock endless possibilities. Our robust and easy-to-use API empowers developers to integrate seamlessly and innovate rapidly.</p>
                <div class="hero-buttons">
                    <a href="#" class="button">Get Started Now</a>
                    <a href="#" class="button secondary">Read Documentation</a>
                </div>
            </div>
        </section>

<section class="features">
            <div class="container">
                <h2>Why Developers Choose Us</h2>
                <div class="feature-grid">
                    <div class="feature-item">
                        <h3>Comprehensive Docs</h3>
                        <p>Detailed guides, tutorials, and examples to get you up and running quickly with our API.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Robust SDKs</h3>
                        <p>Official SDKs for multiple languages (Python, Node.js, Ruby, Go) to streamline your development process.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Scalable Infrastructure</h3>
                        <p>Built on a reliable, high-performance infrastructure designed to scale effortlessly with your application's growth.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Dedicated Support</h3>
                        <p>Access to our expert support team and a vibrant developer community forum for quick assistance and collaboration.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Real-time Data</h3>
                        <p>Integrate real-time data streams and custom webhooks for dynamic, event-driven applications.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Secure & Compliant</h3>
                        <p>Enterprise-grade security and compliance standards ensure your data and applications are always protected.</p>
                    </div>
                </div>
            </div>
        </section>

<section class="code-example">
            <div class="container">
                <h2>Simple Integration, Powerful Results</h2>
                <pre><code>
// Example: Fetching user data with our JavaScript SDK
import { DevFlowClient } from '@devflow/sdk';

const client = new DevFlowClient('YOUR_API_KEY');

async function getUserProfile(userId) {
  try {
    const response = await client.users.get(userId);
    console.log('User Profile:', response.data);
    // Expected output: { id: 'user123', name: 'Jane Doe', email: 'jane@example.com' }
  } catch (error) {
    console.error('Error fetching user profile:', error.message);
  }
}

getUserProfile('user123');
                </code></pre>
            </div>
        </section>

<section class="cta-bottom">
            <div class="container">
                <h2>Ready to Start Building?</h2>
                <p>Join thousands of developers building amazing products and services with DevFlow API. Sign up today!</p>
                <a href="#" class="button">Create Your Free Account</a>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© 2023 DevFlow Inc. All rights reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="#">API Status</a>
                <a href="#">Contact Us</a>
            </div>
        </div>
    </footer>
</body>
</html>

Validating your code, please wait...

HTML

CSS