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

Compare commits

base: cheeks:a038fa6818d0b23847f98deefd14b62bf098bc72
Branches Tags
cheeks:main
..
compare: cheeks:22c7f8e30716f8402c27344d9c221d64b11d9afe
Branches Tags
cheeks:main

No commits in common. "a038fa6818d0b23847f98deefd14b62bf098bc72" and "22c7f8e30716f8402c27344d9c221d64b11d9afe" have entirely different histories.
a038fa6818 ... 22c7f8e307

19 changed files with 28 additions and 98 deletions
Show Stats Expand all files Collapse all files

1
flex/01-flex-center/COMPLETE.md
View File

@ -1 +0,0 @@
# COMPLETE

3
flex/01-flex-center/style.css
View File

@ -3,9 +3,6 @@
border: 4px solid midnightblue; border: 4px solid midnightblue;
width: 400px; width: 400px;
height: 300px; height: 300px;
display: flex;
justify-content:center;
align-items: center;
} }
.box { .box {

1
flex/02-flex-header/COMPLETE.md
View File

@ -1 +0,0 @@
# COMPLETE

14
flex/02-flex-header/style.css
View File

@ -1,10 +1,6 @@
.header { .header {
font-family: monospace; font-family: monospace;
background: papayawhip; background: papayawhip;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
} }
.logo { .logo {
@ -18,11 +14,6 @@
ul { ul {
/* this removes the dots on the list items*/ /* this removes the dots on the list items*/
list-style-type: none; list-style-type: none;
display: flex;
padding: 0px;
margin: 0px;
gap: 8px;
} }
a { a {
@ -31,5 +22,4 @@ a {
padding: 8px; padding: 8px;
/* this removes the line under the links */ /* this removes the line under the links */
text-decoration: none; text-decoration: none;
} }

1
flex/03-flex-header-2/COMPLETE.md
View File

@ -1 +0,0 @@
# COMPLETE

4
flex/03-flex-header-2/index.html
View File

@ -9,7 +9,6 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left">
<div class="logo"> <div class="logo">
LOGO LOGO
</div> </div>
@ -18,13 +17,10 @@
<li><a href="https://google.com">link-two</a></li> <li><a href="https://google.com">link-two</a></li>
<li><a href="https://google.com">link-three</a></li> <li><a href="https://google.com">link-three</a></li>
</ul> </ul>
</div>
<div class ="right">
<button class="notifications"> <button class="notifications">
1 new notification 1 new notification
</button> </button>
<div class="profile-image"></div> <div class="profile-image"></div>
</div>
</div> </div>
</body> </body>
</html> </html>

13
flex/03-flex-header-2/style.css
View File

@ -12,10 +12,6 @@ body {
background: white; background: white;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0,0,0,.1); box-shadow: 0 0 8px rgba(0,0,0,.1);
display: flex;
justify-content: space-between;
padding: 8px;
} }
.profile-image { .profile-image {
@ -49,13 +45,4 @@ a {
ul { ul {
list-style-type: none; list-style-type: none;
display: flex;
margin: 0px;
padding: 0px;
gap: 16px;
} }
.left, .right {
display: flex;
align-items: center;
gap: 8px;
}

1
flex/04-flex-information/COMPLETE.md
View File

@ -1 +0,0 @@
# COMPLETE

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

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

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

@ -1,6 +1,5 @@
body { body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
text-align: center;
} }
img { img {
@ -9,10 +8,8 @@ img {
} }
.title { .title {
border: 1px solid black;
font-size: 36px; font-size: 36px;
font-weight: 900; font-weight: 900;
margin-bottom: 32px;
} }
/* do not edit this footer */ /* do not edit this footer */
@ -26,14 +23,4 @@ img {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #eee; background: #eee;
}
.container{
display: flex;
border: 1px solid red;
justify-content: center;
gap: 52px;
}
.info{
max-width: 200px;
} }

9
foundations/03-grouping-selectors/README.md
View File

@ -4,16 +4,15 @@ Let's build a little off the previous exercise. Here, you're going to give two e
This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are: This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are:
- **The first element**: a black background and white text * **The first element**: a black background, white text color, and a bold font weight
- **The second element**: a yellow background * **The second element**: a yellow background
- **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback * **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback
## Desired Outcome ## Desired Outcome
![desired outcome](./desired-outcome.png) ![desired outcome](./desired-outcome.png)
### Self Check
### Self Check
- Does each element have a unique class name? - Does each element have a unique class name?
- Did you use the grouping selector for styles that both elements share? - Did you use the grouping selector for styles that both elements share?
- Did you make separate rules for the styles unique to each element? - Did you make separate rules for the styles unique to each element?

4
foundations/03-grouping-selectors/solution/solution.css
View File

@ -1,3 +1,4 @@
.inverted, .inverted,
.fancy { .fancy {
font-family: Helvetica, "Times New Roman", sans-serif; font-family: Helvetica, "Times New Roman", sans-serif;
@ -7,8 +8,9 @@
.inverted { .inverted {
background-color: black; background-color: black;
color: white; color: white;
font-weight: bold;
} }
.fancy { .fancy {
background-color: yellow; background-color: yellow;
} }

1
foundations/06-cascade-fix/COMPLETE.md
View File

@ -1 +0,0 @@
# COMPLETE

1
foundations/06-cascade-fix/style.css
View File

@ -15,7 +15,6 @@ body {
.para { .para {
font-size: 32px; font-size: 32px;
font-weight: 800;
} }
.confirm { .confirm {

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

@ -1 +0,0 @@
# 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: 32px; padding: 0px;
margin: 12px; margin: 0px;
} }
.two { .two {
background: lightblue; background: lightblue;
border: 3px solid purple; border: 3px solid purple;
/* CHANGE ME */ /* CHANGE ME */
margin-bottom: 48px; margin-bottom: 0px;
} }
.three { .three {
@ -23,6 +23,6 @@ body {
border: 3px solid brown; border: 3px solid brown;
width: 200px; width: 200px;
/* CHANGE ME */ /* CHANGE ME */
padding: 32px; padding: 0px;
margin-left: auto; margin-left: 0px;
} }

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

@ -1 +0,0 @@
# 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 <br><button>BIG BUTTON</button></div> <div class="button-container">and a <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,34 +6,22 @@ body {
.card { .card {
width: 400px; width: 400px;
background: #fff; background: #fff;
margin: 8px; margin: 16px auto;
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;
} }