Sitio web con sistema de registro de eventos HTML CSS

2,326 lebdev

Abrir en el editor Publica tu código

Sitio web con sistema de registro de eventos HTML CSS

Recomendado

20 April 2025

El juego de pelota por diversión (por el Sr.)

26 June 2024

Cambio de avión

14 January 2026

Scratch Nickelodeon Edition: Ejemplo de editor de código

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Registration System</title>
    <style>
        :root {
            --primary-color: #4a6fdc;
            --secondary-color: #f8f9fa;
            --accent-color: #ff6b6b;
            --text-color: #333;
            --light-gray: #e9ecef;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background-color: white;
            box-shadow: var(--box-shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--primary-color);
        }
        
        .hero {
            background-color: var(--primary-color);
            color: white;
            padding: 60px 0;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: white;
            color: var(--primary-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: bold;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .btn-secondary {
            background-color: var(--accent-color);
            color: white;
        }
        
        .events-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .event-card {
            background-color: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: transform 0.3s;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
        }
        
        .event-image {
            height: 200px;
            background-color: var(--light-gray);
            position: relative;
            overflow: hidden;
        }
        
        .event-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .event-date {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: var(--primary-color);
            color: white;
            padding: 8px 12px;
            border-radius: var(--border-radius);
            font-weight: bold;
        }
        
        .event-details {
            padding: 20px;
        }
        
        .event-title {
            font-size: 1.25rem;
            margin-bottom: 10px;
            color: var(--text-color);
        }
        
        .event-location {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #666;
        }
        
        .event-description {
            margin-bottom: 20px;
            color: #666;
        }
        
        .event-details .btn {
            width: 100%;
            text-align: center;
        }
        
        .registration-form {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 30px;
            max-width: 800px;
            margin: 0 auto 60px;
        }
        
        .form-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            font-size: 1rem;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .checkbox-group input {
            width: auto;
            margin-right: 10px;
        }
        
        .submit-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #3a5cbe;
        }
        
        footer {
            background-color: #2d3748;
            color: white;
            padding: 40px 0;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
        
        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column a {
            color: #cbd5e0;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column a:hover {
            color: white;
        }
        
        .copyright {
            margin-top: 30px;
            text-align: center;
            color: #cbd5e0;
            padding-top: 20px;
            border-top: 1px solid #4a5568;
        }
        
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .events-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="logo">EventFlow</div>
                <div class="nav-links">
                    <a href="#home">Home</a>
                    <a href="#events">Events</a>
                    <a href="#register">Register</a>
                    <a href="#contact">Contact</a>
                </div>
            </nav>
        </div>
    </header>
    
    <section id="home" class="hero">
        <div class="container">
            <h1>Discover & Register for Amazing Events</h1>
            <p>Join thousands of attendees at the most exciting conferences, workshops, and meetups in your area.</p>
            <a href="#register" class="btn">Register Now</a>
        </div>
    </section>
    
    <section id="events" class="container">
        <h2>Upcoming Events</h2>
        <div class="events-container">
            <div class="event-card">
                <div class="event-image">
                    <img src="/api/placeholder/400/200" alt="Tech Conference 2025">
                    <div class="event-date">Mar 15, 2025</div>
                </div>
                <div class="event-details">
                    <h3 class="event-title">Tech Conference 2025</h3>
                    <p class="event-location">San Francisco, CA</p>
                    <p class="event-description">Join industry leaders and innovators for a day of inspiring talks and networking opportunities.</p>
                    <a href="#register" class="btn">Register</a>
                </div>
            </div>
            
            <div class="event-card">
                <div class="event-image">
                    <img src="/api/placeholder/400/200" alt="Design Workshop">
                    <div class="event-date">Apr 5, 2025</div>
                </div>
                <div class="event-details">
                    <h3 class="event-title">UX/UI Design Workshop</h3>
                    <p class="event-location">New York, NY</p>
                    <p class="event-description">Learn the latest design techniques and tools from expert designers in this hands-on workshop.</p>
                    <a href="#register" class="btn">Register</a>
                </div>
            </div>
            
            <div class="event-card">
                <div class="event-image">
                    <img src="/api/placeholder/400/200" alt="Marketing Summit">
                    <div class="event-date">Apr 22, 2025</div>
                </div>
                <div class="event-details">
                    <h3 class="event-title">Digital Marketing Summit</h3>
                    <p class="event-location">Chicago, IL</p>
                    <p class="event-description">Discover cutting-edge digital marketing strategies to grow your business and reach new audiences.</p>
                    <a href="#register" class="btn">Register</a>
                </div>
            </div>
        </div>
    </section>
    
    <section id="register" class="container">
        <div class="registration-form">
            <h2 class="form-title">Event Registration</h2>
            <form id="eventRegistrationForm">
                <div class="form-group">
                    <label for="eventSelect">Select Event</label>
                    <select id="eventSelect" required>
                        <option value="">-- Select an event --</option>
                        <option value="tech-conference">Tech Conference 2025 (Mar 15)</option>
                        <option value="design-workshop">UX/UI Design Workshop (Apr 5)</option>
                        <option value="marketing-summit">Digital Marketing Summit (Apr 22)</option>
                    </select>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" id="firstName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" id="lastName" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone">
                </div>
                
                <div class="form-group">
                    <label for="company">Company/Organization</label>
                    <input type="text" id="company">
                </div>
                
                <div class="form-group">
                    <label for="jobTitle">Job Title</label>
                    <input type="text" id="jobTitle">
                </div>
                
                <div class="form-group">
                    <label>Ticket Type</label>
                    <div class="checkbox-group">
                        <input type="radio" id="standard" name="ticketType" value="standard" checked>
                        <label for="standard">Standard ($99)</label>
                    </div>
                    <div class="checkbox-group">
                        <input type="radio" id="premium" name="ticketType" value="premium">
                        <label for="premium">Premium - With Workshop Access ($149)</label>
                    </div>
                    <div class="checkbox-group">
                        <input type="radio" id="vip" name="ticketType" value="vip">
                        <label for="vip">VIP - All Access ($199)</label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="dietary">Dietary Requirements</label>
                    <select id="dietary">
                        <option value="none">None</option>
                        <option value="vegetarian">Vegetarian</option>
                        <option value="vegan">Vegan</option>
                        <option value="gluten-free">Gluten-Free</option>
                        <option value="other">Other (Please specify)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="dietaryOther">Other Dietary Requirements</label>
                    <input type="text" id="dietaryOther" placeholder="Please specify if you selected 'Other'">
                </div>
                
                <div class="form-group">
                    <label for="specialRequirements">Special Requirements or Accessibility Needs</label>
                    <input id="specialRequirements" rows="3" />
                </div>
                
                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="termsAndConditions" required>
                        <label for="termsAndConditions">I agree to the Terms and Conditions</label>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="marketingEmails">
                        <label for="marketingEmails">Send me updates about future events and offers</label>
                    </div>
                </div>
                
                <button type="submit" class="submit-btn">Complete Registration</button>
            </form>
        </div>
    </section>
    
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>EventFlow</h3>
                    <p>Your one-stop platform for discovering and registering for the best events.</p>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#events">Events</a></li>
                        <li><a href="#register">Register</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">FAQ</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>Email: info@eventflow.com</li>
                        <li>Phone: (123) 456-7890</li>
                        <li>Address: 123 Event St, San Francisco, CA</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2025 EventFlow. All rights reserved.</p>
            </div>
        </div>
    </footer>

CSS