Skip to content
OverviewSolutions
6
Comments
9

Timothy

@Timothy1982Germany285 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Timothy•285
    @Timothy1982

    Hey, that's allrady looking good. Just a small side tip: If you give your social icon images a "display: block" they will align up nicer. ;) You can also include the SVG instead of linking them in the IMG tag.

  • Timothy•285
    @Timothy1982

    What i am missing, are the different states on your buttons and links. ;) If you add these, that would improve the project with not much effort. From scanning over your code i have to say, it looks clean and organized, what can help when projects grow.

  • Timothy•285
    @Timothy1982

    On my desktop the card is also not centered. My suggestion would be to give the body a min-height of 100vh and display flex. Then you can center it with justify-content and align-items.

    The top and bottom background images could then be set using ::before and ::after. You could the remove the two divs "top" and "bottom".

    I would also suggest not using position: absolute on your card plus you don't need it when you center it with flexbox (like mentioned above).

    You could add the following styles to your body:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

    On you card class remove:

    position: absolute;
top:...
left:..
transform:..

    and add

    position: relative;

    That will fix your problem with the card header image. And if you have removed the two divs with the background images, all should look nice and centered.

    From there you should get it done with ::before and ::after on the background images. Let me know if you have problems.

    Me or someone else will probably help you out (or in slack).

  • Timothy•285
    @Timothy1982

    Don't give up! Here are a few suggestions from my side of view:

    1. Try improve the layout in general to get it looking more like the design. You don't have to get it pixel perfect but just try to get it as close to the design as you can. I think this will teach you allot and you can improve your skills.

    2. Overthink your choose of HTML tags. Maybe this link will help you: https://developer.mozilla.org/en-US/docs/Glossary/Semantics Like the h1 tag is your overall heading. Then you use h4 for the age and country. This is not what they are for. ;)

    3. For you problem with the name, age and country - i would overthink the way you did it. As an idea, maybe put it inside of a div and do the adjustments with flex or grid.

    If you try these steps and still have problems, someone else or me will probably give you some advise in the slack channel or here. ;)

  • Timothy•285
    @Timothy1982

    Ramon already gave you a good solution for it. Another way you "could" do it, would be with a linear-gradient as a background. That is how i did it but I guess eatherway works.

  • Timothy•285
    @Timothy1982

    This one looks good but i would have a few small improvements from just looking over it fast.

    • I would change the height of 100vh on the body to min-height because if i look at it on my phone in landscape it gets cuts off.

    • I would set the two big background images with ::before and ::after inside on the .container and include the SVG.

    • Maybe give the card a little space on mobile. On a with of 320px its a little tight. ;)

    But that might just be my opinion.

View more comments