Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

What is wrong with my coding so far?
I’m also trying to find resources to help me find my syntax errors and how to solve them on my own.

Your code so far

/* file: index.Ext.html */


<!-- This is the beginning of my page-->
<!DOCTYPEhtml>
<html lang="en">
    <!-- Introduction and Title of webpage-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport",content="device, device-width,initial-scale="1.0">
        <title></title>
        <link rel="stylesheet" type="text/css" href="personal.css">
    </head>
    <!-- Main Section-->
    <body>
        <header id="header">
          <nav id="nav-bar">
           <a href="#about" class="nav-link">About</a>
           <a href="#services" class="nav-link">Services</a>
           <a href="#contacts" class="nav-link">Contact</a>           
           <a href="#footer" class="nav-link">Footer</a>    
           </nav>
        <img id ="header-img" 
         src="https://www.bing.com/images/create/a-deck-of-fanned-playing-cards-with-aces-of-all-su/1-6626c0696da7491589561b957fefe053?id=IlFjKsjzGu3kLHELOdTLeA.lMndn43ERIxMsgBIicOEuQ&view=detailv2&idpp=genimg&thid=OIG3.7sjv.ZYykrWGPGodvP5.&form=GCRIDP&ajaxhist=0&ajaxserp=0"alt=logo 1
           <h1>Oscar Ragland Tech Junkie</h1> 
            </header>
            <section>
            <div class="hero">
                <div class="main">
                    <div class="button">
                        
                    </div>
                </div>
                
            </div>
            </section>
    </body>
    </html>

    
    

/* file: styles.Ext.css */


        /* Ensure the navbar is fixed at the top */
#nav-bar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            padding: 1rem;
            z-index: 1000;
/* Style the nav links */
        .nav-link {
            color: white;
            text-decoration: none;
            margin: 0 1rem;
        }
        /* Add hover effect for nav links */
        .nav-link:hover {
            text-decoration: underline;
        }
        /* Add some padding at the top to prevent content from hiding behind the navbar */
        body {
            padding-top: 60px;
        }
        /* Style sections for better visual distinction */
        section {
            padding: 60px 20px;
            border-bottom: 1px solid #ccc;
        }

Your mobile information:

moto g pure - Android 12 - Android SDK 31

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

if you wanna check your html, you can use this online validator:
https://validator.w3.org/nu/#textarea

Please tell us why you wanted help? It is not clear from your question.