Product Landing Page - what did I do wrong?

Code Feedback
1

Is the approach correct in general?

A few of the things which don’t seem to work:
Most images
The row of cards looks different on Codepen than in my local server and shows on the jumbo
The carousel is all wrong Codepen (locally it’s almost right)
The icons don’t show at all

1 Like
2

In codepen, if you’ve to use external stylesheets through cdn, then you’ve to add them in settings->CSS…
All the head stuff also goes in pen settings…
You’ve to write only body in the html editor

2 Likes
3

Hello @MarcoPolo.

  • The reason images are’nt working is because the img element has a wrong attribute. Instead of src, you wrote source.
  • The reason icons and layout is not working is because you linked it incorrectly. As @mukeshgurpude said, codepen already sets this for you. No need of adding the entire HTML elements. Only write code that goes in the body tag. If you want to link to external resources, please use the settings icon at the top of the HTML box and paste the code inside the “Stuff for head”.
  • The reason your JS code is’nt working is because you need to add it inside the JS box in CodePen. No need to add another script tags.

Hope this helps.

2 Likes
4

Thanks! I fixed everything you said now but the carousel still isn’t working.

1 Like
5

Is the javascript code you wrote jQuery? If yes, please click on the settings icon in the JS code section and then search for jQuery in the resources box.
Please reply whether it works or not.

6

I didn’t write any JS… it’s all done by Bootstrap.

This is the JS source:

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>