Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

losing the will !!, I cannot get the test to accept that my nav bar os on the top , it certainly appears to be be but I am not sure what I am doing wrong ?

Your code so far

<body>
    <main>
      <section class="heading">
        <header id="header">
          <nav id="nav-bar">
            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
          <img id="header-img"
            <img src="https://th.bing.com/th/id/R.8a7e6912c49e455585fd8f0f75826704?rik=jw5uBUXMEjYvhQ&riu=http%3a%2f%2fwww.clipartbest.com%2fcliparts%2fMcL%2fn5g%2fMcLn5ga8i.jpg&ehk=Cpfsv92hagCAjB3UBnsWG7heq5JHwdyD%2fZUG5eLqMDs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" 
            alt="freelogo logo"
            loading="lazy"
            class="hero-img"
            
          />
          
        </header><!-- file: index.html -->


*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: 'Baskervville', serif;
  color: linen;
  background-color: rgb(20, 30, 40);
}
h1 {
  font-family: 'Anton', sans-serif;
}

h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
}
a {
  text-decoration: none;
  color: linen;
}
header{
  background-color: #ffbf00;
  display: flex;
  flex-direction: column;

  justify-content: right;
  padding: 15px;
  align-items: center;
}
#nav-bar{
  display: flex;
}
.nav-link{
    display: flex;
    padding:0px;
    justify-content: left;
    color: black;
    top: 0px;
    display: inline-block;
}

    main {
  display: flex;
   grid-template-columns: minmax(rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem; 
}


img {
  width: 20%;
  object-fit: cover;}

}

.heading {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1.5rem;
}
.main-section {
  grid-column: 2 / 3;
  font-size: 1.8rem;
  letter-spacing: 0.6px;
  column-width: 25rem;
  text-align: justify;
}

.hero {
  grid-column: 1 / -1;
  position: relative;
}
.hero-title {
  text-align: center;
  color: orangered;
  font-size: 3rem;
}
.hero-subtitle {
  font-size: 2.4rem;
  color: green;
  text-align: center;
}
}

.first-paragraph::first-letter {
  font-size: 6rem;
  color: orangered;
  float: left;
  margin-right: 1rem;
}
hr {
  margin: 1.5rem 0;
  border: 1px solid rgba(120, 120, 120, 0.6);}
  
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}
}
/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

hi and welcome to the forum.

I don’t see anything in your html to link your stylesheet file.
Can you add that and try again?

3

Hi, Thanks for getting back to me :slightly_smiling_face:
Yes I have added this earlier but didnt include it in my paste , will do so below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

Can you copy and paste all the code in one shot instead of in parts? This will allow us to try your code (if it is all together)

6

Hi there!
You didn’t have the position fixed and top 0 within #nav-bar selector to be your navbar should always on top.

7

hi there ,

thank you so much , that seems to have worked, although it was still appearing over the top of the logo ?

thank you for your help

Andy

8

hi

thanks for replying , i did try to copy it all but this gave me an error, saying there was too many commands ???
so the only way I could send it was in ‘chunks’, am I doing something wrong ?

appreciate your help , the response below does seem to have done the trick, so all ok now

Andy

9

@andrew.walton You can change your navbar`s position by setting the left right property to the value as you want. Or change your logo position.

10

Hello and Welcome to the forum!

If you look at the header, and try the following to see if it is what you are looking for in the navigation bar.

Try making these changes:

flex-direction perhaps could be changed to 'row'

and

justify-content could possibly be changed to 'space-between'

I hope this helps you.

Keep up the good progress and happy coding!