Landing Page preview problem

Hi everyone. I almost completed my Landing Page Project in VS Code. I uploaded it in the Platform and it looks totally different. It’s not the Styles.css link.


This is how it looks in FreeCodeCamp

and this is how it looks with Live Server in Chrome:

Here’s the HTML and the CSS file. It’s not perfectly organized I started learning 4 weeks ago but any help would be much appreciated.

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div>
        <header id="header">
            <nav id="nav-bar">
                <a class="nav-link" href="#header"><img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Honda.svg" alt="Honda"></a> 
                <ul>
                    <li><a class="nav-link" href="#Performance">Performance</a></li>
                    <li><a class="nav-link" href="#Exterior">Exterior & Interior</a></li>
                    <li><a class="nav-link" href="#Technology">Technology</a></li>
                    <li><a class="nav-link" href="#Contacts">Contacts</a></li>
                </ul>
            </nav>
        </header>
    </div>

    <div class="parent">  
        <h1>Civic Type <sup><i>R</sup></i><br></h1>
        <h2 class="heading2">Be The First To Test Drive!</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input type="email" name="email" class="email" id="email" placeholder="Enter your email">
            <input type="Submit" id="submit" value="Test Drive">
        </form>
    </div> 

    <div id="Videodiv" >
        <hr class="hr1">
        <h2 class="Performance" id="Performance">Performance</h2>
        <p class="paragraph1">The most powerful Civic Type R ever. With torque and turbo power engineered to the max, the FL5 Civic Type R is designed to push the boundaries of performance.</p>
        <p class="paragraph1">Pair that with an aerodynamic design and an immersive cockpit interior, and you get an exhilarating drive that’s born to perform on track and road. Because when it comes to the joy of the Type R, only the MAX will do.</p>
        <iframe id="video" class="iframe" src="https://www.youtube.com/embed/a5GAwHJED7U?autoplay=1&mute=1&playlist=a5GAwHJED7U&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 
    </div>       

    <div class="Page2">
        <hr class="hr1"> 
        <h2 class="Exterior" id="Exterior">Exterior & Interior</h2>
        <p class="paragraph2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quibusdam, quod, quae, quod, quae, quod, quae, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod</p>
        <div class="interior-images">
            <img class="int-img1" src="https://delivery.contenthub.honda.com.au/api/public/content/d458e0bddc7b4c21b1e44dcde79a441c?v=72b938fd" alt="">
            <img class="int-img2" src="https://mikstoreph.com/cdn/shop/files/ScreenShot2023-05-26at12.51.42PM_2048x2048.png?v=1685076726" alt="">
            <img class="int-img3" src="https://delivery.contenthub.honda.com.au/api/public/content/c909a76923fb465280c4c72dffccd0df?v=61360307" alt="">
            <img class="int-img4" src="https://delivery.contenthub.honda.com.au/api/public/content/061d93685e6a42289eaed6e1cec98b4b?v=eb1661c4" alt="">
            <img class="int-img5" src="https://delivery.contenthub.honda.com.au/api/public/content/df679783a2a54d88bb49cbd7a14bb753?v=eb25e690" alt="">
            <img class="int-img6" src="https://delivery.contenthub.honda.com.au/api/public/content/552bc7de21b44e668203a10fe956ec15?v=01dfb6eb" alt="">
        </div>
        <p class="paragraph2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quibusdam, quod, quae, quod, quae, quod, quae, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod, quod</p>
    </div>
    
    <div class="final-page">
        <hr class="hr1">
        <h2 class="Technology" id="Technology">Technology</h2>
        <p class="paragraph3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo doloribus facere tenetur, odio soluta nobis rem mollitia quae vel voluptate fuga veritatis accusantium voluptas ipsum. Officia inventore quos quibusdam!</p>
        <div class="Tech">
            <img class="engine2" src="https://delivery.contenthub.honda.com.au/api/public/content/19e9022b192447cfbc836eed728aa1bc?v=03ff388d" alt=""> 
            <img class="engine1" src="https://w.forfun.com/fetch/da/dac540eab74bb518ba4195996b16cc9f.jpeg?w=1470&r=0.5625" alt="">
        </div>  
        <p class="paragraph3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo doloribus facere tenetur, odio soluta nobis rem mollitia quae vel voluptate fuga veritatis accusantium voluptas ipsum. Officia inventore quos quibusdam!</p>
    </div>

    <footer>
        <div class="footer">
            <hr class="hr4">
            <h2 class="Contacts" id="Contacts">Contacts</h2>
        </div>
    </footer>       
