Skip to content
← Back to Community
Product Showcase Website
Profile icon
Bookie0

Product Showcase Website

Heyo!

Hope everyone's Summer Break is going great so far! This is a Product Showcase Website, developed mostly in HTML CSS and a bit of JS. Here's how it looks like:

howItLooksLike

What is it?

Imagine you have a product that you've spent a lot of time working on. Naturally, you'd like to advertise it and show it to the world! That's when this website can come in handy! It showcases your product, and shows that it can do. Not only does it do that, but a bunch of other features which I'll get right into now.


Features ✨

This Product Showcase Website will show off your great product as well as other things. This is the full list of what it contains:

  • Navbar:
    • Home, Product, About, Contact and Product Name links
    • Active element highlighted (so user can know exactly which section they're curently on)

navbar

  • Landing page
    • Big image of product to grap user's attention
    • Name of product
    • Text with slogan, contact us link, and more
    • Start now and View demo button

landingPage

  • Problem page
    • Shows the problem that started this product
    • Contains big number, image, text, and Learn more button

problemPage

  • Introducing page
    • Transition with arrow button to go to next section

introducingPage

  • Product page
    • Image of product
    • Name of product
    • Slogan and more text below

productPage

  • Features page
    • Left section with title and text
    • Right section with 3 features including title, icon, main text, and Learn more button

featuresPage

  • About page
    • Text about company
    • 3 cards each with name, picture, title, and contact me button of employee

aboutPage

  • Contact page
    • Contact form with first/last name, email, subject, message, and Submit button

contactPage

  • Footer
    • Product name with slogan
    • Explore part with links to all sections of website (Home, The problem, Product, Features, About, Contact)
      • Visit part with address
    • Contact part with link to contact form, email, and telephone number
    • Follow part with links to social media (Instagram, Twitter, Facebook, LinkedIn)
    • Legal part with terms and privacy

footer


Site ==> Product-Showcase-Website.bookie0.repl.co

Code ==> replit.com/@Bookie0/Product-Showcase-Website

Post ==> replit.com/talk/share/Product-Showcase-Website/142984


Style 🎨

SVG

The code uses a bunch of SVG shapes from haikei.app, a wonderful SVG generator. I used them for the transitions between sections, as well as for other various parts of the site (features, about, and footer section).

Colors

The colors used are:

Text colors

  • #cfd5d9 (main text color)
  • #6b3dc7 (secondary text color)
  • #37405f (tertiary text color)
  • #858e98 (quaternary text color)

Background colors

  • #0e131f (main background color)
  • #38405f (secondary background color)
  • #8a939c (tertiary text color)

Icons

The down chevron icon comes from Font Awesome. The accessibility, price, and customer support icons come from Ionicons.

Buttons

There are 2 types of buttons; those that are already full (meaning they have a non-transparent background color) and those that aren't full (meaning they just have a border). When the user hovers on the buttons, they all start rotating 2 degrees left and right. When the buttons are clicked, they get a bit bigger.

Responsiveness

As you can see from the images above, the site is completely responsive – meaning you can see it on any device (computer, tablet, phone, etc.).


Closing πŸšͺ

Well that's about all! Feel free to check out the code to learn more about how the site was constructed. You can of course use this site to showcase your own product, just credit me please. :)

Comments, suggestions, and feedback are appreciated!

Have an awesome day!

Bye! πŸ‘‹

Voters
Profile icon
tuxot
Profile icon
Bookie0
Profile icon
SilvermoonCat
Profile icon
AmoghTheCool
Profile icon
TonyWu4
Profile icon
ch1ck3n
Profile icon
VulcanWM
Profile icon
JWZ6
Profile icon
maxina
Profile icon
FlaminHotValdez
Comments
hotnewtop
Profile icon
InvisibleOne

Your getting really good at css, this is cool

Profile icon
Bookie0

@InvisibleOne Thank you! Glad I'm improving! :D

Profile icon
BIue

epic!

Profile icon
Bookie0

Thanks! :) @BIue

Profile icon
VulcanWM

woah this is amazing!

Profile icon
Bookie0

@VulcanWM Thanks, glad you like it! :)

Profile icon
VulcanWM

yeah its amazing how uve made it responsive :) @Bookie0

Profile icon
Bookie0
Profile icon
FlaminHotValdez

Add to templates maybe too this is cool

Profile icon
Bookie0

@FlaminHotValdez Lol thanks! :)

Profile icon
QuickV

poggity pog pog!

Profile icon
Bookie0

@QuickV Thankity thanks thanks! xD

Profile icon
QuickV

no problemy problemy problem! @Bookie0

Profile icon
Bookie0

@QuickV lolly lol lol!

Profile icon
QuickV

xD xxDDD xD (I'm practically Noobius McNoob xD) @Bookie0

Profile icon
Bookie0
Profile icon
QuickV
Profile icon
RayhanADev

Nice CSS :)

Profile icon
Bookie0

@RayhanADev Thank you! Glad it looks good! :D

Profile icon
IMayBeMe

And here I was thinking my webpage looked nice. Awesome design!

Profile icon
Bookie0

@IMayBeMe lol thanks! :)