TekNews has a great looking website but it was only built for the desktop! Update the website so it can look good on any device.
-
Fork and clone this repository.
-
Navigate to the cloned repository's directory on your command line. Then, run the following command:
npm install
This will install the libraries needed to run the tests.
-
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
To run the tests, you can run the following command from the command line. You will need to be in the root directory of your local directory.
npm test
This will open the Cypress testing window, where you can click to run an individual suite of tests or all of the tests at once.
To complete the tests in this lab, you will need to overwrite some styles depending on the width of the screen. If you're unclear about any of the instructions below, remember that you can check the test file to see what exactly is being tested.
- Hide the
.splash
section by changing thedisplay
property tonone
. - Set the width of the
main
element to be90%
. - Update the
footer
element so that instead of three columns it is set to have two.
- Update the
header
element so that instead of two columns it is set to have one. - Update the
main
element so that instead of two columns it is set to have one. - Change the
gap
on themain
element so that it has a gap between each row of50px
. The gap between columns should be0
. - Update the
footer
element so it has a padding of25px
all around. - Update the
footer
element so that all of the text inside of it is aligned to the center. - Update the
footer
unordered list elements so that none of them have a list-style. - Update the
footer
heading so that it no longer has a border along the bottom.