API para desarrolladores: creación e integración | DevFlow

512 codex

Abrir en el editor Publica tu código

API para desarrolladores: creación e integración | DevFlow

Recomendado

9 February 2024

Un sistema solar real en movimiento con todos los planetas

10 July 2025

Ejemplo HTML de pantalla de carga animada con CSS

14 September 2024

Animación de línea de frecuencia cardíaca

HTML

<!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>

Recomendado

Un sistema solar real en movimiento con todos los planetas

Ejemplo HTML de pantalla de carga animada con CSS

Animación de línea de frecuencia cardíaca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS