@pikapikamart
Posted
Hey, great work on this one. The layout both desktop and mobile seems fine, but the background of circle are missing.
Checking your repo, on your body tag, instead of using the / path, this is for root path, but on github, it doesn't work that way, you need a relative path from your css.
The declaration for your background should start ../ since your css and images have different folder. ../ means go up by one level.
Some other suggestions would be:
- The
alttext on the card, on the little circles, it should have been left empty likealt="". Do not usealt="..."something like those, if a image is meaningful, add a descriptivealt, if the image is for decoration, usealt="". - The
alttext of the person should have been that person's name, like `alt="victor crest". - Do not start using heading tag from
h5or other, useh1first and use other headings tags, but only incrementally adding 1 level to the previous heading tag you use. Example, you usedh1then you should haveh2as the next heading and noth3orh4. Do not skip. ulelement should not have another direct child element except forlielement.
<ul>
<li></li> # no other element should be a direct child except for li
</ul>
Just a solution suggestions, you could check this solution, it is from Grace. You can see some sr-only text also in there which is really great when supporting screen reader users.
Aside from those, great job.
Marked as helpful
@faiyaz-rahman13
Posted
@pikamart thanks for pointing out my mistakes and it was very helpful also but still now I didn't understand why my background isn't working on GitHub although it is working on my desktop. and thanks for the suggestion I will try to implement those h1 tags and then others and thanks for the solution suggestion also from grace it was very helpful. and please kindly show me how to fix that background thing . thank you
@pikapikamart
Posted
@faiyaz-rahman13 Hey, as you can see:
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
That is your declaration in the body tag right. Now, looking at your folder structure, you have these:
css
- > style.css
images
- > all the images inside here
design
.....
Now, on your local machine, using the path / works, because the root on the local machine, points to the same folder we are working with, but using / in github won't work, it does point to something else.
Now, instead of your before background-image declaration, you should do these:
background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");
As you can see, I added the ../ path, this means, whatever directory I am in, go up top by one level, since your style.css is inside the css folder right, if I use the ../ it would go up top. Example
css
| -> style.css # I am in here
images
| -> the images that you need is in here
If I use background: url("../"): below
css # I will be here
| -> style.css
images
| -> images that you need is in here
After that, I could now target the images folder, since I am at the same level as it is, and use the
background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");
Marked as helpful
@faiyaz-rahman13
Posted
@pikamart thank you so much for your help. your advice is really helpful. I have completed another challenge please check out that solution. I would love to know how can I improve my skill and make them more efficient. thank you😊.
