My picture won't appear

HTML & CSS
1

Hi

I´m coding a portfolio page with html and css but my picture won’t appear. I will copy in how the codes looks like so far and how the picture looks like on the page. Dose any one know what might cause this?

HTML CSS
HTML CSS2424×1130 72.9 KB

This is the HTML code:

<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="nav-bar">
            <div class="left-side">
                <div class="nav-link-bar">
                    <a href="Index.html">Home</a>
                </div>

                <div class="nav-link-bar">
                    <a href="about.html">About</a>
                </div>
            </div>
            
            <div class="right-side">
                <div class="brand">
                    <div>My Playground</div>
                </div>
            </div>
        </div>

        <div class="content-bar">
            <div class="portfolio-items-bar">

                <div class="portfolio-item-bar">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>

                    <div class="img-text-bar">
                        <div class="logo-bar">
                             <img src="images/logos/duncan.jpg">
                             <div class="subtitle">
                                 Join the pack
                             </div> 
                        </div>
                    </div>

                </div> 

                <div class="portfolio-item-bar">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>

                    <div class="img-text-bar">
                        <div class="logo-bar">
                             <img src="images/logos/jie.jpg">
                             <div class="subtitle">
                                 Childhood nostalgia
                             </div> 
                        </div>
                    </div>

                </div> 

                <div class="portfolio-item-bar">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>

                    <div class="img-text-bar">
                        <div class="logo-bar">
                             <img src="images/logos/jeremy.jpg">
                             <div class="subtitle">
                                 Surf with history in mind
                             </div> 
                        </div>
                    </div>

                </div> 
                
                

            </div>
        </div>

    </div>
</body>
</html>

This is the CSS code

/* Master styles */ 
body {
    margin: 0px;
}

.container  {
    display: grid;
    grid-template-columns: 1fr;
}

/* Nav styles */
.nav-bar  {
    display: flex;
    justify-content: space-between;
    padding: 38px;
}

.left-side {
    display: flex;
} 

.nav-bar > .left-side > div {
    margin-right: 20px;
    font-size: 0.9em;
    text-transform: uppercase;
}

.nav-bar {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition:  border-bottom 0.5s;
}

.nav-bar a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-bar:hover {
    border-bottom: 1px solid black;
}

.nav-link-bar a:hover {
    color: black;
}
 
/* Portfolio styles */

.portfolio-items-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-bar {
    position: relative;
}

.portfolio-img-background {
    height: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Best regards,
Filip

2

Hi @fiwi92 . Welcome to the forums

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

3

In the same folder as your HTML file, can you check and see if there is a folder called images and inside, then go to logos folder in that. Are your photos there? It just can’t find the images. You have a bad file path.

4

Understood and thank you!

1 Like
5

I find the issue thanks to you! :blush:

Thank you!

7

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