How can I make this design from Figma in HTML/CSS? - html

Question

Ia m trying to make this card design from Figma and code it in HTMl/CSS but I am having a bit of issues.
h
Here is an image of the design itself
And here is what I have currently made looks like: (note: I had to zoom out of page because it wouldn't be visible otherwise)
Here is the HTML code for it:
<div class="cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="right-cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</div>
</div>
And here is the CSS code for it:
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: white;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2 {
font-size: 25px;
font-weight: bold;
text-align: center;
background: #f6df6f;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
/* Add the same box-shadow as the parent container */
}
.box1_3 h1 {
font-size: 72px;
margin-top: -10px;
}
.box1_2 p {
font-size: 18px;
}
.cards-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.right-cards-container {
display: flex;
flex-direction: row;
gap: 50px;
align-items: flex-end;
align-self: flex-end;
}
.right-cards-container .box1_1 {
width: 205px;
height: 215px;
}
I would appreciate it if someone can help me please.
Thanks.
I tried to a main container for all the cards and a seperate container for right cards and left cards. But I don't know how to format it properly to be responsive too.

Answer 1

If i were you i would use bootstrap (or another css framework) but if you need to use plan html/css then you could do something like this:
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: white;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2 {
font-size: 25px;
font-weight: bold;
text-align: center;
background: #f6df6f;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
/* Add the same box-shadow as the parent container */
}
.box1_3 h1 {
font-size: 72px;
margin-top: -10px;
}
.box1_2 p {
font-size: 18px;
}
.cards-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.right-cards-container {
display: flex;
flex-direction: row;
gap: 50px;
align-items: flex-end;
align-self: flex-end;
}
.right-cards-container .box1_1 {
width: 205px;
height: 215px;
}
<table class="cards-container">
<tr>
<th>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</th>
<th>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</th>
<th>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</th>
</tr>
<
Edit: Here is how i would do it using bootstrap
*{
padding:0;
margin:0;
}
.box{
height:200px;
width: 200px;
border-radius: 40px;
justify-items: center;
box-shadow: 0px 0px 20px #b8b8b842;
}
.box_header{
height: 60%;
text-align: center;
}
.box_description{
text-align: center;
height: 40%;
width: 100%;
background-color: #f6df6f;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="box">
<div class="box_header">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box_description">
<p>On 56 Points</p>
</div>
</div>
<div class="box">
<div class="box_header">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box_description">
<p>On 56 Points</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box" >
<div class="box_header">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box_description">
<p>On 56 Points</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box" >
<div class="box_header">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box_description">
<p>On 56 Points</p>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 2

CSS Grid can do this quite easily.
In reality, the layout is accomplished in just a few lines of code in the media query in the example below. For all screens up to 50em, the .grid container is set to just auto-flow its children in a column. After the breakpoint is reached, I created a grid-template that allows you to place the first, second, third and fourth place cards into specific areas using a simple name (e.g., .first { grid-area: first; }).
* {
/* reset */
box-sizing: border-box;
font-weight: 400;
margin: 0;
}
:root {
/* default size of the cards */
--size: 15rem;
}
body {
/*
grid makes it easy to center
the entire main vertically
*/
display: grid;
/* default inheritable font values */
font-family: sans-serif;
line-height: 1;
/* make height at least the size of the viewport*/
min-height: 100vh;
}
.grid {
/* the main grid */
display: grid;
gap: 2rem;
/* all children flow into a column by default */
grid-auto-flow: columns;
justify-items: center;
/*
center the grid on the page horizontally
give the grid top and bottom margin of 2rem
*/
margin: 2rem auto;
}
.card {
/* card base styles */
aspect-ratio: 1;
align-self: center;
background-color: white;
border-radius: 20%;
box-shadow: 0 0 2rem hsl(0 0% 0% / .25);
display: grid;
grid-template-rows: 2fr 4fr 3fr;
height: var(--size);
overflow: hidden;
text-align: center;
}
.card h2 {
align-self: end;
font-size: 1.5rem;
text-transform: uppercase;
}
.card h3 {
align-self: center;
font-size: 5rem;
font-weight: 700;
}
.card h4 {
align-self: center;
font-size: 1.25rem;
}
.card p {
align-self: center;
font-size: .95rem;
margin-top: .75rem;
}
.card footer {
padding: 1rem 1rem .5rem;
background-color: var(--color);
}
/* give each card its own background-color */
.first {
--color: yellow;
}
.second {
--color: lime;
}
.third {
--color: dodgerblue;
}
.fourth {
--color: orangered;
}
#media screen and (min-width: 50em) {
.grid {
/* create the named grid areas */
grid-template-areas:
"first first blank-a blank-a"
"first first third fourth"
"second second third fourth"
"second second blank-b blank-b";
width: max-content;
}
.first {
/* enlarge this card */
--size: 18rem;
/* adjust the card placement in the grid area */
justify-self: end;
align-self: end;
/* place the card in the grid area */
grid-area: first;
}
.second {
/* enlarge this card */
--size: 18rem;
/* adjust the card placement in the grid area */
justify-self: end;
align-self: start;
/* place the card in the grid area */
grid-area: second;
}
.third {
/* place the card in the grid area */
grid-area: third;
}
.fourth {
/* place the card in the grid area */
grid-area: fourth;
}
/*
update the card font-sizes for
the first and second cards
*/
.card:where(.first, .second) h2 {
font-size: 2rem;
}
.card:where(.first, .second) h3 {
font-size: 6rem;
}
.card:where(.first, .second) h4 {
font-size: 1.5rem;
}
.card:where(.first, .second) p {
font-size: 1.1rem;
}
}
<main class="grid">
<div class="card first">
<h2>Carey</h2>
<h3>1</h3>
<footer>
<h4>On 56 Points</h4>
</footer>
</div>
<div class="card second">
<h2>Stanway</h2>
<h3>2</h3>
<footer>
<h4>On 40 Points</h4>
<p>16 points behind Carey</p>
</footer>
</div>
<div class="card third">
<h2>Judson</h2>
<h3>3</h3>
<footer>
<h4>On 36 Points</h4>
<p>4 points behind Stanway</p>
</footer>
</div>
<div class="card fourth">
<h2>Taylor</h2>
<h3>4</h3>
<footer>
<h4>On 10 Points</h4>
<p>26 points behind Judson</p>
</footer>
</div>
</main>