Initlal commit
This commit is contained in:
commit
a012cdfd49
|
|
@ -0,0 +1,14 @@
|
|||
# Margin and Padding practice
|
||||
|
||||
For this first exercise, simply edit the `style.css` 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.
|
||||
|
||||
|
||||
|
||||
### Self-check
|
||||
Use this section to check your work. On _these_ projects, your goal isn't to attain 100% pixel perfection, but to use the tools you've learned to get relatively close to the desired output.
|
||||
|
||||
- Div One and Div Three have 32px between their text and border.
|
||||
- Div One has 12px between it and any other element on the page.
|
||||
- There is a 48px gap between Div Two and Div Three.
|
||||
- Div Three is aligned to the right.
|
||||
- Div Three's alignment is achieved using `margin` (and not float, flexbox, etc.).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
body {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background: pink;
|
||||
border: 3px solid blue;
|
||||
/* CHANGE ME */
|
||||
padding: 32px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.two {
|
||||
background: lightblue;
|
||||
border: 3px solid purple;
|
||||
/* CHANGE ME */
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.three {
|
||||
background: peachpuff;
|
||||
border: 3px solid brown;
|
||||
width: 200px;
|
||||
/* CHANGE ME */
|
||||
padding: 32px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# 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
|
||||
|
||||
|
||||
### Self Check
|
||||
Use this section to check your work. On _these_ projects, your goal isn't to attain 100% pixel perfection, but to use the tools you've learned to get relatively close to the desired output.
|
||||
|
||||
- There is 8px between the edge of the card and its content (the blue sections).
|
||||
- There is an 8px gap between each of the blue sections inside the card.
|
||||
- The title of the card uses a 16px font.
|
||||
- There are 8px between the title text and the edge of the title section.
|
||||
- The content section has 16px space on the top and bottom, and 8px on either side.
|
||||
- Everything inside the `.button-container` section is centered, and there is 8px padding.
|
||||
- The Big Button is centered on its own line.
|
||||
- The Big Button has 24px space on the sides, and 8px on top and bottom.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
body {
|
||||
background: #eee;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
button {
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
/* disclaimer: duplicating the selectors here isn't best practice.
|
||||
In your solution you probably put it right inside the existing selectors,
|
||||
which _is_ the best practice.
|
||||
|
||||
We separated it out here to make it extra clear what has changed. */
|
||||
|
||||
.card {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 8px;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</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-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
body {
|
||||
background: #eee;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
background: #e3f4ff;
|
||||
}
|
||||
|
||||
button {
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
Loading…
Reference in New Issue