Problems with the product page

HTML-CSS
1

I am going through a task to create a product page. Two mistakes: "Your #submit should have a type of submit" and "Your #nav-bar should always be at the top of the viewport. " I’ve already done it all over again. What could be the problem? Also, for some reason Freecodecamp does not recognize css, I have to connect external styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>product</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div class="wrapper">
    <header id="header">
        <div class="head__logo">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo" id="header-img">
        </div>
          <nav id="nav-bar">
            <ul class="head__head-menu__list">
                <li><a class="nav-link" href="#punkt1">Features</a></li>
                <li><a class="nav-link" href="#punkt2">How It Works</a></li>
                <li><a class="nav-link" href="#punkt3">Pricing</a></li>
            </ul>
            </nav>
        </header>
<main class="main">
        <form action="https://www.freecodecamp.com/email-submit" id="form">
        <h1>Handcrafted, home-made masterpieces</h1>
        <input type="email" name="email" id="email" placeholder="Enter your email address" pattern="*@*" required>
        <input id="submit" type="sumbit" value="get started" name="get started">
        </form>
        <div class="features" id="punkt1">
    <div class="features__element element">
    <h2>Premium Materials</h2>
    <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    </div>
    <div class="features__element">
    <h2>Premium Materials</h2>
    <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
    </div>
    <div class="features__element">
    <h2>Premium Materials</h2>
    <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
    </div>
    </div>
<div class="video" id="punkt2">
<iframe width="860" height="415" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
</div>
<section class="cards" id="punkt3">
    <div class="cards__row">
    <div class="cards__container">
        <div class="cards__container__item-1">
        TENOR TROMBONE
    </div>
    <div class="cards__container__item-2">
        $600
    </div>
    <div class="cards__container__item-3">
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        </div>
        <div class="cards__container__item-4">
        <input type="button" class="cards__select" value="select" name="select">
    </div>
</div>
<div class="cards__container">
    <div class="cards__container__item-1">
        TENOR TROMBONE
    </div>
    <div class="cards__container__item-2">
        $900
    </div>
    <div class="cards__container__item-3">
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        </div>
    <div class="cards__container__item-4">
        <input type="button" class="cards__select" value="select" name="select">
    </div>
</div>
<div class="cards__container">
    <div class="cards__container__item-1">
        TENOR TROMBONE
    </div>
    <div class="cards__container__item-2">
        $1200
    </div>
    <div class="cards__container__item-3">
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        </div>
    <div class="cards__container__item-4">
        <input type="button" class="cards__select" value="select" name="select">
    </div>
    </div>
</div>
</section>
</main>
<footer class="b__footer">
        <ul class="b__footer__menu__list">
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    <div class="b__footer__copyright">
        Copyright 2016, Original Trombones
    </div>
</footer>
</div>
</body>
</html>
CSS
/*Обнуление стилей*/
*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/


 html, body {
    font-family: 'Lato', sans-serif;
    width: 100%;
    height: 100%;
    background-color: #eee;
 }
 /*хедер*/

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.main {
    flex: 1 1 auto;
}
/*********************/
#header {
    max-height: 500px;
    padding: 40px 25px;
    align-items: center;
    width: 100%;
    max-width: 1470px;
    position: fixed; 
    display: flex;
    justify-content: space-between;
    background-color: #43BBAE41;
    }

.head__logo img {
    width: 200px;
    height: 40px;
}

.head__head-menu__list {
    display: flex;
    }

.head__head-menu__list li {
    display: block;
    padding: 0 0 0 20px;
}

/***********************/
#form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 120px 0 0 0;
    padding: 20px 0 0 0;
}

    h1 {
    font-size: 20px;
    font-weight: 700;
    }

#email {
    margin: 30px 0;
}

input[type="email"]{
    width: 350px;
    padding: 15px;
    border: 1px solid #000;
}

#submit {
    padding: 15px;
    text-transform: uppercase;
    background: #43BBAEFF;
    box-shadow: 2px 2px 3px #000;
    text-align: center;
}

#submit:hover {
    background: #24D8DAFF;
    transition: background 3ms 0.5ms ease;
}
/******************************/
.features {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px 0;
}
.element {
    position: relative;
    right: 65px;
}

.features__element::before {
    content: url(img/button_ok_5057.ico);
    position: relative;
    right: 40px;
    top: 20px;
}
h2 {
    font-size: 15px;
    font-weight: 700;
    display: block;
    padding: 0 0 20px 0;
}
p {
    display: flex;
    flex: 1 0 auto;
}
/*********************************/
.video {
    display: flex;
    justify-content: center;
}

/******************************/

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0px;
}

.cards__row {
    display: flex;
    margin: 0 -20px;
}
.cards__container {
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    text-align: center;
    min-width: 300px;
    min-height: 100%;
    margin: 0 20px;
}

.cards__container__item-1 {
    font-weight: 700;
    padding: 20px 0 20px 0;
    background-color: #43BBAEFF;
}
.cards__container__item-2 {
    font-weight: 700;
    font-size: 25px;
    padding: 20px 0;
}
.cards__container__item-3 {
    flex: 1 1 auto;
    font-size: 15px;
    }
ul li {
    padding: 0 0 10px 0;
}
ul li a:hover {
    text-decoration: underline #43BBAEFF 5px;
}
.cards__select {
    text-transform: uppercase;
    width: 150px;
    height: 50px;
    margin: 20px 0;
    background: #43BBAEFF;
    box-shadow: 2px 2px 3px #000;
}
.cards__select:hover {
    background: #24D8DAFF;
    transition: background 3ms 0.5ms ease;
}

/*****************************/
.b__footer {
    padding: 30px;
    background: #B7B7B7FF;
}

.b__footer__menu__list {
    display: flex;
   justify-content: center;
   padding: 0 0 20px 0;

}
.b__footer__menu__list li {
     padding: 0 0 0 20px;
     font-size: 16px;
}

.b__footer__menu__list li:first-child {
    padding: 0;
}
.b__footer__copyright {
    display: flex;
   justify-content: center;
}

/*****************************/

@media (max-width: 767px){ 
    .cards__row {
    flex-direction: column;
    /*margin: 0 -20px;*/
}
   /* .cards__container {
        display: flex;
        margin: 0 20px;
        min-height: 100%;
    }*/
2

check your spelling

for the other one I actually have no idea

1 Like
3

You may want to use styles.css.

1 Like
4

thanks. But the #nav-bar is still confusing. The code is correct (in my opinion), but the system does not accept it…

5

have you fixed the stylesheet linking issue?

6

I added the upper padding, the problem went away as soon as I reset
it
#header { max-height: 500px; padding: 0px 25px; align-items: center; width: 100%; max-width: 1470px; position: fixed; display: flex; justify-content: space-between; background-color: #eee; top: 0; z-index: 9999; margin: 20px 0; }

7

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