My Product Landing Page

hello there!
here is my 3rd project: PRODUCT LANDING PAGE
link: https://codepen.io/immanishbainsla/full/XPPEeV/

other Projects link:
TRIBUTE PAGE: https://codepen.io/immanishbainsla/full/oPpgRK/

SURVEY FORM: https://codepen.io/immanishbainsla/full/eLyVgP/

every project is open for suggestion;
thanks for viewing;

1 Like

Need to work on your responsiveness. It’s not mobile friendly. All the pictures are stretched out, and the content is all mixed in together, and over lapping on a phone view

2 Likes

Done. @Cody_Biggs
check it now review again.
thanks for suggestion.

Hi! So I see you made some changes to make it responsive. Good job!
Although, one cop out. The main photo of burger on a tablet seems to
out stretch the viewport. Although easy fix just adding one more media
query check for that photo. Also having a main header to go with that photo
would help you realize instantly what the purpose of the page is. Like a
company name or something. The about nav bar button does not work btw.
Other than those small things looks VERY nice. Well done.

1 Like

This might be good to look over for future reference

On top of what @bmansk8 said. I would fix the spacing after the contact text there’s just way to much of empty space

3 Likes

thanks for suggestions, i would try to fix all that. @bmansk8
and thanks for suggestion , i loved that:slightly_smiling_face:
i hide NAV in media query for mobile view, i will also fix that.

i will change the margin-top of contact and this will result in less spacing on top of contact @Cody_Biggs
also it will be a learning task for me if you do it in another way.

  1. Don’t use meta refresh <meta http-equiv="refresh" content="60"> (i actually think it is even crashing the page on codepen for me).

  2. You are not passing the test, remove the class=“nav-link” from the nav li's and move them to the nav a links. Then add the about id to the about section.

  3. I would really like to to see you bring in a font, look on google fonts and find one you like.

  4. There should not be overflow on the about boxes (and no need for overflow-y auto), it is caused by you setting a fixed height.

1 Like

I used it as live update feature so that I don’t have to refresh it every time I check while coding. @lasjorg

Seems like an odd way to work. Why don’t you just use codepen’s “Auto-Updating Preview” setting instead? Also it doesn’t work for me on codepen, i just get a blank white page when it does the refresh.

If you mean you are using it on local dev work, then there are much better ways to do it, e.g. using the Live Server extension on VS Code (it has live reload build-in).

You still need to fix the page so it passes the test. :wink:

1 Like

it works on like sports websites where score updates frequently, so to make user updated they use that.
it’s not working on codepen bcz we are using “IFRAME” to show preview, but if we use it on our websites it works properly.

BTW thanks for LIVE SERVER extension on VS Code:slightly_smiling_face:
also the Auto-Updating Preview is for PRO’s i guess.

  1. That seems like a really bad way of syncing data to the page, like really bad.

  2. I know, so it might be helpful if you removed it from your codepen.

  3. No “Auto-Updating Preview” is under Settings > Behaviour > Auto-Updating Preview

1 Like

Ok, I got it.
I will remove it.
Again thanks for suggesting auto updating preview, I didn’t know about it, 8 thought that this is a pro feature.
@lasjorg

Thanks @FintanOToole for loving this post…:hugs:

A humble request to u all viewers pls have a look at other PROJECTS too,
i have given links too;

here are the links again for ease:
here is my 3rd project: PRODUCT LANDING PAGE
link: https://codepen.io/immanishbainsla/full/XPPEeV/ 59

other Projects link:
TRIBUTE PAGE: https://codepen.io/immanishbainsla/full/oPpgRK/ 26

SURVEY FORM: https://codepen.io/immanishbainsla/full/eLyVgP/ 20

also check this out: http://apjkalam.tk
this is completely free with DOMAIN name and WEB HOSTING…

TRIBUTE PAGE:

You have so many semantic elements at your disposal, but you aren’t using them.

<div id="main"> Make it a main element.
<div id="title"> Make it a header element.
<div id="img-div"> Can be a section element.
<div id="tribute-info"> Might be an article element.
<div id="footer"> Make it a footer element.

SURVEY FORM:

Use the for="" attribute on the labels with their values set to the corresponding input id.

align: center; is not a valid property, add cursor: pointer; to the button.

#submit {
  align: center; /* not valid */
  cursor: pointer; /* add */
}

Move your break point to 830px, or at least no less then 650px


Other than the few little things, you did well. Good job.

Personal preference: I’m not crazy about the colors, their not horrible, but not great either. On the Tribute Page, they almost seem inappropriate (as in not fitting the theme of the page) to me. I guess it depends on the mood you are going for, but they seem a little too bright and happy and not, i don’t know, serious enough.