HTML & CSS practice: Hooli-style Popup

Hooli is a fictitious corporation from Silicon Valley TV series. Many believe it impersonates Google or Apple. Hooli on Silicon Valley famdom wiki.

The goal of this task is to practice coding HTML & CSS from mockup. You are expected to deepen your knowledge of HTML & CSS and discover new previously unknown features.

Requirements

• no JavaScript, only HTML/CSS, use of preprocessors is allowed
• no external libraries or frameworks
• browser support: Chrome only (feel free to use latest features)
• the popup is expected to have three states depending on user actions:
  • initial state: popup menu is not visible
  • upon click on button the popup menu gets visible or gets hidden if already open
  • click on "More" button adds 3 to 10 more icons and makes the content of the popup scrollable
• mobile view is irrelevant for this task

Recommendations

• Make sure that your navigation is built with all semantic rules.
• We recommend watching a video about hiding checkbox good parts.
• Try to style your elements by classes (not by ID and HTML tags).
• Don't forget to set the alt attribute for the img tags (if you used them).
• No need to add a lot of files (inc. icons, gitignore, configs, etc) to your PR. HTML and CSS files would be enough for checking your work.
• Avoid external scripts for the font icons.
• Check your preview in the validator.
• Make sure you've added empty lines in each file from your PR - reason. If you forget to add an empty line at the end of the file GitHub will show it:

• Check your work again and remove all redundant comments from your code.

Warning

:warning:

The above may happen if your design mimics Google components or services as they may decide that you've created a phishing site to steal your visitors' Google credentials.

To avoid this

• DO NOT use word "google", "apple", "amazon" or any other brand in
  • your project/repo name
  • any urls
  • any css selectors
  • any HTML elements ids (including created with JS) or elsewhere across HTML
• DO NOT replicate Google design (layout structure, styles etc)
• DO NOT use Google icons

Examples

You do not need to make your design 100% identical to the examples below. Implementation of the mechanics is more important. Use examples for your reference.

Initial state: no pop-up visible:

Active state:

Expanded set of icons, scrollable state:

All interactive elements should be marked as such on mouse hover.

All interactive elements should have :focus state.

You'll must able to switch across all interactive elements using only keyboard(without a mouse, don't forget about styles for :focus state)

Feel free using our icons.

You may want to publish your results on GitHub Pages

When complete do the following:

1. You will require code review for this task:
   • For Frontend 2021 course students: please, follow these instructions
   • For p2p course students: please, follow these instructions
2. Great job! Go ahead and share your progress with others – post a message in course channel: HTML-CSS-Popup — #done (or HTML-CSS-Popup — #p2p_done if you are p2p course student) and add the link to your repo. This step is important, as it helps mentors to track your progress!

Done?

➡️ Go forward to JavaScript Basics

⤴️ Back to Contents