Hey I am having problems with creating my product landing page for this FCC challenge.
While I was checking what I have done so far I noticed, that my HTML document is only half the size of the viewport.
Can someone help me with this issue please?
This is my code so far:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div class="page-container">
<header id="header">
<div id="nav-container">
<img id="header-img" src="https://anniwie.github.io/apple_product_page/apple_logo.png" alt="Apples Logo">
<nav id="nav-bar">
<ul>
<li><a href="#product-details" class ="nav-link"> Description</a></li>
<li><a href="#apple-varieties" class ="nav-link"> Varieties</a></li>
<li><a href="#product-video" class ="nav-link"> Harvest</a></li>
<li><a href="#contact" class ="nav-link"> News</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<h1 class="green-heading"> An apple a day keeps the doctor away </h1>
<h3 class="red-text"> Stay healthy with apples </h3>
<img id="single-apple" src = "https://anniwie.github.io/apple_product_page/Apfel_Bild.jpg" alt = "Picture of a single apple"</img>
<button type="button" class = "red-button">Learn more</button>
</section>
<div class="heading-container">
<h2 class="red-heading"> Apples are among the most popular types of fruit in the world. </h2>
</div>
<section id="product-details">
<p> Their Latin name is Malus domestica.
They originate from Central Asia. Now they are are grown all over the world. Apples are high in fiber, vitamin C and various antioxidants. There are many different types, with a variety of colors and sizes. Studies show that eating apples can have multiple benefits for health. </p>
<img id="single-apple" src = "https://anniwie.github.io/apple_product_page/double_apple.png" alt = "Picture of two red and green apples"</img>
</section>
<section id = "apple-varieties">
<h2 class = "red-heading">10 most popular apple varieties in the world </h2>
<ul id="apples-list">
<li>Red Delicious</li>
<li>Gala</li>
<li>Golden</li>
<li>Delicious</li>
<li>Granny Smith</li>
<li>Lady</li>
<li>Baldwin</li>
<li>Macintosh</li>
<li>Honeycrisp</li>
<li>Ginger Gold</li>
<li>Fuji</li>
<li>Cortland</li>
</ul>
</section>
<section id="product-video">
<h2 class="white-heading"> Harvesting apples </h2>
<p> Each variety of apple has its own maturation time and can be dependent upon weather conditions during the growing season. For example, apples will ripen earlier if there is a mild, sunny spring which kick starts the tree’s fruiting cycle early.</p>
<button type="button" class = "red-button">Watch video</button>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/y44vwWNkVm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<div class="heading-container">
<h2 class="red-heading">You want to stay informed about apples? </h2>
</div>
<img id="apple-icon" src = "https://anniwie.github.io/apple_product_page/apple_logo.png" alt = "Apple as an icon"</img>
<section id="contact">
<span> Just drop your e-mail here and submit </span>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email" id="email-label">E-Mail-Adresse
<input type="email" id="email" name="email" placeholder="youremail@example.de" required>
</label>
<input type="submit" value="submit" id="submit" class="red-button" target="blank" formaction="https://www.freecodecamp.com/email-submit">
</form>
</section>
</div>
Your browser information:
User Agent is: Chrome/Version 73.0.3683.103 (Official Build) (64-bit)
.