Manage landing page using HTML CSS Vanilla JavaScript
Design comparison
Solution retrospective
I had trouble with changing the color of the image. On footer for example, "Manage" logo with four dots had to be left in original state with orange color, whilst text color had to be changed to white color. I failed in that, making it all white. Some guidance or help on how I could have done that would be great. Also, if you have any question or feedback please feel free to post it in the comments.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi David Pokrajac, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
alt=""
and addaria-hidden="true"
attributes to make all the assistive technologies of the Web , the screen readers. - Heading levels should only increase by one so follow the sequence h1-h5
The rest is great!
I hope it helps... 👍
Marked as helpful1@DavidPokrajacPosted about 2 years ago@AdrianoEscarabote Hey, thank you very much for your help!!! I'm glad you like the overall solution
0 - images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
- @adhranPosted about 2 years ago
The problem is your using "img" tag in html instead copy and paste the svg code directly into your html, To change the svg color you need to select the "path" tag of the svg and set the "fill" property to white. (eg:- 👉 svg> g > path { fill: white; })
Here I selected the "g" tag first and then the "path" because in the logo svg code the "path" tag is located inside the "g" tag but in other svgs(facebook logo, insta logo) the "path" is the directly located inside the "svg" tag
Marked as helpful1@DavidPokrajacPosted about 2 years ago@adhran Hey, thank you very much for your help!!!
0 - @DavidPokrajacPosted about 2 years ago
Also, to get mobile version of this, you can in console.log set window width to be at 360 pixels and than refresh the page.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord