- 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>Your answer: The distance between the document body and the yellow box is top: 40px and left: 40px. The blue box has the position absolute value and it is set to top: 20px left 20px from the document body. So the blue box is from top: 20px left: 20px from the body. The yellow box is inside the blue box, and also has the position absolute value. It has top: 20px left: 20px from the top right corner of the blue box. So the yellow box is top: 20px + 20px = 40px and left: 20px + 20px = 40px from the body.
Add your answer to this readme file, commit your changes to this repository.