Event handling with Javascript.
What challenges did you encounter, and how did you overcome them?building pixel perfect design and handling CSS from Javascript file was a bit challenging.
What specific areas of your project would you like help with?I'm open for all your feedback, and you can also clone the project and make your contribution,
Hi @AnwarMestycer.
Your project looks pretty good
The functionality of the share button.
What challenges did you encounter, and how did you overcome them?i was confused as to how i would obtain the shape of the share-links box
I used a basic clip path to get the triangle at the bottom of the share-links box.
clip-path: polygon(0% 0%, 100% 0%, 50% 100%); and then positioned it to match the design.
is there a better way i could have done/gotten the shape of the box??
is there a better way i could have done/gotten the shape of the box??
Instead of adding a new element I used after pseudo-element to insert content after the content of an element.
Here's what it would look like for you:
div#share-box:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 12px solid transparent; border-top-color: var(--clr-dark-grayish-blue); border-bottom: 0; margin-left: -12px; margin-bottom: -12px; }
An another try on deploying a proper responsive web design by me. Feedbacks are highly appreciated🥰😊.
Congratulations SHASHIDHAR. I would like to suggest some feedbacks to make your project look better. If you set at @media (max-width: 950px) width: 90% and margin: auto from class="part-container", this will center the container exactly. Also, the height would be better if it were 100%, so as not to overlap the container with the attribution class below.
Another thing that will be useful for you is to set part 1, 2 and 3 flex-basis: 100% in @media (max-width: 950px). So the boxes will correctly take the padding: 50px 20px 40px 50px that you set on the parts class.
You can also change some html tags to Improve Accessibility: You can change the <div> tag with class="part-container" to a <main> tag and a <div> of class="attribution" on the <footer> tag.
I hope you find these improvements useful. I wish you a pleasant day.
Hi there 👋, I’m Orton and this is my solution for this challenge.
Built With:
TailwindCSS npm - prettier React.js I couldn't get the sidebar to have a dark backdrop and I humbly ask for help. Any suggestions on how I can improve are welcome!
Thank you. 😊✌️
Great work Orton. It´s look amazing. Congratulations. To get sidebar to have dark backdrop, you can put "bg-black and the text-white" to first <div> from <nav>. I don't have much experience with tailwind css, but it can be done.
