Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Hello everyone. I’ve got one problem. I wonder why my logo + the name “Arams weed quality” isnt in “row”. Its shown as column but I made my div logo-container display as flex and normally it should row my items but its shown as column. Any inspirational idea of how I can do that? did I miss something about the logical system of flexbox?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header id="header">
        <nav id="nav-bar">
            <div id="logo-container"></div>
                <img 
                    id="header-img" 
                    src="https://i.ibb.co/5hkTrr7/logolandingpage.png"
                    alt="logo"
                />
                <span>Arams Weed Quality</span>
            </div>
            <ul class="nav-links">
                <li class="nav-link"><a href="#info">Information</a></li>
                <li class="nav-link"><a href="#vari">Variety</a></li>
                <li class="nav-link"><a href="#servi">Service</a></li>
            </ul>
        </nav>
    </header>  
    
    <section id="email-section">
        <h2>Handcrafted, home-made tests</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input
                id="email" 
                type="email" 
                required 
                placeholder="Enter your email address">
            </input>
            <input 
                type="submit" 
                id="submit" 
                value="GET STARTED">
            </input>
        </form>
    </section>
</body>
</html>

/* file: styles.css */
:root {
    --white: hsl(0, 0%, 100%); 
    --text: hsl(0, 1%, 35%);
    --background: hsl(122, 25%, 50%);
}

* {
    margin: 0;
}

body {
    background-color: var(--background);
}

#header-img {
    width: 60px;
    object-fit: contain;
}

#nav-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: var(--white);
    padding: 10px;
}

.nav-links {
    display: flex;
    list-style: none;
    padding: 10px 5px;
}

.nav-links a {
    text-decoration: none;
    padding: 0 10px;
    color: var(--text);
}

.logo-container {
    display: flex;
    align-items: center;
    flex-direction: row;
}

#email-section {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You have added the closing div tag right after the opening div tag here. But that element should contain an image and a ‘span’ element with its text. That is why you have got the vertical order:

<div id="logo-container"></div> .......this </div> tag is surplus here

You already have that closing div tag after the ‘span’ element:

  <span>Arams Weed Quality</span>
            </div>
1 Like
3

omg thanks! I am so blind … I expected that the closing tag of the div is after the span … thanks god I was thinking about that I just dont understand something but it was the placement of the closing tag omg now everything makes sense again

1 Like