Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions4Comments5

All comments

  • H0bG0blin9g• 55

    @H0bG0blin9g

    Submitted

    Any feedback on the css? For some reason I wasn't able to give 100% concentration to following a strict flex box dev, so I ended up just hacking the css. Overall I was able to complete this in under an hour, however I just realised that I forgot to add the background circle elements. The positioning of the image wasted a lot of my time and I ended up forgetting about the background elements while I was trying to complete the challenge for time.

    Im not sure why there is the big white space at the bottom of the card. I have a feeling it is because I shifted the profile image upwards, however I haven't been able to get rid of the white space, any ideas to solve this?

    Also is it possible to use flex box and have the profile image in the position that it is? I was not able to achieve this so I ended up butchering my css. Hopefully another shot down the line and I can improve this and not forget the background circles :).

    html and css - profile-card-component-main

    1

    H0bG0blin9g• 55

    @H0bG0blin9g

    Posted

    I had a "quick" go at getting the background circles, but I can say that it was not easy as it took me atleast 30 mins to have something reasonable albeit off. This clearly shows the need to look into the various ways of positioning of elements.

    I will look at the solutions from the other member, but would appreciate any insights into where I made a mistake in the positioning of the circles.

    also what would be the best fix for the errors that appear? Is it wrong to put a <section> inside of a <main>? (it must be since it has produced an error right?! lol)

    0
  • H0bG0blin9g• 55

    @H0bG0blin9g

    Submitted

    I managed to finish this in under an hour, however for some reason I feel like I have missed something since I was able to finish this quickly. From my initial estimate, I did think I would finish in less than 1 hour, but gave myself a bit of extra time in case. I forgot to put the animation for the button (which was next to nothing) in the estimate so I have to learn to look at the individual elements more closely as things like this could take more time depending on complexity.

    For some reason I couldn't get the font for the h1 to show on the site, either I have missed something or I have something overwriting it in the css. With practice I want to get faster at creating such components, however I also want to write cleaner code as well.

    Looking forward to any feedback.

    3-column-preview-card-component-main using vanilla css and flex box

    4

    H0bG0blin9g• 55

    @H0bG0blin9g

    Posted

    Oops, I missed adding some padding between the button and text for the desktop version.

    Also for some reason, the last card on the desktop version in this solutions screenshot is bigger than the other cards, but that is not the case on the actual preview site - seems like a bug during the formation of the screenshot?

    0
  • soransh singh• 1,025

    @soransh-singh

    Submitted

    A fun challenge to complete. Haven't done any challenge for some time still not confident to do intermediate challenges. So instead I did this newbie challenge.

    P.s. hover over the music icon.

    Order Summary Commponent

    1

    H0bG0blin9g• 55

    @H0bG0blin9g

    Posted

    Nice! I like the animation on the music icon. Also looking at your code, it is much more concise and cleaner than mine. Hopefully I will get better at writing code more efficiently with more practice.

    0
  • Esteban MConrrado• 30

    @uvapaza

    Submitted

    que recomendaciones en cuanto al código tanto de html y css me darían ustedes?

    Card Product

    1

    H0bG0blin9g• 55

    @H0bG0blin9g

    Posted

    Try and add shadows to the primary button and the card itself. That took me quite some time to get close to the design. The CSS property is box-shadow.

    Marked as helpful

    1
  • H0bG0blin9g• 55

    @H0bG0blin9g

    Submitted

    I am abit confused with the accessibility issues I have regarding "landmarks". Im not entirely sure what they are, and even after some googling I have no idea how to solve this. Granted I have made use of divs instead of the semantic names like article (I never really got around to grasping the semantic names and have been using divs everywhere), etc, so im inclined to think the issue lies there, but im not sure what to do to solve this. Any help regarding the solution as well as the importance of this would mean a lot!

    Otherwise, this is my first frontend mentor challenge. This took longer than I was anticipating. Im sure there are simpler ways to achieve what I did and probably with less code and more elegence, however I am surprised at how much of a learning experience this has been and look forward to more challenges.

    I realised that the order in which you tackle the challenge can go a long way in maintaining your sanity - too much jumping back and forth made it confusing for me to fix some css issues, so in the end I started again and tried do things in a logical order as opposed to randomly targeting elements on the design.

    Looking forward to some feedback from the community as well as seeing how everyone else has come up with their solutions!

    Order Summary using flex box and vanilla css

    2

    H0bG0blin9g• 55

    @H0bG0blin9g

    Posted

    I had a couple landmark issues, one being <html lang='en'> and then one against one of my divs (but not against it's other sibling div??), but when I added the 'role="main"' against one of the card divs, it cleared all the landmark accessibility issues except that which is against the div with the class "attribution" which is there when you download the file. Not sure why that is the case - both for clearing the landmark issues against the other divs and for not clearing the landmark issue agains the last div.

    What would I add to this to clear the accessibility issue on the last div? Just give it any role name?

    0