Product Landing Page | Feedback Request

I Built This
1

Hi Community!

Hope you are doing well.

I have done this project and want feedback on my code (for best practices).
Kindly give me feedback, your feedback will be highly appreciated and helpful for me.

/*CSS File*/
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

/* CSS RESET */

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

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/* PAGE STYLING */

body {
    background-color: #eee;
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

.btn {
    text-transform: uppercase;
    color: black;
    background-color: rgb(255, 173, 73);
    border-radius: 3px;
    border: 1px solid #000;
    padding: 1rem 2rem;
    font-size: 1.8rem;
}

.btn:hover {
    cursor: pointer;
    transform: scale(1.1);
    background-color: darkorange;
}

.btn:visited {
    transform: scale(none);
}

/* HEADER STYLING */

#header {
    padding: 2rem;
    position: fixed;
    height: 7rem;
    width: 100%;
    top: 0;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo {
    padding: 0.5rem;
}

#header-img {
    height: 3.5rem;
    object-fit: cover;
}

#nav-bar ul {
    display: flex;
    justify-content: space-around;
}

#nav-bar ul li {
    margin: 0 3rem;
    padding: 1rem;
    font-size: 2rem;
}

#nav-bar ul li a:hover {
    color: darkorange;
}

/* MAIN STYLING */

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 8rem;
}

/* HEADING SECTION  */

#heading h1 {
    font-size: 4rem;
    margin: 1rem;
    text-align: center;
}

#heading p {
    font-size: 2.5rem;
    text-align: center;
}

/* FEATURES SECTION  */

#features {
    padding-top: 8rem;
}

.feature {
    display: flex;
}

.icon {
    height: 12.5rem;
    width: 20%;
    color: darkorange;
    display: flex;
    justify-content: center;
    align-items: center;
}

.description {
    height: 12.5rem;
    padding: 0.5rem;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* HOW IT WORKS SECTION  */

#howItWorks {
    padding-top: 12rem;
}

#video {
    height: 40.15rem;
    width: 60.6rem;
}

/* PRICING SECTION  */

#pricing {
    padding-top: 12rem;
    width: 75%;
    display: flex;
}

.priceContainer {
    width: calc(100% / 3);
    min-width: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1rem;
    border: 0.1rem solid black;
    border-radius: 0.3rem;
    flex-wrap: wrap;
}

.priceContainer h3 {
    width: 100%;
    /* font-size: 2.5rem; */
    background-color: #ddd;
    text-transform: uppercase;
    font-weight: 700;
    padding: 15px 0;
}

.priceContainer strong {
    font-size: 3rem;
    padding: 1.5rem 0;
}

.priceContainer ul {
    padding-bottom: 3rem;
}

.priceContainer ul li {
    padding: 0.5rem 0;
}

.priceContainer .select {
    margin: 1.5rem;
    margin-top: 0;
}

/* CTA : CALL TO ACTION || SECTION  */

#CTA {
    padding-top: 4rem;
}

#CTA h2 {
    font-size: 3.7rem;
    text-align: center;
}

#CTA #email {
    width: 100%;
    height: 3rem;
    display: block;
    margin: 1.5rem auto;
    padding: 0.2rem 0.5rem;
    font-size: 1.7rem;
    border: 1px solid black;
    border-radius: 2px;
    color: #000;
    background-color: #e8e8e8;
}

#CTA #submit {
    display: block;
    margin: auto;
    transform: scale(1.05);
}

#CTA #submit:hover {
    transform: scale(1.15);
}

/* FOOTER SECTION  */

footer {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ddd;
}

footer #ptc {
    display: flex;
}

footer #ptc p {
    margin: 1rem;
    margin-bottom: 0;
    padding: 0 1rem;
}

footer #ptc p a:hover {
    text-decoration: underline;
}

footer #copyright {
    margin: 1rem;
}

/* CSS FOR RESPONSIVENESS  */

@media only screen and (max-width: 1037px) {
    #header {
        flex-wrap: wrap;
        height: fit-content;
        padding: 1.5rem 2rem;
    }

    #logo {
        margin: 0 auto;
    }

    #nav-bar {
        margin: 0 auto;
    }

    #main {
        padding-top: 14rem;
    }

    #main #heading {
        margin-bottom: -10rem;
    }

    #features {
        padding-top: 12rem;
        margin-bottom: -5rem;
    }

    .icon {
        width: 18%;
    }

    #howItWorks {
        padding-top: 14rem;
        margin-bottom: -3rem;
    }

    #pricing {
        padding-top: 13rem;
        width: 90%;
    }

}

@media only screen and (max-width: 730px) {
    #nav-bar ul li {
        margin: 0 1.5rem;
    }

    #heading h1 {
        font-size: 3.5rem;
    }

    #pricing {
        flex-wrap: wrap;
    }

    .priceContainer {
        width: calc(100% / 2.15);
    }

    .priceContainer:last-of-type {
        margin: 8px auto;
    }
}

@media only screen and (max-width: 645px) {
    #nav-bar ul li {
        margin: 0 0.8rem;
        padding: 1rem 0.5rem;
    }

    #heading h1 {
        font-size: 3rem;
    }

    #heading p {
        font-size: 2.2rem;
    }

    #features {
        padding-top: 14rem;
        margin-bottom: -7rem;
    }

    .priceContainer {
        margin: 8px 5px;
    }

    #howItWorks {
        padding-top: 16rem;
        margin-bottom: -7rem;
    }

    #pricing {
        padding-top: 15rem;
    }

    #video {
        height: 29.15rem;
        width: 49.6rem;
    }
}

