Product Landing Page - VPN

Code Feedback
1

Hi all. After small break from coding and FCC I’m back with my product landing page - VPN Service.

Let me know what you think about it. Any ideas, things to fix or change - let me know.

Any feedback appreciate :slight_smile:

Product Landing Page - VPN Service

1 Like
2

So I found few problems - in terms of how web page look like on different devices - and again - checked on phones tablets and PCs and page look ok.

Hope You like it :slight_smile:

3

Hi @EmilNici, your page looks good. Something to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • you have a couple of typo’s in your two of your media queries that will affect how your page displays
4

Remove the ‘max-width: 1600px’ from <body>, or give it ‘margin: auto’ and set the background to the <html>. Otherwise, on screens bigger than your max-width, the content is not centered and there is no-background strip on the right. Besides that, looks good.

5

Great work,

I like it!

Some ideas:

  • General Text: you uppercased all text, makes it hard to read for me, especially in the section “What VPN Can do For You?”
  • Price boxes: Billed ~~$359,76~~ **$129,99** every 24 months is hard to read in one line, I would stack it.
6

First of all I would like to thx for feedback :slight_smile:

Roma - I was just checked my typo’s and they “fixed” :slight_smile:

AZBosakow - I change ‘max-width’ to 'margin: auto; and yup - looks better :slight_smile:

miku86coding - I was change the fonts to ‘Roboto’ and now hopefully is now more readable and I was stacked the price boxes

Hope now is better, thx :slight_smile:

1 Like
7

This is a great subject on which to do a product landing page on.

The problem with this is that it isn’t very responsive.
It won’t really fit on my screen and on a phone, it looks like it’s been ripped apart.
Try to use css flexbox and grid to make the site fit properly in browser sizes of desktops to phones.

The nav bar’s color doesn’t really match with the rest of the site. Try changing the color a little brighter.

At everything else, great job.

Keep up the great work!

8

You right. Didn’t done ‘@media’ at all.

Just done few things and hopefully now web page is responsive (checked on iPhone and iPad) and look ok :slight_smile:

1 Like
9

It’s better but still has a little bit of responsivity issues.

Try changing the codepen view to the image below:

Codepen%20Layout
Codepen%20Layout2728×1616 479 KB

You can resize the viewer screen to the scale size of a phone:

Phone%20Scale
Phone%20Scale2728×1616 478 KB

That’s how I keep my websites responsive when working on codepen.

10

ConnerOw1115 - thx man for that - its really really helpful.

I change now few things and I hope it is fine right now.

And sorry that I wasn’t available and done nothing in the last 20 days :frowning:

1 Like
11

your page looks awesome but I have a question that in above of the page shows html, javascript and css., why?

12

Codepen is an online code editor, so the code generating the page is visible, accessible and editable.

14

You did a good vpn landing, but I think you should work better on the mobile version of the page…2020=Mobile first!

image
image1395×871 249 KB

I also made a new landing for my vpn website, we have been improving the mobile version for a long time =(( But we now have a good performance in google console.