How do i approach this UI?

I have this UI requirement, i have tried to replicate this, but i am not able to position the profile image in center along with the surrounding stats, can anyone suggest an approach for this.
14 Replies
stealthy
stealthyβ€’2y ago
please find below desktop and mobile view
stealthy
stealthyβ€’2y ago
you can find the code i have made here
stealthy
stealthyβ€’2y ago
this is what i got so far
Jochem
Jochemβ€’2y ago
can you put this in a codepen or something similar?
stealthy
stealthyβ€’2y ago
I made a vite project, thats why i attached as zip Let me try to make it in codepen. I don't know how to upload images there
Jochem
Jochemβ€’2y ago
you can use something like unsplash or picsum.photos to just have random images instead of the ones you're using works well enough for demonstration purposes I'm asking because I'm definitely not running a random vite project on my own PC, and neither should any one else tbh
stealthy
stealthyβ€’2y ago
Cool fair pointπŸ˜‚, let me change and share, give me sometime i am out now
stealthy
stealthyβ€’2y ago
https://codesandbox.io/s/ui-test-5rpc3c i have made sandbox, as i am using react
naveen_4136
CodeSandbox
ui-test - CodeSandbox
ui-test by naveen_4136 using autoprefixer, loader-utils, postcss, react, react-dom, react-scripts, tailwindcss
Jochem
Jochemβ€’2y ago
so the issue is in LeaderboardStatistics.jsx, what have you tried to get the image to center? I don't see a profile image in assets, and nothing like an img tag or background-image in the class tag?
stealthy
stealthyβ€’2y ago
i don't have any image for that, i just have a placeholder now, that is not an issue, i am facing issue in how to position them properly as i used translate y property to position them, there is a big gap in bottom of that section. and how to show the stats on left and right side of the profile image section hope i am making sense for you?πŸ˜… , my english is average
Jochem
Jochemβ€’2y ago
ah, I think I see what you mean I'll have a look later today, if no one else has by then. I can't really dive into this now
stealthy
stealthyβ€’2y ago
sure, no issues thanks for dropping by 😁
Unknown User
Unknown Userβ€’2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyβ€’2y ago
hey @vince6056 Thanks, i will look into it and ask doubts if i didn't understand
Want results from more Discord servers?
Add your server