AIR GARAGE CLONE
TOOLS USED: — —
- HTML: For describing the structure of the webpage.
- CSS: For describing the presentation of Web pages, including colors, layout, animations, and fonts. To arrange the HTML elements with respect to the size of the device.
- Javascript: For making the web pages more interactive.
ABOUT: — -
Login and Signup Page — — — — — — — — — — — — — — — -
In both login and sign-up pages, we used HTML input and label tags. For arranging and designing the elements we used CSS flex-box, colors, google fonts for changing the font style of the text, media queries are used for arranging the elements in small devices, devices below 720px.
Home Page — — — — — — — — — — — — — — — — —
* Header Section
It is a simple front-end static website. The first part of the website is the login and signup page. Once the user registers himself he will be diverted to the home page. The home page contains a navigation bar that has options to find parking through the google map, parking solutions, case studies, it has a login icon, which the user can use if the user has not logged in yet and get a demo using the demo icon. Case studies contain many blogs written upon the user experiences regarding this site. After that, there are companies logos with whom Air garage has partnered with.
To create the header section mainly I have used flexbox, CSS positions, media queries to make the elements get adjusted according to the screen sizes. The main challenge that I faced was in replacing the navbar with a hamburger icon when the screen size goes below 800px. For resolving that part I have used positions and display property. To add the scale in scale-out animation to the icon present in the header we used CSS animation property.
Here for changing the color, saturation, sepia, contrast, opacity, and brightness of the company partner icons,CSS filter property has been used.
* Map and Demo Section
Then comes the Map section which displays the places where Air garage is serving their clients.
To create the map and demo section we have used flexbox, media queries to make the elements get adjusted according to the screen sizes. Here to display the map we have used a map gif. For the demo section, we have used a button, upon clicking that button user will be diverted to the demo form.
* Middle Section of the Home Page
In the middle section, flex-box has been used for laying out the elements and media queries for changing the flex-direction of elements according to the screen sizes. For scaling in and out the icons, we have used CSS animation property, and google fonts have been used for changing the font styles.
The major issue that I faced was setting up the page for the small devices(devices having view-port width below 700px). All HTML elements were overlapping over each other. For resolving this issue I used min-width, for setting up the minimum size of the HTML elements and flex-direction to change the layout of the elements.
* Footer Part
This section contains the links to various pages like about, blogs, careers, and all.
Here mainly anchor tags are used to divert the user to different pages, in case the user wants to shift to a different page. Flexbox has been used here for deciding the positions on different devices of different sections like company, self-parking, Cities Contact, and Get the app that is present in the footer.
About page — — — — — — — — — — — — — — — — — — — — — -
* Header section
In the about section, there are three sections in the header section, those are The Beginning, Air Garage Today, and Our Future and Vision. The main challenge here was to change the content accordingly as we press the different buttons(beginning, garage today, future, and vision). To overcome this we have used javascript to change the visibility property of the content accordingly as we press different buttons.
* Team Section
Here we have used flexbox for positioning the elements and google fonts to change the font style of the text that is present below all the images.
* Benefit Section and Interview Process
In this section, flexbox has been used. In the interview process section, javascript and CSS have been used. Here the major challenge was to make the detailed content appear, about that section upon clicking over the different sections that are present, like Apply, Chat with us, Meet the team and all
* Culture Section
In this section, CSS grids have been used for laying out the images in this style.
* Learn More
In this section, flexbox has been used for positioning the blogs and the contents inside it.
Things Learnt: — —
We got to learn many new things through this project that we created. One of the most important things regarding a website is that it should open properly on any device irrespective of device resolution because finally what matters is the User experience. Secondly, choosing the right font family wherever required to make the text look cool. Adding proper animations to the page to make the webpage more attractive.
One should use media queries, pseudo-classes, CSS animations, transitions, and transforms for making the page more interactive.
Team Members: — — — —
1.Uditanshu Kumar
2.Mayank Pratap Singh
3.M sai Kumar
GitHub link: — https://github.com/udit22022000/Fluorine