Minimalist Product Landing Page - Appreciate your feedback!

Hi!
I just finished my Product Landing Page project.:partying_face::partying_face:

What I wanted to achieve is:

  • semantic html
  • pure html / css code (without javascript)
  • mobile first design
  • good accessibility
  • minimalist design

Known issue: the menu is not hidden after clicking on the links. You have to close it with the icon.:expressionless:
I could not solve this only with HTML / CSS. Does anyone know if it is possible (with pure HTML / CSS)?
I know that with JS it is possible, but I don’t want to add js until I study it.

I would appreciate your feedback, especially if you find any error or aspect to improve.:muscle::wink:

10 Likes

I like that design looks great, a question how did you underline the letters?

I still have to complete my projects of the front end module xD

1 Like

Hi @PabloHernandez! Thanks for your feedback :wink:

To implement the underlined words I have placed them within a span with class="accent".
This is my CSS code for that class:

.accent {
    position: relative;
    z-index: 1;
}
.accent::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.25em;
    height: 0.5rem;
    background: var(--accent-color);
    z-index: -1;
}

I hope you find it useful!:wink:

2 Likes

Hi Marta,
I think it’s beautiful.

A small thing: the X to close the menu must be clicked exactly on he line. Maybe you could add a larger transparent container to make it easier to click 


1 Like

Thanks for your feedback @michaelsndr :wink:
I will definitely implement your suggestion! 
 after my neurons rest for a few hours :sweat_smile:

1 Like

Hi Marta,
Looking nice and clean. Good job.

Regarding the code:

  1. I like the fact you are giving the “table of contents” makes it easier to find parts of css.

  2. The class names seem to be readable. One thing that I would improve is make sure that section class name is not the same as id of a element inside it. I.E and .
    Checkout BEM if you have not yet read on it:
    http://getbem.com/introduction/

Regarding your question
I don’t know how to do this without javascript.
With js it is quite easy to do.
Check this out:

// 1. Find the navbar
const navBar = document.querySelector('.nav');

// 2. Run when navbar is clicked
navBar.addEventListener('click', ()=>{
  
  // 3. Find the checked button
  const navButton = document.querySelector('.nav-btn');
  
  // 4. Change the hamburger to not checked to close the menu
  navButton.checked = false;
})
1 Like

I’ts a beautiful design, congrats!!

Qué envidia! :sweat_smile: tienes muy buen gusto. Yo ni siquiera tengo idea sobre qué producto hacer mi proyecto. Saludos!

Wow @DawidGaleziewski! I really appreciate your feedback!:heart:

My initial idea was not to include anything from JS, but since your code is so specific and well explained I probably include it, thanks!:thinking::wink:

Gracias @ricardoantonio!:smile:
Para mi elegir un producto o tema que te guste es bastante importante, pues van a ser varias horas de trabajo!:sweat_smile:

2 Likes

I love this! Excellent job! @MartaFagundez

1 Like

Hey @MartaFagundez! Love your project.
I am a complete begginer, so I’m sorry if the next question is stupid in any way.
I really like the cactus and succulents icons you’ve provided. Have you created them yourself? Or is there a place on the internet for this kind of icons? Good job with the product page. Keep up the good work.

1 Like

Thanks @wjwebdev!:heart:

Hi @Wallachian! Thanks for your feedback :blush:
For the succulent icons, what I did was to download the free vector drawings from Freepik and then I edited them in Illustrator to change the color and add the green circle. :wink:

Well done, once again :slight_smile: I like how clean and professional all of your projects look so far.

Though
 if I had to nitpick, “Explore our collections” button has a typo. It’s “collections”, not “colecctions”.

But besides that, good job. Keep it up :slight_smile:

2 Likes

Thanks for your feedback @Senatrius! I had not noticed that :grin:
I already corrected it :+1:

1 Like

Stunning simplicity and beauty, love it. An eye like that for design is not something you learn easily (I spend more time making my stuff not look terrible than coding it).

As for the navbar closing with CSS only, I don’t know if that’s even possible.
If you want to implement it using JS, here’s my solution

document.querySelectorAll('.nav-link')
  .forEach(link => link.addEventListener('click', () => {
      document.querySelector('.nav-btn').checked = false;
    })
  );

@DawidGaleziewski solution will work, but the navbar will be closed if you click anywhere within it, adding the event listener to the links themselves solves this. Also I do agree with him that BEM is worth checking, it will be specially useful if you learn SASS.

A couple of suggestions:

  • The way the hamburger button is set makes it only work if you click only the lines themselves, which can be frustrating for the user. After a quick glance at the code I saw you used an approach I didn’t really expect. I don’t really do navbar toggling with CSS, but if I remember correctly, the usual approach was creating a checkbox, setting it’s opacity to 0, then designing the hamburger button on top of it. Just letting you now in case you want to dig further in this, but again, this is just me being picky.
  • Why not adding smooth scrolling?
  • If I had to be picky (again), the video looks a bit ‘off’ to me, I think adding some shadow, a bottom border (like a stand maybe) in that green color used through the page would make it blend perfectly. Just my two cents.

But overall, if I were a recruiter, I would probably hire you on the spot seeing the rest of your projects. Keep it up!

2 Likes

Hi @Stahlone! Thank you very much for the time you have invested in your detailed feedback, I appreciate it very much.:heart:

I’m glad you liked the design!:blush:
When I carry out an FCC project, my goal is to create it as if it were for a real client (within my current possibilities and limitations). With that idea in mind the design is, in my case - at least - 50% of the work.:sweat_smile:

I know that I could move faster on my certifications if I only focused on the code, but as I see it, doing it as I do prepares me better for the real world of work.

If I later work as a freelance, I will feel more able to define what I can do and how much time / effort it will cost me (therefore, how much I would like to charge :money_mouth_face:).
If I find work as part of a team, where a designer is in charge of design, then I will find myself better prepared to understand their ideas and eventually be able to have constructive discussions when necessary. Because one thing is the possibilities of a design environment and another quite different what is possible and desirable in a web environment (considering responsiveness, accessibility, etc. :exploding_head:).

With regard to your suggestions, I thank you very much and I will consider them after I finish the technical documentation project, which I am currently working on.:muscle:

Cheers and happy coding!!:keyboard::heart:

1 Like

your work it’so beautiful @MartaFagundez

1 Like

Wow Marta! Your design is very good and clean! Well done! :grinning:
Regarding the issue of the links, sounds to me that colsing the menu requires listening to a click event anyway, so I’m not sure this is achievable with pure HTML & CSS.

1 Like

Thank you very much for your feedback @fchristian97.8 and @iClusterDev!:heart:

Hi Marta,

I think it’s possible to make the menu appear and disappear once you click a link by using the :hover CSS pseudoclass. I tried something similar using a tutorial from another website but I have not tested it on a mobile device. I am not sure I understood it myself so I won’t venture to explain, but it can be found online (not sure if we’re allowed to link to other resources apart from FCC).

It’s an awesome design by the way. Love the minimalist and professional look!

1 Like