Product Landing Page - Build a Product Landing Page

HTML-CSS
1

When clicking each anchor navigation element that is embedded in each section element, the scroll bar doesn’t stick to the same section, instead, it just went down by a little. I’ve tried scroll-margin-top but it still doesn’t seem to work.

#header-bar {
grid-area: head;
display: grid;
grid-template-areas:"logo nav";
background-image:linear-gradient(to left,#f7f451,#f8f487,#d0eb89,#f8f65b,#f7f451);
border-bottom: 1px double #b6e632;
position: fixed;
width: 100%;
}
 
#content {
padding-top:70px;
grid-area: cont;
background-image:linear-gradient(to top,#f8f487,rgb(241, 241, 189),#fff,#fff,rgb(252, 248, 198),#f8f487);
display: grid;
grid-template-areas: "home"
                     "benefits" 
                     "pricing";
}

Headerbar is where navigation bar is located, where content is the whole content itself except the footer

2

We would need to see all of your HTML and CSS in order to help you. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3

HTML code for my page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>DEMO GRID STYLE</title>
        <link rel="stylesheet" href="demo-grid.css"/>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <section id="header-bar">
                <div class="logo">
                   <img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/mya-ayar-logo.png" id="header-img">
                </div>
                <div class="navigation">
                    <nav id="nav-bar">
                        <ul>
                            <li><a class="nav-link" href="#home">Home</a></li>
                            <li><a class="nav-link" href="#benefits">Benefits</a></li>
                            <li><a class="nav-link" href="#pricing">Pricing</a></li>
                            <li><a class="nav-link" href="#footer">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </section>
            <section id="content">
                <section id="home">
                    <div class="title">
                        <h1>COCOHEALTH</h1>
                        <p>Organic Extra Virgin Coconut Oil</p>
                    </div>
                    <div class="intro">
                        <table class="facts">
                            <tr>
                                <td class="img-container">
                                    <img class="icon" src="https://icon-library.com/images/high-quality-icon-png/high-quality-icon-png-6.jpg"/>
                                </td>
                                <td class="txt-container">
                                    An excellent, high quality extra virgin coconut handcrafted by cold pressed 
                                modified natural fermentation method
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="img-container">
                                    <img class="icon" src="https://icon-library.com/images/high-quality-icon-png/high-quality-icon-png-6.jpg"/>
                                </td>
                                <td class="txt-container">
                                    Has less FFA and more MCTs than average VCO.
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="img-container">
                                    <img class="icon" src="https://icon-library.com/images/high-quality-icon-png/high-quality-icon-png-6.jpg"/>
                                </td>
                                <td class="txt-container">
                                    No chemicals or heat are used in any stage of 
                            the process
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="img-container">
                                    <img class="icon" src="https://icon-library.com/images/high-quality-icon-png/high-quality-icon-png-6.jpg"/>
                                </td>
                                <td class="txt-container">
                                    Retains a mild coconut flavor and aroma
                                </td>
                            </tr>
                        </table>
                    </div> 
                    <div class="image">
                        <img id="large-image" src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/06.jpg" loading="lazy"/>
                    </div>
                    
                </section>
                <section id="benefits">
                    <h2>Health Benefits of Consuming our Cocohealth</h2>
                    <br/><br/>
                    <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fcocohealth.myanmar%2Fvideos%2F337444847270728%2F&show_text=false&width=560&t=0" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; 
                    clipboard-write; encrypted-media; picture-in-picture; web-share" 
                    allowFullScreen="true"></iframe>
                    <br/><br/><br/>

                <div class="health-benefits">
                    <ul>
                        <li>Improves Type 2 and Type 1 Diabetes</li><br/>
                        <li>Supports the Immune System</li><br/>
                        <li>Helps with Hypothyroidism</li><br/>
                        <li>Reduces Heart Diseases</li>
                    </ul>
                </div>

                </section>
                <section id="pricing"></section>
            </section>
            <section id="footer">
                <div class="contact">
                    <p>
                        N0.55, Sein Lei Kan Thar Street,<br/> 
                        Ywar Thar Gyi Industrial Zone, <br/>
                        South Dagon T/S, <br/>
                        Yangon, Myanmar.<br/><br/>
                    </p>
                </div>
                <div class="subscribe">
                    <form id="form" action="https://www.freecodecamp.com/email-submit">
                    <label for="email">Get More Update:&nbsp;&nbsp;</label> <br/>
                    <input type="email" id="email" placeholder="jackson@gmail.com"/>
                    <button type="submit" value="submit">Subscribe</button>
                    <p>
                        Phone  : +959 4211 44724 <br/>
                        E-mail : info@mya-ayer.com
                    </p>
                </form>
                </div>
            </section>
        </main>
    </body>
