- 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>Answer: The position is: - top: 40px - left: 40px Because absolute positioning places to the nearest parent element whitch position is NOT static. At this case the "bar" yellow box positioned to the "foo" object, because it's the parent object, and it's positioning is absolute (not static). It means the foo positioned to the body (top:20px, left: 20px), and the "bar" object positioned to the "foo" (plus more top: 20px, left: 20px).
Add your answer to this readme file, commit your changes to this repository.
Explain the difference between display: block and display: inline in CSS! What is display: inline-block?
Answer: Block element is kind of box, it is fill the whole horizontal space, the whole line. It means only one elements can be in one row. The next element comes belong to this block element. Inline elements (eg.: link) can be next to us. They has no spaces around them (eg. margin, padding), so you can plase more inline elements in a single row. inline-block contains the property of the inline and block elements. They are also blocks, but can place next to each other.
What is the difference between a <section> and an <article> element? Name one good example of using an <article>.
Answer: Arcticle is a part of text, (eg. a blog text, web blog or comment), section is a bigger part of the page (e.g. a main page). It means a section can contain more articles. A good arcticle name is "Bibliography about Margaret Hamilton".