SUSTAINIFY

Thinura Hewakoon , volunteer Page, Splash Screen (Student-1)

volunteer Page

Technical Description

HTML

In the volunteer Page implementation I added a scrollable section displaying volunteer programs. In that section i used flex box method for add four volunteer cards. There are some volunteer programs i added to page with images , descriptions , and details. Also there is a filter dropdown to sort volunteer programs. After that there i implemented user reviews and feedback section submission part also. In volunteer page user can navigate website with navigation bar. The page follows the semantic structure using header, nav, div, section, footer.Navigation Bar (header): Contains links to different pages like Home, Splash, Sitemap, etc. Volunteer Program Listings: Each program is inside a div class="volunteer-card", containing time image details box description button for viewing or apply to the volunteer program. Review Section: Displays user ratings, recent reviews, and a feedback form. Users can submit suggestions with #send-feedback-button & cancel with cancel-button. pageEditor_ST1.html

CSS

In the volunteer page CSS styling method i used google fonts inter, poppins, league-spartan. In scrollable-section Makes the volunteer list scrollable with overflow-y: auto; and .volunteer-box Uses flexbox (display: flex;) to align program cards side by side and .volunteer-card: Styled with shadow, border-radius, and padding for a clean look. I added styled buttons with hover effects for better user interaction. contact-button:hover changes color and background on hover. Ratings & Reviews implemented as need highlights the score with a large font and yellow color (#ffc107).

Accessibility

Accessibility is a key feature of this page. I have incorporated certain accessibility elements. Additionally, the website itself includes built-in accessibility features. Users can navigate between different sections using the header and footer, which provide links to relevant web pages. You can refer it by pageEditor_ST2.html

Link to the validation page

Click here

Link to the volunteer page

Click here

Splash screen

Technical Description

HTML

In splash screen page the main purpose of this page is to introduce the project, display a mission statement, and highlight group members in an eye-catching way. I implemented this page with animated title effect displaying "SUSTANIFY" and mission statement section , group members with modern typography and color scheme. Title animation section implemented using div class="box" it displays text "SUSTANIFY" letter by letter and also i used animation effect to create a moving text effect . Mission statement positioned on the right side using CSS grid system. In the bottom applied list the names of contributors using an inline grid layout.

CSS

Styling and effects section i used some CSS styling methods for better user experience. I used a bright yellow (#ffc107) as the background color and added a background image for more understanding of page mission with(gg.jpg).I also used the Amarante font from google font for catchy mission section. The .box span elements move from left to right over 6s using a CSS keyframe animation (@keyframes animate). The text uses reflection effects (-webkit-box-reflect), giving it a mirror effect.

Accessibility

The Splash Screen includes various accessibility features to enhance user experience. When users enter to the website dynamically highlights key elements of project, making navigation more intuitive. This ensures that users can easily identify important sections of the page. Additionally, other accessibility features are implemented similarly to those on the Feedback page, as mentioned earlier. Other Accessibility featues are describes same as the volunteer page whih I mentioned earlier.

Link to the validation page

Click here

Link to the page

Click here

Content Page

Technical Description

HTML

I gathered information on Green infrastructure in the world.This web page is designed to educate users about Green Infrastructure and Sustainable Urban Planning. It includes informative sections, images, structured content, and a table to present key points effectively. I talked about Introducing Green Infrastructure and its role in sustainable cities and showcasing benefits such as air quality improvement, biodiversity enhancement, and climate change mitigation. At the end Highlighting real-world projects in Sri Lanka and also encouraging sustainability efforts through urban design and green solutions. Top of the content page displays a large banner image (greenins1.jpg). It Overlays a heading ("Enhancing Sustainable Communities With Green Infrastructure") in a centered position using absolute positioning. In information part i put a section (divclass="container2") for easily overlay a heading ("Enhancing Sustainable Communities With Green Infrastructure") in a centered position using absolute positioning. Then i described what Green Infrastructure is with a text box (#description1) also listed key components (e.g., Natural Vegetation, Urban Design, Water Management). It includes an image (cityscape.jpg) on the right side to visually complement the content.Used two rows of boxes (#box1, #box2, #box3, #box4) to explain different advantages of Green Infrastructure.I also compared benefits of Green Infrastructure with types of green solutions (e.g., Green Roofs, Rain Gardens). Lastly i added some Sri lankan Green Infrastructure Projects with a final summary about encourages cities to adopt sustainable policies to reduce environmental impact..

CSS

CSS Styling and effects part i used bold large fonts to highlight key sections also added text shadow effects to enhance visibility. There i Uses a yellow-green color (color: rgb(179, 255, 0)) to keep a sustainability theme. Another main part is controls image width to ensure a balanced layout.Used shadow effects (box-shadow: 0 5px 25px rgba(0,0,0,0.2)) to create a modern card-like design for more interactive experience. In table section Used a two-column format for structured comparison.

Accessibility

On the content page, I have incorporated links to external websites that provide additional information on the referenced topics. These links allow users to explore and gain a deeper understanding if they wish to learn more. This enhances the accessibility and usability of the page by offering credible sources for further reading. Additionally, all other accessibility features remain consistent with those previously mentioned, ensuring a user-friendly experience for all visitors.

Link to the validation page

Click here

Link to the page

Click here

Challenges and Lessons Learned

In the volunteer page it is more advance than other pages I created. I have to implement some volunteer cards using flex box methods in a scrollable section. While making the pages I avoid Java Script.The Content Page primarily focused on HTML structure, providing detailed descriptions of my topic. Since I developed this page last, my experience from the volunteer Page and splash screen Page helped me streamline the process.I used Figma for design planning and added hover effects as per the coursework specifications.

This page helped me learn various CSS properties and animation techniques, improving my front-end development skills.Overall, this project helped me gain practical experience in CSS animations, and user-focused design, allowing me to develop better web development skills. Content page is especially based on HTML which has lot of Description about my conten topic. I implement this at the last I gain a lot of experience from team page and feedback page it helps me a lot to make the content page. It's doesn't have any rich CSS attributes like I used for volunteer Page. Where I focused on user's readabilty.

Compliance

The design ensures clear navigation, high color contrast, and text alternatives for images, making it accessible to all users. It follows a semantic HTML structure with elements like header, main, and footer, enabling screen readers and assistive technologies to interpret the content efficiently. The use of external CSS keeps content and styling separate, improving accessibility and maintainability. Both pages include a privacy policy and terms of service to comply with legal standards regarding user data and privacy. Additionally, the responsive design ensures a seamless experience across different devices, aligning with Janet's usability guidelines.

References

Links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

  • Herath, H.M.P.I.K., Halwatura, R.U. and Jayasinghe, G.Y. (2018) Available at: https://doi.org/10.1016/j.ufug.2017.11.013 .
  • Evaluation of green infrastructure effects on tropical Sri Lankan urban context as an urban heat island adaptation strategy. Urban Forestry & Urban Greening, 29, pp.212–222.

Go top