Images not showing on Portfolio

1

Hi,

I’m working on the portfolio project. I can’t seem to figure out why my profile image will not show in the demo. The “alt” for the image is displaying so I know the editor is reading it but I’m not quite sure why the image itself isn’t working. I’ve tried images on my local computer and image links from online. Neither seems to be working. Could it be a setting in Codepen?

Also, I’m struggling to format my form at the bottom to make it align vertically like in the example.


Any feedback on these items and anything else you notice will be greatly appreciated. Thanks!

Brandon

2

Can you link to your Codepen/whatever site your portfolio is on?

3

My bad. https://codepen.io/bbrawley/pen/OxPNQM

4

Cool. Ok, so the profile image does not show up because your google link is eventually linking to a YouTube video page. Sweet video, by the way! :slight_smile:

The img tag needs to be linked to an image file that typically ends in a .png, .jpg, .gif type of file, not a video. You can still embed your video using YouTube’s embed code (here for your convenience):
<iframe width="560" height="315" src="https://www.youtube.com/embed/WX2Jl6B_X9k" frameborder="0" allowfullscreen></iframe>

Do you mind also linking to an example of how you want the form to look like?

1 Like
5

Thanks for the quick feedback! That makes sense but I’ve tried different images and it still won’t work. I’ll change it really fast so you can see what I mean. Also, is it possible to add photos from the local computer to a codepen? because that doesn’t read for me either.

Here is the link to the example.

6

Actually using a link to a jog does seem to work. But I wonder why images from the local computer are not working. Any ideas? I’ll change the code to reflect one.

7

I just took another look at your Codepen, and the reason the img isn’t working is because you need the closing " quotation at the end of the src attribute.

You can’t use photos from your local machine, because Codepen and other people can’t see them. You would need to upload them to somewhere like imgur, flickr, or possibly dropbox (there are lots more, but that’s just off the top of my head).

The form is not centered because the outer form tag was not closed; it should be something like:

<form id="contact " class="container-fluid ">
       <h2>CONTACT ME
 <br>_______________&lt/&gt__________________<h2>
         
        <form class="form-group ">
           <input type="text " name="name " placeholder="Name "><p></p>
            <input type="text " name="email " placeholder="Email Address "><p></p>
            <input type="text " name="phone " placeholder="Phone Number "><p></p>
            <input type="textarea " name="message " placeholder="Message "><p></p>
            <input type="submit">
         </form>
     </form>

to just get it the way that you want it to look. I’ve added the a submit button to make it look like it’ll go somewhere, but it doesn’t. There are some issues that aren’t good HTML practices, like not closing the h2 tags, but it will change the look you might be going for, and perhaps some of that work may be abstracted by Codepen anyway, so I’m not going to worry about that.

Let me know if this is helpful.

EDIT: My bad, you should just add <p> tags to separate out the inputs. I was using Codepen with the main screen at a small size and did not resize the window to check if it was working like you wanted.

1 Like
8

That worked. Thanks for your help. Both of those issues have been puzzling me for hours. Also thanks for pointing out the missing closing tags. I’m so used to brackets closing it out for me.

9

Hi,

I’ve made considerable changes since we last spoke. Can you help me figure out the following:

  1. how to reduce the whitespace in my navbar?

  2. why I can’t seem to change the background-color of the body nor of navbar? Even when I use the id…(notice the whitespace between the section1 and section2).

  3. how to indicate what section the user is on when they scroll? I don’t believe that was in the coursework up to this point.