CSS Bayan

[sosukii]

1. Task: https://github.com/DrDiman/CSS-Bayan-task
2. Screenshots below, click on Spoiler for dropdown ❤🐇

Spoiler 320х568 (📱 mobile - without hover)

Spoiler 820x1180 (📱 mobile - without hover)

Spoiler 820x1180 (🖥️ desktop - hover available)

Spoiler 1920×1080 (🖥️ desktop - hover available)

4. Deploy: https://sosukii.github.io/cssBayan/cssBayan/index.html
5. Done 12.03.2023 / Deadline 13.03.2023
6. Score: 140 / 140

---

1. Everything is done from Repository requirements and how to submit task section +30✨
2. The accordion component is centered on the screen, with equal indents on the left and right +10✨
3. Icons, meme texts and meme images are exist +5✨
4. Placement of the meme, icons and meme text are the same as in provided example gif images +5✨
5. Smooth change (transition) of the meme images and icons is done +20✨
6. Responsive design with three breakpoints for mobile, tablet, and desktop exist. Accordion is displayed correctly at mobile 320x568, tablet 820x1180, desktop 1920×1080. (Note: breakpoints don't have to be 320x568, 820x1180, 1920x1080). +10✨
7. All visual effects when the cursor is hovering over the memes, when the mouse is down on a meme, and when a meme is selected are implemented +10✨
8. The entire row (text, icon, and meme image) clickable +5✨
9. Cursor over the memes (hover) effect only exists for devices that can support hover. +10✨
10. The cursor when it is hovering over the rows of the accordion is changing +5
11. Only flexible dimensions are used rem, em, %, vh, vw, fr and etc... The accordion is responsive +10✨
12. All blocks/parts of the accordion are in base flow of the dom elements. All elements are not positioned with top, left, right, bottom. float is not used. The value of position is only static +5✨
13. Pseudo-elements are not used (note 1: pseudo-classes are allowed; note 2: pseudo-elements only from FontAwesome are allowed) +5✨
14. Initially, the first meme should be expanded +5✨
15. Font size is changed at each device (mobile, tablet, desktop) +5✨