Skip to content

Commit

Permalink
Styled market section
Browse files Browse the repository at this point in the history
  • Loading branch information
@SonyaJane
SonyaJane committed Nov 11, 2024
1 parent 0afd4e1 commit cdaba0b
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 38 deletions.
23 changes: 20 additions & 3 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,12 +318,13 @@ main .card {
}

/* Custom borders for market sections */
.market-border-green {
#market-border-green {
border: 2px solid #C1CAB6;
border-radius: 10px;
height: 100%;
}

.market-border-orange {
#market-border-orange {
border: 2px solid #EABAA5;
border-radius: 10px;
}
Expand All @@ -341,13 +342,20 @@ main .card {
justify-content: center;
}

#market-size-box {
max-width: 400px;
/* Make the rows equal height */
display: grid;
grid-auto-rows: 1fr;
}

/* speech bubble for market validation text */
.speech-bubble {
position: relative; /* allows the use of the ::after pseudo-element for the speech bubble tail. */
background-color: #EABAA5; /* Bubble background color */
border-radius: 15px; /* Rounded corners */
padding: 20px;
max-width: 400px; /* Adjust the width as needed */
max-width: 400px;
/* margin: 20px auto; Center the bubble */
}

Expand Down Expand Up @@ -570,6 +578,15 @@ footer {
align-items: stretch; /* Make all cards the same height */
}

#market {
/* display: flex; */
/* flex-wrap: wrap; Ensure items wrap if necessary */
align-items: stretch; /* Make all cards the same height */
}




/* Make the card-body just under the height of its parent so there is a vertical gap between the cards */
#key-features .card {
display: flex;
Expand Down
89 changes: 54 additions & 35 deletions partnerships.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,10 @@ <h3>Being stuck at home can negatively affect mental health and reduces interact
</section>

<!-- Our Solution -->
<section id="solution">
<section class="mb-4" id="solution">
<div class="container text-center mt-5">
<h2 class="display-6 orange-underline">Our Solution</h2>

<div class="bullet-list mx-1 mx-md-3">
<ul class="text-start responsive-p my-3 custom-bullets">
<li>A route-finder and navigation app designed specifically for wheelers</li>
Expand Down Expand Up @@ -243,55 +243,74 @@ <h2 class="display-6 orange-underline">Our Solution</h2>
</section>

<!-- Market -->
<section>
<section>
<div class="container">
<div class="row g-3 text-center">
<div class="row text-center g-3" id="market">

<!-- Market size -->
<div class="col-12 col-md-6 market-border-green px-3 pt-4 pb-3">
<h2 class="display-6 green-underline mb-4">Market Size</h2>
<div class="col-12 col-md-6" id="market-size">

<div class="row align-items-center mb-3">
<div class="col-5 ">
<h3 class="green-box m-0">1 in 8</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people are mobility impaired</p>
</div>
</div>
<!-- flex classes required to centre content -->
<div id="market-border-green" class="px-3 pt-4 pb-3 d-flex flex-column align-items-center">

<div class="row align-items-center mb-3">
<div class="col-5">
<h3 class="green-box m-0">8 Million</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people in the UK are mobility impaired
</p>
<div>
<h2 class="display-6 green-underline mb-3">Market Size</h2>
</div>
</div>

<div class="row align-items-center mb-3">
<div class="col-5">
<h3 class="green-box m-0">1 Billion</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people in the world are mobility impaired</p>
<div id="market-size-box"> <!--required to restrict width of content -->
<!-- 1 in 8 -->
<div class="row align-items-center mb-3">
<div class="col-5">
<h3 class="green-box m-0">1 in 8</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people are mobility impaired</p>
</div>
</div>

<!-- 8 million -->
<div class="row align-items-center mb-3 mb-md-3">
<div class="col-5">
<h3 class="green-box m-0">8 Million</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people in the UK are mobility impaired
</p>
</div>
</div>

<!-- 1 billion -->
<div class="row align-items-center mb-3 mb-md-4">
<div class="col-5">
<h3 class="green-box m-0">1 Billion</h3>
</div>
<div class="col-7 text-start">
<p class="responsive-p my-0">people in the world are mobility impaired</p>
</div>
</div>
</div>
</div>

</div>

<!-- Market validation -->
<div class="col-12 col-md-6 market-border-orange px-1 pt-4 pb-4">
<h2 class="display-6 orange-underline mb-2">Market Validation</h2>
<div class="center-contents mt-3 mx-0">
<p class="responsive-p speech-bubble">The Disabled Citizens’ Inquiry by Sustrans (2023) found 80% of mobility impaired people would find a wayfinding and journey planning tool where they can share information, experiences and rate routes or destinations useful for them to wheel more.</p>
<div class="col-12 col-md-6 ">
<div id="market-border-orange" class="px-1 py-4">
<h2 class="display-6 orange-underline mb-3">Market Validation</h2>
<div class="center-contents mt-3 mx-1 mx-md-2">
<p class="responsive-p speech-bubble">The Disabled Citizens' Inquiry by Sustrans (2023)
found 80% of mobility impaired people would find a wayfinding and journey planning
tool
where they can share information, experiences and rate routes or destinations useful
for
them to wheel more.</p>
</div>
</div>
</div>
</div>

</div>
</div>
</section>
</div>
</section>

</main>

Expand Down

0 comments on commit cdaba0b

Please sign in to comment.