Congratulations page draft 1

[brad-lowe]

Add .svg images and begin congratulations page layout

[netlify]

✅ Deploy Preview for pen-pals ready!

Name	Link
🔨 Latest commit	7653a4e
🔍 Latest deploy log	https://app.netlify.com/sites/pen-pals/deploys/6286b8d07875b2000893d8e2
😎 Deploy Preview	https://deploy-preview-19--pen-pals.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[reginawang3495]

Not exactly sure what you needed help with, but if you wanted to see your Congratulations page, don't forget to make sure that it's rendered on the page, e.g.

 import '../../styles/ExerciseSide.scss';
+import Congratulations from '../Congratulations';

 function ExerciseSide(): JSX.Element {
-  return <section id="exercise-side-container"></section>;
+  return <section id="exercise-side-container">
+    <Congratulations/>
+  </section>;
 }

 export default ExerciseSide;

Anything else I can help with?

[brad-lowe]

Draft 2, need help with the "Try these next!" text, congratulations text, and the turtle staying where they're supposed to

[8BitRobot]

Hi! So here's what I've found with respect to a working solution for centering the speech bubble:

1. On #congratulations-container, the units for width and height should be vw for width and vh for height, not vmin. vmin forces both dimensions to be scaled relative to the smaller dimension of the screen, which isn't really what we need here because the primary target audience for this learning lab is in fact people using a computer. We can make it responsive in other ways; this isn't the most effective way to do so. In addition, you can set both width and height to 100vw and 100vh respectively: since this is the container element, it's better for it to fill the entire screen.
2. Also on #congratulations-container, we can add justify-content: center to make that element centered. This element already has Flexbox enabled, from what I can tell, so there's no need to adjust anything else apart from adding that.
3. On #speech-bubble-container, which is currently a relatively positioned element, you should add a top attribute (with percentage units) to shift it down the page. This element doesn't need to be centered perfectly because the elements above and below (a.k.a. the header and the dog-cat buttons) aren't positioned uniformly either, so feel free to just eyeball it with respect to how much you shift it down.

Assuming your code looks like mine, the above steps should do well to position the speech bubble and respond to most reasonable screen sizes.

And here's some other stuff I found:

• You should remove the width attribute from the header image, it's fine to have it at its natural sizing. We're not targeting mobile devices with this learning lab, so (for now) there's no need to make it smaller than it is (and especially not with pixel sizing).
• Don't use percentage units on the border-radius for the dog and cat boxes; instead, check the Figma for the exact pixel values and just use those. Border radii are typically designed to be exact measurements, not relative or responsive; so it's best to just use pixel values here. Figma will tell you what values you need.