Skip to content

Hackathon #113

@malsomesh9

Description

@malsomesh9
<title>College Event Page</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
    body {
        background: linear-gradient(135deg, #0d0d2b, #1e1e4d);
        color: white;
        text-align: center;
    }

    header {
        background: linear-gradient(90deg, #4a00e0, #8e2de2);
        padding: 40px 20px;
        color: #fff;
        letter-spacing: 1px;
    }

    header h1 {
        font-size: 40px;
        margin-bottom: 10px;
    }

    header p {
        font-size: 18px;
        opacity: 0.9;
    }

    .section {
        padding: 60px 20px;
    }

    .btn {
        background-color: #ff0077;
        color: white;
        padding: 10px 20px;
        border-radius: 30px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.5s ease;
    }

    .btn:hover {
        background-color: #ffcc00;
        color: black;
        transform: scale(1.1);
    }

    .event-box {
        width: 250px;
        height: 250px;
        display: inline-block;
        margin: 20px;
        background-color: #1b1b3a;
        border-radius: 20px;
        transition: all 1s;
        box-shadow: 0 0 15px rgba(255,255,255,0.2);
    }

    .event-box:hover {
        transform: rotate(10deg) scale(1.1);
        background-color: #ff0077;
        box-shadow: 0 0 30px #ff0077;
    }

    .event-box h3 {
        padding-top: 90px;
        font-size: 20px;
    }

    .gallery img {
        width: 280px;
        height: 180px;
        border-radius: 15px;
        margin: 10px;
        transition: 0.5s;
    }

    .gallery img:hover {
        transform: scale(1.1);
        box-shadow: 0 0 20px #ff0077;
    }

    footer {
        background-color: #08081a;
        padding: 20px;
        color: #aaa;
        font-size: 14px;
    }

    /* Animation Section */
    @keyframes glow {
        0% { box-shadow: 0 0 5px #ff0077; }
        50% { box-shadow: 0 0 20px #ffcc00; }
        100% { box-shadow: 0 0 5px #ff0077; }
    }

    .event-box:hover {
        animation: glow 1.5s infinite alternate;
    }
</style>
<header>
    <h1>College Event Page</h1>
    <p>"Tech Fest, Cultural Festival, Diwali Celebration, Hackathon, Sports Day, College

Annual Day etc."


Register Now

<section class="section">
    <h2>Event Highlights</h2>
    <div class="event-box"><h3>Hackathon</h3></div>
    <div class="event-box"><h3>Robotics</h3></div>
    <div class="event-box"><h3>Gaming Zone</h3></div>
</section>

<section class="section gallery">
    <h2>Gallery</h2>
    <img src="https://picsum.photos/400/300?1" alt="Event 1">
    <img src="https://picsum.photos/400/300?2" alt="Event 2">
    <img src="https://picsum.photos/400/300?3" alt="Event 3">
</section>

<section class="section">
    <h2>Meet the Team</h2>
    <div class="event-box"><h3>Somesh - UI Design</h3></div>
    <div class="event-box"><h3>Kamal - Frontend</h3></div>
    <div class="event-box"><h3>Ankush - Content</h3></div>
</section>

<footer>
    © College Event Page | Designed by Team 404
</footer>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions