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

Pav
February 18, 2023
232 views
0 votes
2 Answers

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.

Tags: css html

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.