Landing Page preview problem

nbanchevski · March 20, 2024, 6:26pm

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;

}   

`

lasjorg · March 20, 2024, 7:49pm

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.

nbanchevski · March 20, 2024, 8:10pm

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

Have a wonderful evening!!!

system · September 19, 2024, 8:10am

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

Topic		Replies	Views
Need help with error-product landing page HTML-CSS	7	109	October 31, 2024
Product Landing Page - problems HTML-CSS	5	303	February 13, 2023
CSS working differently outside of the freeCodeCamp platform HTML-CSS	7	382	October 26, 2023
Product Landing Page - Build a Product Landing Page HTML-CSS	4	251	March 26, 2023
My Product Landing Page project keeps failing but I have everything it's asking for, please help! :( HTML-CSS	9	204	January 18, 2023

Landing Page preview problem

Related topics