</body>
</html> 
`

And the CSS here -

`#nav-bar{
    width: 100%;
    height:100%;
    position: fixed !important;;
    background-color:#ffffff;
    max-height: 75px;
    z-index: 1;
    min-width:1120px;
    max-width:auto;;
    top:0;
}
ul{
    float:right;
    display: flex;
    list-style: none;
}
nav ul li a{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color:hsl(0, 0%, 0%);
    line-height:50px;
    padding:12px 30px;
    font-size: 20px;
    text-decoration: none;
    animation-duration: 1ms;
    margin-right: 20px;
    transition: all 0.5s ease;
    margin-left:20px;
    min-width:800px;

}
nav ul li a:hover{
    transition: all 0.2s ease;
    color:#a30505;
}


a{
    margin-left:20px;
    height:100%;
    min-width:20px;
}
#header-img{
    width:100%;
    height: 100%;
    transition: all 0.5s ease;
    position: fixed;
    top: 15px;
    left: 75px;
    max-height:50px;
    max-width:80px;
}
#header-img:hover{
    width:100%;
    height: 100%;
    transition: all 0.5s ease;
    position: fixed;
    top: 15px;
    left: 75px;
    max-height:50px;
    max-width:80px;
    border-radius: 3px;
    scale:110%;
}
body{
    margin:0;
    padding:0;
}

.parent{
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: justify;
    margin:auto;
    background-image: url(https://www.honda.co.nz/assets/img/civic-type-r/Lottery%20page/Edit%202.jpg?k=e6255c6f10);
    padding-bottom:100px;
    background-repeat: no-repeat;
    background-size:cover;
    min-height: 800px;
    padding-top:300px;
    min-width:400px;
    background-position:center;
}

.email{
    align-items: left;
    display:flex;
    justify-content: left;
    text-align:left;
    margin-left:245px;;
    margin-top:0px;
    margin-right:auto;
    width:350px;
    height:40px;
    background-color:#ffffffe4;
    border-radius:0px;
    font-size:15px;
    font-family: Arial, Helvetica, sans-serif;
    border:2px solid black;



}
#submit{
    align-items: center;
    display:block;
    justify-content: center;
    text-align:center;
    margin-left:282px;
    margin-top:10px;
    margin-right:auto;
    width:280px;
    height:40px;
    border-radius: 5px;
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000000;
    font-weight: bolder;
    background-color: #ffffff;
    border:2px solid rgb(0, 0, 0);
    margin-bottom:40px;
    border-radius:75px;

    
}
#submit:hover{
    background-color:hsl(0, 0%, 0%);
    transition: ease-in-out 0.5s;
    background-color:#a30505;
    scale:125%;
}
#submit:not(:hover){
    transition: 0.7s ease-in-out;
}

h1{
    margin-top:150px;
    font-size: 60px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color:#ffffff;
    margin-bottom:10px;
    margin-left:260px;
    text-align:justify;
}

body{
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
}
.hr1, .hr2{
    height:1px;
    background-color:#a30505;
    border-color:#000000;
    border:1px solid #000000;
    width:100%;
    height:10px;
    margin:0;
}
::placeholder {
    color: rgba(2, 2, 2, 0.525);
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: black;
  }
  .iframe{
    width:100%;
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height:1000px;
    min-width:600px;
    max-height:2000px;
  }
  .hr3{
    margin-top:0px;
    height:10px;
    color:#a30505;
    background-color:#000000;
  }
  #Videodiv{
    background-color:#000000;
    width:100%;
    height: 100%;
    min-height:1400px;

  }
 #Performance{
    color:#a30505;
    font-size:60px;
    margin-bottom:10px;
    text-align:center;
    padding-top:75px;
    margin-bottom:10px;
  }


