https://github.com/cypriluc/my-first-web-application
Green Fox Academy #StayAtHome Coding Camp
https://github.com/cypriluc/my-first-web-application
basic-javascript html-css
Last synced: 20 days ago
JSON representation
Green Fox Academy #StayAtHome Coding Camp
- Host: GitHub
- URL: https://github.com/cypriluc/my-first-web-application
- Owner: cypriluc
- Created: 2020-05-04T16:16:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-13T09:11:24.000Z (about 6 years ago)
- Last Synced: 2025-02-27T11:53:49.208Z (over 1 year ago)
- Topics: basic-javascript, html-css
- Language: JavaScript
- Homepage: https://cypriluc.github.io/
- Size: 12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My first web application
Green Fox Academy #StayAtHome Coding Camp
A photo gallery
An image slider that displays images with their titles and descriptions.
Layout created with HTML and CSS:
-> gallery container in the middle of the screen, fixed size
-> gallery's content: photo-viewer and thumbnails bellow
-> photo-viewer contain arrow buttons on the sides and currently chosen photo in the middle
-> thumbnails under the photo-viewer block
-> current photo has a half transparent description
Navigation and interaction with JAVASCRIPT:
-> at the beginning the first picture is appeared in the photo-viewer
-> the related thumbnail is marked as active
-> by clicking on the arrow buttons on the sides, the content of the viewer block changes to the next or previous item
-> at the same time, the current thumbnail changes based on the currently picked photo
-> if the gallery displays the first image, pressing the previous button shows the last one and opposite
-> by clicking on a thumbnail, the image displays in the viewer area
-> the arrow buttons, the viewer area’s content and the thumbnail’s emphasis work synchronously