Loading..

Kiku Landing Page

Project Overview

INTRODUCTION

The objective for this project was to create a landing page for a potential Japanese cuisine restaurant website that presents a solid brand presence through its sectional components such as image gallery and carousel slider. This website was developed with pure JavaScript and is responsive for 5 breakpoints using Bootstrap built-in breakpoints and was my first initial experience using GitHub for bug testing and managing issues. 

PROJECT INFO

LANDING SCREEN

This is the landing page screen for the Kiku website as it displays a Bootstrap framework built carousel slider with call to actions buttons that would ideally navigate to the menu or reservation page. At the very top I developed a notification bar that notifies the user about the free delivery which would disappear and be pushed upwards offscreen by JavaScript function that I created when the user clicks the ‘X’ icon on the far right (couldn’t fit on this image). I additionally made this navigation bar transparent for aesthetic looks and feels only when the navbar is scrolled to the top so when the user scrolls down, the navbar would shrink and have a background color.  

MENU SCREEN

This is the menu section where I display the 4 sections into card elements. These elements are mobile responsive and would shrink as the view width is scaled down. This section is straightforward as there is a description and a button that would lead to the menu page when clicked.  

ABOUT SCREEN

This is the who we are, essentially the About section where I display an image at full width 50% on the left with the content on the right side. I originally had this background color as transparent however, throughout the feedback from my group, we decided to add a bit more color since the website felt very colorless and empty.

IMAGE GALLERY SCREEN

This is the image gallery section where I display an isotope style gallery that the user can filter out the image using the buttons displayed at the top. Each image is clickable as its implementing the lightbox option to view in a carousel slider. 

OUR TEAM SCREEN

This is the our team section where the site would display their chefs and staff members that are relevant to the company. I utilized a card element as well as this would shrink into single column when the page is scaled down. Straightforward and simple layout that has a button to navigate to their own page. 

STORE INFO SCREEN

This is the final section I added which is the store info section where I integrated the Google Maps API. On the right I have the following store details along with its relevant social media links. 

Scroll to top