Landing Page - Feedback and comments

[frogcoin82]

Hi everyone,

Thank everyone helping me in the tribute and survey, now i made the Landing Page, the first time i did it to pass all the tests, the second time i added all the details i wanted but the design looked very bad, today i redid the page a third time but now working with flexbox and trying to include all the elements that were in the example landing page and im very happy with the results, please note that im not a genius with color picking so the colors may not look the best but i redid the page to apply the flexbox.

for the media i applied a different color for small screens trying to lower the blue (blue filter to avoid eye strain lol).

the page is just a joke so dont take the content too seriously.
feedback and comments to improve are welcome.

edit: is there a way to add the style of the iframe internal instead of inline? i could not find the way.

https://codepen.io/frogcoin82/full/BaRmEZQ

[michaelnicol]

Nice page - I like the passion and idea behind it. I also liked Loki and I am glad you are being creative. When you first start off in web design it can take many webpages until you figure out a style you like. I would say you are on the right track and the webpage looks nice.

The first thing I notice is that the image and video size are not proportional. The big shirt image when you load up the page is too big and is double the height of my viewport. I am using a 4k display and the image gets upscaled a lot, resulting in it becoming more blurry. You might want to use max-width to cap the width of the image so it doesn’t become 3000 pixels wide on big screens (media code)

(The image I posted is downscaled to fit in the forum post so it won’t appear blurry.)

The image does a good job at drawing attention to the product, but the title of the page is too small and my eyes instantly skipped over it. I would suggest increasing the size of the title, decreasing the height of the image to less then 50vh.

The gray navigation bar blends in with the rest of the page and I didn’t even notice it nor the logo for a few minutes. I would change the color of the navigation bar to black or any other darker color. Then I would apply a box-shadow: 2px 2px 5px black; to the bar to make it pop out. I would also apply box shadow to the blue main box. I also didn’t even notice the navigation items to the far right of the page because they are too far over.

Add this to your CSS for smooth Nav

