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.
Thanks,
Melinda
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="http://forum.freecodecamp.org/t/my-product-landing-page-is-for-photography/259358/3" 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
</section>
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 
)
Iām on the basic plan myself and itās been more than enough for me.
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.
header {
z-index: 10;
}
The slideshow is covering up the get started button, push it down the page. You can use margin-top on the slideshow container.
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.
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.
Go to line 267, there you have the #portfolio selector.
Now you want to nest your link selector inside the #portfolio selector.
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.