Share your repls and programming experiences

← Back to all posts
Product Showcase Website
h
Bookie0 (6371)

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:

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)

  • 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

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

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

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

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

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

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

  • 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


Links 🖇

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! 👋

Comments
hotnewtop
InvisibleOne (3215)

Your getting really good at css, this is cool

Bookie0 (6371)

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

VulcanWM (2898)

woah this is amazing!

Bookie0 (6371)

@VulcanWM Thanks, glad you like it! :)

VulcanWM (2898)

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

FlaminHotValdez (715)

Add to templates maybe too this is cool

QuickV (113)

poggity pog pog!

Bookie0 (6371)

@QuickV Thankity thanks thanks! xD

QuickV (113)

no problemy problemy problem! @Bookie0

QuickV (113)

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

Bookie0 (6371)

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

IMayBeMe (543)

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