@SJ-Nosrat
Posted
Hi, Cool solution! Looks good!
I've noticed that on the desktop design; the page looks left-aligned try and add the below rules to your CSS to fix that issue, as follows:
html {
height: 100%;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
}
-
Also, the
<h1>
tag should be used once per page; as this is a top-level heading and has special meaning for accessibility purposes. -
Add the
aria-hidden="true"
attribute to your<img src="images/logo-chrome.svg" alt="">
since there's noalt=""
description. -
Add the
type="button"
to your<button>More Info</button>
. -
All the accessibility issues is coming from using
<div>
tags too much; try and use<article>
for the cards. -
When clicking on the accordian it expands nicely; however, the arrow still points downwards when open; try and use:
transform: rotate(180deg)
.
I hope the above helps!
Best of luck on your coding journey!
@elasri21
Posted
@shahin1987 man! this is awesome. thank you so much you are great man because it is not easy to spend time giving such advice with examples again thanks a lot