Problems with adding different pictures to the gallery page

I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family… I’ve tried to do so but it isn’t working the way it should.

Here a codepen of the problem:

I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view. The way it is now, it shows the code: " alt=""/> rel=“shadowbox[picture]” title=“a”> followed by a broken image symbol. That broken image symbol shows up in Dreamweaver in design/split view as the thumbnail image but the code still shows before it and that thumbnail image isn’t in a shadowbox. When clicking it, it takes us to a new page where it shows only the thumbnail.

Any help is greatly appreciated!

 <a href="../Documents/SU Fall 2017/Foltz class/img_Lawtons_Marina.jpg"></a>" alt=""/> rel="shadowbox[picture]" title="a">
    <img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">

This is because you are closing the anchor tag too early on the first line with </a>
And then closing it again on the third line

Your pictures aren’t going to show up on a website unless they exist online. Instead of urls you are setting the href and src attributes to the location of the photos on your personal computer.