lawlawson / JS30-Flex-Panels

Home Page:https://resilient-gingersnap-30aeb3.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flex Panels Image Gallery

This project is a part of the JavaScript30 challenge by Wes Bos, where participants build 30 different projects using only HTML, CSS, and vanilla JavaScript. In this particular project, we created and image gallery with 5 image panels that change size when the user clicks on each individual one to reveal the image and hide/unhide text.

Flex Panels Image Gallery

Table of Contents

Demo

View Demo

Features

  • CSS & JavaScript functionality to reveal images and text using animation upon click.

Getting Started

Prerequisites

  • Web browser (Chrome, Firefox, Safari, etc.)

Installation

  1. Clone the repository:
git clone https://github.com/lawlawson/JS30-Flex-Panels.git
  1. Navigate to the project directory:
cd JS30-Flex-Panels
  1. Open index.html in your preferred browser.

How to Use

  1. Click on a panel to hide or unhide the image and text.
  2. Enjoy the image and meaningful text.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the project.
  2. Create your feature branch (git checkout -b feature/AmazingFeature).
  3. Commit your changes (git commit -m 'Add some AmazingFeature').
  4. Push to the branch (git push origin feature/AmazingFeature).
  5. Open a pull request.

Acknowledgements

  • Thanks to Wes Bos for the JavaScript30 challenge and inspiration.

About

https://resilient-gingersnap-30aeb3.netlify.app/


Languages

Language:CSS 60.4%Language:HTML 27.9%Language:JavaScript 11.7%