Merge branch 'main' of https://github.com/TheOdinProject/css-exercises into feature/grid-exercise-3

README.md

@@ -1,14 +1,14 @@
 # CSS Exercises
 
-These exercises are a series of css related tasks intended to complement the HTML and CSS content on The Odin Project.
+These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.
 
 These exercises should be done when instructed during the course of the curriculum.
 
-> When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use google, do what you need to do (besides checking the solutions) to get them done.
+> When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, do what you need to do (besides checking the solutions) to get them done.
 
 ## How to use these exercises
 
-1. Fork and copy this repository. Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
+1. Fork and copy this repository. To learn how to fork a repository, see [this link](https://docs.github.com/en/get-started/quickstart/fork-a-repo). Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
 2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server.
 3. For each exercise, view the README, and edit the CSS file to make the output in your browser look like the images provided.
 4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.

animation/01-button-hover/README.md

@@ -1,12 +1,12 @@
 # Button Hover
 
-Use a transition to increase the font-size property of the button when you hover your mouse over it.
+Use a transition to scale the button when you hover your mouse over it.
 
 ## Desired Outcome
 
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
-- Does the font-size property change to increase the size?
+- Does the button grow when you hover it?
 - Do other properties of the button remain unchanged?
 - Does the `:hover` pseudo-class trigger the transition?

animation/01-button-hover/solution/solution.css

@@ -9,28 +9,21 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
 }
 
 /* SOLUTION */
 
-/* disclaimer: duplicating the `button` element here isn't best practice.
-In your solution you probably put it right inside the existing `button`,
-which _is_ the best practice. 
-We separated it out here to make it extra clear what has changed. */
-
 button {
-  transition: font-size 1s ease-out 0.25s;
+  transition: transform .3s ease-in-out;
 }
 
 button:hover {
-  font-size: x-large;
-  cursor: pointer;
+  transform: scale(1.2)
 }

animation/01-button-hover/style.css

@@ -9,12 +9,11 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
-}
+}

animation/02-drop-down/README.md

@@ -1,15 +0,0 @@
-# Dropdown
-
-Here you'll make your very own dropdown menu using pure CSS. 
-
-Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly.
-
-## Desired Outcome
-
-![outcome](./desired-outcome.gif)
-
-### Self Check
-- Does the button's background color change when you hover on it?
-- Does the list smoothly slide down underneath the button when the button is hovered over?
-- Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element?
-- Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element?

animation/02-drop-down/index.html

@@ -1,22 +0,0 @@
-<!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>Dropdown</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div class="dropdown-container">
-      <div class="dropdown-menu">
-        <button>Dropdown</button>
-        <ul>
-          <li>Item 1</a>
-          <li>Item 2</a>
-          <li>Item 3</a>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

animation/02-drop-down/solution/solution.css

@@ -1,65 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.dropdown-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown-menu {
-  position: relative;
-}
-
-button {
-  background-color: rgb(108, 238, 255);
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-}
-
-ul {
-  position: absolute;
-  left: -25%;
-  background-color: rgb(189, 188, 188);
-  width: 160px;
-  list-style: none;
-  text-align: center;
-}
-
-li {
-  padding: 16px;
-}
-
-/* SOLUTION */
-
-/* disclaimer: duplicating the `ul` element here isn't best practice.
-In your solution you probably put it right inside the existing `ul`,
-which _is_ the best practice. 
-We separated it out here to make it extra clear what has changed. */
-
-ul {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.25s ease-out;
-}
-
-.dropdown-menu:hover ul {
-  max-height: 500px;
-  transition: max-height 0.5s ease-out;
-}
-
-button:hover {
-  cursor: pointer;
-  background-color: rgb(59, 232, 255);
-}
-
-ul li:hover {
-  cursor: pointer;
-  background-color: #ddd;
-}

animation/02-drop-down/solution/solution.html

@@ -1,22 +0,0 @@
-<!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>Dropdown</title>
-    <link rel="stylesheet" href="solution.css" />
-  </head>
-  <body>
-    <div class="dropdown-container">
-      <div class="dropdown-menu">
-        <button>Dropdown</button>
-        <ul>
-          <li>Item 1</a>
-          <li>Item 2</a>
-          <li>Item 3</a>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

animation/02-drop-down/style.css

@@ -1,37 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.dropdown-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown-menu {
-  position: relative;
-}
-
-button {
-  background-color: rgb(108, 238, 255);
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-}
-
-ul {
-  position: absolute;
-  left: -25%;
-  background-color: rgb(189, 188, 188);
-  width: 160px;
-  list-style: none;
-  text-align: center;
-}
-
-li {
-  padding: 16px;
-}

