This project has desktop and mobile versions. All cards are created dynamically, "Home" and "About" navigation elements are clickable and will take you to the said pages. Built with JavaScript (+ CSS, HTML).

  • By Nana Rodina
  • Last update: Mar 29, 2022
  • Comments: 2

Sheltered Animals Global Summit

This is a project made for Capstone Week to complete the first study module. The theme of the project is the Sheltered Animals Global Summit. It's a two-page website with mobile and desktop design versions.

Built With

  • HTML, CSS, JavaScript

Video about this project

Click here to watch the video (recorded using Loom)

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these steps:

  1. Click the green "Code" button
  2. Click the "Download ZIP" button
  3. Open a ZIP folder and open either "home.html" or "about.html" files.


🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!


  • The Author of the used design template: Cindy Shin
  • Design template that was used: Click here
  • Microverse
  • Cartoons about animals

📝 License

This project is MIT licensed.



  • 1

    code review issues

    Good work Nana :100: :1st_place_medal: :smile:
    You did amazing design implementation but here are a few suggestions to enhance your project 1- more button should work properly because it doesn't work right now. 2- main program cards should be at the same width 3- the header topics should be justified to right more as displayed in the design

    cheers Nana

  • 2

    Module 1: Capstone Project "Sheltered Animals Global Summit"

    This project was created following this design guideline:

    In this pull request I:

    • Created 2 pages "home.html" and "about.html"
    • Created mobile and desktop versions for both of the pages
    • Followed the design guidelines
    • Implemented:
      • Linking between pages
      • Hamburger menu on the mobile versions
      • Dynamically made cards in the "Main program" and the "Featured speakers" sections

    I want to note that since I didn't have the access to the template file (where I can click on the element and get the initial color), the colors I used in the project were selected by the color picker application and may slightly vary.