Product Landing Page

Hi I want to align my 3 a elements to the right side of my navbar with evenly space between them and I wanna keep the logo the left side of the navbar,I’ve tried putting a div before the navbar with a class named container and used flexbox but it didn’t worked

<!DOCYTPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0" />
        <title>Original Trombones</title>
        <link rel="stylesheet" href="productlandingpage.css">
    </head>

    <body>
        <main>
            <header id="header">
                <nav id="nav-bar">
                    <div class="container">
                        <img id="header-img" src="trombone.png" alt="a trombones logo with the name of the compagny">
                        <a class="nav-link" href="">Features</a>
                        <a class="nav-link" href="">How It Works</a>
                        <a class="nav-link" href="">Pricing</a>
                    </div>
                </nav>
                <form id="form">
                    <input id="email" placeholder="" required>
                    <input id="submit" id="submit" href="https://www.freecodecamp.com/email-submit">
                </form>
                <integrevideo id="video"></integrevideo>
            </header>

        </main>
    </body>

    </html>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body {
    background-color: #eee;
    font-family: 'Open Sans', Arial, sans-serif;
}


#nav-bar {
    border: 20px solid blue;
    height: 12vh;
    width: 100%;
}

#header-img {
    width: 100%;
    height: auto;
    max-width: 35vh;
    margin: auto;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
}

Hello!
Getting navbars looking just the way you want them can be pretty tricky. Your code looks to be on the right track from your issue description.

I created a navbar codepen which sounds like it does what you want to accomplish. Have a play with it and see if you can’t acheive the results you are after.

Does this help?

Happy Coding! :slightly_smiling_face:

1 Like

Hello, thanks for the answer it helped a little but I would like to align them just like the build a product landing page example.Right now it look like that


here’s my code:

<!DOCYTPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0" />
        <title>Original Trombones</title>
        <link rel="stylesheet" href="productlandingpage.css">
    </head>

    <body>
        <main>
            <header id="header">
                <nav id="row">
                    <div class="logo">
                        <img id="header-img" src="trombone.png" alt="a trombones logo with the name of the compagny">
                        <ul class="nav-menu">
                            <li><a class="nav-link" href="">Features</a></li>
                            <li><a class="nav-link" href="">How It Works</a></li>
                            <li><a class="nav-link" href="">Pricing</a></li>
                        </ul>
                    </div>
                </nav><br><br>
                <h2 id="h2">Handcrafted, home-made masterpieces
                </h2><br>
                <div class="form-container">
                    <form id="form">
                        <input id="email" placeholder="Enter your email adress" required><br><br>
                        <a href="https://www.freecodecamp.com/email-submit"><input id="submit" id="submit"
                                value="GET STARTED" disabled></a></button>
                    </form>
                </div>
                <div class="text-pictures">
                    <img src="" </div>
                    <integrevideo id="video"></integrevideo>
            </header>

        </main>
    </body>

    </html>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body {
    background-color: #eee;
    font-family: 'Open Sans', Arial, sans-serif;
}


li {
    list-style: none;
    text-decoration: none;
}

#header-img {
    width: 100%;
    height: auto;
    max-width: 35vh;
    margin: auto;

}

#h2 {
    text-align: center;
}


.logo {
    display: flex;
    justify-content: center;
    flex: 100%;
}

.row {
    display: flex;
    flex-direction: column;
}

.nav-menu {
    display: flex;
    justify-content: space-evenly;
    gap: 30px;
    flex: 100%;
}


form-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

form {
    width: 15%;
    margin: auto;
}

#submit {
    position: absolute;
    left: 865px;
    height: 4vh;
    width: 20vh;
    text-align: center;
    background-color: #FFBF00;
    color: black;
    font-weight: bold;
    font-size: 25px;
}

#email {
    width: 30vh;
    height: 3vh;
}

Move the nav-menu out of the logo container so you can create space between the two containers. You can use a left/right auto margin on the elements or use justify-content: space-between on the parent container.

You have a row id on the nav element, not a class so the .row selector does not work.

2 Likes

Thank you for your reply.

@lasjorg makes some very good recommendations. It may also be useful, in any coding exercise, to simplify the problem as much as possible when you encounter a difficulty. In this case, you have an issue getting the entire nav bar to look like the landing page example. So, using an editing tool like codepen.io you can take advantage of the componentization features of HTML and focus on the nav bar in isolation. Remove all of the irrelevant HTML and CSS code, especially margins and padding except thoses specified in the universal selector, keeping only the elements applicable to the nav bar.

It might help also to break down the nav bar into its component parts (e.g. logo and nav links) and work only one of them. Get the logo looking the way you want it and then add in the nav links or vice versa.

Once you have found the right combination of attributes and values, you can add in the padding and margins as necessary.

The previous link I sent you has all the basic parts you need for you to create the design you are attempting to create. You will need to think how you will customise those code elements.

Your most recent version is arguably very close to your desired outcome, so persist with your trials. Success is within your reach.

Does this help?

Happy coding :slightly_smiling_face:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.