freeCodeCamp Project Done #3: A Product Landing Page

#showdev #html #css #webdev

Hello!I just finished my third project on the freeCodeCamp Responsive Web Design course (HTML and CSS only) and I am ready to share my work!
I worked on Landing a landing page for a winery

CodePen Link

Feedback On The Work done

Unlike the last two projects, the Tribute Page and the Surver Form, this project took time.

Deciding on what product to work on 😅. I know this might sound trivial but it's not. The list was endless!
The color theme. It's one thing to choose a background image, it's another thing to choose complementary colors to match it
The overall layout of the page. I had to think and re-think this one several times😅

One important concept I learned from this project was the use of the CSS display:flex. I found this property is very important especially when making the web page responsive. It eases the work in a superb way 😁.

Your contributions from the last projects greatly helped me here in deciding what to do and what not to do. Thanks a lot!🤗

As always I will greatly appreciate your suggestions, impressions and contructive criticism. I am happy and ready to learn 🤓.

                                            💞 Babi

Top comments (23)

Akumah Ndeh-Ngwa • Mar 14 '21

Congratulations on your progress so far😊.

You mentioned having difficulties in choosing appriopriate colors. I recommend choosing colors from the already existing background image. That should easily give you a theme. It's important not select a theme which conveys a message in colors the same as the page is communicating in information.

𝐁𝐚𝐛𝐢 ✨ • Mar 14 '21

Thank you Akumah😊

I'm sorry I didn't get your point on choosing colours . Could you please rephrase?

Alakowe • Mar 19 '21

Hi Babi-B,
I believe Akumah is saying you can choose a colour from the background image you have decided to use.
I like the recommendation too.

𝐁𝐚𝐛𝐢 ✨ • Mar 19 '21

Oh thank you Alakowe

Mamun Abdullah • Mar 16 '21

use this code at the top your css and then click on any of your navigation/menu to see the result.

html {
  scroll-behavior: smooth;
}

If you can stay in touch for a while, I also can suggest you for some development on this project, that will also be useful for your other projects. However, it's fine at this level. Go ahead.

𝐁𝐚𝐛𝐢 ✨ • Mar 16 '21

Hello Mamun! I tried the property and I think it's superb! Thanks 😃 !

Here check out the effect --> codepen.io/babi-b/full/zYoygoP

MOATAZ795 • Mar 15 '21

Well done. You can choose perfume as a product next time I think it's a very cool landing page.

𝐁𝐚𝐛𝐢 ✨ • Mar 15 '21

Thank you MOATAZ795.😊
Yes a perfume landing page sound awesome!

KillianCalderon • Sep 27 '22 • Edited

Recently, I developed a landing page for a small perfume startup. It was quite an interesting experience in web design. I usually work with products that I use in my everyday life. Accordingly, I adore completely different fragrances. You can find very sweet or subdued, pungent fragrances in my collection. I choose perfume for every season. Usually, in winter, I like to use luscious, musky perfumes. In summer, I buy citrusy, refreshing scents. Most of the time, I order from decantx.com, where I can find both women's and men's fragrances.