public

ytursyna

public

History

Marie Malarme 68d1364a56 Update exercise 4 "Nesting organs"		3 years ago
..
README.md	Update exercise 4 "Nesting organs"	3 years ago

README.md

Nesting organs

Bravo! You displayed the global shape of your entity, but now it's time to populate each division ; let's add up some organs! To do so, we're going to introduce you the concept of nesting elements inside others.

So far, you just have a unique layer in your <body>: face, upper-body & lower-body are all at the same level. But as you know, on a face, there are 2 eyes, a nose, and a mouth - and inside that mouth, a tongue, etc. ; any element can potentially be a container for other elements.

Let's add new elements and wrap them in different layers ; convert this list of organs in a HTML structure with the corresponding given tags!

face: section tag with id face
- eyes: div tag with id eyes
  - eye left: p tag with id eye-left
  - eye right: p tag with id eye-right
upper body: section tag with id upper-body
- arm left: div tag with id arm-left
- torso: div tag with id torso
- arm right: div tag with id arm-right
lower body: section tag with id lower-body
- left leg: div tag with id leg-left
- right leg: div tag with id leg-right

Add the following CSS to your styles.css file to see the freshly-added nested elements:

section {
  display: flex;
  justify-content: space-between;
}

div,
p {
  border: solid 1px black;
  padding: 5px;
  margin: 0;
}

#face {
  flex-direction: column;
  align-items: center;
  border-radius: 30px;
}

#eyes {
  width: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: cyan;
}

#torso {
  width: 100px;
  background-color: violet;
}

Expected output

This is what you should see in the browser:

README.md

Nesting organs

Expected output

Notions