Task: CSS Bayan

[DKNatallia]

1. Task: https://github.com/DrDiman/CSS-Bayan-task
2. Screenshot:

3.Deploy: https://dknatallia.github.io/cssBayan/cssBayan/index.html 4. Done 12.03.2023 / deadline 13.03.2023 5. Score: 115 / 140

1. Everything is done from Repository requirements and how to submit task section 30
2. Accordion is placed in the center from left and right 10
3. Icons, meme texts and meme images are exist 
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 (icon’s smooth change isn’t done) 10
6. Responsive design with three breakpoints for mobile, tablet, and desktop exist. Accordion is displayed correctly at mobile 320x568, tablet 820x1180, desktop 1920×1080 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. Mobile first approach is used - cursor over the memes (hover) effect exists only for desktop devices (I don’t understand this task) 0
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 (I can’t understand everything) 5
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: pseudo-classes are allowed) 5
    14.Initially, the first meme should be expanded 5
14. Font size is changed at each device (mobile, tablet, desktop) 5