Day-9:Creating an ILUGC Community Page Using HTML and CSS

#webdev #css #html #programming

Hi Coders!!!

In this project, I created a simple and responsive community web page for ILUGC (Indian Linux User Group - Chennai) using pure HTML and CSS.
The goal of this page was to display event announcements, maintain a clean layout, and work well on both desktop and mobile devices — all without using any JavaScript.

Project Structure

The structure of the webpage is divided into three main sections:

1.Header:
Displays the ILUGC title and a short description using semantic HTML elements like <h1> and <p>.

2.Navigation Bar (Navbar):
A responsive navbar with a hamburger menu is built using a simple checkbox toggle mechanism and Font Awesome icons. This avoids using JavaScript but still enables menu expansion on mobile.

3.Content Layout:
The page uses a CSS Grid layout (.layout) to create a two-column design:

Left (Main Content): Multiple event announcements with heading, date, and details.
Right (Sidebar): A simple search box and recent posts section.

4.Footer:
A lightweight footer at the bottom credits the site’s theme and static site generator.

<body>
    <div class="container">
        <div class="header">
            <h1>ILUGC</h1>
            <p>INDIAN LINUX USER'S-CHENNAI (MADRAS) </p>
        </div>


        <div class="navbar">

            <input type="checkbox" id="menu-toggle" class="menu-toggle" />

            <label for="menu-toggle" class="menu-icon">
                <i class="fa-solid fa-bars"></i>
            </label>

            <ul class="nav-links">
                <li><a href="">ABOUT</a></li>
                <li><a href="">CONTACT</a></li>
                <li><a href="">IRC</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">GETTING STARTED</a></li>
                <li><a href="">GET INVOLVED</a></li>
            </ul>
        </div>


        <div class="layout">
            <div class="mainlayout">
                <h2>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</h2>
                <div class="shedule">
                    <i class="fa-regular fa-clock" style="color: #9a9996;"></i>
                    <p>November 09, 2024</p>
                </div>
                <p>Indian Linux Users Group, Chennai [ ILUGC ] has been spreading awareness on Free/Open Source Software
                    (F/OSS) in Chennai since January 1998. We usually meet on the second Saturday of every month, and
                    for the month of November, we shall meet through Jitsi on Saturday 11, 2024 at 1500 IST. Meet Link
                    Talk Details Talk 0 Topic: HTML Tags Description: Basic HTML Tags Duration:30min Full Name: Sugirtha
                    Kumarasamy About Yourself: I am an MCA graduate, having 1 year experience in Programming - After a
                    long gap trying to resume my career. </p>
                <hr>
 <div class="sidelayout">
                <div class="right-box">
                    <div class="searchbox">
                        <input type="text" placeholder="search...">
                    </div>
                    <h4>RECENT POSTS</h4>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                    <p>ILUGC Monthly Meet - November 9, 2024 - 3.00 PM IST</p>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>© 2024 ILUGC. Generated with <a href="">Hugo</a> and <a href="">Mainroad</a> theme.</p>
    </footer>

Design Highlights

1.Colors:

Dark navigation background with a red border to emphasize branding.
Red hover effect on menu links to highlight interactivity.

2.Responsive Design:
Using media queries, the layout switches from a two-column grid to a single-column view for screens under 786px.
The navigation collapses into a hamburger menu using checkbox + label trick, which is fully CSS-based.

3.Fonts & Icons:
The design includes Google Fonts and Material Icons for a modern look. Font Awesome is used for clock and menu icons.

@media (max-width:786px) {
            .header {
                text-align: center;
            }

            .header p {
                display: inline-block;
            }

            .layout {
                grid-template-columns: 1fr;
            }

            .sidelayout {
                margin: auto;
            }

            .menu-icon {
                display: block;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                background-color: rgb(39, 37, 37);
                width: 100%;
                position: absolute;
                top: 40px;
                /* Below the menu icon */
                left: 0;
            }

            /* Show menu when checkbox is checked */
            .menu-toggle:checked+.menu-icon+.nav-links {
                display: flex;
            }
        }

What I Learned:

This project helped me understand:

Responsive design using CSS Grid and Flexbox
Creating a hamburger menu using only CSS
Semantic HTML structure for better readability and accessibility
Organizing content into a clean layout with modern UI/UX principles.

Today's End:

This was a great practice project to solidify my front-end fundamentals using only HTML and CSS. I'm now more confident in building structured layouts and making them responsive for real-world use cases.
In the future, I’d like to extend this by adding JavaScript for dynamic features like live search or filtering events.

Keep Learning!! Happy Coding!!!