</html>

This is the CSS code

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');

html,body {
    margin:0;
    padding: 0;
    
}

main {

    grid-template-areas: "head head head"
                         "cont cont cont"
                         "footer footer footer";
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    scroll-behavior: smooth;
    

   
}

#header-bar {
grid-area: head;
display: grid;
grid-template-areas:"logo nav";
background-image:linear-gradient(to left,#f7f451,#f8f487,#d0eb89,#f8f65b,#f7f451);
border-bottom: 1px double #19660f;
position: fixed;
width: 100%;
}

.logo {
    grid-area: logo;
    grid-column: 1/1;
    justify-self: start;
    align-self: center;
}

.logo img {
    width: 170px;
    height: 65px;
    border-radius: 50%;
}

.navigation {
    grid-area: nav;
    grid-column: 2/-1;
    justify-self: end;
    align-self: center;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding:5px;
    margin-right: 5px;
    font-size: 1rem;
    
}

li a{
    color:#2B7A0B;;
    text-decoration: none;
    font-family: 'Raleway',serif;
    font-weight: bold;
    
}

#content {
padding-top:70px;
grid-area: cont;
background-image:linear-gradient(to top,#f8f487,rgb(241, 241, 189),#fff,#fff,rgb(252, 248, 198),#f8f487);
display: grid;
grid-template-areas: "home"
                     "benefits" 
                     "pricing";
}

#home {
    grid-area: home;
    display: grid;
    grid-template-areas: "title title title title"
                         "image image intro intro";
    grid-template-columns: 2fr 1fr 150px 1fr;
    
}

.title {
    grid-area: title;
    justify-self: center;
    align-self:center;
}

.title h1 {
    font-family: 'Amita',cursive;
    font-size: 3rem;
    color: #2B7A0B;
    margin: 0;
}

.title p {
    font-family: 'Raleway',serif;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    color: #b9bb48;
    margin: 0;
}
.intro {
    grid-area: intro;
    border:1px solid transparent;
    border-radius: 50px;
    justify-self: center;
    align-self: center;
    margin-right: 30px;
    background-color: rgb(232, 235, 77,0.4);
    padding:20px 30px;}

.facts {
    width:auto;
    height:auto;
}

.img-container {
    width:45px;
    height:35px;
}
   
.icon {
    width:30px;
    height:30px;
}

.txt-container {
    font-size:16px;
    color: #797a16;
    font-weight: bold;
    font-family: 'Raleway',serif;
    padding: 5px;

}


.image {
    grid-area: image;
    margin:5px 10px;
    justify-content: start;
    align-items: center;
     }
    

.image img {
   max-width: 90%;
   max-height: 90%; 
   padding-top: 15px; 
}
   

@media only screen and (max-width:950px) {

    .txt-container {
        font-size:15px;
        color: #797a16;
        font-family: 'Raleway',serif;
    
    }

    .intro {
        grid-area: intro;
        border:1px solid transparent;
        border-radius: 50px;
        justify-self: center;
        align-self: center;
        margin-right: 14px;
        background-color: rgb(232, 235, 77,0.4);
        padding:10px 10px;}

}


.contact p, .subscribe label, .subscribe p{
    font-size:14px;
    font-family: 'Raleway',serif;
    color: #f8f65b;
    font-weight: 200;
}

