Landing page (Dite)

I think it’s ready! I’ve submitted it a long time ago since I passed the test but I keep going back to it and implementing new things I learn, playing around with responsiveness.

I’d like to to hear some feedback, maybe anyone has some new ideas for things I could try add or maybe some design tips!

I’m not the best at design, I’m still learning about colors and such, I’d love to start playing with photoshop or illustrator but right now my focus is to learn the coding part.

There is only one thing I am not sure about in the website, I’ve added a bit of an animation on the price at the pricing section, so it goes from opacity:0; to opacity:100;, the problem is it appears to start doing it immediately I load the page, so by the time I get to the pricing bit the animation has finished already. Is there a way to set it so the animation only loads when the viewer scrolls to the section? I hope it makes sense. I did add a delay but that is not helping with the actual issue.

Landing page (Dite)


1 Like

@Dite i think it looks great and professional :slightly_smiling_face:

as for your price section problem you could add it to your scroll listener to only change when the page is at that scroll height, like you done to your header, also another thing i noticed was when you hover on the button it changes the font size, doing this moves the content around it so a better way would be to add transform: scale(1.1); instead,
keep up the good work :slightly_smiling_face:

Your page looks good @Dite. Couple of things,

  • There’s a typo on line 215 in your CSS section. (A stray “s”)
  • The navbar overflows a bit on smaller screens

I think the landing page looks good and professional. But on larger screens (> 900 px) the subheadline under “The future of tech is here” is hard to read because the lines are so long. Maybe it would be good to give this text a max-width and add some padding to the top and bottom. You could for example give the p-tag a class=“subheadline” and then add something like this to the CSS:

.subheadline {  
  padding-top: 2rem;
  padding-bottom: 2rem;

@media only screen and (min-width: 900px) {
  .subheadline {
  max-width: 50vw;
  margin-left: auto;
  margin-right: auto;  
  font-size: 1.5rem;

Looks pretty good, I like the colors.

  1. I’d use a different hover effect on the nav links. Same for the footer. It looks a bit odd to me. And as said, try using transforms for hover transitions that move or size elements (they look and perform much better).

  2. Limit the line length on the .product paragraph. You can use max-width and margin auto.

  3. Increase the speed of the flip card transition, otherwise, the “illusion” starts to break.

  4. Your media queries for the cards are broken. They stack, then unstack and then stack again. Check the logic of the media queries and don’t use a range unless you really have to. It can complicate things and is a bit harder to reason about. Your nav seems to be following the same pattern, but it doesn’t really break anything as it does with the cards.

  5. I would try adding more content to the sections, like headers, some paragraphs or other graphical elements. They feel a little empty.

Good job, keep it up!

Hi @lasjorg,
Thank you so much for your feedback! All very very valid points!

I must say I’ve been thinking about the broken media queries for hours and I had no idea what you mean until I checked the responsiveness by just resizing my browser window. Seems like my website is a bit psychotic, doesn’t really know what it wants to be hehe. This is what you get when you KIND OF understand something but not really, media queries are my least favourite part because I have a hard time figuring it out. At least now I know not to just check by device in dev tools but try resizing the window and see how it all acts and flows. I’ll try work on it but it’s gonna take me time to understand my mistake. I’ll definitely update the post when I figure it out.

Thanks for the other bits as well, I’m thinking of a bit of an upgrade to the page, you said exactly what I was thinking myself that the sections are bit empty. A bit of a revamp might be good for it :slight_smile:

I love the ideas on the page
I will try and recreate this kind of design then add on some few more features