animation/02-pop-up/README.md

@@ -0,0 +1,20 @@
+# Popup
+
+In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot!
+
+You don't need to worry about the actual functionality here, we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop.  Your task then is to make it _move_, as in the desired-outcome image below.
+
+### Hints
+- "modal" is another word for 'pop-up'
+- In the code we've provided, the popup is sitting in it's final position, so you'll need to change it's initial position, and then use a transition to move it back to the center.
+- You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button.
+- Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
+
+## Desired Outcome
+
+![outcome](./desired-outcome.gif)
+
+### Self Check
+
+- The pop-up slides down into position when you click the open button, and slides back up when you click 'close modal'
+- The opacity fades smoothly in and out when toggling the modal. 

animation/02-pop-up/index.html

@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <div class="backdrop"></div>
+    <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
+      <button id="close-modal">Close Modal</button>
+    </div>
     <div class="button-container">
       <button id="trigger-modal">Open Modal</button>
     </div>
-    <div class="popup-modal">
-      <button id="close-modal">Close Modal</button>
-    </div>
     <script src="script.js"></script>
   </body>
 </html>

animation/02-pop-up/script.js

@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);

animation/02-pop-up/solution/solution.css

@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  overflow: hidden;
+}
+
+.button-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #ffffff;
+  opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  padding: 20px;
+  color: #ffffff;
+  background-color: #0e79dd;
+  border: none;
+  border-radius: 5px;
+  font-weight: 600;
+}
+
+.popup-modal {
+  padding: 32px 64px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0%;
+  text-align: center;
+}
+.popup-modal p {
+  margin-bottom: 24px
+}
+
+.backdrop {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0%;
+}
+
+.popup-modal.show {
+  opacity: 100%;
+  pointer-events: all;
+}
+
+.backdrop.show {
+  opacity: 30%;
+}
+
+/* SOLUTION */
+
+.popup-modal {
+  transition: transform .3s ease-in-out, opacity .4s ease;
+  transform: translate(-50%, -100%);
+}
+
+.popup-modal.show {
+  transform: translate(-50%, -50%);
+}
+
+

animation/02-pop-up/solution/solution.html

@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="solution.css" />
   </head>
   <body>
+    <div class="backdrop"></div>
+    <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
+      <button id="close-modal">Close Modal</button>
+    </div>
     <div class="button-container">
       <button id="trigger-modal">Open Modal</button>
     </div>
-    <div class="popup-modal">
-      <button id="close-modal">Close Modal</button>
-    </div>
     <script src="solution.js"></script>
   </body>
 </html>

animation/02-pop-up/solution/solution.js

@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);

animation/02-pop-up/style.css

@@ -12,17 +12,12 @@ body {
   height: 100vh;
   background-color: #ffffff;
   opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-#trigger-modal,
-.popup-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-#trigger-modal {
+button {
   padding: 20px;
   color: #ffffff;
   background-color: #0e79dd;
@@ -32,23 +27,37 @@ body {
 }
 
 .popup-modal {
-  width: 30%;
-  height: 15%;
+  padding: 32px 64px;
   background-color: white;
   border: 1px solid black;
   border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10%;
-  opacity: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0%;
+  text-align: center;
+}
+.popup-modal p {
+  margin-bottom: 24px
 }
 
-#close-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
+.backdrop {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0%;
 }
+
+.popup-modal.show {
+  opacity: 100%;
+  pointer-events: all;
+}
+
+.backdrop.show {
+  opacity: 30%;
+}
+

animation/03-pop-up/README.md

@@ -1,28 +0,0 @@
-# Popup
-
-Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
-
-In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup. 
-
-The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
-
-When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
-
-### Hints
-- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
-- Multiple transitions will be required
-- Pay close attention to the elements being altered with classes being added or removed
-
-## Desired Outcome
-
-![outcome](./desired-outcome.gif)
-
-### Self Check
-
-- The mouse cursor changes to a pointer over the buttons
-- A drop shadow gets added to the buttons when the mouse hovers over them
-- The popup modal appears when the Open button is clicked
-- The background fades to black with 40% opacity when the popup is opened
-- The popup smoothly slides up to cover the existing Open button
-- When the Close button is clicked the popup modal slides back down and gradually disappears
-- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button

animation/03-pop-up/solution/solution.css

@@ -1,116 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  overflow: hidden;
-}
-
-.button-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #ffffff;
-  opacity: 100%;
-}
-
-#trigger-modal,
-.popup-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-#trigger-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
-}
-
-.popup-modal {
-  width: 30%;
-  height: 15%;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10%;
-  opacity: 0;
-}
-
-#close-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
-}
-
-/* SOLUTION */
-
-/* 
-  Disclaimer: duplicating selectors here isn't best practice.
-  We separated it out here to make it extra clear what has changed. 
-*/
-
-.button-container {
-  transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
-}
-
-.button-container.show {
-  background-color: #000000;
-  opacity: 40%;
-}
-
-#trigger-modal:hover,
-#close-modal:hover {
-  cursor: pointer;
-  box-shadow: 1px 1px 2px #000000;
-}
-
-/* 
-  Keep this '.popup-modal' selector separate from the main 
-  .popup-modal selector, for the reasons outlined above 
-  .pop-up-modal.show
-*/
-.popup-modal {
-  visibility: hidden;
-  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
-    visibility 0.5s linear;
-}
-
-/* 
-  The common properties between .popup-modal and .popup-modal.show 
-  can easily be added by just adding this selector to the main 
-  .popup-modal selector
-*/
-.popup-modal.show {
-  width: 30%;
-  height: 15%;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 90px;
-}
-
-/* 
-  Keep this selector separate from the main '.popup-modal.show'
-  selector.
-*/
-.popup-modal.show {
-  opacity: 1;
-  visibility: visible;
-  margin-top: 0;
-  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
-    visibility 0.5s linear;
-}

