Webleb - fragmentos de código - Un código de BENE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Website Example</title>
    <style>
        /* CSS Variables */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #7c3aed;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }

/* Navigation */
        .navbar {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
        }

.nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

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

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

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

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

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 2rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            margin-top: 60px;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: slideUp 1s ease;
        }

/* Cards */
        .cards-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

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

/* Form */
        .contact-form {
            max-width: 600px;
            margin: 4rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

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

input, textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 0.5rem;
        }

button {
            background: var(--primary-color);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

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

/* Animations */
        @keyframes slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

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

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

.cards-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">Logo</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="hero" id="home">
        <div>
            <h1>Modern Website</h1>
            <p>Where technology meets design</p>
        </div>
    </section>

<section class="cards-container" id="services">
        <div class="card">
            <h3>Responsive Design</h3>
            <p>Mobile-first approach for all devices</p>
        </div>
        <div class="card">
            <h3>Web Development</h3>
            <p>Modern web development solutions</p>
        </div>
        <div class="card">
            <h3>SEO Optimization</h3>
            <p>Search engine optimized structure</p>
        </div>
    </section>

<section class="contact-form" id="contact">
        <h2>Contact Form</h2>
        <form id="contactForm">
            <div class="form-group">
                <label>Your Name:</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input type="email" id="email" required>
            </div>
            <div class="form-group">
                <label>Your Message:</label>
                <textarea id="message" rows="5" required>

Un código de BENE

Recomendado

carga de pulso

Animación de sombra de texto

Formulario de inicio de sesión

HTML

CSS

JS

Recomendado

carga de pulso

Animación de sombra de texto

Formulario de inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS