Completely stuck on product landing page....any help is welcome

HTML-CSS
1

Tell us what’s happening:
Okay, I made it to the product landing page project, but feel like I’m stuck, and I can’t find out why. The ‘help’ provided with the test suite doesn’t bring me any further.
Thanks for your input,
Bas

Your code so far
See https://codepen.io/basvox/pen/QWWjQRE

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

2

I would suggest starting over from scratch. This looks like a clone of the example with the same layout and code.

The examples should be used for visual aid and goals. The learning part comes when you create your own project from scratch.

Happy coding!

1 Like
3

Hi there! Upon reading what tests your page failed, I noticed a few things:

  1. You have a section AND the iframes both with the ID “video”., however ID’s are for a single element. You’ll want to change the <section id="video"> id to something else, like “in-action” or whatever you’d like.

  2. The second test your page failed is that the navbar needs to be fixed to the top… meaning when you scroll down, it should scroll with you while staying at the top of the window. You can do this by adding position: fixed to the navbar.

  3. Your soundcloud element isn’t centered… might want to fix that. :wink:

Other than that it looks good to me, though like @pjonp said you might want to do something a bit more unique, to maybe learn a bit more rather than mostly copying from the example. :slight_smile:

2 Likes
4

thanks for helping me out.

I changed the id=video of the iframe, and changed nav bar position into ‘fixed’…but still have the same problem. I copied working code and created a mess, which I don’t understand!

First I want it working, then I’ll focus on the design.

1 Like
5

Sorry for the delayed response!

Try setting your header to position:fixed instead, that way your image will scroll with the page as well. :slight_smile: When I changed it to that you passed all the tests.

To fix your pricing/product boxes, you need to add display: flex to your “buy” ID, and set it to flex-flow: column in the mobile media query. (650px i assume you have it set as?)

And adjust the width of your header element to 100%… That should get your code working, more or less.

Moving forward, I suggest you practice on keeping your code a bit more organized. that way, it will be easier to figure out what you need to adjust, fix, add, etc… without having to refer to where things are in the HTML all the time. Though I know you mentioned you copied from the example, it’s still a good thing to keep in mind. :slight_smile:

And as for the design, it’s actually easier (and more educational) for the most part to design on even just paper first, before jumping into code… that way you can lay out the code/page in a more organized way. :wink: But I digress, it’s of course your page - code/design it however you like. ^^

1 Like