Switched most h1's for h2's. Also top two I had as h1 to paragraphs, neither is really a title/heading, both have importance. (Given "Powered by Technology" is in bold, one might argue its could be an h1)

Suggestion to consider h1 & accessibility from Matt@Frontend Mentor
This commit is contained in:
Robert McGovern 2020-09-28 13:06:27 +01:00
parent 06985ea3c0
commit 8243501927
2 changed files with 11 additions and 11 deletions

View File

@ -54,7 +54,7 @@ body {
text-align: center; text-align: center;
} }
.topSection h1 { .topSection > .title {
font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375))); font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375)));
} }

View File

@ -20,8 +20,8 @@
<main> <main>
<div class="flexContainer"> <div class="flexContainer">
<div class="topSection"> <div class="topSection">
<h1 class="title1">Reliable, efficient delivery</h1> <p class="title title1">Reliable, efficient delivery</p>
<h1 class="title2">Powered by Technology</h1> <p class="title title2">Powered by Technology</h2>
<p class="blurb">Our Artificial Intelligence powered tools use millions of project data points <p class="blurb">Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p> to ensure that your project is successful</p>
</div> </div>
@ -29,9 +29,9 @@
<div class="middleSection"> <div class="middleSection">
<div class="column"> <div class="column">
<div class="supervisor card"> <div class="supervisor card">
<h1 class="card-title"> <h2 class="card-title">
Supervisor Supervisor
</h1> </h2>
<p class="card-blurb"> <p class="card-blurb">
Monitors activity to identify project roadblocks Monitors activity to identify project roadblocks
</p> </p>
@ -41,18 +41,18 @@
<div class="column"> <div class="column">
<div class="teamBuilder card"> <div class="teamBuilder card">
<h1 class="card-title"> <h2 class="card-title">
Team Builder Team Builder
</h1> </h2>
<p class="card-blurb"> <p class="card-blurb">
Scans our talent network to create the optimal team for your project Scans our talent network to create the optimal team for your project
</p> </p>
<img class="card-image" src="images/icon-team-builder.svg" alt="Team building icon"> <img class="card-image" src="images/icon-team-builder.svg" alt="Team building icon">
</div> </div>
<div class="karma card"> <div class="karma card">
<h1 class="card-title"> <h2 class="card-title">
Karma Karma
</h1> </h2>
<p class="card-blurb"> <p class="card-blurb">
Regularly evaluates our talent to ensure quality Regularly evaluates our talent to ensure quality
</p> </p>
@ -61,9 +61,9 @@
</div> </div>
<div class="column"> <div class="column">
<div class="calculator card"> <div class="calculator card">
<h1 class="card-title"> <h2 class="card-title">
Calculator Calculator
</h1> </h2>
<p class="card-blurb"> <p class="card-blurb">
Uses data from past projects to provide better delivery estimates Uses data from past projects to provide better delivery estimates
</p> </p>