Build a Product Landing Page... Stumped!

HTML-CSS
1

Tell us what’s happening:
Granted, I’m still working through this. But, I am stuck on a few steps that despite my trying; I cannot get through them.

Steps:

5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

7. My landing page has a element with a corresponding id=“form”.

8. Within the form, there is an field with id=“email” where I can enter an email address.

Your code so far

HTML

<h1 id="title"Welcome>
<div id="page-wrapper">
<header id="header">
  <p id="description">The Majestic View Lodge
  <div class="logo">
    <img id="header-img" src="https://majesticviewlodge.com/wp-content/uploads/2017/07/Majestic-View-Logo-lighter-1030x457.png" />
  </div>
  <form id="survey-form" method="https://crossorigin.me/https://freecodecamp.com">
    <div class="rightTab"> <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
      <div class="rightTab">
        <input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">
      </div>
      <div class="rowTab">
      <div class="labels">
        <label id="number-label" for="age"> Age: </label>
      </div>
      <div class="rightTab">
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
      </div>
    </div>

  <nav id="nav-bar">
    <ul>
      <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> To-Go</b></a>
</li>
      <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> Breakfast</b></a>
</li>
      <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> Lunch</b></a>
</li>
      <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> Dinner</b></a>
</li>
       <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> Contact</b></a>
</li>
    </ul>
  </nav>

</header>

<div class="container">

</div>

<section id="zion">
  <h2>The Majestic View Lodge</h2>
    <iframe id="video" height="315" src="https://youtu.be/XFBVy_P4cgw" frameborder="0" allowfullscreen></iframe>
  <section id="pricing">
    <div id="tenor">
      <div class="level">
        Near the Gates of Zion
      </div>
    </div>
      <h2>Lodge. Steakhouse. Gift Shop</h2>
      <form id="form" action="https://majesticviewlodge.com/contact/" id="email">
        <input type="form" id="email" name="email" placeholder="Enter your Email" required>
        <input type="submit" id="submit" value="Submit">
    </form>
      </section>

CSS

#header-img {
  width: 20vw;
}
#header {
  font-family: arial;
}
.anything {
  color: black;
}
nav {
  font-weight: 400;
}
.nav-link {
  font: bold 20px Arial;
  text-decoration: none;
  color: black;
  padding: 2px 6px 2px 6px;
}
  
  iframe {
    max-width: 560px;
    width: 100%;
  }
#zion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 450px;
  margin-top: 40px;
  border: 20px;
}
.form{
  width: 50px;
}

Your browser information:

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

Link to the challenge:

2

Welcome to the community!

It might make it easier to respond if you provide some of your code.

3

I apologize, I’ve tried but my account with the forum is new so I haven’t been able to post links just yet.

https :// codepen .io/danimillington /pen /OYyGzP

Sorry for the spaces!

4

looks like some of the html has been copied and pasted. Obviously you CAN do this sometimes, but I wouldn’t recommend copying and pasting code that you don’t really understand. Maybe go have another read over the basic html and html5 section :slight_smile: