Can this be easily the made with html and css
Hello
I found this image of a nice card that I can use for a project
Now I wonder if this can be easily be made with html and css
68 Replies
:yes:
very fast answer
I think a a background-color with a image on it which has the ligther color
or maybe use :after to make the lighter circle
just layer with grid
then you can have better* options for mobile
Why use grid ?
I think flex can do easily the job
I think grid is 100% better for this
you can't layer with flex for one 🥲
I think you can layer.
For FEM challenges I make a layer for the background and one for a image
I'm sure then you used pos absolute not flex
don't fear the grid
I do not fear grid at all
Thanks for the help
just a quick mock to mental around how I might do it but ya I'm reaching for grid.
oke, I still do not see how grid can help me here
I do not find it a block layout
idk what that means sorry
I think of display: block when you say that 🥲
oke
This is grid
Seriously no reason to use flex even in your example
😒
Grid throws in more space between the elements
Then again:
No flex or grid needed :p
yea honestly any time I see flex-direction: col just for a stack
should have been block or grid 90% of the time 🥲
Also just pointing out your solutions not really on point to the design
😉
I was in a match trying to look but its a far cry from it xD
Aslo to be fair its kinda hard to see what is the "card" and what is cut off in the screenshot :think:
Eh, it's a starting point. It has what I think are the key visuals:
* circular, offset image
* Circular background
* Testimonial header
* Testimonial text
* Testimonial author
what about top right studio "brand" tag
stars xD
I mean layout is layout and how you want things to line up and behave when squished matter
Honestly didn't even see the brand tag. Bad contrast
You can see clear aligment based on these things too
You know my eyes are bad >_>
yea the contrast for color blind folks is terrible (which I forget you are sometimes mbmb)
I'd say all the colors need a proper checking xD
AA maybe...
this is how my mind sees it
ultimate control too xD
Thanks now i see why you want to use grid
yea I didn't want to link the pen directly but if you want let me know and I will
give it a try first 😄 (also hint I'm using Grid-areas)
That's a lot of grid areas! O_O
Of course
named too 😉 so ez pz
Yep im thinking now also about grid areas
Ok, so now I really wanna see that pen
So many things to learn about Grid
The only thing i do not see then is hoe to make the Light Brown circle
But nowcreaaly time to sleep
Now really time to sleep
Stupid text correction on a mobile phone
Then stop correcting the text correction and sleep, my dude :p
One per thing you have to place, don't mistake grid areas and grid cells
Lookup conic gradient backgrounds
But the gradient might just be a drop shadow on the image
ya I should have shared this view but I didn't want to get it twisted lol
I wish edge did line labels better but I typically have those on too and it gets a bit wild xD
Man this is not easy 😂
Did you psuedo element the circle?
here's my attempt
(I was too lazy to include the stars and brand, this already took me like 45 min lmao)
Good design takes time :p
definitely a bit off
Beck's or b1s are probably written way better but i can give codepen too if you get stuck or want a reference @roelof
Does yours have a dropshadow, vince?
On the image
Ye!
That already makes it better than mine lol
I think theirs has a really slight box shadow
xD
Slight box shadows disappear for me. Bad contrast for my eyes
I never would have thought about that actually that's really good to know
see also ☝️
I'm partially colourblind so I have a problem seeing poor contrast
Yea especially with the gradient they have on the white circle too, makes the whole contrast of the card just way worse
I actually thought the markup was really tough too
I don't think my markup is the best, I included eveything in an article > figure then added a blockquote inside the figure & then added a figcaption with a cite for the person
I don't think that's the best solution at all but one I came up with lol
the css for this is really bad but im done tinkering with it
sorry hijacked the post but it was too challenging not to try it lol
It's a good nerd snipe
If it's possible I would see b1 and vince pen 🙂
Definitely could have been written better both the html and css so take with a grain of salt
https://codepen.io/vince1444/pen/wBBKKOv
Thanks, time to study it
I was playing at making it a bit more responsive but didn't finish.
Both thanks
so this is a more hard one to make responsive as I thought
Max width 420px? 😂 fitting
Not really I just couldn't think last night when I was doing it
You definitely did some more advanced stuff than me I need to learn more grid stuffs
Oh I messed up my gradient too 😂
Lol I just used a gradient generator and played with the number til it gave me something I wanted I suck at gradients
Coding when tired 😂
Only thing I see (on mobile) is I just defined the templates to control the sizing of tracks.
This plays into how it squishes too
Mmmm editor is not letting me type on phone wtf 😒 ah well I should get back to fam