Responsive Website UI Design for a aqua fish page

This landing page design can be used for showcasing a product in the aqua related category. The main attraction in this design should be the product, in this case, it is a siamese fighting fish. It is also displayed with reduced opacity in the background. The title name is placed such that it creates a different feel as it interacts with the product image. Be sure to use a transparent png for the product image. The colors used for the text and buttons are derived from the background image. This design is a responsive design for phones and tablets.

Colors Used

Given below are the colors used or can be used along with this template. The colors are mainly derived from the background image. The ‘Solitude’ color is used for the gradient text of the title. The ‘Tomato’ color can be used to provide detailing to the elements on the page. The color ‘Cyprus’ is the main color used in the background. The color ‘Baby Blue’ can be used for any additional elements that need to be used.

Fonts Used

1. Roboto – This font is primarily used in the navigation bar text and title. You can get this font for free from Google Fonts – Google Fonts

2. Open Sans – This font is used in the description text. You can get this font for free from Google Fonts – Google Fonts

Responsive Design

This UI design is responsive, i.e it renders well on all types of devices such as smartphones, tablets, desktops, etc. You can see how it looks on different devices below. The complete code for this responsive design including HTML and CSS is also provided for free.

Complete Code

Scroll to Top