Here is my product landing Page

https://codepen.io/Jman11/pen/rodWbb

Feedback welcome

2 Likes

I love it! The email form at the bottom could use some work, and you misspelled sleep, but other than that, it looks great!

@LloygGarmadon thanks! I fixed the spelling mistake and added a div with an inner box shadow around the email form.

Your landing page looks great! I really like how you imposed the logo over the jumbo image.

I agree with @LloygGarmadon that the email form needs more work. I don’t think adding a box shadow helped. The email form input and its container are very small compared to the other elements on the page. My suggestion would be to make that section wider, the same width as the video and text above it, and also increase the size of the text in the field and the size of the button.

My other suggestion is to have the elements of the navigation (contact us, info, video) correspond to what is actually on the page. So maybe like Info, Video, Newsletter.

Another thought that came to my mind. Usually landing pages have a Call to Action (CTA) featured above the fold of the page. If your CTA is the email signup you might want to consider bringing it higher up on the page.

Great work so far!

@LisaLoop thanks for the feedback, I will implement some of the changes you suggested.

I noticed something straight away that has me scratching my head when I was changing the names of the navigation links. The links are reversed compared to how they are in my HTML

  <nav id="nav-bar">
            <ul>
                <li><a href="#info-box" class="nav-link">Info</a></li>
                <li><a href="#my-video" class="nav-link">Video</a></li>
                <li><a href="#form" class="nav-link">Newsletter</a></li>
            </ul>
        </nav>


#nav-bar {
    background-color: #000;
    height: 50px;
    position: fixed;
    width: 100%;
}

.nav-link {
    display: inline-block;
    float: right;
    margin: 0 10px;
    text-transform: uppercase;
    color: aliceblue;
}

Any ideas why this is?

I hope you can understand my explanation. The first link floats to the right and as there is no element floating in that place, it is positioned in the upper right. Then the next link in the same way floats to the right but since there is already a floating element it is placed on the left side and the next element follows that behavior. Sorry but it’s been a while since I wrote in English. Greetings from Peru
Check the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Great! The email form is looking a lot better.

I like it
but in your contact section try to add some more input fields

@peyuking09 is right. The other issue is the .nav-link class is on the a tags inside of the LIs. You probably want to target the LIs instead. Then you can position the entire element together and retain the order.

.nav-link {
/*     display: inline-block;   */ 
/*     float: right; */
    margin: 0 10px;
    text-transform: uppercase;
    color: aliceblue;
}

ul > li {
  display:inline;
  text-transform: uppercase;
}