.paragraph1{
    color:#ffffff;
    font-size:20px;
    margin-top:0px;
    margin-left:20px;
    font-weight:500;
}
.Page2{
    height:100%;
    width:100%;
    display: block;
    box-sizing:border-box;
    background-color:#000000;
    align-items: center;
    min-width:100%;
    min-height:100%;
    padding-bottom:25px;
}
.final-page{
    height:100%;
    display: block;
    background-color:#000000;
    align-items: center;
    min-width:100%;
    min-height:100%;
    width:auto;
    padding-bottom:25px
}
sup{
    color:#a30505;
}
.hr2{
    height:1px;
    background-color:#ffffff;
    border-color:#a30505;
    border:#010101 1px solid;
    width:100%;
    height:10px;
    margin:0;
}
.hr3{
    height:1px;
    background-color:#ffffff;
    width:100%;
    height:10px;
    margin:0 auto;
}
.Exterior{
    color:#a30505;
    font-size:60px;
    margin-left:30px;
    margin-bottom:10px;
    text-align:center;
    padding-top:75px;
    margin-bottom:10px;
    
}
.paragraph2{
    color:#ffffff;
    font-size:20px;
    margin-top:0px;
    margin-left:20px;
    font-weight:100
}
.Technology{
    color:#a30505;
    font-size:60px;
    margin-left:30px;
    margin-bottom:10px;
    text-align:center;
    padding-top:75px;
    margin-bottom:10px;
}
.paragraph3{
    color:#ffffff;
    font-size:20px;
    margin-top:0px;

    font-weight:100;
}

.Contacts{
    color:#000000;
    font-size:60px;
    margin-left:30px;
    margin-bottom:10px;
    text-align:center;
    margin-bottom:10px;
}

.hr4{
    height:1px;
    background-color:#ffffff;
    width:100%;
    height:10px;
    margin:0auto;
    padding:0auto;
}


.paragraph4{
    color:#ffffff;
    font-size:20px;
    margin-top:0px;
    margin-left:20px;
    font-weight:100;
}


.heading2{
    color: white;
    margin-left:248px;
    font-size:28px;
    margin-bottom:10px;
}
.int-img1,
.int-img2,
.int-img3,
.int-img4,
.int-img5,
.int-img6{
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
   margin:20px;
    min-width:450px;
    max-width:650px;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.359), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity:50%;
}
.int-img1:hover,
.int-img2:hover,
.int-img3:hover,
.int-img4:hover,
.int-img5:hover,
.int-img6:hover{
    box-shadow: 0 12px 16px 0 rgba(99, 1, 1, 0.193), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    scale:110%;
    opacity:100%;
    transition: all 0.3s ease-in-out, ease-out 0.5s;
}
.int-img1:not(:hover),
.int-img2:not(:hover),
.int-img3:not(:hover),
.int-img4:not(:hover),
.int-img5:not(:hover),
.int-img6:not(:hover){
    transition: all 0.3s ease-in-out, ease-out 0.5s;
}
.interior-images{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:100%;
    display: block;
    max-width:2420px;
    padding:20px;
    align-items: center;
    text-align: center;
    background-color: #000000;
}
.int-img2{
    height:418px;
    width:650px;
}
p{
    margin-left:20px;
    margin-right:20px;
    text-align:center;
    margin-bottom:10px;
}
.engine1,
.engine2{
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    display: inline-block;
    max-width:1020px;
    max-height:850px;
    opacity:55%;
    border-radius:10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.359), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin:auto;
}
.engine1:hover,
.engine2:hover{
    box-shadow: 0 12px 16px 0 rgba(99, 1, 1, 0.193), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    scale:105%;
    opacity:100%;
    transition: all 0.3s ease-in-out, ease-out 0.5s;
}
.engine1:not(:hover),
.engine2:not(:hover){
    transition: all 0.3s ease-in-out, ease-out 0.5s;
}
.Tech{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:100%;
    display: block;
    max-width:2420px;
    align-items: center;
    text-align: center;
    background-color: #000000;
    padding:10px;
}

.footer{
    height:100%;
    width:100%;
    display:block;
    background-color:#a30505;
    align-items: left;
    justify-content: left;
    min-width:100%;
    min-height:150px;
    margin-top:-13px;
}


#Contacts{
    text-align: left;
    font-size:40px;
    margin-left:auto;
    margin-right:100px;
    margin-bottom:10px;
    margin-top:50px;

}   

`

You are getting the height from the containing iframe and wrappers. So some of your height: 100% actually have a height to compute the percentages from.

I would expect (more or less) the same to happen if you added this to your code.

html,
body {
  height: 100%;
}

You can likely remove most or all of your height: 100%. If you do set height: 100% on images you usually use object-fit with it (cover or contain) as well. For full width/height hero images they should get their height from their direct container.

1 Like

I appreciate your help. It worked. Thanks for the advice. I’ll keep it in mind.

Have a wonderful evening!!!

1 Like