I have an assignment, the brief is below

Size or length of assessment: 2000 words
Module learning outcomes assessed by this task:
1.Conduct professional quality stakeholder, context and competitor research using industry-standard methodologies.
2.Identify and develop creative solutions to a design problem and iterate and select among them for prototyping.
3.Pursue and respond to other’s critique on their designs and, in turn, provide constructive critique on others’ work.
4.Evaluate prototypes with stakeholders and identify necessary changes and improvements.
5.Identify good practice in a particular programming language and use this to implement key features for mobile, web or other digital interface.
Completing your assessment
What am I required to do on this assessment?
This is an individual assignment requiring you to design and prototype a web application – an App based on data from Open Data Bristol. The assignment requires you to carry out design work to a high standard and exemplify professional practice by giving and receiving feedback. Working on this assignment will help you to plan, conduct, critique and iteratively improve your research, design, and coding artifacts.
This portfolio is comprised of four separate subtasks, based on the first four stages of the design process (empathise, define, ideate, prototype). Each one is worth 25% of the available marks.
Please Make sure you include a cover page with your name and student number
Please identify which dataset from Open Data Bristol you are using (name and URL).
Reference your sources using UWE Harvard referencing.

Prototype
You will construct an interactive functional prototype of your App. This will be one or more static web-pages that run in the browser, created using HTML and CSS. It should be clickable/navigable, but as a prototype, it need not be fully functional. It should use embedded iframes from Open Data Bristol for tables and maps.
Your prototype should include interactive controls to select between different content. The design should follow from your earlier design ideas, using the colours and fonts set out in your mood board, and layout ideas from your wireframe. If your ideas have evolved, then please explain how and why.
This section should be around 500 words including:
Screenshots of your HTML prototype.
A step-by-step walkthrough of your scenario in relation to these screenshots.
A description of the CSS styling used.


Prototype
Simplistic design with little apparent styling.
Walkthrough unrelated to the UX mapping. Some styling with description of outputs and controls.
Good walkthrough of the steps involved in using your App. Great styling with solid connections back to your mood board and wireframe.
Walkthrough tells a story in words and pictures. Professional output with great styling and comprehensive description.
Excellent walkthrough with clear links back to the UX mapping.


Below is the Plan to create the prototype
- Build an Interactive Prototype (500 words):
- Using HTML and CSS, create a static but interactive prototype of your app that can run in a browser.
- It should incorporate embedded iframes from Open Data Bristol to show data tables and maps.
- Ensure that the design follows your mood board and wireframe, and is clickable/navigable.
- Take screenshots of your prototype in action and insert them into your document.
- Write a walkthrough of your scenario using these screenshots and elaborate on the CSS styling used.


Now, I want to build a web app to help users locate electric vehicle charging stations.

Define Stage
Persona:

Name: Emily Carter
Age: 37
Job Title: Marketing Manager 
Location: Bristol
High tech savvy
Car ownership: Tesla Model 3 owner
Lifestyle: Environmentalist, city worker, suburban Bristol resident, frequents business meetings and weekend trips by car.

Needs/Pains:

Goal is to seamlessly integrate charging into her daily routine without delays or disruptions.
Find reliable charging stations near frequent destinations.
Plan longer trips without worrying about running out of charge.
Access to fast charging on tight schedules.
Challenges finding charging stations in unfamiliar city areas.
Insufficient real-time charging station availability and operation data.


Solutions:

Map all Bristol electric vehicle charging stations and display real-time availability.
 An interactive map could filter by charger type (fast, rapid, slow), electric vehicle compatibility, and nearby amenities like cafes, restrooms, and shopping.
 Users may receive proactive notifications about their usual stations or when a previously occupied station becomes available.
 The app's trip planner lets users enter their route and find charging points with estimated charging times.
 The platform could reserve charging slots for a specific time to ensure availability upon arrival.
 A system for reporting station issues would allow users to share status updates, improving service reliability.
 Calendar app integration to suggest pre-scheduled charging times based on user itinerary and charging history.
 The app could offer discounts or benefits to frequent users through a rewards programme.
 Emily's confidence in long-distance travel could be boosted by an in-app assistance or community forum for instant help and tips from other electric vehicle users.


Scenario:

Emily has a busy day ahead with an early meeting in the city center, followed by a client lunch on the other side of town, and an evening networking event near the marina. She wants to ensure her Tesla has enough charge for the day’s activities and potentially a weekend getaway.

Design Map Steps (With electronic post its)

