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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more