RazEfron / lab-intro-to-css

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Introductory CSS Lab

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!


Lab Setup

Getting started

  1. Fork and clone this repository.

  2. Navigate to the settings tab on GitHub, then choose Pages from the menu. Configure the Build and Deployment to have a Source of Deploy from a branch and select the main 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.

  3. Open up the repository in VSCode. Follow the instructions below to complete the Lab.

Instructions

To complete the lab, you will need to add the following styles.

  1. Change the text of the h1 to your name
  2. Create a style.css file and link it to the index.html file
  3. In the created file include the following stylings. Remember, you can always check the screenshot in the assets folder -
  • Change the font of the name header to be 'Fantasy' and purple.
  • Remove the bullet points from your unordered lists.
  • Change the font-weight in your ordered list to bold.
  • Center all li elements on the page.
  • Center the img so it's always in the center no matter the size of the window
  • 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.
  • 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.

An example page.

About


Languages

Language:HTML 76.7%Language:CSS 23.3%