My product landing page is for photography

I finally finished my product landing page. I decided to use it as a springboard for my photography. One day I want to build a website for my pictures. In the meantime, I would appreciate any feed back on this project.


Edited to add the correct URL.

I feel like there should be some images considering that is what the page is about, don’t you?

I’d like to see it deviate more from the example project, both in look and in code. Otherwise, it gets a little “copy-pastey”. I know it is all a bit overwhelming at first, but it is only through experimenting and failing a lot that you get better. See if you can’t add a small gallery section and come up with a bit more of your own look to the page.

BTW. If you add this filter to your logo, it almost looks like it has transparency.

.logo img {
  filter: invert(7%);

I appreciate the feedback. I’m trying to get away from the copy paste feel. One thing I’ve been having trouble with is figuring out how to link. It seems like code pen only allows images from flickr, when most of mine are elsewhere. And links just seem to go back to the top of the page. My original logo is much different, but I was having issues with the whole thing, and added a modified version of it.

But honestly, thank you for the feedback. I will try to work on it more tomorrow.

I think the main image host Codpen has issues with is imgur, you should be able to find a host that works with Codpen. Where are your images hosted?

If your links just jump to the top of the page then you are not linking correctly. Any link with the href set to # will jump to the top of the page.

This link will jump to the top of the page
<a href="#">Some link</a>

If you have a google account you can store your images there. right click on the image and copy the address. Paste that in code pen.

@lasjorg How do I link it correctly then? That’s what I’m doing because that’s what I thought I was supposed to.

@ChrisCline1138 I do store a lot on Google Drive. I don’t remember why, but it wasn’t working correctly before. I’ll try again. Thanks.

This is a link to this forum page. When clicked it will take you to a new page in a new tab/window.

<a href="" target="_blank">Link to FCC forum thread</a>

This is an internal link to some part of the page you are on, you will stay on the current page.

<a href="#photo-section">Photos</a>

<!-- Section the link goes to -->
<section id="photo-section">
...other html
1 Like

I see. I think I need to add the target=“blank” to my link. Thank you.

Just to be clear.

target="_blank" just forces the browser to open the link in a new tab/window. It does not affect the actual address the href needs to point to.

To make sure your links go where you want them to, the href value is what is important. It needs to point to the URL of the resource or page you are linking to.

FCC: Basic HTML and HTML5: Link to External Pages with Anchor Elements

Hi @mghollis38,

It seems that you’re still working on improving the landing page from the FCC-given example so I won’t comment much.

One simple thing you can improve is the footer: center the elements instead of making them right align (example: Netlify.

I only have my phone right now so it’s difficult for me to play around with your CodePen and show how aligning works. Tell me if you need help and I’ll write the proper code when I have my laptop.

Anyhow, disregard this if you’re okay with the right-alignment.

Good luck on improving your photography portfolio.

Okay. Center alignment in footer, done. Links, fixed. Next step is to research and learn how to add pictures. Thanks everyone.

It appears the issue is going to be where the images are hosted. So far, Google Drive isn’t working and neither is linking from facebook. Next attempt is the twitter and instagram pages.

Just to make sure I’m doing it correctly, the code is supposed to be < img src = “website” alt = “description” > correct?

I had luck uploading my images to my GitHub and linking from there. Had to use Chrome to get the ‘copy link address’ option in a right-click.

At some point I’ll work more with GitHub. At the moment, I’m using Flickr.

My pictures are there… but not showing up. I have to figure out why. But they are there.

ETA I got it. They are too big, but I got it! Okay, got that problem solved, on to the size issue

ETA. Fixed the size. The vertical pictures still seem too big, but the horizontal pictures feel just about right. Still tinkering with it, but I think I’m pretty close.

I had massive issues with hosting when I got to the assessments. After disappointment using Dropbox and Imgur and Google Drive for hosting whilst I was doing my pages for the HTML/CSS section, I ended up using Cloudinary which is probably a bit powerful for what we need, but ultimately a basic account is free, discreet and allows us to host the images we want and for them to always work. This is an invite to join (Full disclosure: I get a couple of extra free GB’s of storage if you sign up for it using my link (a bit like sharing Dropbox - it’s not nefarious, just a good way for us to get extra goodies for nothing :smiley: )

I’m on the basic plan myself and it’s been more than enough for me.

1 Like

Oh, I just realized I didn’t have the correct link. I forked the pen so I could add the pictures. Here ya go.

Nice I’m a little impressed that you got a slideshow working. Good job.

  1. Give the header a z-index so that it is on top of everything, right now when you scroll the page the slide-show goes over the top of the header.
header {
  z-index: 10;
  1. The slideshow is covering up the get started button, push it down the page. You can use margin-top on the slideshow container.

  2. I would maybe add some links to your work (if you want).

Just FYI, another way of getting a slide-show with flickr is to use the share button on a gallery and then pick the embed option. It will give you a little snippet you can copy and paste into the page. Not as much fun as making your own but I just wanted you to know about it. flickr also has an API, which means in time when/if you learn about APIs and JavaScript you can dynamically get images, do search and so on. It might be fun working with seeing as you have your own images.

1 Like

Thanks for the great feedback @lasjorg.

I’ve been working pretty hard on it today.

I didn’t realize the slideshow was getting covered up until just a few minutes ago. I had been checking on my phone and didn’t do it the last time. I’ll have to fix it later.

There is a link. It’s under portfolio where it says, " You can find most of my work on my Facebook Book page, Gardner Photographix." Gardner Photographix is the link. There’s another link under my friend “Craig.” I need to figure out how to change their colors so it’s obvious.

Thanks again for the advice. While I’ve finished and passed all the tests, it’s been fun working on it past the tests.

Because the project you forked is using SCSS the right way to add colors to the links is this.

  1. Go to line 267, there you have the #portfolio selector.

  2. Now you want to nest your link selector inside the #portfolio selector.

  3. To do this just go to line 280 and add a new line then put the link selector there.

a {
  color: darkorange;

Or if you are OK with all links having the color you can change the color on line 25 for all links.

1 Like