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.

Where should I start?
This is the task breakdown:
1: Empathise
You will create a mood board containing representative photos, colours, fonts, and reference designs using Figma.
This section should be around 500 words including:
A collage of photos that represent your project
A colour theme based on these photos
A selection of Sample fonts and font pairs using foreground/background colours
A small set of reference designs

Please export images (e.g. png) from Figma and incorporate them into your Word document.

2: Define
You will define the User Experience (UX) mapping, defining a persona and an associated scenario represented as a design map.
This section should be around 500 words including:
A persona you are targeting, identifying their goals and frustrations.
Outline a scenario – a design map showing the touch-points where your persona interacts with the App.

3: Ideate
You will capture your user interface as a wireframe. Use wireflow to indicate flow between screens.
This section should be around 500 words including:
A screen capture of your wireframe(s).
Analysis of the Information Architecture of your wireframe(s) including Organisation, Labeling, Navigation, Search.
Include a blueprint diagram representing your organisational hierarchy.

4: 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.

You will submit your portfolio as a single Word document with four subheadings:
1.Empathise
2.Define
3.Ideate
4.Prototype
What do I need to do to pass?
The pass mark is 50%.
How do I achieve high marks in this assessment?
We are looking for professional levels of design, not sophisticated levels of coding. This will include a photographic collage with a good range of contrasting colours in the colour theme. Excellent font pairings with a good selection of reference images. You will develop a fully rounded persona, with an excellent user-centred scenario offering a resolution to the persona’s needs and frustrations. This will be matched by clear wireframing, comparable to sites you would find on the web. You will carry out a detailed analysis of the Information Architecture. The design of the prototype will look fabulous and show clear links back to the UX mapping and wireframe, and using a colour scheme selected from your moodboard. You will use UWE/Harvard referencing throughout.


Marks and Feedback
Your assessment will be marked according to the following marking criteria.
Criterion <50% 50-59% 60-69% ≧70%
Empathise
(25%) Limited choice of images with little relevance.
Little thought put into font choices, or few reference images. Relevant choice of images but little choice of how colours will work in the foreground / background.
Reasonable font choices with some reference images. Good choice of images and colour theme.
Well justified font choices and pairings and good reference images.
Professional looking image collage with a good range of contrasting colours in the colour theme.
Excellent font pairings with good examples. Excellent coverage of reference images.
Define
(25%) Persona minimally described.
Weak scenario. Goals identified.
Clear scenario but written more from a system perspective, than the user’s.
Persona clearly defined with good goals and frustrations.
A good scenario described from a user perspective. Fully rounded definition of persona, of professional standard. 
Excellent user-centred scenario offering a resolution to the persona’s needs and frustrations.
Ideate
(25%) Some attempt at producing the wireframe.
Missing or incomplete IA elements. Good use of the styling grid.
Some good points, but limited IA analysis. Good grid styling informed by the IA.
Use of wireflow.
A good level of analysis. Good blueprint. Professional level of wireframing, comparable to sites you would find on the web.
Excellent IA analysis, performed to a professional level.
Prototype
(25%) 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.)


Ideation stage
During Ideation, we focus on creating a web app UI concept. This app will help Emily find EV charging stations faster. Wireframes and wireflow diagrams show the app's layout and user journey. We'll review the app's Information Architecture (IA) to ensure its organisation, labelling, navigation, and search functions are easy to use.

Diagram showing information flow:

The home screen has simple options like 'Find Charging Station,' 'Plan Trip,' 'My Account,' and 'Community.' When the user selects 'Find Charging Station,' a map view shows nearby stations. The'Plan Trip' option opens a trip planner where you can enter your destinations and view a mapped route with charging points. 'My Account' displays personal settings and usage history, while 'Community' allows user interaction.


Information Architecture Analysis:

1. Structure: The app has four main sections to improve user experience.
Home is the hub for all features.
The Charging Stations section is visually appealing, and the detailed view pages provide detailed information about each station.
Trip Planner provides route planning, scheduling, and station pre-booking in one tool.
The Community Hub promotes user engagement and information sharing.

2. Classification: Labels clarify and aid comprehension.
'Find Charging Station' is a simple and effective way to inform users of charging station locations.
'Plan Trip' plans trips, including charging stops.
'My Account' is a well-known way to access personal settings and histories.
In 'community', ideas and wisdom are shared dynamically.

3. Navigation: The main navigation menu is consistent across all screens, making core functions easy to access.
A one-handed bottom navigation bar makes tablets / mobile devices easy to use.
Breadcrumbs help you retrace your steps in the trip planner and station details without losing your input data.

4. Search: The home screen's global search lets users find what they need by entering an address, attraction, or station name.
Autocomplete suggestions speed up charging station and trip planning.
Users can filter search results by charger type, availability, and amenities.



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.