Question 45341 in Html Question posted in
Some basic documentation can be found here.

I am trying to make 4 stylised cards in html with different positions that display info but they are not formatting correctly

I’m trying to make this in HTML/CSS

Image design in Figma of what I am trying to make

And currently It looks like this
Current way it looks

I am not sure why it is formatting like that and to clarify I haven’t made the other 2 cards yet because I was trying to get the first 2 right.

Here is the HTMl code for it (don’t mind the class names please)

         <div class="v10_8">
            <div class="v10_9"></div>
            <div class="v10_15">
               <div class="v10_14"><span class="v10_10">CAREY</span><span class="v10_11">1</span></div>
               <span class="v10_12">On 56 Points</span>
            </div>
         </div>
         <div class="v10_16">
            <div class="v10_17"></div>
            <div class="v10_18">
               <div class="v10_19"><span class="v10_20">STANWAY</span><span class="v10_21">2</span></div>
               <div class="v10_40"><span class="v10_22">On 40 Points</span><span class="v10_39">16 points behind Carey</span></div>
            </div>
         </div>
      </div>

And here is the CSS code for it:

  width: 262px;
  height: 617px;
  background: url("../images/v10_23.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 65px;
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v10_8 {
  width: 262px;
  height: 276px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  border-bottom-left-radius: 44px;
  border-bottom-right-radius: 44px;
  box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
  overflow: hidden;
}
.v10_9 {
  width: 267px;
  height: 96px;
  background: rgba(248,228,125,1);
  opacity: 1;
  position: absolute;
  top: 180px;
  left: 0px;
  overflow: hidden;
}
.v10_15 {
  width: 135px;
  height: 210px;
  background: url("../images/v10_15.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 44px;
  opacity: 1;
  position: absolute;
  top: 29px;
  left: 65px;
  overflow: hidden;
}
.v10_14 {
  width: 94px;
  height: 138px;
  background: url("../images/v10_14.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 17px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 21px;
  overflow: hidden;
}
.v10_10 {
  width: 94px;
  color: rgba(21,21,21,1);
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 29px;
  opacity: 1;
  text-align: left;
}
.v10_11 {
  width: 30px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 52px;
  left: 32px;
  font-family: Folito;
  font-weight: Bold;
  font-size: 71px;
  opacity: 1;
  text-align: left;
}
.v10_12 {
  width: 135px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 183px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 22px;
  opacity: 1;
  text-align: left;
}
.v10_16 {
  width: 262px;
  height: 276px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 341px;
  left: 1px;
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  border-bottom-left-radius: 44px;
  border-bottom-right-radius: 44px;
  box-shadow: -10.746728897094727px 9.849809646606445px 60px rgba(0, 0, 0, 0.09000000357627869);
  overflow: hidden;
}
.v10_17 {
  width: 267px;
  height: 96px;
  background: rgba(119,221,119,1);
  opacity: 1;
  position: absolute;
  top: 180px;
  left: 0px;
  overflow: hidden;
}
.v10_18 {
  width: 167px;
  height: 241px;
  background: url("../images/v10_18.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 44px;
  opacity: 1;
  position: absolute;
  top: 16px;
  left: 50px;
  overflow: hidden;
}
.v10_19 {
  width: 135px;
  height: 138px;
  background: url("../images/v10_19.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 17px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 16px;
  overflow: hidden;
}
.v10_20 {
  width: 135px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 29px;
  opacity: 1;
  text-align: left;
}
.v10_21 {
  width: 42px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 52px;
  left: 46px;
  font-family: Folito;
  font-weight: Bold;
  font-size: 71px;
  opacity: 1;
  text-align: left;
}
.v10_40 {
  width: 167px;
  height: 57px;
  background: url("../images/v10_40.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 11px;
  opacity: 1;
  position: absolute;
  top: 183px;
  left: 0px;
  overflow: hidden;
}
.v10_22 {
  width: 137px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 0px;
  left: 15px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 22px;
  opacity: 1;
  text-align: left;
}
.v10_39 {
  width: 167px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

I understand the design may look slightly hard to code but I will try.
I would appreciate it if someone can help me thanks.

Tags:

3

Answers


  1. 0

    There are two problems here. Firstly, the first CSS code you provided is incomplete.

    Secondly, as I looked through your code, I realized that you interchanged the positioning of the elements. You should use absolute position on the parent element and relative on the contents of the parent element.

    Login or Signup to reply.
  2. 0

    For this design, you must have a box that contains three columns and have two contents in the left column and the contents in the other columns are in the center.

    Login or Signup to reply.
  3. 0

    You can achieve this in minimum div this is example for your single card you can make further changes in 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: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 10;
}
.box1_2{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  background: yellow;
  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 */
}
    <div class="box1_1">
    <div class="box1_3">
        <p>CAREY</p>
    <p>1</p>
  </div>
  <div class="box1_2">
    <p>On 56 Points</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search