Rubber Duck Landing Page

Code Feedback
1

I made a landing page for the rubber ducks. The Pricing section is a bit buggy. The box for each price just takes up the width of browser window instead of being centered. Any feedback or comment is appreciated.

Debuggin Ducky

1 Like
2

bahahah I Love it!
I’d post a pic of my favorite duck but I don’t want the image swiped so…

*I happen to collect rubber ducks- long before I heard this story at my bootcamp earlier this year.

Ahem… sorry. Only thing I can say right now is maybe add a little more color to background or something? I’m not good at design so…

Hmm some other thoughts:

  1. On resizing the browser window- the nav bar isn’t adapting and the video is still full sized.
  2. *** Never mind- I forget that my zoom level on my browsers are higher than 100%- that’s why it looked uneven*** when the browser window is full screen the three buttons in the pricing part don’t line up- different distances from the bottom. Interestingly they look like they’re all positioned the same distance from the bottom when the window is resized. Maybe position: relative?? :man_shrugging:
  3. I only wish I had thought of this for my product landing page! (I skipped for now- couldn’t come up with an idea…)

Nice work!

3

I have a duck sitting on top of my computer speaker next to the monitor. So whenever I’m stuck I just look at the duck and explain how I got myself into this buggy mess. I felt silly when I first did it but the duck helps a lot.

The three pricing boxes are a little wonky because this is what I used:

@media (min-width: 768px) {
  .pricing-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

I think I should add another media query for smaller screen sizes for that.