Let's Connect!
RYOGA
RYOGA is an athleisure store I created for my media design class. I used the Adobe suite to create the HTML code and graphics for each product. It is fully functional with hover product images, checkout cart, banner ads, and GIFs.
APPLICATIONS USEd
HOMEPAGE
The homepage of RYOGA features navigable buttons that, when clicked, will take users to the specified pages. There is also a header-slider image with different promotions. At the very bottom of the homepage, and every page, are links to social media.
The CSS button design allows for different coloration when hovered. Also, the buttons are "active," meaning when users click the buttons they move to their desired page.
BUTTONS
SLIDER IMAGES
This feature of the code allows for the slider images to be navigable and fade when users click through each one. The code to the left shows the functions used to design the images to slide.
The code below shows each DIV, with phrasing about promotions, that each user could see if they clicked through the slides.
PAGES
After clicking on one of the buttons or promotions from the homepage, users are directed to a page with more specific products, such as new arrivals, men's, and women's products.
NEW
MEN
WOMENS
PRODUCT PAGE
Users are directed to a page like this after clicking a specific product, such as a silver New Balance sneaker from the New Arrivals page. I created a framework using CSS designer to make page duplication easier. Each image and button had a certain parameter to be filled depending on the product. In this example, the product is a New Balance sneaker.
HOVER IMAGE
Like a real online store, users see one main product image when visiting the product page. I included code so that when users hover over the smaller images below the main image, the small picture is shown in the large main image space. This makes it easier for users to see all product features.
CHECKOUT
RYOGA is complete with a functioning checkout process. Users select the amount of products they want, and their total is calculated for them. They also have the opportunity to enter shipping and contact details.
The "Order Area" was created with parameters for users to enter their product amounts, add the cost for the items and delivery, and create a total.
These are the specific costs of each item. The items are named "Item 1-10," and are added together with a math function at the end of the script.
If the total is greater than $50.00, there will be no delivery fee. However, a delivery fee of $6.00 will be applied if it is less than $50.00.
The return amount, or total, is calculated based on dollar amount functions.
