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

add first two exercises

Browse source
This commit is contained in:
Cody Loyd 2021-08-17 15:27:54 -05:00
commit 84363c089c
6 changed files with 106 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
margin-and-padding-2/README.md Normal file
View file

@ -0,0 +1,6 @@
# Margin and Padding #2
This one is a little nicer looking, and a little closer to something you might see in the real world. You'll need to change a little more than just margin and padding to make it look exactly right.
## Desired outcome
![desired outcome](./desired-outcome.png)

BIN
margin-and-padding-2/desired-outcome.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

45
margin-and-padding-2/index.html Normal file
View file

@ -0,0 +1,45 @@
<!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>Margin and Padding exercise 2</title>
<style>
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
</style>
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button">and a <button>BIG BUTTON</button></div>
</div
</body>
</html>

5
margin-and-padding/README.md Normal file
View file

@ -0,0 +1,5 @@
# Margin and Padding practice
For this first exercise, simply edit the `index.html` file so that the divs look like the image below. Only edit the CSS where instructed in the file. You should only have to change the values of the margin and padding for this exercise. You should not have to add or remove properties in the CSS, or touch the HTML.
![outcome](./desired-outcome.png)

BIN
margin-and-padding/desired-outcome.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

50
margin-and-padding/index.html Normal file
View file

@ -0,0 +1,50 @@
<!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>Margin and Padding exercise</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
}
.one {
background: pink;
border: 3px solid blue;
/* CHANGE ME */
padding: 0px;
margin: 0px;
}
.two {
background: lightblue;
border: 3px solid purple;
/* CHANGE ME */
margin-bottom: 0px;
}
.three {
background: peachpuff;
border: 3px solid brown;
width: 200px;
/* CHANGE ME */
padding: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="one">
DIV ONE
</div>
<div class="two">
DIV TWO
</div>
<div class="three">
DIV THREE
</div
</body>
</html>