flex/03-flex-header-2/solution/solution.css

@@ -52,7 +52,6 @@ ul {
 .header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   padding: 8px;
 }
 
@@ -67,4 +66,4 @@ ul {
   display: flex;
   align-items: center;
   gap: 16px;
-}
+}

flex/05-flex-modal/README.md

@@ -1,7 +1,7 @@
 # A common 'modal' style
 This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be.
 
-### a hint
+### A hint
 Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
 
 ## Desired outcome
@@ -15,4 +15,4 @@ Depending on how you approach this one, you might need to revisit the `flex-shri
 - There is padding around the edge of the modal.
 - The header, text, and buttons are aligned with each other.
 - The header is bold and a slightly larger text-size than the text.
-- The close button is vertically aligned with the header, and aligned in the top-right of the card.
+- The close button is vertically aligned with the header, and aligned in the top-right of the card.

foundations/02-class-id-selectors/README.md

@@ -5,7 +5,7 @@ There are several elements in the HTML file provided, which you will have to add
 
 It isn't entirely important which class or ID values you use, as the focus here is on being able to add the attributes and use the correct selector syntax to style elements. For the colors in this exercise, try using a non-keyword value (RGB, HEX, or HSL). The properties you need to add to each element are:
 
-* **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` as the first option and `sans-serif` as a fallback
+* **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` and `DejaVu Sans` with `sans-serif` as a fallback
 * **The second element**: blue text and a font size of 36px
 * **The third element**: in addition to the styles for all odd numbered elements, add a font size of 24px
 * **The fourth element**: a light green background, a font size of 24px, and bold

foundations/02-class-id-selectors/solution/solution.css

@@ -1,6 +1,6 @@
 .odd {
   background-color: rgb(255, 167, 167);
-  font-family: Verdana, sans-serif;
+  font-family: Verdana, DejaVu Sans, sans-serif;
 }
 
 .oddly-cool {
@@ -16,4 +16,4 @@
   background-color: hsl(120, 100%, 75%);
   font-size: 24px;
   font-weight: bold;
-}
+}

grid/01-grid-layout-1/solution/solution.css

@@ -1,5 +1,13 @@
+body, html {
+  height: 100%;
+  margin: 0;
+}
+
 .container {
   text-align: center;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .container div {
@@ -49,25 +57,12 @@
 
 .header {
   grid-column: 1 / 3;
-  grid-row: 1 / 2;
 }
 
 .sidebar {
-  grid-column: 1 / 2;
   grid-row: 2 / 4;
 }
 
-.nav {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
-}
-
-.article {
-  grid-column: 2 / 3;
-  grid-row: 3 / 4;
-}
-
 .footer {
   grid-column: 1 / 3;
-  grid-row:  4 / 5;
 }

grid/01-grid-layout-1/style.css

@@ -1,5 +1,13 @@
+body, html {
+  height: 100%;
+  margin: 0;
+}
+
 .container {
   text-align: center;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .container div {