- Fork this repository under your own account
- Commit your progress frequently and with descriptive commit messages
- All your answers and solutions should go in this repository
- You can use any resource online, but please work individually
- Instead of copy-pasting your answers and solutions, write them in your own words.
Build the following profile cards according to the design provided.
Follow the design as closely as possible.
Commit an HTML and a CSS file to this repository.
- John Duck:
- Jane Duck:
- Pencil icon:
- Name font size: 28 pixels
- Text size: 14 pixels
- Font family: Arial, sans-serif
The task is accepted if:
- The result follows design [2p]
- The code follows style guide [1p]
- The CSS & HTML are valid [1p]
- The HTML considers semantic responsibilities [2p]
- The code avoids code duplication [2p]
- The CSS has meaningful and short selectors [2p]
Extra points for if:
- the result is centered on the page [2p]
Read the following code snippet:
What is the distance between the top-left corner of the document body and the yellow box?
Give a detailed explanation below!
Add your answer to this readme file, commit your changes to this repository.
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
}
.foo {
top: 20px;
left: 20px;
width: 100px;
height: 100px;
position: absolute;
background: blue;
}
.bar {
top: 20px;
left: 20px;
width: 30px;
height: 30px;
position: absolute;
background: yellow;
}
</style>
</head>
<body>
<div class="foo">
<div class="bar"></div>
</div>
</body>
</html>Add your answer to this readme file, commit your changes to this repository.