shalomkerry• 260
@shalomkerry
Submitted
was a good challenge. First time ever trying to implement the BEM method. My code felt a it cleaner and formal this time. I still need to practise it more tho.
P
Alysson Gomes
@EONRaider
All comments
- PAlysson Gomes• 470
@EONRaider
Posted
Hello there.
Try this shadow on the card: box-shadow: 0 40px 40px -20px rgba(13, 48, 189, 0.15);
And this one for the “Proceed to Payment” button: 0 20px 20px 0 rgba(56, 42, 225, 0.19);
The “You can now listen…” text has this color: #717fa6
Finally, the card’s dimensions should be 450x697px.
Marked as helpful
1 - shalomkerry• 260
@shalomkerry
Submitted
it took me more time than I thought. getting the image hover effect took time. i learnt I can use the link tag 'a' to manipulate it which became really handy. Another thing I struggled with was naming CSS. I figured it would be good to learn naming in my current beggining steps will benefit me. I found the BEM method while searching for the best method I might have to learn it before learning other challenges.
PAlysson Gomes• 470@EONRaider
Posted
Hello. Take a look at CUBE CSS if you're interested in methodology. You can still use BEM along with it but it will also help you structure your code.
Marked as helpful
1 - Mantas101• 20
@Mantas101
Submitted
Hello everyone, happy new year! This was my attempt at making a responsive results summary component using flexbox. For this project, my intention was to mainly use HTML/CSS and flexbox. I will be refactoring the code as I improve. In this project I was focused on improving my basics like HTML/CSS. Any feedback would be welcomed. I also wanted to ask if there are any improvements I could have made regarding the HTML semantic layout or CSS structure, since I am trying to improve my code and make it more readable, reusable and clean.
PAlysson Gomes• 470@EONRaider
Posted
Hello. Try using this box-shadow declaration around your "main" container:
box-shadow: 0 30px 60px 0 rgba(61, 108, 236, 0.15);
You should get the correct shadow when compared to the model.
1 - shalomkerry• 260
@shalomkerry
Submitted
On the design- the boxes on the edges have a somewhat glowed up colour of their respective color. How can I make that happen on the corners?
PAlysson Gomes• 470@EONRaider
Posted
The glow you see are very subtle linear gradients. Check my solution to see the correct values: https://eonraider-results-summary-component.netlify.app/
Just use the browser developer tools and copy the declarations.
Marked as helpful
0 - PAlysson Gomes• 470
@EONRaider
Posted
Hello. You've got a problem with the "Get Started" hover dynamics. The hovering itself goes all the way until the end of the block. To fix this, simply add "align-items: flex-start" to your ".card" class.
I hope this helps.
0 - Robson Gomes• 20
@robsongomes
Submitted
I'm not sure if the shadow-box is correct.
PAlysson Gomes• 470@EONRaider
Posted
Here's the correct value to use for the box-shadow property on the cards:
box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.50);
Marked as helpful
0 - Mike• 80
@MikeyOnyedika
Submitted
- what are some best practices for using BEM css convention. I'm new to BEM
- In the live site, there's a scrollbar on the x-axis of my page (atleast, on a chrome browser). I don't want to do a
overflow-x: hiddenon the html body as that hides the padding on the right side of the page completely. I'm not sure how to remove that overflow.
PAlysson Gomes• 470@EONRaider
Posted
Hello. I've just opened your solution on Chrome and tried "overflow: clip" on the HTML body. It has removed the x-axis scrolling without further visual differences. I hope this helps!
1 - PAlysson Gomes• 470
@EONRaider
Submitted
PAlysson Gomes• 470@EONRaider
Posted
For some reason the screenshot feature of this solution is substantially different from the Figma model provided by FEM. It's missing the background color and the text on the blue column is of a smaller font size. I'll stick to the Figma model for my final solution.
0 - Ashutosh Verma• 10
@ashutoshverma23
Submitted
It was my first front-end project getting hosted on internet so I had to face difficulties in managing the files on Github. I'm unsure about the responsiveness of the webpage, I'll be working more on the it and use more advanced technologies like JS to improve the function of the webpage.
PAlysson Gomes• 470@EONRaider
Posted
Hello. I suggest you to use netlify.com when deploying projects if you feel you’re having difficulties right now. It’s extremely easy to use. The way your project is structured right now you only need to inform to Netlify the URL of your GitHub repo and you’re done.
Marked as helpful
0 - Sean H• 90
@Sean-LH
Submitted
PAlysson Gomes• 470@EONRaider
Posted
Hello there. I think your solution is almost perfect from a visual standpoint, but I’d make changes to the following issues:
- The “Scsn the QR code…” text seems to be a lighter shade of gray than it should. Check the design guidelines and you’ll find the right one.
- The top padding of the QR code itself seems to be short just a few pixels when compared to the model.
I hope this helps.
0
