Portfolio Project Help

Here is my current site so far: https://codepen.io/dadleatherwood/pen/BpLegq

I have a few questions.

  1. How can I get my nav bar buttons centered top to bottom? I have tried display: inline, but didn’t work.
  2. How can I display my icons on the right of the screen instead of under my h3?
  3. How can I add a screenshot of my websites I have created in the portfolio section?
  4. I picked grey icons from google search for my linkdin, twitter, facebook, etx icons. Is there a better way to get them formatted the same way?

That is it so far. This is my 8th day coding, so I am trying!

1 Like

Hello - there’s probably a number of ways you could accomplish these tasks.

for 1. I would read about the line-height property. It should help you accomplish your goal
for 2. You could use a float, you could rewrite your html and use flexbox all kinds of stuff I assume(?) bootstrap would have a way of doing this too
for 3. i am not exactly sure what you’re asking but perhaps you can use an iframe? iframes are like nested html documents within your HTML — this is how codepen displays your pens when you are viewing your list of pens. If you just want to display a static image then use the img tag as you have been doing
for 4. again not exactly sure what you are asking here

Hope this helps a little bit and have fun :slight_smile:

  1. Not sure if this is the best solution, but you put all three buttons in a container div, and a row div in there. Once you have that, put each button in its own div with class="col-lg-12". This will force it to take the whole row. You’ll need to add padding somewhere to space them out because this solution forces them to overlap a bit.

  2. Not sure yet.

  3. The only way to do it with codepen would be to host the images somewhere (e.g. imgur) and use the link in an <img> tag.

  4. Also not to sure what you mean by 4, Google searching for icons is also how I find mine usually.