Frontend - Luna

Homepage - code behind

HTML - Homepage

Screen Shot 2023-01-16 at 9 34 20 PM

Screen Shot 2023-01-16 at 9 35 11 PM

CSS - Homepage

Screen Shot 2023-01-16 at 9 37 30 PM

Screen Shot 2023-01-16 at 9 38 26 PM

Screen Shot 2023-01-16 at 9 39 26 PM

About

About - code behind

Email List

Wireframe from canva

Untitled design (13)

screen shot of the finished page

code behind the page

Screen Shot 2023-01-16 at 9 24 54 PM

Luna

Usually before I start making a new part of the project or website I draft it out in Canva. Doing this process allows me to only think about the code and not the aesthetics of the website while coding. This week I worked on the emailing list/subscription for users to sign up for with their emails. I also formatted the website from last week and added a new part onto the bottom of the site (index).

I also worked on adding the new pages on the website, aka the 'about site'. And I also made an 'input' part on the site. The input is the email input where users can add in their emails to join the emailing list.

The email's / inputs won't accepted unless it contains a '@' or isn't a valid email won't be inputted

In the future I am planning to add a table which will use the user inputs and make the combine into a table. We also plan on using an API which will automatically used the emails to send an email to all the emails avalible in the list.

Frontend - Ethan

Load Screen

image

Load Screen - Code Behind

HTML

image (1)

CSS

image (2)

Ethan

We’re gonna have to add more code what we have is just design. My preloader uses a function that displays the given image/gif while the screen loads, using windows.addEventListener We’re going to have to add some sort of input table and then start some backend fetching which I don’t think have either atm

Frontend - Taiyo

Product Cards

Taiyo

This code is the Inventory/ catalog. This code displays the different types of cars that we show on our website. I added a hover feature to enable the user to quickly like or view the description of the car. In the future, we will add hyper links to the hover cards to send the user to a full description of the said car. We also have a small “By:” section on the bottom of the card that when clicked, will lead the user to all the cars made by that manufacturer.