DEV Community

Cover image for tailwind based responsive Superbikes Display Website.
Pradeep Tumbinavar
Pradeep Tumbinavar

Posted on

tailwind based responsive Superbikes Display Website.

The website has been named as "GT-CUSTOMS," which is a Tailwind-based responsive website for the premium superbikes display and information.

The webpage has the following sections:

  • About: This section includes the brand intro and details.
  • Bikes: This is a card-based display of currently available bikes at the showroom.
  • Brands: This is a scrolling display of the brands available at GT-CUSTOMS.
  • Enquire: This is an enquiry page consisting of a form and social media pages links of the brand.

The colors used in the website are:

  • Body background: The body Gradient comprises the colors #CA8A04 (yellow-700) and #D1D5DB (gray-950).
  • Navbar background: Backdrop blur color of #111827.
  • Navbar icons: Navbar icons are based on the color combinations of bg-yellow-400 & bg-yellow-500.
  • Font color: All font are of the color #838710 (gray-300).
  • Heading font: Main headings and brand title are of #D2D906.

The icons can be found at [https://fontawesome.com/], while the PNG files are available at [https://www.pngegg.com/en/].

The Font family is derived from Google fonts, where all body text is of the "open-sans" and main headings are of "black-ops."

These are the Laptop screen-snaps of the website:
i. Home-screen:

home page of the website

ii. Bikes:

bikes page of the website
iii. Brands:

brands page of the website
iv. Enquire:

enquiry page of the website

The webpage is currently hosted on the Github-pages:
πŸ”— link of the webpage hosted at github

⚠️i am still learning tailwind if you find any corrections or suggestions feel free to inform!

Top comments (0)