Iceberg Guitars Product Page Feedback

Hello everyone! This is my third project, the product landing page!

Please give me some feedback on how I can improve the design and format the nav-bar better. I also welcome any other suggestions.

Best, Cy499_Studios

1 Like

Hey @Cy499_Studios!

I think your page looks good.

For the nav bar you could try something like this

nav ul li {
  text-align:center;
  text-transform:uppercase;
  margin:5px;
  border-radius:5px;
  background-color:white;
}

You could also try out the css smooth scroll feature.

html {
  scroll-behavior:smooth;
}

Lastly, you are repeating a lot of the same properties for different css selectors in the features section. I think it would be better to just group selectors that share the same styles and cut down on repetition.

Hope that helps!

Great job!

Hey! thanks for the tips!

I love the Nav-bar idea and smooth scrolling and will implement both in my next coding session. I also realize that the background color of the page is wonky with rest of the color science so I’m just going to change to white, also I’m having trouble understanding what you mean by

Please explain just a little bit more about the issue and some tips on how to fix it.

Thanks so much, Cy499_Studios
:slight_smile:

Oh, and I forgot to tell you that I ran the entire project through the w3 code checker (html and CSS separately, of course) and both turned out fine, Forgot to mention that in the original topic.

:slight_smile:

In your code you have written this:


      #bronze-tier {
        font-size: x-large;
        text-align: center;
        color: rgb(0, 0, 0);
        background-color: #cd7f32;
        background-position: center;
        position: relative;
        background-size: auto;
        border:30px; 
        border-style:solid; 
        border-color: #800020; 
        padding: 20px;
      }

      #silver-tier {
        font-size: x-large;
        text-align: center;
        color: rgb(0, 0, 0);
        background-color: #C0C0C0;
        background-position: center;
        position: relative;
        background-size: auto;
        border:30px; 
        border-style:solid; 
        border-color:#59b6c29c; 
        padding: 20px;
      }

      #gold-tier {
        font-size: x-large;
        text-align: center;
        color: rgb(0, 0, 0);
        background-color: #e8b923;
        background-position: center;
        position: relative;
        background-size: auto;
        border:30px; 
        border-style:solid; 
        border-color:#710ca09c; 
        padding: 20px;
      }

This is a lot of repetition that can be simplified like this:

      #bronze-tier, #silver-tier, #gold-tier {
        font-size: x-large;
        text-align: center;
        color: rgb(0, 0, 0);
        background-position: center;
        position: relative;
        background-size: auto;
        border:30px; 
        border-style:solid; 
        padding: 20px;
      }

      #bronze-tier {
        background-color: #cd7f32;
        border-color: #800020; 
      }

      #silver-tier {
        background-color: #C0C0C0;
        border-color:#59b6c29c; 
      }

      #gold-tier {
        background-color: #e8b923;
        border-color:#710ca09c; 
      }

Ok I understand, I forgot I could stack CSS identifiers, will implement soon​:grin::grin:.

Thanks for your help in making me a better Dev,

Best, Cy499_Studios