:root{scroll-behavior: smooth;

Try to find a futuristic font. I use space mono for a more technology/ futuristic font. Use google fonts to find the one you need. If you want to use mine, here is the font code:

@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
body {
  font-family: 'Space Mono', monospace;
}

I also mentioned before that the video was too small. I would suggest making it at least 50% of the width of the blue container.

For your price cards, change the background to white (other then the blue transparent background). Then I would add box shadows to each to make them pop. The prices should also be bigger (first thing you notice) and buttons could be styled.

Good work and happy coding

[mesugareymondrobin]

For me, your website will be more professional-looking if you remove the grey margin on the right and left sides. Btw, your website looks nice for a beginner

[AndyG]

Hello, your page looks great.
I would suggest to improve this part:

The size of the statement “All our outfits are handmade” looks kind of uneven.
I think is a matter of adjusting it . Certainly is important information in a marketing page.
Hope this helps

[frogcoin82]

thanks to all for your comments, its amazing how friendly it becomes to change the style of stuff using the flexbox, i spend a lot of time but it was nice to know easily where i had to go to make the needed changes, it looks a lot nicer now.

@michaelnicol thanks for your recommendations, i did the suggested changes.
*learned the use of VH and VW to scale images.
*applied box shadow to the top-bar & main box.
*fixed position of navigation items.
*learned the use of scroll -behavior:smooth
*applied monospace (looks nice!)
*improved price cards, background, shadows,prices,styled buttons, added some tricks when hovering over price buttons.
-sadly i spend a lot of time trying to make a resizable iframe for the video but i couldnt find a way, i just increased the iframe with better proportions width=“560” height=“315”.

@mesugareymondrobin
thanks for the feedback, i found a better color combination and added a few nice tricks.

@AndyG
thanks for the feedback, as suggested i resized the prison outfit and added a bigger title so the statement below looks with a better proportion.

[michaelnicol]

First off, congratulations on the hard work. Your page has improved and there is some more things that can be done to improve it.

Swap the orange and white background. Black text on orange is hard to read.

The third

100% made by other Prisoners

selling point image (cotten alt) fails to load:

The Nav bar does not take up 100% of the width:

Try adding 0 margin and padding to your body element.

[frogcoin82]

@michaelnicol thanks for your reply.

*done the swap of orange to the background.
*i noticed the top nav-bar detail but i tought it added a bit of style to the page, removed, i only had to add 0 margin, no padding was neccesary.
*fixed the alt comment in the image.

additionally i changed the border color of the combos and increased the shadow to highlight more that area.

[michaelnicol]

The next details I would add are transitions.

The buttons instantly change when hovered over.

Try adding: transition: 0.3s ease-in-out to the buttons so they are smoother.

I would also suggest adding a hover animation to your navigation bar text. transform: scale() the nav-links and add a text-shadow when hovered over. Make sure to pair this with a transition to make it smooth. Keep in mind you can’t use same id twice on the HTML (navbar), otherwise you wont be able to target an individual element later on when you learn front end libraries (jQuery).

I would also add a box shadow to your t-shirt image.

The new color swap looks nice and so does the box shadows.

[frogcoin82]

@michaelnicol thanks for the full tour, i feel happy trying to find out things and discover new ones along the way. i read about transitions but didnt include them as i tought there would be barely a difference but oh boy it does looks nice.

*added transitions to the buttons buy and subscribe.
*for the hover animation in the navigation bar i tried your way but i found out another nice thing along the way, hover and tell me if you like the results.
*added a shadow to the t-shirt.

I added a small nice trick if you hover the TVA logo.

[michaelnicol]

Another part I would add is a credit footer.

For your shadows, make sure all of them face the same direction. I like the animation on the navigation bar text, but the shadows face a different direction then the t-shirt shadow.

---

At the way bottom of a webpage (should be in the footer) put some text giving credit to the person or company who made the webpage. It doesn’t need to be very visible and you can be some white text on your orange background below the main.

For example: On my old codepen account I have a design that is similar in style to yours. Here is my footer (link)

I used black text in this case, but the background was light enough for me to do so.

On a full width webpage you can make the footer bigger. On my tribute page, I put a full scale footer since I went for a 100% width main style (link)

The little icons I use are called font awesome. They can be styled like any text element and when you surround them in a anchor tag, can be used for great social media links. the line is just a hr with a gray background color, box shadow, and a gray border.

---

A btn animation trick I like to use:

1. User hoves over button: Give shadow and scale up the size (noticeable amount).
2. When user clicks: remove the shadow and undo the scale.

It almost makes the button look 3d. You also can manipulate HTML elements in 3D space using translate3d() (link), but I have never tried this and is above my skill level.

[frogcoin82]

@michaelnicol thanks for your reply, i worked on the footer and added some nice animation to practice those tricks, i had no idea i could play with the hr added different effects to the bar while moving.

[michaelnicol]

Nice work, I like the animation.

Now work on your responsiveness.

When the page gets too small, the color turns yellow. Remove that.

Make the main 100% of the width on smaller screens and make the video width 100%. The issue you will run into is making the height of the video correct, so you may need to use a ton of media queries. If I were to make a responsive video I would use jQuery, but you haven’t learned JS yet so it could be something to come back to later.

I would make the nav bar smaller (less height) on smaller screens and remove the nav text. Try to make the logo smaller and center it, remove the text and shorten the height.

Also center the three selling point images in the container on smaller screens.

Add flex-wrap: wrap to your combos in order to make sure your price containers shift on smaller screens.

Make sure to edit all the margins depending on the screen size. For example, the price containers should take up 95 - 100% of the width when the screen gets too small.

[eoja]

Good job overall.

A couple things I noticed are:

1. When hovering over the logo the animation is jerky and stutters. Sometimes works and sometimes not depending on where the cursor is. Sometimes animation is too much. I find myself wanting to do things just because I can, but then have to ask “Does this really add to the user experience or am I doing it because I can?”

2. Hovering over a nav link makes all the other links move. My opinion, not what a user would expect. You can make it so the other links don’t move when one is hovered with html and css.

[frogcoin82]

@michaelnicol thanks, when i checked the page on my cellphone everything went horribly wrong, now i understand better the use of the @media and the best is that i barely had to touch the html, just work on css to give a proper look on smaller screens or mobile devices.

*made the main 100% of the width on smaller screen.
*i learned a bit better to work with the iframe, i added a fix for the video dont get out of the main width.
*smaller nav-bar height and logo for smaller screens, removed nav text.
*i tried working with the flex-wrap but it throws always the combos to a second row, i did a small review on the combos css and they work better on smaller screens.

• sadly in smaller screens the combo features take a second line and ruins a bit the combo box, i was thinking about use a smaller font in the combos for smaller screens but its important to see the features when someone buys.

@eoja thanks for the reply, actually i would have considered as done this project a while ago but thanks to the feedbacks i have learned to apply more things beyond the scope of the landing page project expectations, even googling to find workarounds, every feedback is welcome.

1.- youre right the logo animation is jerky, i did it because it was new to me and wanted to learn how to do it, i found a small workaround and when you hover u will see the text “hold left click” if you want to see the animation.

2.- i thougt that it had a nice effect but for learning purposes i fixed it so the other links dont move.

[eoja]

@frogcoin82

1.- youre right the logo animation is jerky, i did it because it was new to me and wanted to learn how to do it, i found a small workaround and when you hover u will see the text “hold left click” if you want to see the animation.

" it was new to me and wanted to learn how to do it", that’s a very good reason to do it.

I think you may mean “right click”, at least that is how the animation works for me. Also, on a right click the context menu appears. You can disable the context menu so it doesn’t appear, like in your example the user is just enabling the animation and does not need to view the context menu. A lot of people would say not to disable it, they they are probably right for most situations. But there are certain situations where it needs to be disable, for example like a game. This can be done in HTML or JavaScript.

HTML example:

<div id="grid" oncontextmenu="return false;"></div>

JavaScript example:

let grid = document.getElementById("grid");
grid.oncontextmenu = function() { return false };

[michaelnicol]

I would add more fine tuned media queries to control the page. I would have increased the width to 100% earlier then 600 pixels. Maybe add some at around 1000 pixels to increase the width not to 100%, but around 95 - 85%.

For your combo boxes just add a set width to each box, for example, 350 - 400 pixels. Then add flex-wrap: wrap to the flex container that contain the items. Add a media query at 350 pixels and set all of the boxes to 100% of the page width.

Also work on your navigation bar and item logo sizes. Currently, the buying point images are next to the text all the way until the end. I would flex the images and the associated paragraph into a column (image above each text box) on smaller screens. I would also make the images smaller on smaller screens.

add z-index: 9; to the nav bar to prevent the images from overlapping the bar.

[frogcoin82]

@eoja thanks for the disable on contextmenu, read some info to learn a bit more ,ill learn about the JS way when the time comes, added.

@michaelnicol thanks, working on responsiveness, im sorry i did some changes yesterday and today and i mixed everything up, so im not quite sure i applied all the suggestions, naming what i remember so far.

*applied a bigger width around 1000px.
*applied 100% page width at 765px.
*rearranged the view of the content (cotton,recycle,made) for smaller screens.
*applied flex-wrap to combo boxes, a few small changes to your suggestions based on view.
*applied 100% width to combos at 250px.
*added z-index, it does wonders.

i tested the page on chrome,firefox and opera, thats how i saw some issues on responsiveness and tried again after the changes.

[michaelnicol]

Make sure to center your combos:

At around 600 pixels the combos change size:

I would suggest just wrapping them earlier instead of changing the size. Add a minimum width of 350 pixels to the combos then set to 100% on less then or equal to 350 pixels on smaller screens.

Use developer tools (f12 on chrome) and then you can select devices to view your webpage on. This is what the webpage looks like on a iPad Mini.

You can also pick “edit…” on the drop down to get access to more devices then the defualts

[frogcoin82]

@michaelnicol now we are talking, thanks for teaching me about the developer tools, i learned how to view the page in the standard resolutions and realize the error you were showing me, fixed.

• combos centered and wrapped.
• disabled the combos resize at 600px.
• changed combos display to column at lower resolutions.

also worked a bit on the features display (cotton,recycle,made).

[michaelnicol]

At around 600 pixels the buttons can come out of the combo boxes.

Add this to your CSS for smooth Nav

:root{scroll-behavior: smooth;