CSS Bayan

[MaxLisyanskiy]

1. Task: https://github.com/DrDiman/CSS-Bayan-task
2. Screenshot:
3. Deploy: https://maxlisyanskiy.github.io/cssBayan/cssBayan/index.html
4. Done 10.03.2023 / deadline 13.03.2023
5. Score: 140 / 140

• Everything is done from Repository requirements and how to submit task section (30)
• The accordion component is centered on the screen, with equal indents on the left and right (10)
• Icons, meme texts and meme images are exist (5)
• Placement of the meme, icons and meme text are the same as in provided example gif images (5)
• Smooth change (transition) of the meme images and icons is done (20)
• Responsive design with three breakpoints for mobile, tablet, and desktop exist. Accordion is displayed correctly at mobile 320x568, tablet 820x1180, desktop 1920×1080 (10)
• 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)
• The entire row (text, icon, and meme image) clickable (5)
• Mobile first approach is used - cursor over the memes (hover) effect exists only for desktop devices (10)
• The cursor when it is hovering over the rows of the accordion is changing (5)
• Only flexible dimensions are used rem, em, %, vh, vw, fr and etc... The accordion is responsive (10)
• 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)
• Pseudo-elements are not used (note: pseudo-classes are allowed) (5)
• Initially, the first meme should be expanded (5)
• Font size is changed at each device (mobile, tablet, desktop) (5)