Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

image
image845×81 4.03 KB

Hello, I’m stuck on this error, I’ve put a random project-tile class element in line 49, but it is not working something must be overriding it.

Your code so far

HTML CODE

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">

    <title>Personal Portfolio Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    <link rel="icon" href="img/user.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alegreya&family=Open+Sans&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
    
    <section class="hero">
        <div class="main-width">
            <header>
                <div class="logo">
                    <i class="fa-solid fa-b"></i>
                </div>

                <nav>
                    <div class="hamb">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <ul class="nav-list">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="https://github.com/szabolcsthedeveloper" target="_blank" id='projects'>Projects</a></li>
                        <li class="btn"><a href="#">Contact Me</a></li>
                    </ul>
                </nav>
            </header>

            <div class="container" id='welcome-section'>
                <div class="hero-text">
                    <h3>Hello, World!</h3>
                    <h1>I Am <span class="input"></span></h1>
                    <p></p>
                    <div class="social">
                        <a href="https://www.linkedin.com/in/szabolcsthedeveloper/" target="_blank"><i class="fa-brands fa-linkedin-in" class="project-tile"></i></a>
                        <a href="https://github.com/szabolcsthedeveloper" target="_blank"><i class="fa-brands fa-github"></i></a>
                        <a href="https://www.instagram.com/szxblcsnxgy/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://twitter.com/0xSteven_" target="_blank"><i class="fa-brands fa-twitter"></i></a>
                        <a href="https://discord.gg/ryftpass" target="_blank"><i class="fa-brands fa-discord"></i></a>
                    </div>
                    <button type="button">More About Me</button>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript" src="js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <script>
        var typed = new Typed(".input", {
            strings:["Szabolcs Nagy", "A Web3 Enthusiast", "", "A Front-End Developer", "A Python Developer"],
            typeSpeed: 70,
            backSpeed: 60,
            loop:true
        })
    </script>

</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

You have duplicated the class attribute for the same element:

 <a href="https://www.linkedin.com/in/szabolcsthedeveloper/" target="_blank"><i CLASS="fa-brands fa-linkedin-in" CLASS="project-tile"></i></a>

In your code line shown here, the class attribute is emphasized by uppercase purposefully.

1 Like
4

You have the ids with the same value in the code. It is forbidden in html. Check it out for yourself:

6

I think the element(s) with class project-tile need to be inside the #projects div. I added a random element in there and it then passed that test.

1 Like
7

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