Design an Event Webpage using HTML and CSS

Last Updated : 03 Jan, 2025

Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details.

What We’re Going to Create

We’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will include

A header introducing the event.
Navigation links for different sections (About, Schedule, Speakers, and Contact).
A schedule table.
A contact form

Project Preview

Event Webpage - HTML Structure

The HTML structure provides the content and layout for the webpage.

HTML

<html>
<head></head>
<body>
    <header>
        <h1>Welcome to GeeksforGeeks TechCon 2025</h1>
        <p>The Ultimate Technology and Programming Conference</p>
    </header>
    <nav>
        <a href="#about">About</a> |
        <a href="#schedule">Schedule</a> |
        <a href="#speakers">Speakers</a> |
        <a href="#contact">Contact</a>
    </nav>
    <section id="about">
        <h2>About the Event</h2>
        <p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
          tech, and innovation. Join us for a day of insightful talks, hands-on workshops,
          and an opportunity to network with fellow geeks and professionals from all around the world.</p>
    </section>
    <section id="schedule">
        <h2>Event Schedule</h2>
        <table>
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Session</th>
                    <th>Contest</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 AM</td>
                    <td>Opening Keynote</td>
                    <td>GeeksforGeeks Coding Plateform</td>
                </tr>
                <tr>
                    <td>10:30 AM</td>
                    <td>Understanding AI and Machine Learning</td>
                    <td>Mr. Arvind Kumar</td>
                </tr>
                <tr>
                    <td>1:00 PM</td>
                    <td>Lunch Break</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>2:00 PM</td>
                    <td>Exploring the Future of Cloud Computing</td>
                    <td>Ms. Neha Gupta</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="speakers">
        <h2>Meet the Speakers</h2>
        <ul>
            <li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
            <li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
            <li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
            <li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
        </ul>
    </section>
    <section id="contact">
        <h2>Contact Us</h2>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <label for="message">Message:</label><br>
            <textarea id="message" name="message" rows="4"></textarea><br><br>
            <button type="submit">Send</button>
        </form>
    </section>
</body>
</html>

In this code

Header: Introduces the event with a title and tagline.
Navigation: Provides links to different sections of the webpage.
About Section: Contains a brief description of the event.
Schedule Section: Includes a table listing the event’s schedule with time, session, and speaker details.
Speakers Section: Highlights key speakers with their titles and expertise.
Contact Section: Contains a form to collect user queries or feedback.

Output

Screenshot-2025-01-02-121432_11zon — Design an Event Webpage using HTML and CSS

Event Webpage - Including CSS

HTML

<html>
<head>
    <title>GeeksforGeeks TechCon 2025</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f6f9;
            color: #444;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 25px 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        header h1 {
            margin: 0;
            font-size: 2.5rem;
        }
        nav {
            background-color: #343a40;
            /* Dark Gray */
            text-align: center;
            padding: 12px 0;
        }
        nav a {
            color: #ffffff;
            text-decoration: none;
            margin: 0 20px;
            font-weight: 600;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
        }
        nav a:hover {
            color: #ff6347;
            /* Tomato */
            text-decoration: underline;
        }
        section {
            padding: 25px;
            margin: 20px auto;
            max-width: 900px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }
        section:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
        }
        section h2 {
            color: #007bff;
            /* Bright Blue */
            font-size: 1.8rem;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        table th,
        table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        table th {
            background-color: #f1f1f1;
            font-weight: 600;
            color: #333;
        }
        table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        ul li {
            margin: 12px 0;
            font-size: 1.2rem;
        }
        ul li strong {
            color: #007bff;
        }
        form {
            max-width: 650px;
            margin: 25px auto;
        }
        form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        form input,
        form textarea,
        form button {
            width: 100%;
            padding: 14px;
            margin-bottom: 18px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
        }
        form input:focus,
        form textarea:focus {
            border-color: #007bff;
            outline: none;
        }
        form button {
            background-color: #007bff;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        form button:hover {
            background-color: #0056b3;
        }
        form button:active {
            background-color: #004085;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to GeeksforGeeks TechCon 2025</h1>
        <p>The Ultimate Technology and Programming Conference</p>
    </header>
    <nav>
        <a href="#about">About</a> |
        <a href="#schedule">Schedule</a> |
        <a href="#speakers">Speakers</a> |
        <a href="#contact">Contact</a>
    </nav>
    <section id="about">
        <h2>About the Event</h2>
        <p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
             tech, and innovation. Join us for a
            day of insightful talks, hands-on workshops, and an opportunity
             to network with fellow geeks and
            professionals from all around the world.</p>
    </section>
    <section id="schedule">
        <h2>Event Schedule</h2>
        <table>
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Session</th>
                    <th>Contest</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 AM</td>
                    <td>Opening Keynote</td>
                    <td>GeeksforGeeks Coding Platform</td>
                </tr>
                <tr>
                    <td>10:30 AM</td>
                    <td>Understanding AI and Machine Learning</td>
                    <td>Mr. Arvind Kumar</td>
                </tr>
                <tr>
                    <td>1:00 PM</td>
                    <td>Lunch Break</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>2:00 PM</td>
                    <td>Exploring the Future of Cloud Computing</td>
                    <td>Ms. Neha Gupta</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="speakers">
        <h2>Meet the Speakers</h2>
        <ul>
            <li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
            <li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
            <li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
            <li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
        </ul>
    </section>
    <section id="contact">
        <h2>Contact Us</h2>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <label for="message">Message:</label><br>
            <textarea id="message" name="message" rows="4"></textarea><br><br>
            <button type="submit">Send</button>
        </form>
    </section>
</body>
</html>

In this Code

Body Styles: Set a uniform background, font style, and text color.
Header and Navigation: Style the header and navigation bar for better presentation.
Sections: Add padding, background, and shadow effects to sections.
Tables: Define borders and alternate row colors for better readability.
Form: Style inputs, textarea, and buttons for user interaction.

Output

With just a few lines of HTML and CSS, you can create a clean and professional event webpage. You can further enhance this by adding JavaScript for interactivity, such as a countdown timer or dynamic schedule updates. Feel free to customize the styles and layout to suit your needs.

Design a Webpage for online food delivery system using HTML and CSS

imsushant12

Improve

Article Tags :

Design an Event Webpage using HTML and CSS

What We’re Going to Create

Project Preview

Event Webpage - HTML Structure

In this code

Output

Event Webpage - Including CSS

In this Code

Output

Similar Reads

Thank You!

What kind of Experience do you want to share?