tod
/
odin-flex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Completed exercise 04

This commit is contained in:
NetMan 2023-12-29 17:41:30 +01:00
parent f424d2280d
commit 34a0d21b48
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
04-flex-information/index.html
View File

@ -10,17 +10,24 @@
<body> <body>
<div class="title">Information!</div> <div class="title">Information!</div>
<img src="./images/barberry.png" alt="barberry"> <div class="flex">
<div class="text">This is a type of plant. We love this one.</div> <div class="tile">
<img src="./images/barberry.png" alt="barberry">
<img src="./images/chilli.png" alt="chili"> <div class="text">This is a type of plant. We love this one.</div>
<div class="text">This is another type of plant. Isn't it nice?</div> </div>
<div class="tile">
<img src="./images/pepper.png" alt="pepper"> <img src="./images/chilli.png" alt="chili">
<div class="text">We have so many plants. Yay plants.</div> <div class="text">This is another type of plant. Isn't it nice?</div>
</div>
<img src="./images/saffron.png" alt="saffron"> <div class="tile">
<div class="text">I'm running out of things to say about plants.</div> <img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div>
</div>
<div class="tile">
<img src="./images/saffron.png" alt="saffron">
<div class="text">I'm running out of things to say about plants.</div>
</div>
</div>
<!-- disregard this section, it's here to give attribution to the creator of these icons --> <!-- disregard this section, it's here to give attribution to the creator of these icons -->
<div class="footer"> <div class="footer">

14
04-flex-information/style.css
View File

@ -2,6 +2,19 @@ body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
.flex {
display: flex;
justify-content: center;
gap: 52px;
margin: 32px 0 0 0;
}
.tile {
width: 200px;
flex: 0 0 auto;
text-align: center;
}
img { img {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -10,6 +23,7 @@ img {
.title { .title {
font-size: 36px; font-size: 36px;
font-weight: 900; font-weight: 900;
text-align: center;
} }
/* do not edit this footer */ /* do not edit this footer */