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

Compare commits

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

12 Commits
22c7f8e307 ... a038fa6818

Author SHA1 Message Date
cheeks
a038fa6818 Removed Test folder 2024-12-31 10:19:07 -05:00
cheeks
cc459e545a testing again 2024-12-31 10:15:25 -05:00
cheeks
56c5c95843 Test 2024-12-31 10:12:01 -05:00
cheeks
cb7a0a0438 Deleted migrated for redo of gitea2 server 2024-12-30 13:07:35 -05:00
cheeks
04eba451dc migrated to gitea2 2024-12-30 13:01:53 -05:00
cheeks
86baf2e8ef Completed Sections 2024-07-13 22:27:26 -04:00
cheeks
ab37fe0e0a Completed Section 2024-07-13 16:16:32 -04:00
cheeks
6a4c1c2f27 Completed Section 2024-07-12 23:54:13 -04:00
cheeks
832618ca0a Merge branch 'main' of gitea.lt.leftovertoast.net:cheeks/css-exercises 2024-07-10 18:57:52 -04:00
cheeks
cd79dce60a
Merge branch 'TheOdinProject:main' into main 2024-07-10 18:50:35 -04:00
cheeks
3add3a714c Edited stlye.css according to directions to best 
of my ability and compared to solution. Added
COMPLETE.md
 2024-07-10 18:44:40 -04:00
Namit Arjaria
d299f387ee
fix: Update grouping selectors solution to match desired outcome image (#566) 
Signed-off-by: Namit Arjaria <namitarjaria25@gmail.com>
 2024-07-08 18:42:08 +01:00
19 changed files with 98 additions and 28 deletions
Show Stats Expand all files Collapse all files

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

@ -0,0 +1 @@
# COMPLETE

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

@ -3,6 +3,9 @@
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 Normal file
View File

@ -0,0 +1 @@
# COMPLETE

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

@ -1,6 +1,10 @@
.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 {
@ -14,6 +18,11 @@
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 {
@ -22,4 +31,5 @@ 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 Normal file
View File

@ -0,0 +1 @@
# COMPLETE

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

@ -9,6 +9,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left">
<div class="logo"> <div class="logo">
LOGO LOGO
</div> </div>
@ -17,10 +18,13 @@
<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,6 +12,10 @@ 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 {
@ -45,4 +49,13 @@ 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 Normal file
View File

@ -0,0 +1 @@
# COMPLETE

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

@ -10,21 +10,29 @@
<body> <body>
<div class="title">Information!</div> <div class="title">Information!</div>
<img src="./images/barberry.png" alt="barberry"> <div class="container">
<div class="text">This is a type of plant. We love this one.</div> <div class="info">
<img src="./images/barberry.png" alt="barberry">
<img src="./images/chilli.png" alt="chili"> <div class="text">This is a type of plant. We love this one.</div>
<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"> <img src="./images/chilli.png" alt="chili">
<div class="text">We have so many plants. Yay plants.</div> <div class="text">This is another type of plant. Isn't it nice?</div>
</div>
<img src="./images/saffron.png" alt="saffron"> <div class="info">
<div class="text">I'm running out of things to say about plants.</div> <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 --> <!-- 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,5 +1,6 @@
body { body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
text-align: center;
} }
img { img {
@ -8,8 +9,10 @@ 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 */
@ -23,4 +26,14 @@ 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,15 +4,16 @@ 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, white text color, and a bold font weight - **The first element**: a black background and white text
* **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,4 +1,3 @@
.inverted, .inverted,
.fancy { .fancy {
font-family: Helvetica, "Times New Roman", sans-serif; font-family: Helvetica, "Times New Roman", sans-serif;
@ -8,9 +7,8 @@
.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 Normal file
View File

@ -0,0 +1 @@
# COMPLETE

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

@ -15,6 +15,7 @@ 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 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;
} }