cssBayan

[Intetrix]

1. Task: https://github.com/DrDiman/CSS-Bayan-task
2. Screenshot:
   
3. Deploy: https://intetrix.github.io/cssBayan/ccsBayan/
4. Done 12.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/10
   Icons, meme texts and meme images are exist: 5/5
   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/20
   Responsive design with three breakpoints for mobile, tablet, and desktop exist. Accordion is displayed correctly at mobile 320x568, tablet 820x1180, desktop 1920x1080. (Note: breakpoints don't have to be 320x568, 820x1180, 1920x1080): 10/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/10
   The entire row (text, icon, and meme image) clickable: 5/5
   Cursor over the memes (hover) effect only exists for devices that can support hover. This means that the touch device (phone, tablet) doesn't have hover effects, and desktop does have hover effects: 10/10
   The cursor when it is hovering over the rows of the accordion is changing: 5/5
   Only flexible dimensions are used (rem, em, %, vh, vw, fr and etc.). The accordion is responsive: 10/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. Note: usage of display: none is ALLOWED: 5/5
   Pseudo-elements are not used (note 1: pseudo-classes are ALLOWED; note 2: pseudo-elements ONLY from FontAwesome are allowed): 5/5
   Initially, the first meme should be expanded: 5/5
   Font size is changed at each device (mobile, tablet, desktop): 5/5