Product Landing Page - Build a Product Landing Page

HTML-CSS
1

So, i was coding, everything was fine, i could see everything i was coding, and suddently i cannot see the lower half of my code on preview anymore! Idk how this happened and i need your help. Thanks.

image
image1920×1080 371 KB

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Can you provide the code in question?

3

Yah, i can post the whole code here. Idk what went wrong suddently

<!doctype html>
<html lang="en">
<header id="header">
  <title>Cat toys box</title>
  <body>
  <link rel="stylesheet" href="styles.css">
<img id="header-img" src="https://i.pinimg.com/originals/da/9a/34/da9a346fe6e5276526ccb98a9d6c573e.png">

<h2>Cat Toys Box</h2>
<nav id="nav-bar">
<ul>
  <li><a class="nav-link" href="#our_toys" >Our toys</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>
</header>

<section id="email_form">
  <h4>Subscribe now!</h4>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input id="email" action="https://www.freecodecamp.com/email-submit" name="email" placeholder="Place your email" type="email"></input>
  <br>
  <input id="submit" type="submit"></input>
</form>
</section>

  <section class="main-section" id="our_toys">
   <header>Our toys</header>
   
  <p>Hunger has been shown to increase the intensity in the play behaviour of cats, and a decrease in fear elicited by larger-sized toys.</p>
</section>

<section class="main-section" id="How_it_works">
   <header>How it works</header>
   <p>Easy order! Fast shipping worldwide!</p>
   <p> Choose one of our monthly packets and recieve every month new toys and goodies for your cats!</p>
</section>
<br>
<section id="video">
  <iframe id="video" height="350" width="550" src="https://www.youtube.com/watch?v=6FQsIfE7sZM" frameborder="0"/>
  </section>

<section class="prices" id="Pricing">
   <header></header>
   <div class="small">
   <h3>Small box</h3>
    <p>$19,99</p>
   <ol>
     <li>3 toys</li>
     <li>snacks</li>
     <li>monthly surprise</li>
     </ol>
     <br>
     <button>Pick me</button>
   </div>
   <div class="middle">
  <h3>Middle box</h3>
  <p>$29,99</p>
  <ol>
     <li>5 toys</li>
     <li>snacks</li>
     <li>monthly surprise</li>
     </ol>
     <br>
     <button>Pick me</button>
  </div>
  <div class="big">
    <h3>Big box</h3>
    <p>$39,99</p>
    <ol>
     <li>7 toys</li>
     <li>snacks</li>
     <li>2x monthly surprise</li>
     </ol>
     <br>
     <button>Pick me</button>
    
  </div>
</section>
</body>
<footer> All rights included.</footer>
  </html>

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

img {
width: 50%;
padding-left: 50px;
margin-left: 130px;
border-radius: 50%;
}

body {
background-color: #cad2c5;
font-family: Courier New;
height: 100%;
}

h4{
padding-top: 30px;
margin-left: 28px;
text-align: center;
font-size: 120%;
font-family: Courier New;
}

nav > ul {
font-size: 130%;
display: flex;
justify-content: space-around;
list-style-type: none;
text-decoration: none;
background-color: #ccd5ae;
font-weight: 800;

}

#form {
padding: 20px;
margin-left: 150px;
display: flex;
flex-direction: column;
width: 50%;
}

#email , #submit{
border-radius: 7px;
}

::placeholder{
text-align: center;
}

.prices {
display: flex;
justify-content: space-between;
margin-top: 60px;
margin-bottom: 60px;

}

section div{
border: 2px solid;
display: flex;
flex-direction: column;
background-color: white;
margin: 4px;
border-radius: 7px;
}

ol{
list-style-type: none;
text-align: center;
}

.main-section {
font-family: courier new;
text-align: center;
}

.main-section header {
font-weight: 800;
margin: 30px;
text-decoration: underline;
}

.main-section>header, .prices>header{
font-size: 150%;
text-align: center;
}

a{
color: #2f3e46;
}
a:hover{
color: #edf2f4;
}

button {
border-radius: 20px;
width: 90%;
margin-left: 7px;
margin-bottom: 5px;

}

h2{
text-align: center;
font-size: 200%;
padding-top: 10px;
padding-bottom: 10px;
}
h3{
background-color: #ccd5ae;
text-align: center;
}

div p{
text-align: center;
font-size: 120%;
padding: 7px;
}

div li {
padding: 3px;
}

footer {
text-align: center;
}

type or paste code here
4

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