- #1 Navigation Update
I added the 'djangogirls', added a 'Blog' link between 'Workshops' and 'Resources' while ensuring consistent spacing and styling, updated the button text to 'Join the community' while maintaining its original color and style, and vertically centered all elements in the navigation bar for responsiveness across desktop, tablet, and mobile screens.
- #2 Hero Section
I have created a new hero section for the homepage that spans the full width of the page and occupies 60-80% of the viewport height, featuring a high-quality background image optimized for various screen sizes. The main heading is large and bold for easy readability, while the subheading is slightly smaller, maintaining a clear visual hierarchy. All text elements ensure sufficient contrast against the background, and the section is fully responsive, adapting seamlessly to different screen sizes and devices.
- #5 who we are
The design includes the following elements:
*Layout and Structure:
Who We Are Section: A brief introduction to Django Girls and its mission.
Quick Stats Section: A visually engaging area highlighting key statistics related to our activities.
Why Join Section: Compelling reasons for users to get involved with Django Girls.
*Responsiveness:
The entire section is designed to be responsive, adapting well to various screen sizes, including mobile devices.
Layout, font sizes, and positioning of elements adjust accordingly to ensure a seamless user experience.
- #4 Upcoming Workshops
The design adheres to the following requirements:
*Layout and Structure:
Each card occupies 1/3 of the screen width, ensuring a clean and organized layout.
Each card contains:
-A feature image related to the workshop.
-The title of the workshop prominently displayed.
-A brief description of the workshop.
-The date and location of the workshop.
Responsiveness:
The cards are designed to adapt well to various screen sizes, including mobile devices.
Layout, font sizes, and element positioning are responsive to maintain an optimal user experience across different devices.
- #3 Website Footer
*Layout and Structure: The footer spans the full width of the page, is visually distinct from the main content area, and is divided into multiple columns for organized content presentation.
Incorporates icons and links for LinkedIn, Instagram, X (formerly Twitter), and Facebook.
*Styling and Branding:
-The footer design aligns with our brand identity, using consistent typography, color schemes, and iconography.
*Responsiveness:
The footer is fully responsive, adapting seamlessly to different screen sizes to ensure a good user experience.
Additional Notes:
All footer content and links are up-to-date,
I have tested the footer on various devices and browsers for consistent rendering and performance. It integrates well with the overall website layout and navigation.
I have worked on
- #1 Navigation Update I added the 'djangogirls', added a 'Blog' link between 'Workshops' and 'Resources' while ensuring consistent spacing and styling, updated the button text to 'Join the community' while maintaining its original color and style, and vertically centered all elements in the navigation bar for responsiveness across desktop, tablet, and mobile screens.
- #2 Hero Section
- #5 who we are The design includes the following elements: *Layout and Structure:
*Responsiveness:
- #4 Upcoming Workshops The design adheres to the following requirements: *Layout and Structure:
Responsiveness:
- #3 Website Footer *Layout and Structure: The footer spans the full width of the page, is visually distinct from the main content area, and is divided into multiple columns for organized content presentation.
Content and Navigation: About Django Girls Tanzania Community Resources Newsletter: Includes a sign-up form with a message ensuring email safety and no spam. Footer Information: Displays the text "Made by the Django Girls community" and "All rights reserved || © 2024 Djangogirls Community."
*Social Media Icons:
*Styling and Branding: -The footer design aligns with our brand identity, using consistent typography, color schemes, and iconography.
*Responsiveness:
Additional Notes: All footer content and links are up-to-date, I have tested the footer on various devices and browsers for consistent rendering and performance. It integrates well with the overall website layout and navigation.