For this code challenge, please download this image.
For the paths to be consistent, put the html file, the image, and the css file in the same folder, and use relative paths ( no starting / ). Put your CSS inside <style> tags in the head of the document. Don’t link to an external stylesheet. This will make pasting and copying the code from the discussion forum easier.
This challenge will use only HTML & CSS. The page must be responsive.
No JavaScript. No image editors like Photoshop.
A Loom video describing the task.
- Put this image in an html document with a black background.
- Make the image never take more than 1200px in width.
- Make the image horizontally and vertically center in the browser.
- In the exact horizontal and vertical center of the image, give our imaginary band a name: utensil.
- Use a font as close as possible to that seen in the screenshot below.
- Make that name a link to css-tricks.com.
- Make the name slightly translucent (so that we can see through the letters to the image).
- Using only code, make the edges of the image soft and rounded, like a vignette effect.
- Using only code, give the image a strong red tint.
- When the user hovers over the any part of the picture, the band name transitions to pure white over half a second.
- When the user hovers over any part of the picture, a line under the band name appears, transitioning from invisible to the full strength of the orange you tinted the folder with. This will take the same time as the text’s color transition to white.
- This line under the link must not be done with the border property.
- The text must not move on the hover.
Have fun.