Search code examples
htmlcssflexbox

Alignment of text and images in a single column

I am trying to implement a shape similar to this picture with flex, but all the elements are not aligned and with the same distance as the picture, I don't know if my implementation was wrong as a whole or I just made a part of it wrong. How can I fix this problem? I used a 12-column system and defined this card inside a column, so everything should be vertically side by side with proper spacing.

enter image description here

:root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 50%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.card--frameless {
  justify-content: space-around;
  align-items: center;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  transform: rotate(-90deg);
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  padding: 10px 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}
 <div class="card card--frameless h-full">
            <div class="card__content h-1/2">
              <h1>Recipes</h1>
            </div>
            <div class="shapes h-1/2">
              <p>01</p>

              <div class="ellipses">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="line">
              </div>
            </div>
          </div>

Solution 

  • :root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

* {
  margin: 0;
  padding: 0;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 100%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.card--frameless {
  justify-content: space-around;
  align-items: center;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 8rem;
}

.card__content {
  transform: rotate(-90deg);
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
  margin: 0;
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  padding: 10px 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}
    <div class="card card--frameless h-full">
            <div class="card__content h-1/2">
              <h1>Recipes</h1>
            </div>
            <div class="shapes h-1/2">
              <p>01</p>

              <div class="ellipses">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="line">
              </div>
            </div>
          </div>