CSS Bayan

[Dmitriy-Frostoff]

1. Task: link
2. Screenshot:
   
3. Deploy: link
4. Done 13.03.2023 / deadline 13.03.2023
5. Score: 135 / 140

Your score - 135 points

Feedback on the points of the TR:

---

Items not completed/not counted:

• 1) 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

Feedback: position relative and position absolute was used only for meme displaying on hover and click on label;

Completed items:

• 1) Public repository with name "cssBayan" created

• 2) Branch gh-pages created

• 3) The "cssBayan" folder has been created in the gh-pages branch. Deploy is available via link, link example: https://${YOUR_GITHUB_NAME}.github.io/cssBayan/cssBayan/index.html

• 4) There are at least 5 commits in the gh-pages branch with the history of the project development

• 5) The commits are called accordingly to the guideline (https://docs.rs.school/#/git-convention), each commit contains a time-stamp. Time-stamp can be at any language. Accordingly to your time-stamp should be clear, when this commit was done: day of the week, month, day, year, time with seconds (the order can vary) e.g. Commit message example: feat: add basic page layout (Mon, Sep 13, 2021 10:25:24 PM)

• 6) Pull Request from gh-pages branch to main branch is open. Pull Request name is equal to the task name. Description of the Pull Request was done accordingly to the guideline (https://docs.rs.school/#/pull-request-review-process?id=%D0%A2%D1%80%D0%B5%D0%B1%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BA-pull-request-pr). The link to this Pull Request was submitted to the cross check form. This Pull Request was NOT merged

• 7) The accordion component is centered on the screen, with equal indents on the left and right

• 8) Icons, meme texts and meme images are exist

• 9) Placement of the meme, icons and meme text are the same as in provided example gif images

• 10) Smooth change (transition) of the meme images and icons is done

• 11) 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)

• 12) 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

• 13) The entire row (text, icon, and meme image) clickable

• 14) 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

• 15) The cursor when it is hovering over the rows of the accordion is changing

• 16) Only flexible dimensions are used (rem, em, %, vh, vw, fr and etc.). The accordion is responsive

• 17) Pseudo-elements are not used (note 1: pseudo-classes are ALLOWED; note 2: pseudo-elements ONLY from FontAwesome are allowed)

• 18) Initially, the first meme should be expanded

• 19) Font size is changed at each device (mobile, tablet, desktop)