Hey, You did amazing work congratulations for completing this challenge
to fix accessibility issues :
- Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h2 instead h3 in section div.box1 and change
font-size
if you want .
To make your code more Responsive
- instead of using
top:100px
in main.container
use this to center your container in the page
and avoid scroll
body {margin :0;display:flex;flex-direction:column; min-height:100vh;}
- you can use variables to give name to colors or font-size or any thing you want but choose semantic name
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
- give cards semantic names to make code more readable as below
<main class="container cards">
<header>
<h1> Join our community </h1>
<h2> 30-day, hassle-free money back guarantee </h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</p>
</header>
<div class="price">
<h3> Monthly Subscription </h3>
<p> $29 <span>per month</span></p>
<p> Full access for less than $1 a day</p>
<button class="register"> Sign Up </button>
</div>
<div class="whyus">
<h3> Why Us </h3>
<ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
</div>
</main>
- use grid template with
main.container
to make it more responsive as this
main
{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(270px,auto);
grid-template-areas:
'header header'
'price whyus';
gap: 20px 0px;
margin: auto auto;
align-items: center;
justify-content: center;
border-radius: 15px;
background: var(--white);
}
header {
grid-area: header;
display: grid;
gap: 30px;
margin: auto auto;
}
main div.price,main div.whyus
{
min-height: 100%;
padding: 30px 30px 0px;
color: var(--white);
}
main div.price {
grid-area: price;
background: var(--Cyan);
border-radius: 0px 0px 0px 15px;
}
main div.whyus {
grid-area: whyus;
background: var(--light-cyan);
border-radius: 0px 0px 15px 0px;
}
- use media query different for each screen not used only one so use this in mobile
@media (max-width: 775px)
{
main {
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
'header'
'whyus'
'price';
gap: 10px;
}
}
-
instead of delete footer
tag use can comment it as well structured page should contain semantic tags as header,main,footer
-
finally you can use the BEM approach for your next projects. It's a popular CSS naming convention for writing cleaner and more readable CSS classes. ---> Why BEM? , The Block, Element, Modifier BEM
Regardless You did amazing I hope this is useful to you... Keep coding👍