Created HTML CSS Popup

[SinchUK]

HTML & CSS Popup

Demo |
Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

[github-actions]

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Please, make sure you haven't made common mistakes.

Universal recommendations:

• Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
• Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
• Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
• Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

[SinchUK]

Hi! Code has checked, and mistakes are fixed. Please, review.

[A-Ostrovnyy]

Good work!

[A-Ostrovnyy]

🔥

[SinchUK]

thanks

[A-Ostrovnyy]

If you have a nested navigation use a nested list of links:

    <nav>
        <ul>
            <li><a href="#">Link-1</a></li>
            <li><a href="#">Link-2</a></li>
            <li><a href="#">Link-3</a></li>
            <li><ul>
                <li><a href="#"></a>Link-1</li>
                <li><a href="#"></a>Link-2</li>
                <li><a href="#"></a>Link-3</li>
                <li><a href="#"></a>Link-4</li>
            </ul></li>
            <li><a href="#">Link-5</a></li>
        </ul>
    </nav>

[SinchUK]

I changed code and used unordered list tag.

[A-Ostrovnyy]

Add cursor: pointer to all interactive elements.

[SinchUK]

I delete the inner text in "alt" attribute from icons. Thank you for good article.

[A-Ostrovnyy]

Logically it's a link)

[SinchUK]

Yes).

[A-Ostrovnyy]

It's an invalid CSS selector: you can't set pseudoelement from an empty selector.

[SinchUK]

Ok. Added ".tooltip" selector to pseudoelement.

[A-Ostrovnyy]

Read this article about handling image aspect ratio.
The highlighted element should be a circle.

[SinchUK]

Resolved with "object-fit: contain".

[stale]

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

1. Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
2. Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
3. Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
   навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
   Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
4. Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

[A-Ostrovnyy]

@SinchUK did you pushed your changes to this PR?)

[SinchUK]

No. But I try to make it and my branch was deleted. Then I create new pull request and push all my code one more time. #750 чт, 20 жовт. 2022, 20:26 користувач Alexandr ***@***.***> пише:

…

@SinchUK <https://github.com/SinchUK> did you pushed your changes to this PR?) — Reply to this email directly, view it on GitHub <#368 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEIXMMW5PQE7F6XLJLDKETDWEF6CVANCNFSM6AAAAAAQA6OU2U> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[SinchUK]

@A-Ostrovnyy I dont understand. Can I reopen this PR? And how I can do that if its possible. I made a new PR with my changes after your review. Witch way is true?