Skip to content
OverviewSolutions
0
Comments
3
Simone Paglino
@darkshadowultimate

All comments

  • Anna Leigh•5,135
    @brasspetalsSubmitted over 3 years ago

    Hi, everyone! 👋 Glad to finally be done with this one(I hope)!

    Questions:

    • When I uploaded my solution to Vercel, I noticed that on desktop the background image on the hero was loading slower and showing up halfway through the animation. I used this handy solution from CSS Tricks to pause the animations until the images were loaded. It seems to have worked for me, but let me know if there’s any weirdness. 🤞 Are there better ways to go about delaying animations until all elements are loaded?
    • For accessibility, I again made sure to put the mobile menu button inside the nav, added an aria-label, as well as used the aria-expanded attribute as I did in the Loopstudios solution. Is this the correct way to go about this? Could accessibility be improved? Any insight is appreciated.

    “Extras”

    • The mobile menu will close if clicking outside the menu or header (as well as by using the menu button, of course).
    • I played around with CSS animations on the hero section, with different animations for mobile and desktop.

    Thanks for taking the time to look at my solution! Feedback is greatly appreciated. 😄

    Easybank Landing Page - Grid, CSS Animations, JS, SCSS

    4
    Simone Paglino•75
    @darkshadowultimatePosted over 3 years ago

    Hi Anna, I really love your landing page 😍.

    I’d have two suggestions if you don’t mind:

    • I’ve seen that you focus even on accessibility, so I think that it would be better if the buttons “Request Invite” could have a different hover effect, because as it is right now, the contrast between button’s background and button’s text is not maintained and the text is difficult to read (for someone who has difficulties to read)
    • I’ve noticed that there’s a slight tremble on the hover effect of the cards under the section “Latest Articles”. I dunno what it is, but I wanted to point that out in case if you hadn’t noticed 😉.

    Anyway, really good job. I hope that with some more practice I’ll reach your level.

    3
  • Yohoji•20
    @yohojiSubmitted over 3 years ago

    The bottom background pattern always creates the overflow tried multiple thing but it did not fix my problem so if any one knows what I did wrong tell me!

    Profile card component

    1
    Simone Paglino•75
    @darkshadowultimatePosted over 3 years ago

    Hi Yohoji, you've had a nice result 👍🏻. I've tried something in the desktop version and I got a decent result, so I'd like to suggest you some changes if you don't mind.

    This is the CSS that I've added: .top-bg { /* I suggest you to play a bit with the rotate’s value as well as the positioning /

    top: -30%;

    left: -32%;

    transform: rotateZ(-10deg); } .bottom-bg { /     I suggest you to play a bit with the scale’s value as well as the positioning /

    right: -15%;

    bottom: -40%;

    transform: scale(1.4); } .profile-div { /     There's a little shadow under the card if you notice / box-shadow: 0 20px 60px -20px #404848; } hr { / Black is a little to intense, try with this color (in accordance to the design) */ border: 1px solid #d8d8d8; }

    Like I've said in the comments, play a bit with the values and try to see which value gives you better results.

    I'm not an expert, so let me now if this comment was helpful to you 😁

    0
  • Simone Paglino•75
    @darkshadowultimatePosted over 3 years ago

    First I wanna say that you did a really good job 👍🏻.

    Second, I’d like to make some suggestions:

    • Now there’s the cursor pointer on the social media icons only, extend it to the whole circle which contains the single icon ;
    • The “Notify Me” button changes its color for the hover effect but it’s without transition. Add a simple transition effect and it will improve for sure. Also considering that we’re talking about a button, make the cursor “pointer” ;
    • The cursor of the mouse inside the input email for inserting the e-mail I think it would be better if it was where there’s the “Y” of “Your” (while right now is way more back) ;
    • Last but not least, I think the font-size you’ve used for the button and the input email is a little bit bigger. Also make the button text bold.

    Let me now what you think 😁 and wish you the best.

    1