@media only screen and (max-width: 510px) {
    #header {
        padding: 1rem;
    }

    #main {
        padding-top: 12rem;
    }

    #nav-bar ul li {
        margin: 0 0.5rem;
        padding: 1rem 0.4rem;
    }

    #video {
        height: 25.15rem;
        width: 45.6rem;
    }
}

@media only screen and (max-width: 470px) {
    #header {
        padding: 1rem 0.5rem;
    }

    #nav-bar ul li {
        font-size: 1.8rem;
    }

    #video {
        height: 22.15rem;
        width: 38.6rem;
    }

    #pricing {
        padding-top: 13rem;
    }

    .priceContainer {
        width: calc(100% / 1.4);
        margin: 8px auto;
    }
}

@media only screen and (max-width: 406px) {
    #nav-bar ul {
        flex-wrap: wrap;
    }

    #nav-bar ul li {
        padding: 0.2rem;
        font-size: 1.7rem;
    }

    #main {
        padding-top: 9.5rem;
    }

    #main #heading {
        margin-bottom: -9rem;
    }

    #heading h1 {
        margin-bottom: 2px;
    }

    #features {
        padding-top: 10rem;
    }

    .feature {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .icon {
        width: 20%;
    }

    #howItWorks {
        padding-top: 14rem;
    }

    #video {
        height: 22.15rem;
        width: 35.6rem;
    }

    #pricing {
        padding-top: 10rem;
    }

    .priceContainer {
        width: calc(100% / 1.2);
    }
}

@media only screen and (max-width: 375px) {
    #main {
        padding-top: 12rem;
    }

    #features {
        padding-top: 12rem;
    }

    #pricing {
        padding-top: 12rem;
    }

    .priceContainer {
        width: calc(100% / 1.1);
    }

    #video {
        width: 30.6rem;
    }
}

@media only screen and (max-width: 300px) {
    .feature {
        padding: 0.6rem 0;
    }

    #video {
        height: 18.15rem;
        width: 25.6.6rem;
    }
}

<!-- Html file -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
    <link rel="shortcut icon" href="icon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
</head>

<body>
    <div id="page">
        <header id="header">
            <div id="logo">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                    alt="Original Trombones Logo" id="header-img">
            </div>
            <nav id="nav-bar">
                <ul>
                    <li><a href="#features" class="nav-link">Features</a></li>
                    <li><a href="#howItWorks" class="nav-link">How it works</a></li>
                    <li><a href="#pricing" class="nav-link">Pricing</a></li>
                    <li><a href="#CTA" class="nav-link">Get Started</a></li>
                </ul>
            </nav>

        </header>
        <main id="main">
            <div id="heading">
                <h1>Handcrafted, home-made masterpieces</h1>
                <p id="tagline">Lorem ipsum dolor sit amet.</p>
            </div>
            <section id="features">
                <div class="feature">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="description">
                        <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>
                <div class="feature">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="description">
                        <h2>Fast Shipping</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>
                <div class="feature">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
                    </div>
                    <div class="description">
                        <h2>Quality Assurance</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>
            </section>
            <section id="howItWorks">
                <iframe src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
                    frameborder="0" allowfullscreen id="video" title="How it works" controls height="315"></iframe>
            </section>
            <section id="pricing">
                <div class="priceContainer">
                    <h3>TENOR TROMBONE</h3>
                    <strong>&dollar;600</strong>
                    <ul>
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Lorem ipsum dolor sit.</li>
                        <li>Lorem, ipsum dolor.</li>
                        <li>Lorem, ipsum.</li>
                    </ul>
                    <button class="select btn">Select</button>
                </div>
                <div class="priceContainer">
                    <h3>BASS TROMBONE</h3>
                    <strong>&dollar;900</strong>
                    <ul>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem, ipsum dolor.</li>
                        <li>Lorem, ipsum.</li>
                    </ul>
                    <button class="select btn">Select</button>
                </div>
                <div class="priceContainer">
                    <h3>VALVE TROMBONE</h3>
                    <strong>&dollar;1200</strong>
                    <ul>
                        <li>Plays similar to a Trumpet</li>
                        <li>Great for Jazz Bands</li>
                        <li>Lorem, ipsum dolor.</li>
                        <li>Lorem, ipsum.</li>
                    </ul>
                    <button class="select btn">Select</button>
                </div>
            </section>
            <section id="CTA">
                <h2>Let's Contact Us!</h2>
                <form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
                    <input type="email" name="userEmail" id="email" placeholder="Enter your email address" required>
                    <input type="submit" value="Get Started" id="submit" name="submit" class="btn">
                </form>
            </section>
        </main>
        <footer>
            <div id="ptc">
                <p><a href="#header">Privacy</a></p>
                <p><a href="#header">Terms</a></p>
                <p><a href="#header">Contact</a></p>
            </div>
            <div id="copyright">
                <p>&copy; 2023 Copyright, Original Trombones</p>
            </div>
        </footer>
    </div>
</body>

</html>
2

Hey @duaanaz20 ,
Nice work! I didn’t find any issue.
I usually test my html code with browsers devtools. I tested yours and a found a tip:

  • Button type attribute has not been set.

Here is more info:
Specify button type | webhint documentation

Happy coding :computer:

3

Thank you @leandroSmS
I’ll surely work on the tip, you have given.

4

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