Community Forums - UI/UX

Overview

This page showcases the UI/UX design for our community forums. We've focused on a clean, modern aesthetic with an emphasis on readability and ease of navigation.

The site utilizes a responsive design to ensure optimal viewing across various devices.

``` ```css /* style.css */ body { font-family: 'Roboto', sans-serif; background-color: #f4f4f4; color: #333; line-height: 1.6; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; position: relative; z-index: 1; } header h1 { font-size: 2.5em; margin-bottom: 10px; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin: 0; } nav ul li a { text-decoration: none; color: #f0f0f0; font-weight: bold; } nav ul li a:hover { text-decoration: underline; } main { padding: 20px; max-width: 800px; margin: 20px auto; background-color: #fff; color: #333; } section { padding: 20px; margin-bottom: 20px; background-color: #f4f4f4; color: #333; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } article { width: 60%; margin: 20px auto; border: 1px solid #ccc; padding: 20px; background-color: #f4f4f4; } .featured { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px; } .featured a { text-decoration: none; color: #f0f0f0; font-weight: bold; } .latest { font-size: 1.2em; } footer { padding: 10px; background-color: #333; color: #fff; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; } /* Style adjustments for responsive design */ @media (max-width: 768px) { nav ul { display: block; margin: 0 auto; } main { width: 100%; } section { padding: 10px; } .featured a { font-size: 0.8em; } .latest a { font-size: 1em; } }