Responsive Landing Page UI Design for a Nutrition Page

This template is a perfect example of a landing page of a website in the nutrition/food niche. The main attraction of the design is the background image that uniformly blends with the rest of the design. It also provides a surface to display other important content. 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 cover image. The ‘Yellow Sea’ color can be used for user-interactive elements such as buttons. The ‘Solitude’ color is primarily used as the background color. The color ‘Nero’ can be used for text. The color ‘Persian Green’ can be used for any secondary elements.

Fonts Used

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

2. Merriweather – This font is used in the main title of the page (Healthy Living). You can get this font for free from Google Fonts – Google Fonts

3. 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.