1. Emily opens the app first thing in the morning and inputs her day’s destinations into the trip planner. (User needs established destinations and schedule.
2. The app displays optimal charging points along her route and She chooses a fast charger near her first meeting location. (Even with live updates, charging stations may be occupied. Consider adding a historical “busy times” feature to predict station occupancy.)
3. After her meeting, Emily receives a notification that her car is fully charged, and the app updates her on the status of charging stations near her next destination. (Real-time notifications improve user experience. We assume users have their tablets/phones after meetings. Setting quiet hours for meeting notifications is suggested.)
4. Emily stops at the charger identified by the app, the charging process is swift. The charging process is swift, so she proceeds to the marina with plenty of charge left. (Partnerships with nearby businesses can provide short-term benefits during charging. We assume the Rapid chargers work.)


i HAVE Generated the codes for the prototype.

Design specifications and Content:
The page has “EV Charging Station Locator” on the top middle of the page. It has a Search bar (with a “search” placeholder) with a dropdown button beside it for different search filters like “Fast charging” and “Normal Charging”
It has an icon of a charging car at the topleft corner of the page. On the side bar, it has 5 components which are the HOME, CHARGING POINTS, TRIP PLANNER, MY ACCOUNT and COMMUNITY buttons.
The color for the components of the side bar is blue, but when clicked, it changes to orange.
When you click on “Charging Station” button, it brings us to a page with three tabs (“Closest to Home”, “Closest to Office”, “Closest to You”) and a Map (the map is found in the following url: How do i access the map on the following url?
https://opendata.bristol.gov.uk/datasets/bcc::electric-vehicle-charging-points-ncr/about) Showing the locations of the user and the nearest EV charging stations.
When you click on the “Trip Planner” button, it brings us to a page with a table of 3 columns and at least 4 rows. The first column is for destination and has the header “Destination” where the user inputs where he is going; the second column has the header “Nearest Charging Point” and is where the platform suggests the nearest charging point to the destination input; the third is the “Arrival Time” column where the user indicates the time he/she plans to get there.
For Font choices and typographic scale, use any good one.

Functional Requirements:
For the navigation, it is a single page with anchor links.

Apart from the icon mentioned earlier, there is no other media asset

Embedding the map is via iframe.


The css code for one of the pages is as follows
.container {
  background-color: #9eadba;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.container .div {
  background-color: #9eadba;
  width: 447px;
  height: 582px;
  position: relative;
}

.container .overlap {
  position: absolute;
  width: 385px;
  height: 439px;
  top: 103px;
  left: 30px;
}

.container .div-2 {
  width: 82px;
  height: 20px;
  top: 70px;
  left: 1px;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-3 {
  width: 82px;
  height: 20px;
  top: 110px;
  left: 1px;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-4 {
  width: 82px;
  height: 21px;
  top: 29px;
  left: 1px;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-wrapper {
  width: 84px;
  height: 22px;
  top: 8px;
  left: 0;
  background-color: #6558f5;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper {
  position: absolute;
  top: 4px;
  left: 31px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-2 {
  width: 84px;
  height: 22px;
  top: 162px;
  left: 0;
  background-color: #6558f5;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-2 {
  position: absolute;
  top: 4px;
  left: 19px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-3 {
  width: 84px;
  height: 22px;
  top: 129px;
  left: 1px;
  background-color: #e8833a;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-3 {
  position: absolute;
  top: 4px;
  left: 17px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-4 {
  width: 84px;
  height: 22px;
  top: 89px;
  left: 0;
  background-color: #6558f5;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-4 {
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-5 {
  width: 84px;
  height: 22px;
  top: 49px;
  left: 0;
  background-color: #6558f5;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-5 {
  top: 4px;
  left: 8px;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  line-height: 14px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.container .div-5 {
  width: 302px;
  height: 439px;
  top: 0;
  left: 83px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-6 {
  width: 287px;
  height: 224px;
  top: 208px;
  left: 9px;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-wrapper-6 {
  width: 81px;
  height: 18px;
  top: 23px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-6 {
  position: absolute;
  top: 2px;
  left: 6px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #565d6d;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-7 {
  width: 81px;
  height: 18px;
  top: 43px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-7 {
  position: absolute;
  top: 3px;
  left: 23px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .overlap-group {
  position: absolute;
  width: 81px;
  height: 18px;
  top: 63px;
  left: 204px;
}

.container .div-7 {
  width: 81px;
  height: 18px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-8 {
  top: 4px;
  left: 22px;
  color: #9095a1;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .overlap-2 {
  position: absolute;
  width: 81px;
  height: 38px;
  top: 83px;
  left: 204px;
}

.container .div-8 {
  width: 81px;
  height: 18px;
  top: 20px;
  left: 0;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-wrapper-8 {
  width: 81px;
  height: 21px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-9 {
  top: 6px;
  left: 23px;
  color: #9095a1;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-9 {
  width: 81px;
  height: 18px;
  top: 125px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-10 {
  width: 81px;
  height: 18px;
  top: 143px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-11 {
  width: 81px;
  height: 18px;
  top: 163px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-12 {
  width: 81px;
  height: 18px;
  top: 183px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-13 {
  width: 81px;
  height: 18px;
  top: 203px;
  left: 204px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .overlap-3 {
  position: absolute;
  width: 199px;
  height: 41px;
  top: 0;
  left: 3px;
}

.container .overlap-4 {
  position: absolute;
  width: 133px;
  height: 41px;
  top: 0;
  left: 0;
}

.container .overlap-5 {
  position: absolute;
  width: 99px;
  height: 41px;
  top: 0;
  left: 0;
}

.container .div-wrapper-9 {
  width: 78px;
  height: 21px;
  top: 0;
  left: 4px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #ed9f66;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-10 {
  position: absolute;
  top: 4px;
  left: 10px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ed9f66;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-10 {
  width: 99px;
  height: 21px;
  top: 20px;
  left: 0;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-11 {
  top: 5px;
  left: 6px;
  color: #565d6d;
  font-size: 9px;
  line-height: 14px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.container .text-wrapper-12 {
  left: 90px;
  position: absolute;
  top: 4px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9188f7;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-11 {
  width: 98px;
  height: 22px;
  top: 19px;
  left: 101px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-13 {
  top: 6px;
  left: 6px;
  color: #565d6d;
  font-size: 9px;
  line-height: 14px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.container .div-wrapper-12 {
  width: 98px;
  height: 18px;
  top: 43px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-14 {
  position: absolute;
  top: 3px;
  left: 12px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .overlap-group-2 {
  position: absolute;
  width: 99px;
  height: 58px;
  top: 63px;
  left: 103px;
}

.container .div-14 {
  width: 98px;
  height: 18px;
  top: 40px;
  left: 1px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-wrapper-13 {
  width: 98px;
  height: 21px;
  top: 20px;
  left: 1px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-15 {
  top: 6px;
  left: 11px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-wrapper-14 {
  width: 99px;
  height: 21px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-16 {
  top: 5px;
  left: 13px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .div-15 {
  width: 98px;
  height: 18px;
  top: 123px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-16 {
  width: 98px;
  height: 18px;
  top: 143px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-17 {
  width: 98px;
  height: 18px;
  top: 163px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-18 {
  width: 98px;
  height: 18px;
  top: 183px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-19 {
  width: 98px;
  height: 18px;
  top: 203px;
  left: 104px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-20 {
  width: 99px;
  height: 18px;
  top: 123px;
  left: 3px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-21 {
  width: 99px;
  height: 18px;
  top: 143px;
  left: 3px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-22 {
  width: 99px;
  height: 18px;
  top: 163px;
  left: 3px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-23 {
  width: 99px;
  height: 18px;
  top: 183px;
  left: 3px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .div-24 {
  width: 99px;
  height: 18px;
  top: 203px;
  left: 3px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-17 {
  position: absolute;
  top: 67px;
  left: 5px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-18 {
  position: absolute;
  top: 89px;
  left: 4px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-19 {
  position: absolute;
  top: 46px;
  left: 6px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-20 {
  left: 170px;
  position: absolute;
  top: 4px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9188f7;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .image {
  position: absolute;
  width: 82px;
  height: 94px;
  top: 4px;
  left: 216px;
}

.container .averagecharging {
  position: absolute;
  top: 63px;
  left: 6px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
}

.container .text-wrapper-21 {
  top: 176px;
  left: 15px;
  color: #171a1f;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.container .text-wrapper-22 {
  position: absolute;
  top: 17px;
  left: 76px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #565d6d;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-23 {
  top: 66px;
  left: 76px;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-24 {
  position: absolute;
  top: 43px;
  left: 75px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-25 {
  position: absolute;
  top: 44px;
  left: 7px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-26 {
  position: absolute;
  top: 21px;
  left: 9px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #9095a1;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .overlap-6 {
  position: absolute;
  width: 116px;
  height: 19px;
  top: 83px;
  left: 301px;
}

.container .div-wrapper-15 {
  width: 94px;
  height: 19px;
  top: 0;
  left: 17px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #9095a0;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-27 {
  position: absolute;
  top: 2px;
  left: 8px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .img {
  position: absolute;
  width: 18px;
  height: 16px;
  top: 1px;
  left: 0;
}

.container .image-2 {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 100px;
}

.container .overlap-7 {
  position: absolute;
  width: 386px;
  height: 26px;
  top: 26px;
  left: 30px;
}

.container .div-wrapper-16 {
  width: 386px;
  height: 23px;
  top: 2px;
  left: 0;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
}

.container .text-wrapper-28 {
  position: absolute;
  top: 0;
  left: 4px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-29 {
  position: absolute;
  width: 27px;
  top: 0;
  left: 183px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #bdc1ca;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
}

.container .text-wrapper-30 {
  top: 1px;
  left: 354px;
  color: #bdc1ca;
  position: absolute;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.container .text-wrapper-31 {
  position: absolute;
  top: 54px;
  left: 166px;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: #1aae9f;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.container .image-3 {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 58px;
  left: 47px;
}

.container .image-4 {
  position: absolute;
  width: 33px;
  height: 27px;
  top: 555px;
  left: 207px;
}



Now, on 500 words, write a walkthrough of the scenario using these screenshots and elaborate on the CSS styling used.