Please give me feedback on my Landing Page project (If you like The OFFICE tv show you will get a laugh)

Hi, I would appreciate your honest opinion of my product landing page.
Bonus, if your a fan of the US version of the TV show The Office!
Send me some love if you are! :wink:
ps: I custom designed and made the Page logo as well as the image label and picture.

Click Here => Schrute Farm Beets Product Landing Page

Thanks,
Hal_Jordan
Protector of Sector 2814

1 Like

Very cool share. Huge fan of the show. The custom logo in itself is impressive. The Jim Halpert button is hilarious. My only critique would be that the alignment of things gives a somewhat crooked appearance in the flow of the page, mainly just the pricing portion of the page and the nav-bar. I think adding fixed widths to the first row of priced beet jars would be a good move, maybe even giving each product the 100% width? I messed around with it in inspect mode and it didn’t look bad to me. Other than that maybe put some spacing before and after the quote section? That’s just my opinion. Overall, very cool project and nice execution. Way to go above and beyond with the creativity!

1 Like

Hi @christianh467 , I really appreciate your feedback. I’m also a huge fan of the show. I love doing custom logos and the Graphic Design side of things.
Please click the above link again and check it out. I made adjustments as per your points. Please let me know what you think.

Anyone else’s feedback is welcome!

Thanks,
Hal_Jordan

1 Like

Looks awesome! Great work :+1:

1 Like

@christianh467 thanks again for your input and I’m glad you liked it!

Well, sir, you asked: 1st, Happy Veterans Day!
Within the first 3 seconds of seeing your page I see that you are selling beets in 4 sizes. The header and logo are very clean. The pricing could use some work as Christian suggests. Reducing the name “Battlestar Galactica Size Jar of Beets” just “Galactica Size Jar of Beets” might reduce that header to 2 lines. Showing the 3rd line causes the illusion of crookedness.
For me, the video is a turnoff.
My suggestion would be to take everything related to i to another page. You are selling beets, not a movie or TV show.
A personal hangup: No physical address = no purchase. Every page needs good contact information.
Are they sugar or red beets? From the USA (northwest) or from Costa Rica? Or even North Africa? Shipped within a week or 6 months? Two or three lines of text would motivate me to look deeper into your site.
I hope this helps you.
PS: How is the State Park recovering after the fires? Thanks.

Hi @FKlusmann, thanks for your input.
I did consider removing the word Battlestar as well. I guess I was just being a stickler to the show, but I will remove it since it seems to hang everyone up.

Just to clarify this is my 4th project under the freeCodeCamp responsive web design, and I was only going for the parameters of building a Landing Page and not a full blown website.
The video player is one of the parameters and show’s the proof of concept. This particular video is mainly just for fans of the TV Show. But I do see your point.

FYI these were the parameters:
Objective: Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks

User Stories:

  1. Your product landing page should have a header element with a corresponding id="header"
  2. You can see an image within the header element with a corresponding id="header-img" (A logo would make a good image here)
  3. Within the #header element, you can see a nav element with a corresponding id="nav-bar"
  4. You can see at least three clickable elements inside the nav element, each with the class nav-link
  5. When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page
  6. You can watch an embedded product video with id="video"
  7. Your landing page has a form element with a corresponding id="form"
  8. Within the form, there is an input field with id="email" where you can enter an email address
  9. The #email input field should have placeholder text to let users know what the field is for
  10. The #email input field uses HTML5 validation to confirm that the entered text is an email address
  11. Within the form, there is a submit input with a corresponding id="submit"
  12. When you click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit)
  13. The navbar should always be at the top of the viewport
  14. Your product landing page should have at least one media query
  15. Your product landing page should utilize CSS flexbox at least once

Fulfill the user stories and pass all the tests below to complete this project.

PS: The State Park has somewhat recovered, but still a lot of dead burnt trees around.
Thanks again for your thoughts’.

I came across your request while searching for something on the CodeCamp. Until your reply I had not even considered it to be part of a project. I even had to register again to comment as my original sign-in expired.
As with one of my favorite drills, 3 -4 students look at one monitor. A link is opened, and after a few seconds the monitor is covered. Quick questions are asked: What is the site about? What do you expect to see there? How much time would you spend on it?
Then the “why” is asked. I believe that leads to more productive sites.
– Fred

Thanks for your input and taking the time to respond. :smiley:

You are welcome. Stay well.

1 Like