punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add info solution

Browse source
This commit is contained in:
Cody Loyd 2021-08-24 08:08:34 -05:00
parent 9f4df0c0b2
commit a7067c9b9c
4 changed files with 80 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
flex/flex-information/README.md
View file

@ -15,4 +15,5 @@ For this one you will need to edit the HTML a little bit too. We can't be making
- 32px between the title and the 'items' - 32px between the title and the 'items'
- 52px between each item - 52px between each item
- Items are arranged horizontally on the page - Items are arranged horizontally on the page
- Items are only 200px wide and the text wraps - Items are only 200px wide and the text wraps
- Item text is centered

40
flex/flex-information/solution.css Normal file
View file

@ -0,0 +1,40 @@
body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
img {
width: 100px;
height: 100px;
}
.title {
font-size: 36px;
font-weight: 900;
margin-bottom: 32px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 52px;
}
.info {
max-width: 200px;
}
/* do not edit this footer */
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 52px;
display: flex;
align-items: center;;
justify-content: center;
background: #eee;
}

37
flex/flex-information/solution.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Information</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="title">Information!</div>
<div class="container">
<div class="info">
<img src="./images/barberry.png" alt="barberry">
<div class="text">This is a type of plant. We love this one.</div>
</div>
<div class="info">
<img src="./images/chilli.png" alt="chili">
<div class="text">This is another type of plant. Isn't it nice</div>
</div>
<div class="info">
<img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div>
</div>
<div class="info">
<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 -->
<div class="footer">
<div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>
</body>
</html>

2
flex/flex-layout/index.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT</title> <title>LAYOUT</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">