For our CSS homework, we will extend our HTML work from Week 2. Feel free to modify the content of your page as you see fit. You may want to include a section on your education, experience, projects, etc.
- Fork this project
- Copy your “index.html” file from Week 2
- Create a "style.css" file inside your folder
- Create a folder called “images” inside your folder
- Add meta information to your
<head>-
<meta charset="UTF-8"> -
<meta name="author" content="Your Name">with your name -
<meta name="description" content="Add your description here">
-
- At least four sections including:
-
<header>introducing yourself - Two
<section>divs of your choice -
<footer>with a link to your Github
-
- Include at least 1 Font Awesome icon
- Link to the Font Awesome stylesheet in your
<head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
- Link to the Font Awesome stylesheet in your
- Include a link to
http://hackyourfuture.ca
- Comment a title for each section of your styles, for example
/* Header */and/ * About Me */ - Include a fixed background image for your
body - Modify the
border-radiusproperty of at least 1 image - Include Google Fonts - Google fonts guide from w3 schools
- One for your
pselector - A different one for
h1, h2selectors
- One for your
- Give each section a unique
background-color- At least one section should be in the rgba format with transparency, so that your background image can be viewed
- MDN colour picker - use the RGB slider to change the transparency
- At least one section should be in the rgba format with transparency, so that your background image can be viewed
- Style the
aselector- style the
a:hoverselector
- style the
- Use the
text-alignproperty to centre (center) the content of one of your sections
- Navigation bar with anchor links
- Add a shortcut icon
- Comment your HTML sections, e.g.
<!-- header --><!-- contact -->
- Make sure that your body selector has 0 padding and 0 margins - so that your sections will inherit that property
- Add margins to your img selector so that there is space between your images