Web Page

Product landing page project for freeCodeCamp

by Ghazi Muaz

HTML

<div id="Container">
        <header id="header">
            <div id="headerImg">
                <img id="header-img" src="https://freesvg.org/img/optical.png" alt="Logo" id="header-img">
            </div>
            <nav id="nav-bar">
                <a class="nav-link" href="#About">About</a>
                <a class="nav-link" href="#Features">Features</a>
                <a class="nav-link" href="#Products">Pricing</a>
            </nav>
        </header>
        <div id="About">
            <h1>Ghazi Eyewear</h1>
            <p> Pakistan's Leading Online Sunglasses Shop Established 2004
                Ghazi Eyewear stands out for its exclusive eyewear, glamorous frames 
                and colors to match your confidence.
                Ghazi Eyewear provide you with the most complete eye care possible.
                In our online store, you can choose from an excellent selection of 
                named brands. Ghazi Eyewear is offering
                exceptional range of Men's Original Sunglasses at amazing
                prices in Pakistan, accompanied with free home delivery to your 
                door step. We guarantee for providing best and reliable perfect frames.
                We also provide the best prescription eyewear.
            </p>
        </div>
        <div id="Features">
            <div class="grid">
                <div class="premiumIcon"></div>
                <div class="desc">
                    <h2>Premium Materials</h2>
                    <p> Our frames use the finest material which is sourced locally.
                        This will increase the longevity of your purchase.
                    </p>
                </div>
            </div>
            <div class="grid">
                <div class="fastIcon"></div>
                <div class="desc">
                    <h2>Fast Shipping</h2>
                    <p> We make sure you recieve your glasses as soon as we have finished 
                        making...

CSS

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

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

#Container {
    width: 100%;
    background-color: #f5f5f5;
}

#header {
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 10px;
    position: fixed;
}

#headerImg {
    width: 100%;
    height: 50px;
    background-image: url("https://freesvg.org/img/optical.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#header-img {
    display: none;
}


#nav-bar {
    width: 100%;
    height: 50px;
    background-color: rgb(126, 126, 31);
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-link {
    font-size: 18px;
    font-family: poppins;
    text-decoration: none;
    color: white;
    border-bottom: 2px solid black;
}

.nav-link:hover {
    transition: .8s;
    color: black;
    border-bottom: 2px solid white;
}

#About {
    width: 100%;
    height: 300px;
    background-color: chocolate;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#About h1 {
    font-size: 42px;
    font-family: poppins;
    margin-top: 40px;
    padding: 5px;
}

#About p {
    font-size: 18px;
    font-family: poppins;
    padding: 10px;
}

@media only screen and (max-width: 425px) {
    .nav-link {
        font-size: 12px;
    }
    
    #About {
        height: 430px;
    }

    #About h1 {
        font-size: 32px;
    }

    #About p {
        font-size: 14px;
    }
}

#Features {
    width: 100%;
    height: 500px;
    background-color: brown;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.grid {
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 75%;
    grid-gap: 10px;
}

.premiumIcon {
    width: 82px;
    background-image:...