You are tasked to create engaging home page for a client. Some features were already implemented but there is a request that you finish it up and meet the deadline.
Please complete missing CSS property definitions so the page displays the appropriate splash loader screen before it displays the home page.
You should implement:
- fill navbar with
black
color, make the text inside white and without decoration specific to anchor<a>
tags - add padding of 15px to nav bar anchor items and display them as a block of elements
- use flexbox to display the nav html code as a navigation bar. The end result is displayed on the image mentioned below.
- add
home-page.png
as a background image to div with classwrapper
- add
Home Page
text to span with classheading
and set font size to 60px.
For the splash screen:
- position each circle item absolutely, 50 percent from top and left corners
- animate each circle item for 2 seconds, infinitely and set
rotate
keyframe rule for it - first circle item should have
width
andheight
of120px
and each following circle item after it should have 20px lower size than the one before it
For browser compatibility:
- make sure includes method used in
index.html
is browser compatible - your implementation should be contained in
main.js
file
- it should throw TypeError if RegEx is used as a first argument
- it should take a string and an optional position argument
For more details please run task inside devskiller and see failing tests.