This is a test for individuals applying for a position at WDAC. Uses Medoo and UIKit, both of which are NOT my own and are just included here for ease of access (if you want to grab the whole thing at once).
This is the development branch for Dev Test 5.
Please do the below tasks in any order except for the bonuses. You may use Google or another search engine. You may use HTML, CSS, JavaScript, jQuery, or PHP to complete these tasks. The site must be mobile responsive and display well on a phone and tablet. Only complete the bonuses if you have completed all other items.
- Make the link that opened this instruction modal into a button with an orange background that matches the parent background, white borders, and white text using the class
.wdac-buttonattached to it. Make sure it has a smooth hover transition effect that inverts the colors (white background and orange text). - The
<h1>element is squashed on tablet and mobile. Decrease the font size on small devices (at least 2 breakpoints). - Using CSS only, force the numbered boxes to remain perfect squares at any screen size.
- The numbered boxes should be in rows of 3 on tablet and rows of 2 on mobile.
- Expand the anchor tag that is inside each numbered box to cover the entirety of it. When a user hovers over the anchor tag, smoothly transition the background color of the BOX (not the anchor tag) into the orange used in the head
- Bonus: When a user clicks a square, change the background color to blue (#0cb4ff). When they click on it again, change it back.
- Bonus: The box container
.little-boxeshas a background on it, but it is not showing. Please make this background show using HTML/CSS