cheeks/css-exercises
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed Section

Browse Source
This commit is contained in:
cheeks 2024-07-12 23:54:13 -04:00
parent 832618ca0a
commit 6a4c1c2f27
5 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
margin-and-padding/01-margin-and-padding-1/COMPLETE.md Normal file
View File

@ -0,0 +1 @@
# COMPLETE

10
margin-and-padding/01-margin-and-padding-1/style.css
View File

@ -7,15 +7,15 @@ body {
background: pink; background: pink;
border: 3px solid blue; border: 3px solid blue;
/* CHANGE ME */ /* CHANGE ME */
padding: 0px; padding: 32px;
margin: 0px; margin: 12px;
} }
.two { .two {
background: lightblue; background: lightblue;
border: 3px solid purple; border: 3px solid purple;
/* CHANGE ME */ /* CHANGE ME */
margin-bottom: 0px; margin-bottom: 48px;
} }
.three { .three {
@ -23,6 +23,6 @@ body {
border: 3px solid brown; border: 3px solid brown;
width: 200px; width: 200px;
/* CHANGE ME */ /* CHANGE ME */
padding: 0px; padding: 32px;
margin-left: 0px; margin-left: auto;
} }

1
margin-and-padding/02-margin-and-padding-2/COMPLETE.md Normal file
View File

@ -0,0 +1 @@
# COMPLETE

2
margin-and-padding/02-margin-and-padding-2/index.html
View File

@ -11,7 +11,7 @@
<div class="card"> <div class="card">
<h1 class="title">I'm a card</h1> <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="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 class="button-container">and a <br><button>BIG BUTTON</button></div>
</div> </div>
</body> </body>
</html> </html>

16
margin-and-padding/02-margin-and-padding-2/style.css
View File

@ -6,22 +6,34 @@ body {
.card { .card {
width: 400px; width: 400px;
background: #fff; background: #fff;
margin: 16px auto; margin: 8px;
} padding: 15px;
}
.title { .title {
background: #e3f4ff; background: #e3f4ff;
font-size: 16px;
padding: 8px;
} }
.content { .content {
background: #e3f4ff; background: #e3f4ff;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
} }
.button-container { .button-container {
background: #e3f4ff; background: #e3f4ff;
text-align: center;
padding: 8px;
margin-top: 8px;
} }
button { button {
background: white; background: white;
border: 1px solid #eee; border: 1px solid #eee;
padding: 8px;
padding-bottom: 8px;
} }