In this lab, you'll have the opportunity to design a personal webpage. The content already exists -- you just need to style it to the best of your ability!
-
Fork and clone this repository.
-
Navigate to the
settings
tab on GitHub, then choosePages
from the menu. Configure theBuild and Deployment
to have aSource
ofDeploy from a branch
and select themain
branch for deployment. Deployments can take a few minutes, so get started on the lab, and then be sure to check the deployment after you have made a few commits. -
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
To complete the tests in this lab, you will need to add the following styles. 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.
- Change the font of the name header to be
'Fantasy'
and purple. - Remove the bullet points from your unordered list of links.
- Change the
font-weight
in your ordered list to bold. - Center all
li
elements on the page. - Give your
li
elements a 1px red border with curved corners. - Change the font color of your
li
elements to blue and the background color to a light pink. - All images should be 200 pixels tall.
- Change all font in the body to sans-serif.
label- Underline all
h3
elements. - All
p
tags should have 20 pixels of padding on the top and the bottom - not on the sides. h1
tags should have a 30px font size.- Lists should have
30px
of padding on the left.
After you've completed these tasks, continue styling your page to make it look unique. You should add at least ten additional declarations on top of the ones you've made above.
-
change the font size of the h1 heading to 30px.
-
Underline the H1 heading.
-
Change the background of the page to light purple.
-
Center and size the image while keeping the aspect ratio the same.
-
Center the h3 elements.
-
Remove the H3 element Libraries for inside the padded ordered list element and put it outside si it can be properly centered with the other H3 elements.
-
Link the word brilliant to its website.
-
Link the word roblox to its website.
-
Italize the H1 element.
-
Make the header of the page light purple.