Skip to content
OverviewSolutions
30
Comments
10
P
Alysson Gomes
@EONRaider

All comments

  • Alysson Gomes•470
    @EONRaiderPosted 10 months ago

    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
    @shalomkerrySubmitted 10 months ago

    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.

    NFT-preview-card HTML and Vanilla CS

    2
    Alysson Gomes•470
    @EONRaiderPosted 10 months ago

    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
    @Mantas101Submitted 11 months ago

    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.

    Responsive Results Summary Component

    1
    Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • craftzniac•120
    @craftzniacSubmitted 11 months ago
    • 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: hidden on 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.

    Responsive News Homepage using CSS Flexbox and Grid

    1
    Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
    @ashutoshverma23Submitted 11 months ago

    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.

    QR code

    2
    Alysson Gomes•470
    @EONRaiderPosted 11 months ago

    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
  • Alysson Gomes•470
    @EONRaiderPosted over 2 years ago

    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