Removed Test folder

testing again
Test
2024-12-31 10:19:07 -05:00 · 2024-12-31 10:15:25 -05:00 · 2024-12-31 10:12:01 -05:00 · 2024-12-30 13:07:35 -05:00 · 2024-12-30 13:01:53 -05:00 · 2024-07-13 22:27:26 -04:00
19 changed files with 98 additions and 28 deletions
--- a/flex/01-flex-center/COMPLETE.md
+++ b/flex/01-flex-center/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/flex/01-flex-center/style.css
+++ b/flex/01-flex-center/style.css
@ -3,6 +3,9 @@
  border: 4px solid midnightblue;
  width: 400px;
  height: 300px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
 }

 .box {
--- a/flex/02-flex-header/COMPLETE.md
+++ b/flex/02-flex-header/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/flex/02-flex-header/style.css
+++ b/flex/02-flex-header/style.css
@ -1,6 +1,10 @@
 .header  {
  font-family: monospace;
  background: papayawhip; 
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }

 .logo {
@ -14,6 +18,11 @@
 ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+  gap: 8px;
+
 }

 a {
@ -23,3 +32,4 @@ a {
  /* this removes the line under the links */
  text-decoration: none;
 }
+
--- a/flex/03-flex-header-2/COMPLETE.md
+++ b/flex/03-flex-header-2/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/flex/03-flex-header-2/index.html
+++ b/flex/03-flex-header-2/index.html
@ -9,6 +9,7 @@
  </head>
  <body>
    <div class="header">
+      <div class="left">
      <div class="logo">
        LOGO
      </div>
@ -17,10 +18,13 @@
        <li><a href="https://google.com">link-two</a></li>
        <li><a href="https://google.com">link-three</a></li>
      </ul>
+      </div>
+      <div class ="right">
      <button class="notifications">
        1 new notification
      </button>
      <div class="profile-image"></div>
      </div>
+    </div>
  </body>
 </html>
--- a/flex/03-flex-header-2/style.css
+++ b/flex/03-flex-header-2/style.css
@ -12,6 +12,10 @@ body {
  background: white;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+
 }

 .profile-image {
@ -45,4 +49,13 @@ a {

 ul {
  list-style-type: none;
+  display: flex;
+  margin: 0px;
+  padding: 0px;
+  gap: 16px;
+}
+.left, .right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
--- a/flex/04-flex-information/COMPLETE.md
+++ b/flex/04-flex-information/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/flex/04-flex-information/index.html
+++ b/flex/04-flex-information/index.html
@ -10,21 +10,29 @@
  <body>
    <div class="title">Information!</div>

+      <div class="container">
+        <div class="info">
          <img src="./images/barberry.png" alt="barberry">
          <div class="text">This is a type of plant. We love this one.</div>
-
+        </div>
+        <div class="info">
          <img src="./images/chilli.png" alt="chili">
          <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">
          <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 -->
    <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>
+  </div>
  </body>
 </html>
--- a/flex/04-flex-information/style.css
+++ b/flex/04-flex-information/style.css
@ -1,5 +1,6 @@
 body {
  font-family: 'Courier New', Courier, monospace;
+  text-align: center;
 }

 img {
@ -8,8 +9,10 @@ img {
 }

 .title {
+  border: 1px solid black;
  font-size: 36px;
  font-weight: 900;
+  margin-bottom: 32px;
 }

 /* do not edit this footer */
@ -24,3 +27,13 @@ img {
  justify-content: center;
  background: #eee;
 }
+.container{
+  display: flex;
+  border: 1px solid red;
+  justify-content: center;
+  gap: 52px;
+}
+
+.info{
+  max-width: 200px;
+}
--- a/foundations/03-grouping-selectors/README.md
+++ b/foundations/03-grouping-selectors/README.md
@ -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:

-* **The first element**: a black background, white text color, and a bold font weight
-* **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 
+- **The first element**: a black background and white text
+- **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

 ## Desired Outcome
+
 ![desired outcome](./desired-outcome.png)

-
 ### Self Check
+
 - Does each element have a unique class name?
 - Did you use the grouping selector for styles that both elements share?
 - Did you make separate rules for the styles unique to each element?
--- a/foundations/03-grouping-selectors/solution/solution.css
+++ b/foundations/03-grouping-selectors/solution/solution.css
@ -1,4 +1,3 @@
-
 .inverted,
 .fancy {
  font-family: Helvetica, "Times New Roman", sans-serif;
@ -8,7 +7,6 @@
 .inverted {
  background-color: black;
  color: white;
-  font-weight: bold;
 }

 .fancy {
--- a/foundations/06-cascade-fix/COMPLETE.md
+++ b/foundations/06-cascade-fix/COMPLETE.md
@ -0,0 +1 @@
+# COMPLETE
--- a/foundations/06-cascade-fix/style.css
+++ b/foundations/06-cascade-fix/style.css
@ -15,6 +15,7 @@ body {

 .para {
  font-size: 32px;
+  font-weight: 800;
 }

 .confirm {
--- a/margin-and-padding/01-margin-and-padding-1/COMPLETE.md
+++ b/margin-and-padding/01-margin-and-padding-1/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/margin-and-padding/01-margin-and-padding-1/style.css
+++ b/margin-and-padding/01-margin-and-padding-1/style.css
@ -7,15 +7,15 @@ body {
  background: pink;
  border: 3px solid blue;
  /* CHANGE ME */
-  padding: 0px;
-  margin: 0px;
+  padding: 32px;
+  margin: 12px;
 }

 .two {
  background: lightblue;
  border: 3px solid purple;
  /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 48px;
 }

 .three {
@ -23,6 +23,6 @@ body {
  border: 3px solid brown;
  width: 200px;
  /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px;
+  margin-left: auto;
 }
--- a/margin-and-padding/02-margin-and-padding-2/COMPLETE.md
+++ b/margin-and-padding/02-margin-and-padding-2/COMPLETE.md
@ -0,0 +1 @@
+ # COMPLETE
--- a/margin-and-padding/02-margin-and-padding-2/index.html
+++ b/margin-and-padding/02-margin-and-padding-2/index.html
@ -11,7 +11,7 @@
    <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 class="button-container">and a <br><button>BIG BUTTON</button></div>
    </div>
  </body>
 </html>
--- a/margin-and-padding/02-margin-and-padding-2/style.css
+++ b/margin-and-padding/02-margin-and-padding-2/style.css
@ -6,22 +6,34 @@ body {
 .card {
  width: 400px;
  background: #fff;
-  margin: 16px auto;
-}
+  margin: 8px;
+  padding: 15px;
+  }

 .title {
  background: #e3f4ff;
+  font-size: 16px;
+  padding: 8px;
 }

 .content {
  background: #e3f4ff;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
 }

 .button-container {
  background: #e3f4ff;
+  text-align: center;
+  padding: 8px;
+  margin-top: 8px;
 }

 button {
  background: white;
  border: 1px solid #eee;
+  padding: 8px;
+    padding-bottom: 8px;
 }
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