Kevin Powell - Community•11h ago

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

36 Replies

b1mind•11h ago

:yes:

roelofOP•11h ago

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

b1mind•11h ago

just layer with grid then you can have better* options for mobile

roelofOP•11h ago

Why use grid ? I think flex can do easily the job

b1mind•11h ago

I think grid is 100% better for this you can't layer with flex for one 🥲

roelofOP•11h ago

I think you can layer. For FEM challenges I make a layer for the background and one for a image

b1mind•11h ago

I'm sure then you used pos absolute not flex don't fear the grid

roelofOP•11h ago

I do not fear grid at all Thanks for the help

b1mind•10h ago

just a quick mock to mental around how I might do it but ya I'm reaching for grid.

roelofOP•10h ago

oke, I still do not see how grid can help me here I do not find it a block layout

b1mind•10h ago

idk what that means sorry I think of display: block when you say that 🥲

roelofOP•10h ago

oke

b1mind•10h ago

This is grid

13eck•9h ago

Here's a really hacky way of doing it: https://codepen.io/13eck/pen/dPPYPOr Sorry, b1, no grid >_<

b1mind•9h ago

Seriously no reason to use flex even in your example

13eck•9h ago

😒

13eck•9h ago

Grid throws in more space between the elements Then again:

.card {
  border-radius: 100%;
  font-size: 0.875em;
  max-width: 40ch;
  aspect-ratio: 1;
  padding-inline: 1em;
  padding-block: 0.5em;
  background-color: tan;
}

.card > * {
  margin-inline: 2em;
}

.card > * + * {
  margin-block-start: 1em;
}

.card {
  border-radius: 100%;
  font-size: 0.875em;
  max-width: 40ch;
  aspect-ratio: 1;
  padding-inline: 1em;
  padding-block: 0.5em;
  background-color: tan;
}

.card > * {
  margin-inline: 2em;
}

.card > * + * {
  margin-block-start: 1em;
}

No flex or grid needed :p

b1mind•9h ago

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:

13eck•8h ago

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

b1mind•8h ago

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

13eck•8h ago

Honestly didn't even see the brand tag. Bad contrast

b1mind•8h ago

You can see clear aligment based on these things too

13eck•8h ago

You know my eyes are bad >_>

b1mind•8h ago

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...

b1mind•8h ago

this is how my mind sees it

b1mind•8h ago

ultimate control too xD

roelofOP•8h ago

Thanks now i see why you want to use grid

b1mind•8h ago

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)

13eck•8h ago

That's a lot of grid areas! O_O

roelofOP•8h ago

Of course

b1mind•8h ago

named too 😉 so ez pz

roelofOP•8h ago

Yep im thinking now also about grid areas

13eck•8h ago

Ok, so now I really wanna see that pen So many things to learn about Grid

roelofOP•8h ago

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

13eck•8h ago

Then stop correcting the text correction and sleep, my dude :p

Gaming

Programming

Can this be easily the made with html and css

Did you find this page helpful?