|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago | |
nesting-organs.png | 4 years ago |
README.md
Nesting organs
Instructions
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 withid
face
- eyes:
div
tag withid
eyes
- eye left:
p
tag withid
eye-left
- eye right:
p
tag withid
eye-right
- eye left:
- eyes:
- upper body:
section
tag withid
upper-body
- arm left:
div
tag withid
arm-left
- torso:
div
tag withid
torso
- arm right:
div
tag withid
arm-right
- arm left:
- lower body:
section
tag withid
lower-body
- left leg:
div
tag withid
leg-left
- right leg:
div
tag withid
leg-right
- left leg:
Modify your CSS file to add rulesets to section
tags: display
at "flex" and justify-content
at "center" (this is to turn the section
tags into flex
containers, so the elements inside will be centered)
Add also the following CSS to your CSS file to see the freshly-added nested elements:
div,
p {
border: solid 1px black;
padding: 10px;
margin: 0;
border-radius: 30px;
}
#face {
align-items: center;
}
#eyes {
display: flex;
background-color: yellow;
justify-content: space-between;
align-items: center;
border-radius: 50px;
width: 200px;
}
#torso {
width: 200px;
background-color: violet;
}
Code examples
Nest several elements:
<div id="first-element">
<span id="second-element"></span>
<div id="third-element">
<p id="fourth-element"></p>
</div>
</div>
Expected output
This is what you should see in the browser:
Notions
- Anatomy of an HTML element
- Nesting HTML elements
- Flexbox layout, you can train on Flexbox froggy