Product Landing Page - Succulant

Hello People,

Finally I have finished my product landing page. Here is link :

Updated: It is available on Github now here is a link to my GitHub Page

More about project,
Subject : Succulent plant - Landing Page

Here is my drawing slight_smile:

Purpose : I have decided to participate in Pink Ribbon fund raising event in the month of October 2018 with the extraordinary
Idea.I must be as a part of FCC.(Last year did baking was cool too but not like this year i hope)
So the plan is I’ll share the link to my close friends, family and workmate living close to me.
They can choose and add it into cart and I have email option cart details where they can easily send me email.
I haven’t confirm anyting about payment yet. But, I can make page on Pink ribbon website and they can transfer amount they like.

I haven’t set up email functionality in codepen. but will make it live eventually.

Overall that’s the plan use my coding knowledge for something good. Let’s see hows it goes.

Please share your thoughts and feedbacks.

Much appriciate !

Happy coding.

Special thanks to She is my codding buddy :smile:



this sounds like a great idea, I love the concept.

If you can I would try to find a higher resolution image for the background, it is a bit fuzzy.

I am glad you like the idea. That’s temporary image i took from google but yea if you could then I would like to have.

Much appreciate your reply :slight_smile:

Happy coding :smile:

When I first load the page, the cart rolls appears and then rolls back up. That should not be happening.

This can be fixed by removing the following line:


and adding display: none; to #cart-items

True. I have commented out $("#cart-items").slideUp(); but then after it stay there. Now I am using #cart-items{display:none} as a default setting and slideToggle() will take it from there

Exactly what I said. This project has great potential.


Didn’t notice the line :frowning:

best I’ve found so far, not sure about copyrights, but they seem to be free wallpapers.

edit: messed up linking the first, fixed I think

Awesome I 'll go with first link. Very nice. Thanks for your effort. Much appreciate :blush:

Hey @amcmullan I have made changes to image and check out my updated link here

Its look better than last one :+1:

Thanks :smile:

Nice! looks great, thanks for showing me the changes.:grinning:

I just went through it and this is nice… In my observation towards the Cart section… It shows the hover value to be in text, i played around with it and i feel its best if you can set it to pointer.

You can just add cursor: pointer to the (id) #cart-items in CSS…
Keep up the work

I really, really like this! Well done!

Hey @MonikaPatelIT, it looks really good and I love the idea. A few tips from my perspective.
Footer color and size look a bit out-styled. It could be on the full width of the page (it’s usual for the footer section) and you could experiment with the colors, maybe make it a little lighter. And you could make it a little higher, it’ll look better.
Good luck with the project!

@otismario very detailed eyes. I didn’t notice. Thanks I have made the changes. Really appreciate :slight_smile:

Happy codding :wink:


1 Like

Thank you @campermaybury :smile:

Hey @guar47, That’s true. I play with some lighter colors mean while and increase the height to make it more effective. I am having issue aligning footer that’s why for temporary fixed i have added whole footer inside tutorial section. I have to figured out something eventually.

Much appreciate :slight_smile:


1 Like

You really need to put a max-width on your site.

That’s amazing! I haven’t finished learning html/css, so I don’t understand how you did it, but it lookes amazing.

It looks amazing. I was completely in awe!
However it’s missing 5 User Stories! Yikes!