A responsive HTML5 and CSS3-based portal designed to showcase local community events, workshops, and announcements. This project demonstrates modern frontend web development practices including styling, responsive design, semantic elements, form handling, and more.
<!DOCTYPE html>declaration- Proper
<head>setup with character encoding and external CSS link - Page title and Google Fonts integration (
Poppins)
- Use of semantic elements:
<header>,<nav>,<main>,<section>,<table>, etc. - Improved accessibility and SEO
- Unordered list (
<ul>) based navigation bar - Styled with flexbox for horizontal layout
- Interactive hover and active effects
- Each event/workshop is displayed using
.eventCardclass - Includes headings and paragraph descriptions
- Base font:
Poppins - Styled headings, paragraphs, and links
- Different font weights, styles, spacing for readability
- Customized link states:
:link,:visited,:hover,:active - Navigation list styling without bullets
- Fully styled table with:
- Zebra striping
- Header background
- Border and padding adjustments
- Demonstrates CSS box model using
.demo-box - Visibility vs display with
.visible-box,.hidden-box,.none-box - Input focus outline with
:focusselector
- Community Bulletin using CSS3 multi-column (
column-count,column-gap,column-rule)
- Media query for screens
<768px - Adjusts font sizes, nav menu orientation, and layout flow
- HTML5
- CSS3
- Google Fonts
- Responsive Web Design (RWD)
- Flexbox & Box Model
- Semantic Markup
- Clone or download this repository.https://github.com/VishwanathulaAkshaya/Module-1-CSS.git
- Open
index.htmlin your browser. - Ensure the background image
community-bg.jpgis in the same folder.
Name: Akshaya
Project: HTML5/CSS3 Practical – Community Event Portal
Purpose: Educational / College Project
This project is open-source and free to use for educational purposes.