input {
    width: 180px;
    height: 35px;
    margin:10px 3px 0 0;
    background-color: #e7dc40;
    border:1px solid #19660f;
    color:#376810;
    font-size: 13px;
    padding:0 5px;
}



@media only screen and (max-width:768px) {
    #home {
        grid-area: home;
        display: grid;
        row-gap: 1em;
        grid-template-areas: "title title title title"
                             "image image image image"
                             ". intro intro .";
        grid-template-columns: 100px 1fr 1fr 100px;
        
    }

    .intro {
        grid-area: intro;
        border:1px solid transparent;
        border-radius: 50px;
        justify-content: center;
        align-content: center;
        min-width: 220px;
        background-color: rgb(232, 235, 77,0.4);
        padding:10px 10px;}

        .image {
            grid-area: image;
            justify-self: center;
            align-self: center;
            margin:0 auto !important;
             }
        
             .image img {
               
               max-width: 100%;
               max-height: 100%;
               min-width:350px ;
               margin-left: 40px !important;
               
                }
                .contact p, .subscribe label, .subscribe p{
                    font-size:14px;
                    font-family: 'Raleway',serif;
                    color: #f8f65b;
                    font-weight: 200;
                }
                
                input {
                    width: 180px;
                    height: 35px;
                    margin:10px 3px 0 0;
                    background-color: #e7dc40;
                    border:1px solid #19660f;
                    color:#376810;
                    font-size: 13px;
                    padding:0 5px;
                    
                }
}

#benefits {
    grid-area: benefits;
    
}

h2 {
    font-family: 'Raleway',serif;
    color: #2B7A0B;
    text-align: center;
}

iframe {
    display: flex;
    margin:0 auto;
}


.health-benefits {
    color:#2B7A0B;
    font-family: 'Raleway',serif;
    font-size: 1.25em;
    display: flex;
    justify-content: center;
    align-content: center;
}

.health-benefits ul li {
    list-style: none;
    

}

.health-benefits ul li::before {
    content:'';
    display: inline-block;
    background-size: 20px;
    background-repeat: no-repeat;
    margin: 0 10px 0 0;
    height:30px;
    width:30px;
    background-position: left center;
    background-image: url('https://icon-library.com/images/green-check-mark-icon-transparent-background/green-check-mark-icon-transparent-background-12.jpg');
}


#pricing {
    grid-area:pricing;
    background-color: darkred;
}

#footer {
grid-area: footer;
background-image: linear-gradient(to top,#19660f,#376810,#647918);
display: flex;
border-top: 3px solid #2B7A0B;
justify-content: space-between;

}

.contact {
   margin-left: 5px;
   padding-left: 5px;
   justify-self: flex-start;
   align-self: center;
}

.contact p, .subscribe label, .subscribe p{
    font-size:16px;
    font-family: 'Raleway',serif;
    color: #f8f65b;
    font-weight: 200;
}

.contact p, .subscribe p {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.subscribe {
    margin:5px;
    padding: 10px;
}

button {
    background-color: #d0eb89;
    border:none;
    width:80px;
    padding:8px 3px;
    font-size:13px;
    font-family: 'Raleway', serif;
    border-radius: 30px;
}

input {
    width: 180px;
    height: 35px;
    margin:10px 3px 0 0;
    background-color: #e7dc40;
    border:1px solid #19660f;
    color:#376810;
    font-size: 15px;
    padding:0 5px;
    
}
4

I don’t see the behavior you are talking about. It jumps to the sections as expected.

BTW, scroll-behavior: smooth; should be on the html selector.

5

When I try running that on my browsers-Chrome, Microsoft Edge and Firefox, after clicking #benefits nav button and then clicking #home to navigate the home section, it brings the scroll bar a little bit down of the page, not to the very first h1 element of the title class but to the second p element tag . I have to scroll a little up to see the h1 element, which is written ‘Cocohealth’ on the top.

6

If I understand you correctly you can use scroll-padding to compensate for the fixed header.

html {
  scroll-padding-top: 69px;
  scroll-behavior: smooth;
}
1 Like
7

Thank you, it works perfectly now.

8

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