/* =============================================== 📘 Project Web Repository Guide =============================================== This guide outlines the conventions and instructions for building a modular, consistent, and maintainable website using Bootstrap, JavaScript, and the custom styles defined in this `styles.css` file. Follow these guidelines meticulously to ensure compatibility and uniformity across all web pages. --- 🔹 **General Principles** - **Modularity:** Use only the predefined standard elements. Each element is a building block that can be reused across different pages. - **Consistency:** Adhere to the predefined sizes, colors, and styles for all elements. - **Compatibility:** Ensure all components work seamlessly with Bootstrap and any JavaScript functionalities. - **Maintainability:** Keep the code clean and organized for easy updates and scalability. --- 🔹 **File Structure** 1. **Bootstrap:** Utilize Bootstrap's grid system and components. Ensure the Bootstrap CSS and JS files are correctly linked in your HTML. 2. **JavaScript:** Incorporate custom JavaScript as needed, ensuring it does not conflict with Bootstrap's JS. 3. **styles.css:** All custom styles should be defined here. Follow the naming conventions and style guidelines outlined below. --- 🔹 **Page Structure** Each page of the website should follow a consistent structure to maintain uniformity and ease of navigation. 1. **Navigation Bar (Navbar)** - **Position:** Fixed at the top of the page. - **Content:** Logo on the left, navigation links on the right. - **Styling:** Use the `.navbar` class with additional custom classes as defined in `styles.css`. - **Example:** ```html ``` 2. **Hero Section** - **Placement:** Immediately below the navbar on every page. - **Content:** A full-width image with a fixed height, overlay text if necessary. - **Image Specifications:** - **Size:** Fixed width (100%) and fixed height (e.g., 400px). - **Format:** Optimized for web (JPEG or PNG). - **Class:** Use the `.hero-image` class. - **Example:** ```html

Welcome to Our Website

``` 3. **Modular Building Blocks** - After the hero section, pages can include any combination of the following modular components. --- 🔹 **Modular Building Blocks** 1. **Card Component** - **Description:** A standardized card for displaying content. - **Structure:** ```html

Card Title

Some quick example text.

Go somewhere

``` - **Specifications:** - **Image Size:** 300px by 200px. - **Colors:** Use predefined color classes from `styles.css`. - **Spacing:** Maintain consistent padding and margins as defined in `styles.css`. 2. **Feature Section** - **Description:** Highlights key features or services. - **Structure:** ```html

Feature Title

Feature description.

``` - **Specifications:** - **Icons:** Use SVG or icon fonts with predefined sizes. - **Text:** Use consistent heading and paragraph styles. - **Layout:** Utilize Bootstrap's grid system for responsive design. 3. **Testimonials Carousel** - **Description:** Rotating testimonials from clients or users. - **Structure:** ```html

"Testimonial text."

Client Name

``` - **Specifications:** - **Transition:** Use Bootstrap's default carousel transitions. - **Content:** Each testimonial should have a fixed structure with text and client name. - **Styling:** Align with the site's color scheme and typography. 4. **Contact Form** - **Description:** A standardized form for user inquiries. - **Structure:** ```html

``` - **Specifications:** - **Fields:** Name, Email, Message. - **Validation:** Implement HTML5 validation and custom JS validation as needed. - **Styling:** Use consistent input sizes and button styles. 5. **Footer** - **Description:** A consistent footer across all pages. - **Structure:** ```html ``` - **Specifications:** - **Content:** Company information and social media links. - **Styling:** Align with the overall color scheme and typography. --- 🔹 **Styling Guidelines (`styles.css`)** 1. **Color Palette** - **Primary Color:** `#YourPrimaryColor` - **Secondary Color:** `#YourSecondaryColor` - **Accent Color:** `#YourAccentColor` - **Background Color:** `#YourBackgroundColor` - **Text Color:** `#YourTextColor` - **Usage:** Apply these colors consistently across elements using predefined classes. 2. **Typography** - **Fonts:** Use Google Fonts or web-safe fonts as defined. - **Headings:** Consistent font size and weight for h1, h2, h3, etc. - **Paragraphs:** Standardize line height and font size. - **Buttons:** Ensure buttons have consistent padding, border-radius, and font properties. 3. **Spacing** - **Margins and Padding:** Use a consistent scale (e.g., multiples of 8px). - **Grid System:** Leverage Bootstrap's grid for responsive layouts, supplemented by custom spacing as needed. 4. **Images** - **Sizing:** Enforce fixed dimensions for images within modular components. - **Responsive:** Ensure images are responsive using Bootstrap classes like `.img-fluid`. - **Optimization:** Optimize images for web performance. 5. **Buttons** - **Classes:** Use Bootstrap's `.btn` classes with additional custom classes for specific styles. - **States:** Define styles for hover, active, and disabled states. --- 🔹 **JavaScript Guidelines** - **Compatibility:** Ensure custom JS does not interfere with Bootstrap's JS components. - **Modularity:** Write modular, reusable scripts for interactive components. - **Documentation:** Comment your JS code for clarity and maintainability. - **Dependencies:** Manage dependencies using package managers like npm if necessary. --- 🔹 **Best Practices** - **Semantic HTML:** Use semantic tags (`

`, `